diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index c13c729b3..000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,10 +0,0 @@
-src/sdk.ts
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-/playwright-report
\ No newline at end of file
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index ba5903f67..000000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,43 +0,0 @@
-module.exports = {
-    root: true,
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:svelte/recommended',
-        'prettier'
-    ],
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        extraFileExtensions: ['.svelte'], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
-        sourceType: 'module',
-        ecmaVersion: 2020
-    },
-    ignorePatterns: ['*.cjs'],
-    overrides: [
-        {
-            files: ['*.svelte'],
-            parser: 'svelte-eslint-parser',
-            parserOptions: {
-                parser: '@typescript-eslint/parser' //This is required to parse TypeScript inside Svelte files.
-            }
-        }
-    ],
-    rules: {
-        'no-redeclare': 'off',
-        '@typescript-eslint/no-duplicate-enum-values': 'off',
-        'svelte/no-at-html-tags': 'off',
-        'no-unused-vars': 'off', // This rule is handled by `@typescript-eslint/no-unused-vars` so it needs to be disabled to avoid conflicts.
-        '@typescript-eslint/no-unused-vars': [
-            'error',
-            { argsIgnorePattern: '^_', varsIgnorePattern: '^(_|\\$\\$)' } // Ignore unused variables starting with `_` or `$$`.
-        ]
-    },
-    env: {
-        browser: true,
-        es2017: true,
-        node: true
-    },
-    globals: {
-        globalThis: false // false means it is not writeable
-    }
-};
diff --git a/.gitignore b/.gitignore
index 2f74d4c15..acc78571f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,6 @@ dist/
 *.swp
 ### Node ###
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8fcb73389..3d78e77a4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -108,9 +108,9 @@ pnpm run lint
 
 Diagnostic tool that checks for the following:
 
--   Unused CSS
--   Svelte A11y hints
--   TypeScript compiler errors
+- Unused CSS
+- Svelte A11y hints
+- TypeScript compiler errors
 
 ```bash
 pnpm run check
@@ -130,11 +130,11 @@ doc-548-submit-a-pull-request-section-to-contribution-guide
 
 When `TYPE` can be:
 
--   **feat** - is a new feature
--   **doc** - documentation only changes
--   **cicd** - changes related to CI/CD system
--   **fix** - a bug fix
--   **refactor** - code change that neither fixes a bug nor adds a feature
+- **feat** - is a new feature
+- **doc** - documentation only changes
+- **cicd** - changes related to CI/CD system
+- **fix** - a bug fix
+- **refactor** - code change that neither fixes a bug nor adds a feature
 
 **All PRs must include a commit message with a description of the changes made!**
 
@@ -175,12 +175,12 @@ $ git push origin [name_of_your_new_branch]
 
 Before committing always make sure to run all available tools to improve the codebase:
 
--   Formatter
-    -   `pnpm run format`
--   Tests
-    -   `pnpm test`
--   Diagnostics
-    -   `pnpm run check`
+- Formatter
+    - `pnpm run format`
+- Tests
+    - `pnpm test`
+- Diagnostics
+    - `pnpm run check`
 
 ### Performance
 
@@ -188,9 +188,9 @@ Page load times are a key consideration for users of all browsers and device typ
 
 There are some general things we can do in front-end development:
 
--   Minimize HTTP requests
--   Minimize blocking – content should be readable before client-side processing
--   Lazy load "supplementary" content, especially images
+- Minimize HTTP requests
+- Minimize blocking – content should be readable before client-side processing
+- Lazy load "supplementary" content, especially images
 
 ### Don't Repeat Yourself (DRY)
 
@@ -202,12 +202,12 @@ If you stick to this principle, you will ensure that you will only ever need to
 
 Separate _structure_ from _presentation_ from _behavior_ to aid maintainability and understanding.
 
--   Keep CSS (presentation), JS (behavior) and HTML (structure) in the same respective Svelte component
--   Avoid writing inline CSS or Javascript in HTML
--   Avoid writing CSS or HTML in Javascript
--   Don't choose HTML elements to imply style
--   Where appropriate, use CSS or Svelte rather than Javascript for animations and transitions
--   Try to use templates when defining markup in Javascript
+- Keep CSS (presentation), JS (behavior) and HTML (structure) in the same respective Svelte component
+- Avoid writing inline CSS or Javascript in HTML
+- Avoid writing CSS or HTML in Javascript
+- Don't choose HTML elements to imply style
+- Where appropriate, use CSS or Svelte rather than Javascript for animations and transitions
+- Try to use templates when defining markup in Javascript
 
 ### Write code to be read
 
diff --git a/Dockerfile b/Dockerfile
index 32fe52726..774fb6903 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -37,7 +37,7 @@ ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
 ENV SENTRY_RELEASE=$SENTRY_RELEASE
 ENV NODE_OPTIONS=--max_old_space_size=8192
 
-RUN pnpm run sync && pnpm run build
+RUN pnpm run build
 
 FROM nginx:1.26.3-alpine
 
diff --git a/README.md b/README.md
index e37369791..9e113f121 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,8 @@
 
 Appwrite Console has been built with the following frameworks:
 
--   [Svelte](https://svelte.dev/)
--   [Svelte Kit](https://kit.svelte.dev/)
+- [Svelte](https://svelte.dev/)
+- [Svelte Kit](https://kit.svelte.dev/)
 
 ## Developer Experience
 
diff --git a/tests/e2e/helpers/url.ts b/e2e/helpers/url.ts
similarity index 100%
rename from tests/e2e/helpers/url.ts
rename to e2e/helpers/url.ts
diff --git a/tests/e2e/journeys/onboarding-free.spec.ts b/e2e/journeys/onboarding-free.spec.ts
similarity index 100%
rename from tests/e2e/journeys/onboarding-free.spec.ts
rename to e2e/journeys/onboarding-free.spec.ts
diff --git a/tests/e2e/journeys/onboarding-pro.spec.ts b/e2e/journeys/onboarding-pro.spec.ts
similarity index 100%
rename from tests/e2e/journeys/onboarding-pro.spec.ts
rename to e2e/journeys/onboarding-pro.spec.ts
diff --git a/tests/e2e/journeys/upgrade-free-tier.spec.ts b/e2e/journeys/upgrade-free-tier.spec.ts
similarity index 100%
rename from tests/e2e/journeys/upgrade-free-tier.spec.ts
rename to e2e/journeys/upgrade-free-tier.spec.ts
diff --git a/tests/e2e/steps/account.ts b/e2e/steps/account.ts
similarity index 86%
rename from tests/e2e/steps/account.ts
rename to e2e/steps/account.ts
index a1eac5b57..5a74a736e 100644
--- a/tests/e2e/steps/account.ts
+++ b/e2e/steps/account.ts
@@ -10,7 +10,6 @@ export function registerUserStep(page: Page): Promise<Metadata> {
     return test.step('register user', async () => {
         const seed = crypto.randomUUID();
         await page.goto('./register');
-        // await page.getByRole('button', { name: 'only required' }).click();
         const inputs = {
             name: page.locator('id=name'),
             email: page.locator('id=email'),
@@ -25,9 +24,9 @@ export function registerUserStep(page: Page): Promise<Metadata> {
         await inputs.name.fill(values.name);
         await inputs.email.fill(values.email);
         await inputs.password.fill(values.password);
-        await inputs.terms.check();
+        await inputs.terms.check({ force: true });
         await page.getByRole('button', { name: 'Sign up', exact: true }).click();
-        await page.waitForURL('./onboarding');
+        await page.waitForURL('./onboarding/create-project');
 
         return values;
     });
diff --git a/tests/e2e/steps/free-project.ts b/e2e/steps/free-project.ts
similarity index 56%
rename from tests/e2e/steps/free-project.ts
rename to e2e/steps/free-project.ts
index 8f8c775ed..a8a3dadb9 100644
--- a/tests/e2e/steps/free-project.ts
+++ b/e2e/steps/free-project.ts
@@ -9,10 +9,6 @@ type Metadata = {
 export async function createFreeProject(page: Page): Promise<Metadata> {
     const organizationId = await test.step('create organization', async () => {
         await page.goto('./');
-        await page.waitForURL('./onboarding');
-        await page.locator('id=name').fill('test org');
-        await page.locator('id=plan').selectOption('tier-0');
-        await page.getByRole('button', { name: 'get started' }).click();
         await page.waitForURL(/\/organization-[^/]+/);
         return getOrganizationIdFromUrl(page.url());
     });
@@ -20,12 +16,11 @@ export async function createFreeProject(page: Page): Promise<Metadata> {
     const projectId = await test.step('create project', async () => {
         await page.waitForURL(/\/organization-[^/]+/);
         await page.getByRole('button', { name: 'create project' }).first().click();
-        await page.locator('id=name').fill('test project');
-        await page.getByRole('button', { name: 'next' }).click();
-        await page.locator('label').filter({ hasText: 'Frankfurt' }).click();
-        await page.getByRole('button', { name: 'create' }).click();
-        await page.waitForURL(/\/project-(?:[a-z0-9]+-)?([^/]+)\/overview\/platforms/);
-        expect(page.url()).toContain('/console/project-');
+        const dialog = page.locator('dialog[open]');
+        await dialog.getByPlaceholder('Project name').fill('test project');
+        await dialog.getByRole('button', { name: 'create' }).click();
+        await page.waitForURL(/\/project-fra-[^/]+/);
+        expect(page.url()).toContain('/console/project-fra-');
 
         return getProjectIdFromUrl(page.url());
     });
diff --git a/tests/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts
similarity index 75%
rename from tests/e2e/steps/pro-project.ts
rename to e2e/steps/pro-project.ts
index fa42b2299..fd4446362 100644
--- a/tests/e2e/steps/pro-project.ts
+++ b/e2e/steps/pro-project.ts
@@ -27,12 +27,10 @@ export async function enterCreditCard(page: Page) {
 
 export async function createProProject(page: Page): Promise<Metadata> {
     const organizationId = await test.step('create organization', async () => {
-        await page.goto('./');
-        await page.waitForURL('./onboarding');
+        await page.goto('./create-organization');
         await page.locator('id=name').fill('test org');
-        await page.locator('id=plan').selectOption('tier-1');
+        await page.getByLabel('pro').check();
         await page.getByRole('button', { name: 'get started' }).click();
-        await page.waitForURL(/\/create-organization.*/);
         await page.getByRole('button', { name: 'add' }).first().click();
         await enterCreditCard(page);
         // skip members
@@ -45,12 +43,11 @@ export async function createProProject(page: Page): Promise<Metadata> {
     const projectId = await test.step('create project', async () => {
         await page.waitForURL(/\/organization-[^/]+/);
         await page.getByRole('button', { name: 'create project' }).first().click();
-        await page.getByPlaceholder('project name').fill('test project');
-        await page.getByRole('button', { name: 'next' }).click();
-        await page.locator('label').filter({ hasText: 'frankfurt' }).click();
-        await page.getByRole('button', { name: 'create' }).click();
-        await page.waitForURL(/\/project-(?:[a-z0-9]+-)?([^/]+)\/overview\/platforms/);
-        expect(page.url()).toContain('/project-');
+        const dialog = page.locator('dialog[open]');
+        await dialog.getByPlaceholder('Project name').fill('test project');
+        await dialog.getByRole('button', { name: 'create' }).click();
+        await page.waitForURL(/\/project-fra-[^/]+/);
+        expect(page.url()).toContain('/console/project-fra-');
 
         return getProjectIdFromUrl(page.url());
     });
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 000000000..05ce3e85f
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,51 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+    includeIgnoreFile(gitignorePath),
+    js.configs.recommended,
+    ...ts.configs.recommended,
+    ...svelte.configs.recommended,
+    prettier,
+    ...svelte.configs.prettier,
+    {
+        languageOptions: {
+            globals: { ...globals.browser, ...globals.node }
+        },
+        rules: {
+            // TODO: remove them one by one
+            '@typescript-eslint/no-unused-vars': 'off',
+            '@typescript-eslint/no-duplicate-enum-values': 'off',
+            '@typescript-eslint/no-empty-object-type': 'off',
+            '@typescript-eslint/no-unused-expressions': 'off',
+            'svelte/infinite-reactive-loop': 'off',
+            'svelte/require-each-key': 'off',
+            'svelte/no-immutable-reactive-statements': 'off',
+            'svelte/no-at-html-tags': 'off',
+            'svelte/no-useless-mustaches': 'off',
+            'svelte/no-reactive-reassign': 'off',
+            'svelte/no-reactive-literals': 'off'
+        }
+    },
+    {
+        files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+        ignores: ['eslint.config.js', 'svelte.config.js'],
+        languageOptions: {
+            parserOptions: {
+                // Only uncomment this if you want it to take 3 minutes https://github.com/sveltejs/eslint-plugin-svelte/issues/1084
+                // projectService: true,
+                extraFileExtensions: ['.svelte'],
+                parser: ts.parser,
+                svelteConfig
+            }
+        }
+    }
+);
diff --git a/package.json b/package.json
index 1e8b40125..c573c9e8c 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
     "name": "@appwrite/console",
+    "type": "module",
     "engines": {
         "node": ">=20"
     },
@@ -7,74 +8,90 @@
         "dev": "vite dev",
         "build": "node build.js",
         "preview": "vite preview",
-        "sync": "svelte-kit sync",
-        "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
+        "prepare": "svelte-kit sync || echo ''",
+        "clean": "rm -rf node_modules && rm -rf .svelte_kit && pnpm i --force",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
         "format": "prettier --write .",
+        "lint": "prettier --check . && eslint .",
         "test": "TZ=EST vitest run",
         "test:ui": "TZ=EST vitest --ui",
         "test:watch": "TZ=EST vitest watch",
-        "e2e": "playwright test tests/e2e",
-        "e2e:ui": "playwright test tests/e2e --ui"
+        "e2e": "playwright test",
+        "e2e:ui": "playwright test --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c985738",
+        "@ai-sdk/svelte": "^1.1.24",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d68e5e4",
+        "@appwrite.io/pink-legacy": "^1.0.3",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b7fa532",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
-        "@ai-sdk/svelte": "^1.1.24",
-        "analytics": "^0.8.14",
+        "ai": "^2.2.37",
+        "analytics": "^0.8.16",
         "cron-parser": "^4.9.0",
         "dayjs": "^1.11.13",
         "deep-equal": "^2.2.3",
-        "echarts": "^5.5.1",
-        "envfile": "^7.1.0",
-        "nanoid": "^5.0.8",
+        "echarts": "^5.6.0",
+        "ignore": "^6.0.2",
+        "nanoid": "^5.1.5",
+        "nanotar": "^0.1.1",
         "plausible-tracker": "^0.3.9",
         "pretty-bytes": "^6.1.1",
-        "prismjs": "^1.29.0",
+        "prismjs": "^1.30.0",
         "remarkable": "^2.0.1",
         "svelte-confetti": "^1.4.0",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
+        "@eslint/compat": "^1.2.7",
+        "@eslint/js": "^9.24.0",
         "@melt-ui/pp": "^0.3.2",
-        "@melt-ui/svelte": "^0.83.0",
-        "@playwright/test": "^1.49.0",
-        "@sveltejs/adapter-static": "^3.0.6",
-        "@sveltejs/kit": "^2.8.1",
-        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@melt-ui/svelte": "^0.86.5",
+        "@playwright/test": "^1.51.1",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/kit": "^2.20.2",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.4",
-        "@testing-library/user-event": "^14.5.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/deep-equal": "^1.0.4",
         "@types/prismjs": "^1.26.5",
         "@types/remarkable": "^2.0.8",
-        "@typescript-eslint/eslint-plugin": "^7.18.0",
-        "@typescript-eslint/parser": "^7.18.0",
-        "@vitest/ui": "^1.6.0",
-        "eslint": "^8.57.1",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-svelte": "^2.46.0",
-        "jsdom": "^22.1.0",
+        "@typescript-eslint/eslint-plugin": "^8.28.0",
+        "@typescript-eslint/parser": "^8.28.0",
+        "@vitest/ui": "^3.0.9",
+        "eslint": "^9.23.0",
+        "eslint-config-prettier": "^10.1.0",
+        "eslint-plugin-svelte": "^3.3.3",
+        "globals": "^16.0.0",
+        "jsdom": "^26.0.0",
         "kleur": "^4.1.5",
-        "prettier": "^3.3.3",
-        "prettier-plugin-svelte": "^3.2.8",
-        "sass": "^1.81.0",
-        "svelte": "^4.2.19",
-        "svelte-check": "^3.8.6",
-        "svelte-jester": "^2.3.2",
+        "prettier": "^3.5.3",
+        "prettier-plugin-svelte": "^3.3.3",
+        "sass": "^1.86.0",
+        "svelte": "^5.25.3",
+        "svelte-check": "^4.1.5",
         "svelte-preprocess": "^6.0.3",
         "svelte-sequential-preprocessor": "^2.0.2",
         "tslib": "^2.8.1",
-        "typescript": "^5.6.3",
-        "vite": "^5.4.11",
-        "vitest": "^1.6.1"
+        "typescript": "^5.8.2",
+        "typescript-eslint": "^8.30.1",
+        "vite": "^6.2.3",
+        "vitest": "^3.0.0"
     },
-    "type": "module",
-    "packageManager": "pnpm@9.7.0+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "@sentry/cli",
+            "esbuild",
+            "svelte-preprocess"
+        ]
+    },
+    "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }
diff --git a/playwright.config.ts b/playwright.config.ts
index eec9d977c..fbd977757 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,6 +5,7 @@ const config: PlaywrightTestConfig = {
     reportSlowTests: null,
     reporter: [['html', { open: 'never' }]],
     retries: 3,
+    testDir: 'e2e',
     use: {
         baseURL: 'http://localhost:4173/console/',
         trace: 'on-first-retry'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b4a5e8cc8..4406f34e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,28 +10,40 @@ importers:
     dependencies:
       '@ai-sdk/svelte':
         specifier: ^1.1.24
-        version: 1.1.24(svelte@4.2.19)(zod@3.24.2)
+        version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c985738
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c985738
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959
       '@appwrite.io/pink':
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
+      '@appwrite.io/pink-icons-svelte':
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d68e5e4
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d68e5e4(svelte@5.25.3)
+      '@appwrite.io/pink-legacy':
+        specifier: ^1.0.3
+        version: 1.0.3
+      '@appwrite.io/pink-svelte':
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b7fa532
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b7fa532(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
       '@sentry/sveltekit':
         specifier: ^8.38.0
-        version: 8.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.27.0)(@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+        version: 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
       '@stripe/stripe-js':
         specifier: ^3.5.0
         version: 3.5.0
+      ai:
+        specifier: ^2.2.37
+        version: 2.2.37(react@18.3.1)(solid-js@1.9.5)(svelte@5.25.3)(vue@3.5.13(typescript@5.8.2))
       analytics:
-        specifier: ^0.8.14
-        version: 0.8.14(@types/dlv@1.1.4)
+        specifier: ^0.8.16
+        version: 0.8.16(@types/dlv@1.1.5)
       cron-parser:
         specifier: ^4.9.0
         version: 4.9.0
@@ -42,14 +54,17 @@ importers:
         specifier: ^2.2.3
         version: 2.2.3
       echarts:
-        specifier: ^5.5.1
-        version: 5.5.1
-      envfile:
-        specifier: ^7.1.0
-        version: 7.1.0
+        specifier: ^5.6.0
+        version: 5.6.0
+      ignore:
+        specifier: ^6.0.2
+        version: 6.0.2
       nanoid:
-        specifier: ^5.0.8
-        version: 5.0.8
+        specifier: ^5.1.5
+        version: 5.1.5
+      nanotar:
+        specifier: ^0.1.1
+        version: 0.1.1
       plausible-tracker:
         specifier: ^0.3.9
         version: 0.3.9
@@ -57,36 +72,42 @@ importers:
         specifier: ^6.1.1
         version: 6.1.1
       prismjs:
-        specifier: ^1.29.0
-        version: 1.29.0
+        specifier: ^1.30.0
+        version: 1.30.0
       remarkable:
         specifier: ^2.0.1
         version: 2.0.1
       svelte-confetti:
         specifier: ^1.4.0
-        version: 1.4.0(svelte@4.2.19)
+        version: 1.4.0(svelte@5.25.3)
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
     devDependencies:
+      '@eslint/compat':
+        specifier: ^1.2.7
+        version: 1.2.7(eslint@9.23.0)
+      '@eslint/js':
+        specifier: ^9.24.0
+        version: 9.24.0
       '@melt-ui/pp':
         specifier: ^0.3.2
-        version: 0.3.2(@melt-ui/svelte@0.83.0(svelte@4.2.19))(svelte@4.2.19)
+        version: 0.3.2(@melt-ui/svelte@0.86.5(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte':
-        specifier: ^0.83.0
-        version: 0.83.0(svelte@4.2.19)
+        specifier: ^0.86.5
+        version: 0.86.5(svelte@5.25.3)
       '@playwright/test':
-        specifier: ^1.49.0
-        version: 1.49.0
+        specifier: ^1.51.1
+        version: 1.51.1
       '@sveltejs/adapter-static':
-        specifier: ^3.0.6
-        version: 3.0.6(@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))
+        specifier: ^3.0.8
+        version: 3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))
       '@sveltejs/kit':
-        specifier: ^2.8.1
-        version: 2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+        specifier: ^2.20.2
+        version: 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+        specifier: ^5.0.3
+        version: 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.0
@@ -95,10 +116,10 @@ importers:
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.4
-        version: 5.2.4(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))(vitest@1.6.1(@types/node@22.9.0)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.81.0))
+        version: 5.2.7(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)
       '@testing-library/user-event':
-        specifier: ^14.5.2
-        version: 14.5.2(@testing-library/dom@10.4.0)
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.0)
       '@types/deep-equal':
         specifier: ^1.0.4
         version: 1.0.4
@@ -109,50 +130,50 @@ importers:
         specifier: ^2.0.8
         version: 2.0.8
       '@typescript-eslint/eslint-plugin':
-        specifier: ^7.18.0
-        version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
+        specifier: ^8.28.0
+        version: 8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)
       '@typescript-eslint/parser':
-        specifier: ^7.18.0
-        version: 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+        specifier: ^8.28.0
+        version: 8.28.0(eslint@9.23.0)(typescript@5.8.2)
       '@vitest/ui':
-        specifier: ^1.6.0
-        version: 1.6.0(vitest@1.6.1)
+        specifier: ^3.0.9
+        version: 3.0.9(vitest@3.0.9)
       eslint:
-        specifier: ^8.57.1
-        version: 8.57.1
+        specifier: ^9.23.0
+        version: 9.23.0
       eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.0(eslint@8.57.1)
+        specifier: ^10.1.0
+        version: 10.1.1(eslint@9.23.0)
       eslint-plugin-svelte:
-        specifier: ^2.46.0
-        version: 2.46.0(eslint@8.57.1)(svelte@4.2.19)
+        specifier: ^3.3.3
+        version: 3.3.3(eslint@9.23.0)(svelte@5.25.3)
+      globals:
+        specifier: ^16.0.0
+        version: 16.0.0
       jsdom:
-        specifier: ^22.1.0
-        version: 22.1.0
+        specifier: ^26.0.0
+        version: 26.0.0
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
       prettier:
-        specifier: ^3.3.3
-        version: 3.3.3
+        specifier: ^3.5.3
+        version: 3.5.3
       prettier-plugin-svelte:
-        specifier: ^3.2.8
-        version: 3.2.8(prettier@3.3.3)(svelte@4.2.19)
+        specifier: ^3.3.3
+        version: 3.3.3(prettier@3.5.3)(svelte@5.25.3)
       sass:
-        specifier: ^1.81.0
-        version: 1.81.0
+        specifier: ^1.86.0
+        version: 1.86.0
       svelte:
-        specifier: ^4.2.19
-        version: 4.2.19
+        specifier: ^5.25.3
+        version: 5.25.3
       svelte-check:
-        specifier: ^3.8.6
-        version: 3.8.6(@babel/core@7.26.0)(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(svelte@4.2.19)
-      svelte-jester:
-        specifier: ^2.3.2
-        version: 2.3.2(jest@29.7.0(@types/node@22.9.0))(svelte@4.2.19)
+        specifier: ^4.1.5
+        version: 4.1.5(picomatch@4.0.2)(svelte@5.25.3)(typescript@5.8.2)
       svelte-preprocess:
         specifier: ^6.0.3
-        version: 6.0.3(@babel/core@7.26.0)(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(svelte@4.2.19)(typescript@5.6.3)
+        version: 6.0.3(@babel/core@7.26.10)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.0)(svelte@5.25.3)(typescript@5.8.2)
       svelte-sequential-preprocessor:
         specifier: ^2.0.2
         version: 2.0.2
@@ -160,19 +181,22 @@ importers:
         specifier: ^2.8.1
         version: 2.8.1
       typescript:
-        specifier: ^5.6.3
-        version: 5.6.3
+        specifier: ^5.8.2
+        version: 5.8.2
+      typescript-eslint:
+        specifier: ^8.30.1
+        version: 8.30.1(eslint@9.23.0)(typescript@5.8.2)
       vite:
-        specifier: ^5.4.11
-        version: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
+        specifier: ^6.2.3
+        version: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
       vitest:
-        specifier: ^1.6.1
-        version: 1.6.1(@types/node@22.9.0)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.81.0)
+        specifier: ^3.0.0
+        version: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0)
 
 packages:
 
-  '@adobe/css-tools@4.4.1':
-    resolution: {integrity: sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==}
+  '@adobe/css-tools@4.4.2':
+    resolution: {integrity: sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==}
 
   '@ai-sdk/provider-utils@2.1.13':
     resolution: {integrity: sha512-kLjqsfOdONr6DGcGEntFYM1niXz1H05vyZNf9OAzK+KKKc64izyP4/q/9HX7W4+6g8hm6BnmKxu8vkr6FSOqDg==}
@@ -212,8 +236,8 @@ packages:
   '@analytics/cookie-utils@0.2.12':
     resolution: {integrity: sha512-2h/yuIu3kmu+ZJlKmlT6GoRvUEY2k1BbQBezEv5kGhnn9KpmzPz715Y3GmM2i+m7Y0QmBdVUoA260dQZkofs2A==}
 
-  '@analytics/core@0.12.15':
-    resolution: {integrity: sha512-Y+zxTNIbONXKxeEUOtcXs4b3uuiGjF5sy1zHl8ZNkIBwrOpTM8ZGNhi0xGL8ZhaQLGbi03BrT6DaoNNG3sBQOg==}
+  '@analytics/core@0.12.17':
+    resolution: {integrity: sha512-GMxRm5Dp3Wam/w5NNvqNKMO6zWecozbVv21Kn4WhftCx6OjJI7zMlVtiLpjGjxa0RRZfVG80YhupF0Qh9XL2gw==}
 
   '@analytics/global-storage-utils@0.1.7':
     resolution: {integrity: sha512-V+spzGLZYm4biZT4uefaylm80SrLXf8WOTv9hCgA46cLcyxx3LD4GCpssp1lj+RcWLl/uXJQBRO4Mnn/o1x6Gw==}
@@ -230,34 +254,62 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c985738':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c985738}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959}
     version: 1.5.2
 
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b7fa5323affb6e06db42dfda8ceb217fd382a267':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b7fa5323affb6e06db42dfda8ceb217fd382a267}
+    version: 1.0.0-next.7
+    peerDependencies:
+      svelte: ^4.0.0
+
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d68e5e4':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d68e5e4}
+    version: 1.0.0-next.7
+    peerDependencies:
+      svelte: ^4.0.0
+
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
+  '@appwrite.io/pink-icons@1.0.0':
+    resolution: {integrity: sha512-+zpksP07MvOYwhx9AZDFW0pxXQNC2juKwyOQVRAwAOkN1ACSQKPlyytkI1u2ci6CQPWjJe20CzbvBBuRNXOKjA==}
+
+  '@appwrite.io/pink-legacy@1.0.3':
+    resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
+
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b7fa532':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b7fa532}
+    version: 1.0.0-next.85
+    peerDependencies:
+      react-dom: ^18.0.0
+      svelte: ^4.0.0
+
   '@appwrite.io/pink@0.25.0':
     resolution: {integrity: sha512-9z4G/iAhjvVpM7tkNqzGqrokst4hvNt3Fkf2jD4W6n8j//EJbQ3mJ0I+5dye5Sry0a33wUanq5DSztqFNYq5zw==}
 
+  '@asamuzakjp/css-color@3.1.1':
+    resolution: {integrity: sha512-hpRD68SV2OMcZCsrbdkccTw5FXjNDLo5OuqSHyHZfwweGsDWZwDJ2+gONyNAbazZclobMirACLw0lk8WVxIqxA==}
+
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.26.2':
-    resolution: {integrity: sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==}
+  '@babel/compat-data@7.26.8':
+    resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.26.0':
-    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
+  '@babel/core@7.26.10':
+    resolution: {integrity: sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.26.2':
-    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
+  '@babel/generator@7.27.0':
+    resolution: {integrity: sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.25.9':
-    resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==}
+  '@babel/helper-compilation-targets@7.27.0':
+    resolution: {integrity: sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-imports@7.25.9':
@@ -270,10 +322,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-plugin-utils@7.25.9':
-    resolution: {integrity: sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.25.9':
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
@@ -286,265 +334,211 @@ packages:
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.26.0':
-    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
+  '@babel/helpers@7.27.0':
+    resolution: {integrity: sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.26.2':
-    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+  '@babel/parser@7.27.0':
+    resolution: {integrity: sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-syntax-async-generators@7.8.4':
-    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-bigint@7.8.3':
-    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-class-properties@7.12.13':
-    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-class-static-block@7.14.5':
-    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-import-attributes@7.26.0':
-    resolution: {integrity: sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-import-meta@7.10.4':
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-json-strings@7.8.3':
-    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-jsx@7.25.9':
-    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
-    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3':
-    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-numeric-separator@7.10.4':
-    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-object-rest-spread@7.8.3':
-    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3':
-    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-optional-chaining@7.8.3':
-    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-private-property-in-object@7.14.5':
-    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-top-level-await@7.14.5':
-    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-typescript@7.25.9':
-    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/runtime@7.26.0':
-    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+  '@babel/runtime@7.27.0':
+    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.9':
-    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
+  '@babel/template@7.27.0':
+    resolution: {integrity: sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.9':
-    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
+  '@babel/traverse@7.27.0':
+    resolution: {integrity: sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.26.0':
-    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+  '@babel/types@7.27.0':
+    resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
     engines: {node: '>=6.9.0'}
 
-  '@bcoe/v8-coverage@0.2.3':
-    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+  '@csstools/color-helpers@5.0.2':
+    resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==}
+    engines: {node: '>=18'}
 
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
+  '@csstools/css-calc@2.1.2':
+    resolution: {integrity: sha512-TklMyb3uBB28b5uQdxjReG4L80NxAqgrECqLZFQbyLekwwlcDDS8r3f07DKqeo8C4926Br0gf/ZDe17Zv4wIuw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
+
+  '@csstools/css-color-parser@3.0.8':
+    resolution: {integrity: sha512-pdwotQjCCnRPuNi06jFuP68cykU1f3ZWExLe/8MQ1LOs8Xq+fTkYgd+2V8mWUWMrOn9iS2HftPVaMZDaXzGbhQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
+
+  '@csstools/css-parser-algorithms@3.0.4':
+    resolution: {integrity: sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.3
+
+  '@csstools/css-tokenizer@3.0.3':
+    resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
+    engines: {node: '>=18'}
+
+  '@esbuild/aix-ppc64@0.25.1':
+    resolution: {integrity: sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm64@0.25.1':
+    resolution: {integrity: sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm@0.25.1':
+    resolution: {integrity: sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
+  '@esbuild/android-x64@0.25.1':
+    resolution: {integrity: sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-arm64@0.25.1':
+    resolution: {integrity: sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-x64@0.25.1':
+    resolution: {integrity: sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-arm64@0.25.1':
+    resolution: {integrity: sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-x64@0.25.1':
+    resolution: {integrity: sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm64@0.25.1':
+    resolution: {integrity: sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm@0.25.1':
+    resolution: {integrity: sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ia32@0.25.1':
+    resolution: {integrity: sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-loong64@0.25.1':
+    resolution: {integrity: sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==}
+    engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-mips64el@0.25.1':
+    resolution: {integrity: sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==}
+    engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ppc64@0.25.1':
+    resolution: {integrity: sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-riscv64@0.25.1':
+    resolution: {integrity: sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==}
+    engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-s390x@0.25.1':
+    resolution: {integrity: sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==}
+    engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-x64@0.25.1':
+    resolution: {integrity: sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
+  '@esbuild/netbsd-arm64@0.25.1':
+    resolution: {integrity: sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.1':
+    resolution: {integrity: sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
+  '@esbuild/openbsd-arm64@0.25.1':
+    resolution: {integrity: sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.1':
+    resolution: {integrity: sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
+  '@esbuild/sunos-x64@0.25.1':
+    resolution: {integrity: sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-arm64@0.25.1':
+    resolution: {integrity: sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-ia32@0.25.1':
+    resolution: {integrity: sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-x64@0.25.1':
+    resolution: {integrity: sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.1':
-    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
+  '@eslint-community/eslint-utils@4.5.1':
+    resolution: {integrity: sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -553,115 +547,81 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/compat@1.2.7':
+    resolution: {integrity: sha512-xvv7hJE32yhegJ8xNAnb62ggiAwTYHBpUCWhRxEj/ksvgDJuSXfoDkBcRYaYNFiJ+jH0IE3K16hd+xXzhBgNbg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.10.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
 
-  '@eslint/js@8.57.1':
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/config-array@0.19.2':
+    resolution: {integrity: sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/core@1.6.8':
-    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+  '@eslint/config-helpers@0.2.0':
+    resolution: {integrity: sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/dom@1.6.12':
-    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+  '@eslint/core@0.12.0':
+    resolution: {integrity: sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/utils@0.2.8':
-    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@humanwhocodes/config-array@0.13.0':
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  '@eslint/js@9.23.0':
+    resolution: {integrity: sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.24.0':
+    resolution: {integrity: sha512-uIY/y3z0uvOGX8cp1C2fiC4+ZmBhp6yZWkojtHL1YEMnRt1Y63HB9TM17proGEmeG7HeUY+UP36F0aknKYTpYA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.7':
+    resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@floating-ui/core@1.6.9':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
+
+  '@floating-ui/dom@1.6.13':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
 
-  '@internationalized/date@3.5.6':
-    resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
+  '@humanwhocodes/retry@0.4.2':
+    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
+    engines: {node: '>=18.18'}
 
-  '@istanbuljs/load-nyc-config@1.1.0':
-    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
-    engines: {node: '>=8'}
+  '@internationalized/date@3.7.0':
+    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
 
-  '@istanbuljs/schema@0.1.3':
-    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
-    engines: {node: '>=8'}
-
-  '@jest/console@29.7.0':
-    resolution: {integrity: sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/core@29.7.0':
-    resolution: {integrity: sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-
-  '@jest/environment@29.7.0':
-    resolution: {integrity: sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/expect-utils@29.7.0':
-    resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/expect@29.7.0':
-    resolution: {integrity: sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/fake-timers@29.7.0':
-    resolution: {integrity: sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/globals@29.7.0':
-    resolution: {integrity: sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/reporters@29.7.0':
-    resolution: {integrity: sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-
-  '@jest/schemas@29.6.3':
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/source-map@29.6.3':
-    resolution: {integrity: sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/test-result@29.7.0':
-    resolution: {integrity: sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/test-sequencer@29.7.0':
-    resolution: {integrity: sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/transform@29.7.0':
-    resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/types@29.6.3':
-    resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/resolve-uri@3.1.2':
@@ -684,8 +644,13 @@ packages:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
 
-  '@melt-ui/svelte@0.83.0':
-    resolution: {integrity: sha512-E7QT+8YSftz+Hdk1W0hNR3f+cnaF2COMWkStn+2u4vk0RO1I9mXRJl+bJD6uhYaH146oxEB+5elu/ABbv6rpsA==}
+  '@melt-ui/svelte@0.86.5':
+    resolution: {integrity: sha512-aaVfc0pxCf6B3ByrzGJ+hB2Sop9wJamw2lNHZlzaolU0Ew1D6O9CbeJElGODT8IbH8/bhI3LcN0nCJRh2ePq+A==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
+
+  '@melt-ui/svelte@0.86.6':
+    resolution: {integrity: sha512-Jer+M7DgIwT5IHfTayb4Iw/fkkxWNmC/mqn/nMh9JrbPbkxmyabfLQnhJ+JDn5HK77f84j34lubO3iqFtYAfMg==}
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
 
@@ -701,198 +666,192 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@opentelemetry/api-logs@0.52.1':
-    resolution: {integrity: sha512-qnSqB2DQ9TPP96dl8cDubDvrUyWc0/sK81xHTK8eSUspzDM3bsewX903qclQFvVhgStjRWdC5bLb3kQqMkfV5A==}
-    engines: {node: '>=14'}
-
   '@opentelemetry/api-logs@0.53.0':
     resolution: {integrity: sha512-8HArjKx+RaAI8uEIgcORbZIPklyh1YLjPSBus8hjRmvLi6DeFzgOcdZ7KwPabKj8mXF8dX0hyfAyGfycz0DbFw==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/api-logs@0.54.2':
-    resolution: {integrity: sha512-4MTVwwmLgUh5QrJnZpYo6YRO5IBLAggf2h8gWDblwRagDStY13aEvt7gGk3jewrMaPlHiF83fENhIx0HO97/cQ==}
+  '@opentelemetry/api-logs@0.57.1':
+    resolution: {integrity: sha512-I4PHczeujhQAQv6ZBzqHYEUiggZL4IdSMixtVD3EYqbdrjujE7kRfI5QohjlPoJm8BvenoW5YaTMWRrbpot6tg==}
+    engines: {node: '>=14'}
+
+  '@opentelemetry/api-logs@0.57.2':
+    resolution: {integrity: sha512-uIX52NnTM0iBh84MShlpouI7UKqkZ7MrUszTmaypHBu4r7NofznSnQRfJ+uUeDtQDj6w8eFGg5KBLDAwAPz1+A==}
     engines: {node: '>=14'}
 
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@1.28.0':
-    resolution: {integrity: sha512-igcl4Ve+F1N2063PJUkesk/GkYyuGIWinYkSyAFTnIj3gzrOgvOA4k747XNdL47HRRL1w/qh7UW8NDuxOLvKFA==}
+  '@opentelemetry/context-async-hooks@1.30.1':
+    resolution: {integrity: sha512-s5vvxXPVdjqS3kTLKMeBMvop9hbWkwzBpu+mUO2M7sZtlkyDJGwFe33wRKnbaYDo8ExRVBIIdwIGrqpxHuKttA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@1.26.0':
-    resolution: {integrity: sha512-1iKxXXE8415Cdv0yjG3G6hQnB5eVEsJce3QaawX8SjDn0mAS0ZM8fAbZZJD4ajvhC15cePvosSCut404KrIIvQ==}
+  '@opentelemetry/core@1.30.1':
+    resolution: {integrity: sha512-OOCM2C/QIURhJMuKaekP3TRBxBKxG/TWWA0TL2J6nXUtDnuCtccy49LUJF8xPFXMX+0LMcxFpCo8M9cGY1W6rQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@1.28.0':
-    resolution: {integrity: sha512-ZLwRMV+fNDpVmF2WYUdBHlq0eOWtEaUJSusrzjGnBt7iSRvfjFE3RXYUZJrqou/wIDWV0DwQ5KIfYe9WXg9Xqw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/instrumentation-amqplib@0.43.0':
-    resolution: {integrity: sha512-ALjfQC+0dnIEcvNYsbZl/VLh7D2P1HhFF4vicRKHhHFIUV3Shpg4kXgiek5PLhmeKSIPiUB25IYH5RIneclL4A==}
+  '@opentelemetry/instrumentation-amqplib@0.46.1':
+    resolution: {integrity: sha512-AyXVnlCf/xV3K/rNumzKxZqsULyITJH6OVLiW6730JPRqWA7Zc9bvYoVNpN6iOpTU8CasH34SU/ksVJmObFibQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-connect@0.40.0':
-    resolution: {integrity: sha512-3aR/3YBQ160siitwwRLjwqrv2KBT16897+bo6yz8wIfel6nWOxTZBJudcbsK3p42pTC7qrbotJ9t/1wRLpv79Q==}
+  '@opentelemetry/instrumentation-connect@0.43.0':
+    resolution: {integrity: sha512-Q57JGpH6T4dkYHo9tKXONgLtxzsh1ZEW5M9A/OwKrZFyEpLqWgjhcZ3hIuVvDlhb426iDF1f9FPToV/mi5rpeA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-dataloader@0.12.0':
-    resolution: {integrity: sha512-pnPxatoFE0OXIZDQhL2okF//dmbiWFzcSc8pUg9TqofCLYZySSxDCgQc69CJBo5JnI3Gz1KP+mOjS4WAeRIH4g==}
+  '@opentelemetry/instrumentation-dataloader@0.16.0':
+    resolution: {integrity: sha512-88+qCHZC02up8PwKHk0UQKLLqGGURzS3hFQBZC7PnGwReuoKjHXS1o29H58S+QkXJpkTr2GACbx8j6mUoGjNPA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-express@0.44.0':
-    resolution: {integrity: sha512-GWgibp6Q0wxyFaaU8ERIgMMYgzcHmGrw3ILUtGchLtLncHNOKk0SNoWGqiylXWWT4HTn5XdV8MGawUgpZh80cA==}
+  '@opentelemetry/instrumentation-express@0.47.0':
+    resolution: {integrity: sha512-XFWVx6k0XlU8lu6cBlCa29ONtVt6ADEjmxtyAyeF2+rifk8uBJbk1La0yIVfI0DoKURGbaEDTNelaXG9l/lNNQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-fastify@0.41.0':
-    resolution: {integrity: sha512-pNRjFvf0mvqfJueaeL/qEkuGJwgtE5pgjIHGYwjc2rMViNCrtY9/Sf+Nu8ww6dDd/Oyk2fwZZP7i0XZfCnETrA==}
+  '@opentelemetry/instrumentation-fastify@0.44.1':
+    resolution: {integrity: sha512-RoVeMGKcNttNfXMSl6W4fsYoCAYP1vi6ZAWIGhBY+o7R9Y0afA7f9JJL0j8LHbyb0P0QhSYk+6O56OwI2k4iRQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-fs@0.16.0':
-    resolution: {integrity: sha512-hMDRUxV38ln1R3lNz6osj3YjlO32ykbHqVrzG7gEhGXFQfu7LJUx8t9tEwE4r2h3CD4D0Rw4YGDU4yF4mP3ilg==}
+  '@opentelemetry/instrumentation-fs@0.19.0':
+    resolution: {integrity: sha512-JGwmHhBkRT2G/BYNV1aGI+bBjJu4fJUD/5/Jat0EWZa2ftrLV3YE8z84Fiij/wK32oMZ88eS8DI4ecLGZhpqsQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-generic-pool@0.39.0':
-    resolution: {integrity: sha512-y4v8Y+tSfRB3NNBvHjbjrn7rX/7sdARG7FuK6zR8PGb28CTa0kHpEGCJqvL9L8xkTNvTXo+lM36ajFGUaK1aNw==}
+  '@opentelemetry/instrumentation-generic-pool@0.43.0':
+    resolution: {integrity: sha512-at8GceTtNxD1NfFKGAuwtqM41ot/TpcLh+YsGe4dhf7gvv1HW/ZWdq6nfRtS6UjIvZJOokViqLPJ3GVtZItAnQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-graphql@0.44.0':
-    resolution: {integrity: sha512-FYXTe3Bv96aNpYktqm86BFUTpjglKD0kWI5T5bxYkLUPEPvFn38vWGMJTGrDMVou/i55E4jlWvcm6hFIqLsMbg==}
+  '@opentelemetry/instrumentation-graphql@0.47.0':
+    resolution: {integrity: sha512-Cc8SMf+nLqp0fi8oAnooNEfwZWFnzMiBHCGmDFYqmgjPylyLmi83b+NiTns/rKGwlErpW0AGPt0sMpkbNlzn8w==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-hapi@0.41.0':
-    resolution: {integrity: sha512-jKDrxPNXDByPlYcMdZjNPYCvw0SQJjN+B1A+QH+sx+sAHsKSAf9hwFiJSrI6C4XdOls43V/f/fkp9ITkHhKFbQ==}
+  '@opentelemetry/instrumentation-hapi@0.45.1':
+    resolution: {integrity: sha512-VH6mU3YqAKTePPfUPwfq4/xr049774qWtfTuJqVHoVspCLiT3bW+fCQ1toZxt6cxRPYASoYaBsMA3CWo8B8rcw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-http@0.53.0':
-    resolution: {integrity: sha512-H74ErMeDuZfj7KgYCTOFGWF5W9AfaPnqLQQxeFq85+D29wwV2yqHbz2IKLYpkOh7EI6QwDEl7rZCIxjJLyc/CQ==}
+  '@opentelemetry/instrumentation-http@0.57.1':
+    resolution: {integrity: sha512-ThLmzAQDs7b/tdKI3BV2+yawuF09jF111OFsovqT1Qj3D8vjwKBwhi/rDE5xethwn4tSXtZcJ9hBsVAlWFQZ7g==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-ioredis@0.43.0':
-    resolution: {integrity: sha512-i3Dke/LdhZbiUAEImmRG3i7Dimm/BD7t8pDDzwepSvIQ6s2X6FPia7561gw+64w+nx0+G9X14D7rEfaMEmmjig==}
+  '@opentelemetry/instrumentation-ioredis@0.47.0':
+    resolution: {integrity: sha512-4HqP9IBC8e7pW9p90P3q4ox0XlbLGme65YTrA3UTLvqvo4Z6b0puqZQP203YFu8m9rE/luLfaG7/xrwwqMUpJw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-kafkajs@0.4.0':
-    resolution: {integrity: sha512-I9VwDG314g7SDL4t8kD/7+1ytaDBRbZQjhVaQaVIDR8K+mlsoBhLsWH79yHxhHQKvwCSZwqXF+TiTOhoQVUt7A==}
+  '@opentelemetry/instrumentation-kafkajs@0.7.0':
+    resolution: {integrity: sha512-LB+3xiNzc034zHfCtgs4ITWhq6Xvdo8bsq7amR058jZlf2aXXDrN9SV4si4z2ya9QX4tz6r4eZJwDkXOp14/AQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-knex@0.41.0':
-    resolution: {integrity: sha512-OhI1SlLv5qnsnm2dOVrian/x3431P75GngSpnR7c4fcVFv7prXGYu29Z6ILRWJf/NJt6fkbySmwdfUUnFnHCTg==}
+  '@opentelemetry/instrumentation-knex@0.44.0':
+    resolution: {integrity: sha512-SlT0+bLA0Lg3VthGje+bSZatlGHw/vwgQywx0R/5u9QC59FddTQSPJeWNw29M6f8ScORMeUOOTwihlQAn4GkJQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-koa@0.43.0':
-    resolution: {integrity: sha512-lDAhSnmoTIN6ELKmLJBplXzT/Jqs5jGZehuG22EdSMaTwgjMpxMDI1YtlKEhiWPWkrz5LUsd0aOO0ZRc9vn3AQ==}
+  '@opentelemetry/instrumentation-koa@0.47.0':
+    resolution: {integrity: sha512-HFdvqf2+w8sWOuwtEXayGzdZ2vWpCKEQv5F7+2DSA74Te/Cv4rvb2E5So5/lh+ok4/RAIPuvCbCb/SHQFzMmbw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-lru-memoizer@0.40.0':
-    resolution: {integrity: sha512-21xRwZsEdMPnROu/QsaOIODmzw59IYpGFmuC4aFWvMj6stA8+Ei1tX67nkarJttlNjoM94um0N4X26AD7ff54A==}
+  '@opentelemetry/instrumentation-lru-memoizer@0.44.0':
+    resolution: {integrity: sha512-Tn7emHAlvYDFik3vGU0mdwvWJDwtITtkJ+5eT2cUquct6nIs+H8M47sqMJkCpyPe5QIBJoTOHxmc6mj9lz6zDw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mongodb@0.48.0':
-    resolution: {integrity: sha512-9YWvaGvrrcrydMsYGLu0w+RgmosLMKe3kv/UNlsPy8RLnCkN2z+bhhbjjjuxtUmvEuKZMCoXFluABVuBr1yhjw==}
+  '@opentelemetry/instrumentation-mongodb@0.51.0':
+    resolution: {integrity: sha512-cMKASxCX4aFxesoj3WK8uoQ0YUrRvnfxaO72QWI2xLu5ZtgX/QvdGBlU3Ehdond5eb74c2s1cqRQUIptBnKz1g==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mongoose@0.42.0':
-    resolution: {integrity: sha512-AnWv+RaR86uG3qNEMwt3plKX1ueRM7AspfszJYVkvkehiicC3bHQA6vWdb6Zvy5HAE14RyFbu9+2hUUjR2NSyg==}
+  '@opentelemetry/instrumentation-mongoose@0.46.0':
+    resolution: {integrity: sha512-mtVv6UeaaSaWTeZtLo4cx4P5/ING2obSqfWGItIFSunQBrYROfhuVe7wdIrFUs2RH1tn2YYpAJyMaRe/bnTTIQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mysql2@0.41.0':
-    resolution: {integrity: sha512-REQB0x+IzVTpoNgVmy5b+UnH1/mDByrneimP6sbDHkp1j8QOl1HyWOrBH/6YWR0nrbU3l825Em5PlybjT3232g==}
+  '@opentelemetry/instrumentation-mysql2@0.45.0':
+    resolution: {integrity: sha512-qLslv/EPuLj0IXFvcE3b0EqhWI8LKmrgRPIa4gUd8DllbBpqJAvLNJSv3cC6vWwovpbSI3bagNO/3Q2SuXv2xA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mysql@0.41.0':
-    resolution: {integrity: sha512-jnvrV6BsQWyHS2qb2fkfbfSb1R/lmYwqEZITwufuRl37apTopswu9izc0b1CYRp/34tUG/4k/V39PND6eyiNvw==}
+  '@opentelemetry/instrumentation-mysql@0.45.0':
+    resolution: {integrity: sha512-tWWyymgwYcTwZ4t8/rLDfPYbOTF3oYB8SxnYMtIQ1zEf5uDm90Ku3i6U/vhaMyfHNlIHvDhvJh+qx5Nc4Z3Acg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-nestjs-core@0.40.0':
-    resolution: {integrity: sha512-WF1hCUed07vKmf5BzEkL0wSPinqJgH7kGzOjjMAiTGacofNXjb/y4KQ8loj2sNsh5C/NN7s1zxQuCgbWbVTGKg==}
+  '@opentelemetry/instrumentation-nestjs-core@0.44.0':
+    resolution: {integrity: sha512-t16pQ7A4WYu1yyQJZhRKIfUNvl5PAaF2pEteLvgJb/BWdd1oNuU1rOYt4S825kMy+0q4ngiX281Ss9qiwHfxFQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-pg@0.44.0':
-    resolution: {integrity: sha512-oTWVyzKqXud1BYEGX1loo2o4k4vaU1elr3vPO8NZolrBtFvQ34nx4HgUaexUDuEog00qQt+MLR5gws/p+JXMLQ==}
+  '@opentelemetry/instrumentation-pg@0.50.0':
+    resolution: {integrity: sha512-TtLxDdYZmBhFswm8UIsrDjh/HFBeDXd4BLmE8h2MxirNHewLJ0VS9UUddKKEverb5Sm2qFVjqRjcU+8Iw4FJ3w==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-redis-4@0.42.0':
-    resolution: {integrity: sha512-NaD+t2JNcOzX/Qa7kMy68JbmoVIV37fT/fJYzLKu2Wwd+0NCxt+K2OOsOakA8GVg8lSpFdbx4V/suzZZ2Pvdjg==}
+  '@opentelemetry/instrumentation-redis-4@0.46.0':
+    resolution: {integrity: sha512-aTUWbzbFMFeRODn3720TZO0tsh/49T8H3h8vVnVKJ+yE36AeW38Uj/8zykQ/9nO8Vrtjr5yKuX3uMiG/W8FKNw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-tedious@0.15.0':
-    resolution: {integrity: sha512-Kb7yo8Zsq2TUwBbmwYgTAMPK0VbhoS8ikJ6Bup9KrDtCx2JC01nCb+M0VJWXt7tl0+5jARUbKWh5jRSoImxdCw==}
+  '@opentelemetry/instrumentation-tedious@0.18.0':
+    resolution: {integrity: sha512-9zhjDpUDOtD+coeADnYEJQ0IeLVCj7w/hqzIutdp5NqS1VqTAanaEfsEcSypyvYv5DX3YOsTUoF+nr2wDXPETA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-undici@0.6.0':
-    resolution: {integrity: sha512-ABJBhm5OdhGmbh0S/fOTE4N69IZ00CsHC5ijMYfzbw3E5NwLgpQk5xsljaECrJ8wz1SfXbO03FiSuu5AyRAkvQ==}
+  '@opentelemetry/instrumentation-undici@0.10.0':
+    resolution: {integrity: sha512-vm+V255NGw9gaSsPD6CP0oGo8L55BffBc8KnxqsMuc6XiAD1L8SFNzsW0RHhxJFqy9CJaJh+YiJ5EHXuZ5rZBw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.7.0
 
-  '@opentelemetry/instrumentation@0.52.1':
-    resolution: {integrity: sha512-uXJbYU/5/MBHjMp1FqrILLRuiJCs3Ofk0MeRDk8g1S1gD47U8X3JnSwcMO1rtRo1x1a7zKaQHaoYu49p/4eSKw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
   '@opentelemetry/instrumentation@0.53.0':
     resolution: {integrity: sha512-DMwg0hy4wzf7K73JJtl95m/e0boSoWhH07rfvHvYzQtBD3Bmv0Wc1x733vyZBqmFm8OjJD0/pfiUg1W3JjFX0A==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation@0.54.2':
-    resolution: {integrity: sha512-go6zpOVoZVztT9r1aPd79Fr3OWiD4N24bCPJsIKkBses8oyFo12F/Ew3UBTdIu6hsW4HC4MVEJygG6TEyJI/lg==}
+  '@opentelemetry/instrumentation@0.57.1':
+    resolution: {integrity: sha512-SgHEKXoVxOjc20ZYusPG3Fh+RLIZTSa4x8QtD3NfgAUDyqdFFS9W1F2ZVbZkqDCdyMcQG02Ok4duUGLHJXHgbA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation@0.57.2':
+    resolution: {integrity: sha512-BdBGhQBh8IjZ2oIIX6F2/Q3LKm/FDDKi6ccYKcBTeilh6SNdNKveDOLk73BkSJjQLJk6qe4Yh+hHw1UPhCDdrg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
@@ -901,14 +860,14 @@ packages:
     resolution: {integrity: sha512-faYX1N0gpLhej/6nyp6bgRjzAKXn5GOEMYY7YhciSfCoITAktLUtQ36d24QEWNA1/WA1y6qQunCe0OhHRkVl9g==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/resources@1.28.0':
-    resolution: {integrity: sha512-cIyXSVJjGeTICENN40YSvLDAq4Y2502hGK3iN7tfdynQLKWb3XWZQEkPc+eSx47kiy11YeFAlYkEfXwR1w8kfw==}
+  '@opentelemetry/resources@1.30.1':
+    resolution: {integrity: sha512-5UxZqiAgLYGFjS4s9qm5mBVo433u+dSPUFWVWXmLAD4wB65oMCoXaJP1KJa9DIYYMeHu3z4BZcStG3LC593cWA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-base@1.28.0':
-    resolution: {integrity: sha512-ceUVWuCpIao7Y5xE02Xs3nQi0tOGmMea17ecBdwtCvdo9ekmO+ijc9RFDgfifMl7XCBf41zne/1POM3LqSTZDA==}
+  '@opentelemetry/sdk-trace-base@1.30.1':
+    resolution: {integrity: sha512-jVPgBbH1gCy2Lb7X0AVQ8XAfgg0pJ4nvl8/IiQA6nxOsPvS+0zMJaFSs2ltXe0J6C8dqjcnpyqINDJmU30+uOg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
@@ -917,96 +876,104 @@ packages:
     resolution: {integrity: sha512-sAay1RrB+ONOem0OZanAR1ZI/k7yDpnOQSQmTMuGImUQb2y8EbSaCJ94FQluM74xoU03vlb2d2U90hZluL6nQg==}
     engines: {node: '>=14'}
 
+  '@opentelemetry/semantic-conventions@1.28.0':
+    resolution: {integrity: sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==}
+    engines: {node: '>=14'}
+
+  '@opentelemetry/semantic-conventions@1.30.0':
+    resolution: {integrity: sha512-4VlGgo32k2EQ2wcCY3vEU28A0O13aOtHz3Xt2/2U5FAh9EfhD6t6DqL5Z6yAnRCntbTFDU4YfbpyzSlHNWycPw==}
+    engines: {node: '>=14'}
+
   '@opentelemetry/sql-common@0.40.1':
     resolution: {integrity: sha512-nSDlnHSqzC3pXn/wZEZVLuAuJ1MYMXPBwtv2qAbCa3847SaHItdE7SzUq/Jtb0KZmh1zfAbNi3AAMjztTT4Ugg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
 
-  '@parcel/watcher-android-arm64@2.5.0':
-    resolution: {integrity: sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==}
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-darwin-arm64@2.5.0':
-    resolution: {integrity: sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==}
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.5.0':
-    resolution: {integrity: sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==}
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.5.0':
-    resolution: {integrity: sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==}
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.5.0':
-    resolution: {integrity: sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==}
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm-musl@2.5.0':
-    resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.0':
-    resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-musl@2.5.0':
-    resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.5.0':
-    resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-musl@2.5.0':
-    resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-win32-arm64@2.5.0':
-    resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-ia32@2.5.0':
-    resolution: {integrity: sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==}
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.5.0':
-    resolution: {integrity: sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==}
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher@2.5.0':
-    resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
-  '@playwright/test@1.49.0':
-    resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
+  '@playwright/test@1.51.1':
+    resolution: {integrity: sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1016,199 +983,216 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
-  '@prisma/instrumentation@5.19.1':
-    resolution: {integrity: sha512-VLnzMQq7CWroL5AeaW0Py2huiNKeoMfCH3SUxstdzPrlWQi6UQ9UrfcbUkNHlVFqOMacqy8X/8YtE0kuKDpD9w==}
+  '@prisma/instrumentation@5.22.0':
+    resolution: {integrity: sha512-LxccF392NN37ISGxIurUljZSh1YWnphO34V5a0+T7FVQG2u9bhAXRTJpgmQ3483woVhkraQZFF7cbRrpbw/F4Q==}
 
-  '@rollup/rollup-android-arm-eabi@4.27.3':
-    resolution: {integrity: sha512-EzxVSkIvCFxUd4Mgm4xR9YXrcp976qVaHnqom/Tgm+vU79k4vV4eYTjmRvGfeoW8m9LVcsAy/lGjcgVegKEhLQ==}
+  '@rollup/rollup-android-arm-eabi@4.37.0':
+    resolution: {integrity: sha512-l7StVw6WAa8l3vA1ov80jyetOAEo1FtHvZDbzXDO/02Sq/QVvqlHkYoFwDJPIMj0GKiistsBudfx5tGFnwYWDQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.27.3':
-    resolution: {integrity: sha512-LJc5pDf1wjlt9o/Giaw9Ofl+k/vLUaYsE2zeQGH85giX2F+wn/Cg8b3c5CDP3qmVmeO5NzwVUzQQxwZvC2eQKw==}
+  '@rollup/rollup-android-arm64@4.37.0':
+    resolution: {integrity: sha512-6U3SlVyMxezt8Y+/iEBcbp945uZjJwjZimu76xoG7tO1av9VO691z8PkhzQ85ith2I8R2RddEPeSfcbyPfD4hA==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.27.3':
-    resolution: {integrity: sha512-OuRysZ1Mt7wpWJ+aYKblVbJWtVn3Cy52h8nLuNSzTqSesYw1EuN6wKp5NW/4eSre3mp12gqFRXOKTcN3AI3LqA==}
+  '@rollup/rollup-darwin-arm64@4.37.0':
+    resolution: {integrity: sha512-+iTQ5YHuGmPt10NTzEyMPbayiNTcOZDWsbxZYR1ZnmLnZxG17ivrPSWFO9j6GalY0+gV3Jtwrrs12DBscxnlYA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.27.3':
-    resolution: {integrity: sha512-xW//zjJMlJs2sOrCmXdB4d0uiilZsOdlGQIC/jjmMWT47lkLLoB1nsNhPUcnoqyi5YR6I4h+FjBpILxbEy8JRg==}
+  '@rollup/rollup-darwin-x64@4.37.0':
+    resolution: {integrity: sha512-m8W2UbxLDcmRKVjgl5J/k4B8d7qX2EcJve3Sut7YGrQoPtCIQGPH5AMzuFvYRWZi0FVS0zEY4c8uttPfX6bwYQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.27.3':
-    resolution: {integrity: sha512-58E0tIcwZ+12nK1WiLzHOD8I0d0kdrY/+o7yFVPRHuVGY3twBwzwDdTIBGRxLmyjciMYl1B/U515GJy+yn46qw==}
+  '@rollup/rollup-freebsd-arm64@4.37.0':
+    resolution: {integrity: sha512-FOMXGmH15OmtQWEt174v9P1JqqhlgYge/bUjIbiVD1nI1NeJ30HYT9SJlZMqdo1uQFyt9cz748F1BHghWaDnVA==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.27.3':
-    resolution: {integrity: sha512-78fohrpcVwTLxg1ZzBMlwEimoAJmY6B+5TsyAZ3Vok7YabRBUvjYTsRXPTjGEvv/mfgVBepbW28OlMEz4w8wGA==}
+  '@rollup/rollup-freebsd-x64@4.37.0':
+    resolution: {integrity: sha512-SZMxNttjPKvV14Hjck5t70xS3l63sbVwl98g3FlVVx2YIDmfUIy29jQrsw06ewEYQ8lQSuY9mpAPlmgRD2iSsA==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.27.3':
-    resolution: {integrity: sha512-h2Ay79YFXyQi+QZKo3ISZDyKaVD7uUvukEHTOft7kh00WF9mxAaxZsNs3o/eukbeKuH35jBvQqrT61fzKfAB/Q==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.37.0':
+    resolution: {integrity: sha512-hhAALKJPidCwZcj+g+iN+38SIOkhK2a9bqtJR+EtyxrKKSt1ynCBeqrQy31z0oWU6thRZzdx53hVgEbRkuI19w==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.27.3':
-    resolution: {integrity: sha512-Sv2GWmrJfRY57urktVLQ0VKZjNZGogVtASAgosDZ1aUB+ykPxSi3X1nWORL5Jk0sTIIwQiPH7iE3BMi9zGWfkg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.37.0':
+    resolution: {integrity: sha512-jUb/kmn/Gd8epbHKEqkRAxq5c2EwRt0DqhSGWjPFxLeFvldFdHQs/n8lQ9x85oAeVb6bHcS8irhTJX2FCOd8Ag==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.27.3':
-    resolution: {integrity: sha512-FPoJBLsPW2bDNWjSrwNuTPUt30VnfM8GPGRoLCYKZpPx0xiIEdFip3dH6CqgoT0RnoGXptaNziM0WlKgBc+OWQ==}
+  '@rollup/rollup-linux-arm64-gnu@4.37.0':
+    resolution: {integrity: sha512-oNrJxcQT9IcbcmKlkF+Yz2tmOxZgG9D9GRq+1OE6XCQwCVwxixYAa38Z8qqPzQvzt1FCfmrHX03E0pWoXm1DqA==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.27.3':
-    resolution: {integrity: sha512-TKxiOvBorYq4sUpA0JT+Fkh+l+G9DScnG5Dqx7wiiqVMiRSkzTclP35pE6eQQYjP4Gc8yEkJGea6rz4qyWhp3g==}
+  '@rollup/rollup-linux-arm64-musl@4.37.0':
+    resolution: {integrity: sha512-pfxLBMls+28Ey2enpX3JvjEjaJMBX5XlPCZNGxj4kdJyHduPBXtxYeb8alo0a7bqOoWZW2uKynhHxF/MWoHaGQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.27.3':
-    resolution: {integrity: sha512-v2M/mPvVUKVOKITa0oCFksnQQ/TqGrT+yD0184/cWHIu0LoIuYHwox0Pm3ccXEz8cEQDLk6FPKd1CCm+PlsISw==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.37.0':
+    resolution: {integrity: sha512-yCE0NnutTC/7IGUq/PUHmoeZbIwq3KRh02e9SfFh7Vmc1Z7atuJRYWhRME5fKgT8aS20mwi1RyChA23qSyRGpA==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.37.0':
+    resolution: {integrity: sha512-NxcICptHk06E2Lh3a4Pu+2PEdZ6ahNHuK7o6Np9zcWkrBMuv21j10SQDJW3C9Yf/A/P7cutWoC/DptNLVsZ0VQ==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.27.3':
-    resolution: {integrity: sha512-LdrI4Yocb1a/tFVkzmOE5WyYRgEBOyEhWYJe4gsDWDiwnjYKjNs7PS6SGlTDB7maOHF4kxevsuNBl2iOcj3b4A==}
+  '@rollup/rollup-linux-riscv64-gnu@4.37.0':
+    resolution: {integrity: sha512-PpWwHMPCVpFZLTfLq7EWJWvrmEuLdGn1GMYcm5MV7PaRgwCEYJAwiN94uBuZev0/J/hFIIJCsYw4nLmXA9J7Pw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.27.3':
-    resolution: {integrity: sha512-d4wVu6SXij/jyiwPvI6C4KxdGzuZOvJ6y9VfrcleHTwo68fl8vZC5ZYHsCVPUi4tndCfMlFniWgwonQ5CUpQcA==}
+  '@rollup/rollup-linux-riscv64-musl@4.37.0':
+    resolution: {integrity: sha512-DTNwl6a3CfhGTAOYZ4KtYbdS8b+275LSLqJVJIrPa5/JuIufWWZ/QFvkxp52gpmguN95eujrM68ZG+zVxa8zHA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.37.0':
+    resolution: {integrity: sha512-hZDDU5fgWvDdHFuExN1gBOhCuzo/8TMpidfOR+1cPZJflcEzXdCy1LjnklQdW8/Et9sryOPJAKAQRw8Jq7Tg+A==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.27.3':
-    resolution: {integrity: sha512-/6bn6pp1fsCGEY5n3yajmzZQAh+mW4QPItbiWxs69zskBzJuheb3tNynEjL+mKOsUSFK11X4LYF2BwwXnzWleA==}
+  '@rollup/rollup-linux-x64-gnu@4.37.0':
+    resolution: {integrity: sha512-pKivGpgJM5g8dwj0ywBwe/HeVAUSuVVJhUTa/URXjxvoyTT/AxsLTAbkHkDHG7qQxLoW2s3apEIl26uUe08LVQ==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.27.3':
-    resolution: {integrity: sha512-nBXOfJds8OzUT1qUreT/en3eyOXd2EH5b0wr2bVB5999qHdGKkzGzIyKYaKj02lXk6wpN71ltLIaQpu58YFBoQ==}
+  '@rollup/rollup-linux-x64-musl@4.37.0':
+    resolution: {integrity: sha512-E2lPrLKE8sQbY/2bEkVTGDEk4/49UYRVWgj90MY8yPjpnGBQ+Xi1Qnr7b7UIWw1NOggdFQFOLZ8+5CzCiz143w==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.27.3':
-    resolution: {integrity: sha512-ogfbEVQgIZOz5WPWXF2HVb6En+kWzScuxJo/WdQTqEgeyGkaa2ui5sQav9Zkr7bnNCLK48uxmmK0TySm22eiuw==}
+  '@rollup/rollup-win32-arm64-msvc@4.37.0':
+    resolution: {integrity: sha512-Jm7biMazjNzTU4PrQtr7VS8ibeys9Pn29/1bm4ph7CP2kf21950LgN+BaE2mJ1QujnvOc6p54eWWiVvn05SOBg==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.27.3':
-    resolution: {integrity: sha512-ecE36ZBMLINqiTtSNQ1vzWc5pXLQHlf/oqGp/bSbi7iedcjcNb6QbCBNG73Euyy2C+l/fn8qKWEwxr+0SSfs3w==}
+  '@rollup/rollup-win32-ia32-msvc@4.37.0':
+    resolution: {integrity: sha512-e3/1SFm1OjefWICB2Ucstg2dxYDkDTZGDYgwufcbsxTHyqQps1UQf33dFEChBNmeSsTOyrjw2JJq0zbG5GF6RA==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.27.3':
-    resolution: {integrity: sha512-vliZLrDmYKyaUoMzEbMTg2JkerfBjn03KmAw9CykO0Zzkzoyd7o3iZNam/TpyWNjNT+Cz2iO3P9Smv2wgrR+Eg==}
+  '@rollup/rollup-win32-x64-msvc@4.37.0':
+    resolution: {integrity: sha512-LWbXUBwn/bcLx2sSsqy7pK5o+Nr+VCoRoAohfJ5C/aBio9nfJmGQqHAhU6pwxV/RmyTk5AqdySma7uwWGlmeuA==}
     cpu: [x64]
     os: [win32]
 
-  '@sentry-internal/browser-utils@8.38.0':
-    resolution: {integrity: sha512-5QMVcssrAcmjKT0NdFYcX0b0wwZovGAZ9L2GajErXtHkBenjI2sgR2+5J7n+QZGuk2SC1qhGmT1O9i3p3UEwew==}
+  '@sentry-internal/browser-utils@8.55.0':
+    resolution: {integrity: sha512-ROgqtQfpH/82AQIpESPqPQe0UyWywKJsmVIqi3c5Fh+zkds5LUxnssTj3yNd1x+kxaPDVB023jAP+3ibNgeNDw==}
     engines: {node: '>=14.18'}
 
-  '@sentry-internal/feedback@8.38.0':
-    resolution: {integrity: sha512-AW5HCCAlc3T1jcSuNhbFVNO1CHyJ5g5tsGKEP4VKgu+D1Gg2kZ5S2eFatLBUP/BD5JYb1A7p6XPuzYp1XfMq0A==}
+  '@sentry-internal/feedback@8.55.0':
+    resolution: {integrity: sha512-cP3BD/Q6pquVQ+YL+rwCnorKuTXiS9KXW8HNKu4nmmBAyf7urjs+F6Hr1k9MXP5yQ8W3yK7jRWd09Yu6DHWOiw==}
     engines: {node: '>=14.18'}
 
-  '@sentry-internal/replay-canvas@8.38.0':
-    resolution: {integrity: sha512-OxmlWzK9J8mRM+KxdSnQ5xuxq+p7TiBzTz70FT3HltxmeugvDkyp6803UcFqHOPHR35OYeVLOalym+FmvNn9kw==}
+  '@sentry-internal/replay-canvas@8.55.0':
+    resolution: {integrity: sha512-nIkfgRWk1091zHdu4NbocQsxZF1rv1f7bbp3tTIlZYbrH62XVZosx5iHAuZG0Zc48AETLE7K4AX9VGjvQj8i9w==}
     engines: {node: '>=14.18'}
 
-  '@sentry-internal/replay@8.38.0':
-    resolution: {integrity: sha512-mQPShKnIab7oKwkwrRxP/D8fZYHSkDY+cvqORzgi+wAwgnunytJQjz9g6Ww2lJu98rHEkr5SH4V4rs6PZYZmnQ==}
+  '@sentry-internal/replay@8.55.0':
+    resolution: {integrity: sha512-roCDEGkORwolxBn8xAKedybY+Jlefq3xYmgN2fr3BTnsXjSYOPC7D1/mYqINBat99nDtvgFvNfRcZPiwwZ1hSw==}
     engines: {node: '>=14.18'}
 
   '@sentry/babel-plugin-component-annotate@2.22.6':
     resolution: {integrity: sha512-V2g1Y1I5eSe7dtUVMBvAJr8BaLRr4CLrgNgtPaZyMT4Rnps82SrZ5zqmEkLXPumlXhLUWR6qzoMNN2u+RXVXfQ==}
     engines: {node: '>= 14'}
 
-  '@sentry/browser@8.38.0':
-    resolution: {integrity: sha512-AZR+b0EteNZEGv6JSdBD22S9VhQ7nrljKsSnzxobBULf3BpwmhmCzTbDrqWszKDAIDYmL+yQJIR2glxbknneWQ==}
+  '@sentry/browser@8.55.0':
+    resolution: {integrity: sha512-1A31mCEWCjaMxJt6qGUK+aDnLDcK6AwLAZnqpSchNysGni1pSn1RWSmk9TBF8qyTds5FH8B31H480uxMPUJ7Cw==}
     engines: {node: '>=14.18'}
 
   '@sentry/bundler-plugin-core@2.22.6':
     resolution: {integrity: sha512-1esQdgSUCww9XAntO4pr7uAM5cfGhLsgTK9MEwAKNfvpMYJi9NUTYa3A7AZmdA8V6107Lo4OD7peIPrDRbaDCg==}
     engines: {node: '>= 14'}
 
-  '@sentry/cli-darwin@2.38.2':
-    resolution: {integrity: sha512-21ywIcJCCFrCTyiF1o1PaT7rbelFC2fWmayKYgFElnQ55IzNYkcn8BYhbh/QknE0l1NBRaeWMXwTTdeoqETCCg==}
+  '@sentry/cli-darwin@2.43.0':
+    resolution: {integrity: sha512-0MYvRHJowXOMNY5W6XF4p9GQNH3LuQ+IHAQwVbZOsfwnEv8e20rf9BiPPzmJ9sIjZSWYR4yIqm6dBp6ABJFbGQ==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.38.2':
-    resolution: {integrity: sha512-4Fp/jjQpNZj4Th+ZckMQvldAuuP0ZcyJ9tJCP1CCOn5poIKPYtY6zcbTP036R7Te14PS4ALOcDNX3VNKfpsifA==}
+  '@sentry/cli-linux-arm64@2.43.0':
+    resolution: {integrity: sha512-7URSaNjbEJQZyYJ33XK3pVKl6PU2oO9ETF6R/4Cz2FmU3fecACLKVldv7+OuNl9aspLZ62mnPMDvT732/Fp2Ug==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux, freebsd]
 
-  '@sentry/cli-linux-arm@2.38.2':
-    resolution: {integrity: sha512-+AiKDBQKIdQe4NhBiHSHGl0KR+b//HHTrnfK1SaTrOm9HtM4ELXAkjkRF3bmbpSzSQCS5WzcbIxxCJOeaUaO0A==}
+  '@sentry/cli-linux-arm@2.43.0':
+    resolution: {integrity: sha512-c2Fwb6HrFL1nbaGV4uRhHC1wEJPR+wfpKN5y06PgSNNbd10YrECAB3tqBHXC8CEmhuDyFR+ORGZ7VbswfCWEEQ==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux, freebsd]
 
-  '@sentry/cli-linux-i686@2.38.2':
-    resolution: {integrity: sha512-6zVJN10dHIn4R1v+fxuzlblzVBhIVwsaN/S7aBED6Vn1HhAyAcNG2tIzeCLGeDfieYjXlE2sCI82sZkQBCbAGw==}
+  '@sentry/cli-linux-i686@2.43.0':
+    resolution: {integrity: sha512-bFo/tpMZeMJ275HPGmAENREchnBxhALOOpZAphSyalUu3pGZ+EETEtlSLrKyVNJo26Dye5W7GlrYUV9+rkyCtg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [linux, freebsd]
 
-  '@sentry/cli-linux-x64@2.38.2':
-    resolution: {integrity: sha512-4UiLu9zdVtqPeltELR5MDGKcuqAdQY9xz3emISuA6bm+MXGbt2W1WgX+XY3GElwjZbmH8qpyLUEd34sw6sdcbQ==}
+  '@sentry/cli-linux-x64@2.43.0':
+    resolution: {integrity: sha512-EbAmKXUNU/Ii4pNGVRCepU6ks1M43wStMKx3pibrUTllrrCwqYKyPxRRdoFYySHkduwCxnoKZcLEg9vWZ3qS6A==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux, freebsd]
 
-  '@sentry/cli-win32-i686@2.38.2':
-    resolution: {integrity: sha512-DYfSvd5qLPerLpIxj3Xu2rRe3CIlpGOOfGSNI6xvJ5D8j6hqbOHlCzvfC4oBWYVYGtxnwQLMeDGJ7o7RMYulig==}
+  '@sentry/cli-win32-arm64@2.43.0':
+    resolution: {integrity: sha512-KmJRCdQQGLSErJvrcGcN+yWo68m+5OdluhyJHsVYMOQknwu8YMOWLm12EIa+4t4GclDvwg5xcxLccCuiWMJUZw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@sentry/cli-win32-i686@2.43.0':
+    resolution: {integrity: sha512-ZWxZdOyZX7NJ/CTskzg+dJ2xTpobFLXVNMOMq0HiwdhqXP2zYYJzKnIt3mHNJYA40zYFODGSgxIamodjpB8BuA==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [win32]
 
-  '@sentry/cli-win32-x64@2.38.2':
-    resolution: {integrity: sha512-W5UX58PKY1hNUHo9YJxWNhGvgvv2uOYHI27KchRiUvFYBIqlUUcIdPZDfyzetDfd8qBCxlAsFnkL2VJSNdpA9A==}
+  '@sentry/cli-win32-x64@2.43.0':
+    resolution: {integrity: sha512-S/IRQYAziEnjpyROhnqzTqShDq3m8jcevXx+q5f49uQnFbfYcTgS1sdrEPqqao/K2boOWbffxYtTkvBiB/piQQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.38.2':
-    resolution: {integrity: sha512-CR0oujpAnhegK2pBAv6ZReMqbFTuNJLDZLvoD1B+syrKZX+R+oxkgT2e1htsBbht+wGxAsluVWsIAydSws1GAA==}
+  '@sentry/cli@2.43.0':
+    resolution: {integrity: sha512-gBE3bkx+PBJxopTrzIJLX4xHe5S0w87q5frIveWKDZ5ulVIU6YWnVumay0y07RIEweUEj3IYva1qH6HG2abfiA==}
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@sentry/core@8.38.0':
-    resolution: {integrity: sha512-sGD+5TEHU9G7X7zpyaoJxpOtwjTjvOd1f/MKBrWW2vf9UbYK+GUJrOzLhMoSWp/pHSYgvObkJkDb/HwieQjvhQ==}
+  '@sentry/core@8.55.0':
+    resolution: {integrity: sha512-6g7jpbefjHYs821Z+EBJ8r4Z7LT5h80YSWRJaylGS4nW5W5Z2KXzpdnyFarv37O7QjauzVC2E+PABmpkw5/JGA==}
     engines: {node: '>=14.18'}
 
-  '@sentry/node@8.38.0':
-    resolution: {integrity: sha512-nwW0XqZFQseXYn0i6i6nKPkbjgHMBEFSF9TnK6mHHqJHHObHIZ6qu5CfvGKgxATia8JPIg9NN8XcyYOnQMi07w==}
+  '@sentry/node@8.55.0':
+    resolution: {integrity: sha512-h10LJLDTRAzYgay60Oy7moMookqqSZSviCWkkmHZyaDn+4WURnPp5SKhhfrzPRQcXKrweiOwDSHBgn1tweDssg==}
     engines: {node: '>=14.18'}
 
-  '@sentry/opentelemetry@8.38.0':
-    resolution: {integrity: sha512-AfjmIf/v7+x2WplhkX66LyGKvrzzPeSgff9uJ0cFCC2s0yd1qA2VPuIwEyr5i/FOJOP5bvFr8tu/hz3LA4+F5Q==}
+  '@sentry/opentelemetry@8.55.0':
+    resolution: {integrity: sha512-UvatdmSr3Xf+4PLBzJNLZ2JjG1yAPWGe/VrJlJAqyTJ2gKeTzgXJJw8rp4pbvNZO8NaTGEYhhO+scLUj0UtLAQ==}
     engines: {node: '>=14.18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/core': ^1.25.1
-      '@opentelemetry/instrumentation': ^0.54.0
-      '@opentelemetry/sdk-trace-base': ^1.26.0
-      '@opentelemetry/semantic-conventions': ^1.27.0
+      '@opentelemetry/context-async-hooks': ^1.30.1
+      '@opentelemetry/core': ^1.30.1
+      '@opentelemetry/instrumentation': ^0.57.1
+      '@opentelemetry/sdk-trace-base': ^1.30.1
+      '@opentelemetry/semantic-conventions': ^1.28.0
 
-  '@sentry/svelte@8.38.0':
-    resolution: {integrity: sha512-Un6/5lovEwsmd5MMkUcF4HlWQAr5Fi95ZiRFkPBmFwUKrDwu8SJ36/LErtLyCI4fPdAlhQ8EJSSqX1DVJFfcrg==}
+  '@sentry/svelte@8.55.0':
+    resolution: {integrity: sha512-8xQ3RHOUq21f40LWn5eJEgg6rLQfZ+8oBdKLkg03b3SwvfdBs9CrlPkvhhmxdZZslmcGr6ewl0t5WT9ea8Ydlw==}
     engines: {node: '>=14.18'}
     peerDependencies:
       svelte: 3.x || 4.x || 5.x
 
-  '@sentry/sveltekit@8.38.0':
-    resolution: {integrity: sha512-AJDbELyzUfHcWkI9FajW7sDLkcD53s/q4kWgFLL3MjfCpEITNqj4XqiiWglPxDFl2wQd9y5YEhcFMhoNGhixyQ==}
+  '@sentry/sveltekit@8.55.0':
+    resolution: {integrity: sha512-fhjv4hn/y/4olSuZLBzQZbD20EcguIzgSYmarc8P/kn9ZVkO5onNDIqgDP0wmFrGVs5ihCPl/gGn9gXV0cXUjQ==}
     engines: {node: '>=16'}
     peerDependencies:
       '@sveltejs/kit': 1.x || 2.x
@@ -1217,59 +1201,68 @@ packages:
       vite:
         optional: true
 
-  '@sentry/types@8.38.0':
-    resolution: {integrity: sha512-fP5H9ZX01W4Z/EYctk3mkSHi7d06cLcX2/UWqwdWbyPWI+pL2QpUPICeO/C+8SnmYx//wFj3qWDhyPCh1PdFAA==}
-    engines: {node: '>=14.18'}
-
-  '@sentry/utils@8.38.0':
-    resolution: {integrity: sha512-3X7MgIKIx+2q5Al7QkhaRB4wV6DvzYsaeIwdqKUzGLuRjXmNgJrLoU87TAwQRmZ6Wr3IoEpThZZMNrzYPXxArw==}
-    engines: {node: '>=14.18'}
-
   '@sentry/vite-plugin@2.22.6':
     resolution: {integrity: sha512-zIieP1VLWQb3wUjFJlwOAoaaJygJhXeUoGd0e/Ha2RLb2eW2S+4gjf6y6NqyY71tZ74LYVZKg/4prB6FAZSMXQ==}
     engines: {node: '>= 14'}
 
-  '@sinclair/typebox@0.27.8':
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+  '@shikijs/core@1.29.2':
+    resolution: {integrity: sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==}
 
-  '@sinonjs/commons@3.0.1':
-    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
+  '@shikijs/engine-javascript@1.29.2':
+    resolution: {integrity: sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==}
 
-  '@sinonjs/fake-timers@10.3.0':
-    resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
+  '@shikijs/engine-oniguruma@1.29.2':
+    resolution: {integrity: sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==}
+
+  '@shikijs/langs@1.29.2':
+    resolution: {integrity: sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==}
+
+  '@shikijs/themes@1.29.2':
+    resolution: {integrity: sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==}
+
+  '@shikijs/types@1.29.2':
+    resolution: {integrity: sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
   '@stripe/stripe-js@3.5.0':
     resolution: {integrity: sha512-pKS3wZnJoL1iTyGBXAvCwduNNeghJHY6QSRSNNvpYnrrQrLZ6Owsazjyynu0e0ObRgks0i7Rv+pe2M7/MBTZpQ==}
     engines: {node: '>=12.16'}
 
-  '@sveltejs/adapter-static@3.0.6':
-    resolution: {integrity: sha512-MGJcesnJWj7FxDcB/GbrdYD3q24Uk0PIL4QIX149ku+hlJuj//nxUbb0HxUTpjkecWfHjVveSUnUaQWnPRXlpg==}
+  '@sveltejs/acorn-typescript@1.0.5':
+    resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
+    peerDependencies:
+      acorn: ^8.9.0
+
+  '@sveltejs/adapter-static@3.0.8':
+    resolution: {integrity: sha512-YaDrquRpZwfcXbnlDsSrBQNCChVOT9MGuSg+dMAyfsAa1SmiAhrA5jUYUiIMC59G92kIbY/AaQOWcBdq+lh+zg==}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/kit@2.8.1':
-    resolution: {integrity: sha512-uuOfFwZ4xvnfPsiTB6a4H1ljjTUksGhWnYq5X/Y9z4x5+3uM2Md8q/YVeHL+7w+mygAwoEFdgKZ8YkUuk+VKww==}
+  '@sveltejs/kit@2.20.2':
+    resolution: {integrity: sha512-Dv8TOAZC9vyfcAB9TMsvUEJsRbklRTeNfcYBPaeH6KnABJ99i3CvCB2eNx8fiiliIqe+9GIchBg4RodRH5p1BQ==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1
+      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1 || ^5.0.0
       svelte: ^4.0.0 || ^5.0.0-next.0
-      vite: ^5.0.3
+      vite: ^5.0.3 || ^6.0.0
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1':
+    resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.0
-      vite: ^5.0.0
+      '@sveltejs/vite-plugin-svelte': ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.0.0
 
-  '@sveltejs/vite-plugin-svelte@3.1.2':
-    resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@5.0.3':
+    resolution: {integrity: sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
-      vite: ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.0.0
 
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
@@ -1282,8 +1275,8 @@ packages:
     resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
-  '@testing-library/svelte@5.2.4':
-    resolution: {integrity: sha512-EFdy73+lULQgMJ1WolAymrxWWrPv9DWyDuDFKKlUip2PA/EXuHptzfYOKWljccFWDKhhGOu3dqNmoc2f/h/Ecg==}
+  '@testing-library/svelte@5.2.7':
+    resolution: {integrity: sha512-aGhUaFmEXEVost4QOsbHUUbHLwi7ZZRRxAHFDO2Cmr0BZD3/3+XvaYEPq70Rdw0NRNjdqZHdARBEcrCOkPuAqw==}
     engines: {node: '>= 10'}
     peerDependencies:
       svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
@@ -1295,31 +1288,15 @@ packages:
       vitest:
         optional: true
 
-  '@testing-library/user-event@14.5.2':
-    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@tootallnate/once@2.0.0':
-    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
-    engines: {node: '>= 10'}
-
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.6.8':
-    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.20.6':
-    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
-
   '@types/connect@3.4.36':
     resolution: {integrity: sha512-P63Zd/JUGq+PdrM1lv0Wv5SBYeA2+CORvbrXbngriYY0jzLUWfQMQQxOhjONEz/wlHOAxOdY7CY65rgQdTjq2w==}
 
@@ -1329,29 +1306,29 @@ packages:
   '@types/deep-equal@1.0.4':
     resolution: {integrity: sha512-tqdiS4otQP4KmY0PR3u6KbZ5EWvhNdUoS/jc93UuK23C220lOZ/9TvjfxdPcKvqwwDVtmtSCrnr0p/2dirAxkA==}
 
-  '@types/dlv@1.1.4':
-    resolution: {integrity: sha512-m8KmImw4Jt+4rIgupwfivrWEOnj1LzkmKkqbh075uG13eTQ1ZxHWT6T0vIdSQhLIjQCiR0n0lZdtyDOPO1x2Mw==}
+  '@types/dlv@1.1.5':
+    resolution: {integrity: sha512-JHOWNfiWepAhfwlSw17kiWrWrk6od2dEQgHltJw9AS0JPFoLZJBge5+Dnil2NfdjAvJ/+vGSX60/BRW20PpUXw==}
 
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
-  '@types/graceful-fs@4.1.9':
-    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
+  '@types/estree@1.0.7':
+    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
-  '@types/istanbul-lib-coverage@2.0.6':
-    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
-  '@types/istanbul-lib-report@3.0.3':
-    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/istanbul-reports@3.0.4':
-    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
   '@types/mysql@2.15.26':
     resolution: {integrity: sha512-DSLCOXhkvfS5WNNPbfn2KdICAmk8lLc+/PNvnPnF7gOdMZCxopXduqv0OQ13y/yA/zXTSikZZqVgybUxOEg6YQ==}
 
-  '@types/node@22.9.0':
-    resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
+  '@types/node@22.13.14':
+    resolution: {integrity: sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==}
 
   '@types/pg-pool@2.0.6':
     resolution: {integrity: sha512-TaAUE5rq2VQYxab5Ts7WZhKNmuN78Q6PiFonTDdpbx8a1H0M1vhy3rhiMjl+e2iHmogyMw7jZF4FrE6eJUy5HQ==}
@@ -1362,8 +1339,11 @@ packages:
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
-  '@types/pug@2.0.10':
-    resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
+  '@types/prop-types@15.7.14':
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+
+  '@types/react@18.3.20':
+    resolution: {integrity: sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==}
 
   '@types/remarkable@2.0.8':
     resolution: {integrity: sha512-eKXqPZfpQl1kOADjdKchHrp2gwn9qMnGXhH/AtZe0UrklzhGJkawJo/Y/D0AlWcdWoWamFNIum8+/nkAISQVGg==}
@@ -1371,105 +1351,171 @@ packages:
   '@types/shimmer@1.2.0':
     resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}
 
-  '@types/stack-utils@2.0.3':
-    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
-
   '@types/tedious@4.0.14':
     resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
 
-  '@types/yargs-parser@21.0.3':
-    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@types/yargs@17.0.33':
-    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
-
-  '@typescript-eslint/eslint-plugin@7.18.0':
-    resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/eslint-plugin@8.28.0':
+    resolution: {integrity: sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.56.0
-      typescript: '*'
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/eslint-plugin@8.30.1':
+    resolution: {integrity: sha512-v+VWphxMjn+1t48/jO4t950D6KR8JaJuNXzi33Ve6P8sEmPr5k6CEXjdGwT6+LodVnEa91EQCtwjWNUCPweo+Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/parser@8.28.0':
+    resolution: {integrity: sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/parser@8.30.1':
+    resolution: {integrity: sha512-H+vqmWwT5xoNrXqWs/fesmssOW70gxFlgcMlYcBaWNPIEWDgLa4W9nkSPmhuOgLnXq9QYgkZ31fhDyLhleCsAg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/scope-manager@8.28.0':
+    resolution: {integrity: sha512-u2oITX3BJwzWCapoZ/pXw6BCOl8rJP4Ij/3wPoGvY8XwvXflOzd1kLrDUUUAIEdJSFh+ASwdTHqtan9xSg8buw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/scope-manager@8.30.1':
+    resolution: {integrity: sha512-+C0B6ChFXZkuaNDl73FJxRYT0G7ufVPOSQkqkpM/U198wUwUFOtgo1k/QzFh1KjpBitaK7R1tgjVz6o9HmsRPg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/type-utils@8.28.0':
+    resolution: {integrity: sha512-oRoXu2v0Rsy/VoOGhtWrOKDiIehvI+YNrDk5Oqj40Mwm0Yt01FC/Q7nFqg088d3yAsR1ZcZFVfPCTTFCe/KPwg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/type-utils@8.30.1':
+    resolution: {integrity: sha512-64uBF76bfQiJyHgZISC7vcNz3adqQKIccVoKubyQcOnNcdJBvYOILV1v22Qhsw3tw3VQu5ll8ND6hycgAR5fEA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/types@8.28.0':
+    resolution: {integrity: sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/types@8.30.1':
+    resolution: {integrity: sha512-81KawPfkuulyWo5QdyG/LOKbspyyiW+p4vpn4bYO7DM/hZImlVnFwrpCTnmNMOt8CvLRr5ojI9nU1Ekpw4RcEw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.28.0':
+    resolution: {integrity: sha512-H74nHEeBGeklctAVUvmDkxB1mk+PAZ9FiOMPFncdqeRBXxk1lWSYraHw8V12b7aa6Sg9HOBNbGdSHobBPuQSuA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/typescript-estree@8.30.1':
+    resolution: {integrity: sha512-kQQnxymiUy9tTb1F2uep9W6aBiYODgq5EMSk6Nxh4Z+BDUoYUSa029ISs5zTzKBFnexQEh71KqwjKnRz58lusQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/utils@8.28.0':
+    resolution: {integrity: sha512-OELa9hbTYciYITqgurT1u/SzpQVtDLmQMFzy/N8pQE+tefOyCWT79jHsav294aTqV1q1u+VzqDGbuujvRYaeSQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/utils@8.30.1':
+    resolution: {integrity: sha512-T/8q4R9En2tcEsWPQgB5BQ0XJVOtfARcUvOa8yJP3fh9M/mXraLxZrkCfGb6ChrO/V3W+Xbd04RacUEqk1CFEQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/visitor-keys@8.28.0':
+    resolution: {integrity: sha512-hbn8SZ8w4u2pRwgQ1GlUrPKE+t2XvcCW5tTRF7j6SMYIuYG37XuzIW44JCZPa36evi0Oy2SnM664BlIaAuQcvg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/visitor-keys@8.30.1':
+    resolution: {integrity: sha512-aEhgas7aJ6vZnNFC7K4/vMGDGyOiqWcYZPpIWrTKuTAlsvDNKy2GFDqh9smL+iq069ZvR0YzEeq0B8NJlLzjFA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@vitest/expect@3.0.9':
+    resolution: {integrity: sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==}
+
+  '@vitest/mocker@3.0.9':
+    resolution: {integrity: sha512-ryERPIBOnvevAkTq+L1lD+DTFBRcjueL9lOUfXsLfwP92h4e+Heb+PjiqS3/OURWPtywfafK0kj++yDFjWUmrA==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
-      typescript:
+      msw:
+        optional: true
+      vite:
         optional: true
 
-  '@typescript-eslint/parser@7.18.0':
-    resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@vitest/pretty-format@3.0.9':
+    resolution: {integrity: sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==}
+
+  '@vitest/runner@3.0.9':
+    resolution: {integrity: sha512-NX9oUXgF9HPfJSwl8tUZCMP1oGx2+Sf+ru6d05QjzQz4OwWg0psEzwY6VexP2tTHWdOkhKHUIZH+fS6nA7jfOw==}
+
+  '@vitest/snapshot@3.0.9':
+    resolution: {integrity: sha512-AiLUiuZ0FuA+/8i19mTYd+re5jqjEc2jZbgJ2up0VY0Ddyyxg/uUtBDpIFAy4uzKaQxOW8gMgBdAJJ2ydhu39A==}
+
+  '@vitest/spy@3.0.9':
+    resolution: {integrity: sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==}
+
+  '@vitest/ui@3.0.9':
+    resolution: {integrity: sha512-FpZD4aIv/qNpwkV3XbLV6xldWFHMgoNWAJEgg5GmpObmAOLAErpYjew9dDwXdYdKOS3iZRKdwI+P3JOJcYeUBg==}
     peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      vitest: 3.0.9
 
-  '@typescript-eslint/scope-manager@7.18.0':
-    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@vitest/utils@3.0.9':
+    resolution: {integrity: sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==}
 
-  '@typescript-eslint/type-utils@7.18.0':
-    resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
     peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      vue: 3.5.13
 
-  '@typescript-eslint/types@7.18.0':
-    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/typescript-estree@7.18.0':
-    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/utils@7.18.0':
-    resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-
-  '@typescript-eslint/visitor-keys@7.18.0':
-    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-
-  '@vitest/expect@1.6.1':
-    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
-
-  '@vitest/runner@1.6.1':
-    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
-
-  '@vitest/snapshot@1.6.1':
-    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
-
-  '@vitest/spy@1.6.1':
-    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
-
-  '@vitest/ui@1.6.0':
-    resolution: {integrity: sha512-k3Lyo+ONLOgylctiGovRKy7V4+dIN2yxstX3eY5cWFXH6WP+ooVX79YSyi0GagdTQzLmT43BF27T0s6dOIPBXA==}
-    peerDependencies:
-      vitest: 1.6.0
-
-  '@vitest/utils@1.6.0':
-    resolution: {integrity: sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==}
-
-  '@vitest/utils@1.6.1':
-    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
-
-  abab@2.0.6:
-    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    deprecated: Use your platform's native atob() and btoa() methods instead
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
@@ -1481,12 +1527,8 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@8.3.4:
-    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
-    engines: {node: '>=0.4.0'}
-
-  acorn@8.14.0:
-    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+  acorn@8.14.1:
+    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -1494,20 +1536,38 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
 
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
+
+  ai@2.2.37:
+    resolution: {integrity: sha512-JIYm5N1muGVqBqWnvkt29FmXhESoO5TcDxw74OE41SsM+uIou6NPDDs0XWb/ABcd1gmp6k5zym64KWMPM2xm0A==}
+    engines: {node: '>=14.6'}
+    peerDependencies:
+      react: ^18.2.0
+      solid-js: ^1.7.7
+      svelte: ^3.0.0 || ^4.0.0
+      vue: ^3.3.4
+    peerDependenciesMeta:
+      react:
+        optional: true
+      solid-js:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
-  analytics-utils@1.0.12:
-    resolution: {integrity: sha512-WvV2YWgsnXLxaY0QYux0crpBAg/0JA763NmbMVz22jKhMPo7dpTBet8G2IlF7ixTjLDzGlkHk1ZaKqqQmjJ+4w==}
+  analytics-utils@1.0.14:
+    resolution: {integrity: sha512-9v0kPd8v0GuBvfQcg5BO48AElaEAr9IXMAfJWXYMAhrD3QprgozEIUgMp/de0vS136PUOBB+10XQH9eBgBmfMw==}
     peerDependencies:
       '@types/dlv': ^1.0.0
 
-  analytics@0.8.14:
-    resolution: {integrity: sha512-ZKpqWHEHBrN0lvIsrUKmt0fcXNyQuKa0JUWDRAz7LgJ+Sf4ZX+a66/ai28W4H8kJJlLeItCrhIi/xvdbV08RlA==}
-
-  ansi-escapes@4.3.2:
-    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
-    engines: {node: '>=8'}
+  analytics@0.8.16:
+    resolution: {integrity: sha512-LEFQ47G9V1zVp9WIh2xhnbmSFEJq+WEzSv6voJ5uba88lefiIIYeG2nq87gFu83ocz1qtb9u7XgeaKKVBbbgWA==}
 
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
@@ -1521,6 +1581,9 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  ansicolor@2.0.3:
+    resolution: {integrity: sha512-pzusTqk9VHrjgMCcTPDTTvfJfx6Q3+L5tQ6yKC8Diexmoit4YROTFIkxFvRTNL9y5s0Q8HrSrgerCD5bIC+Kiw==}
+
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -1538,16 +1601,13 @@ packages:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
-  array-buffer-byte-length@1.0.1:
-    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-
-  assertion-error@1.1.0:
-    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
 
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
@@ -1567,31 +1627,6 @@ packages:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
-  babel-jest@29.7.0:
-    resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@babel/core': ^7.8.0
-
-  babel-plugin-istanbul@6.1.1:
-    resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
-    engines: {node: '>=8'}
-
-  babel-plugin-jest-hoist@29.6.3:
-    resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  babel-preset-current-node-syntax@1.1.0:
-    resolution: {integrity: sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  babel-preset-jest@29.6.3:
-    resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1609,47 +1644,40 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.24.2:
-    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
+  browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  bser@2.1.1:
-    resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
-
-  buffer-crc32@1.0.0:
-    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
-    engines: {node: '>=8.0.0'}
-
-  buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
-
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  call-bind@1.0.7:
-    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
+  caniuse-lite@1.0.30001707:
+    resolution: {integrity: sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==}
 
-  camelcase@6.3.0:
-    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
-    engines: {node: '>=10'}
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  caniuse-lite@1.0.30001680:
-    resolution: {integrity: sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==}
-
-  chai@4.5.0:
-    resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
-    engines: {node: '>=4'}
+  chai@5.2.0:
+    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
+    engines: {node: '>=12'}
 
   chalk@3.0.0:
     resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
@@ -1659,42 +1687,34 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  char-regex@1.0.2:
-    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
-    engines: {node: '>=10'}
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
-  check-error@1.0.3:
-    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
 
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
-  chokidar@4.0.1:
-    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
-  ci-info@3.9.0:
-    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
-    engines: {node: '>=8'}
+  cjs-module-lexer@1.4.3:
+    resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
 
-  cjs-module-lexer@1.4.1:
-    resolution: {integrity: sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==}
-
-  cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
-
-  co@4.6.0:
-    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
-    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
 
   code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
-  collect-v8-coverage@1.0.2:
-    resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1706,12 +1726,16 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  confbox@0.1.8:
-    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1719,11 +1743,6 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
-  create-jest@29.7.0:
-    resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    hasBin: true
-
   cron-parser@4.9.0:
     resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
     engines: {node: '>=12.0.0'}
@@ -1744,19 +1763,149 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssstyle@3.0.0:
-    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
-    engines: {node: '>=14'}
+  cssstyle@4.3.0:
+    resolution: {integrity: sha512-6r0NiY0xizYqfBvWp1G7WXJ06/bZyrk7Dc6PHql82C/pKGUTKu4yAX4Y8JPamb1ob9nBKuxWzCGTRuGwU3yxJQ==}
+    engines: {node: '>=18'}
 
-  data-urls@4.0.0:
-    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
-    engines: {node: '>=14'}
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
 
   dayjs@1.11.13:
     resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
-  debug@4.3.7:
-    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -1764,19 +1913,11 @@ packages:
       supports-color:
         optional: true
 
-  decimal.js@10.4.3:
-    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+  decimal.js@10.5.0:
+    resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
-  dedent@1.5.3:
-    resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==}
-    peerDependencies:
-      babel-plugin-macros: ^3.1.0
-    peerDependenciesMeta:
-      babel-plugin-macros:
-        optional: true
-
-  deep-eql@4.1.4:
-    resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
   deep-equal@2.2.3:
@@ -1798,6 +1939,9 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -1806,79 +1950,49 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
-  detect-indent@6.1.0:
-    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
-    engines: {node: '>=8'}
-
   detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
     hasBin: true
 
-  detect-newline@3.1.0:
-    resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
-    engines: {node: '>=8'}
-
   devalue@5.1.1:
     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
-  diff-sequences@29.6.3:
-    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
-  domexception@4.0.0:
-    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
-    engines: {node: '>=12'}
-    deprecated: Use your platform's native DOMException instead
-
-  dotenv@16.4.5:
-    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
-  echarts@5.5.1:
-    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
 
-  electron-to-chromium@1.5.63:
-    resolution: {integrity: sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==}
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
 
-  emittery@0.13.1:
-    resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
-    engines: {node: '>=12'}
+  electron-to-chromium@1.5.128:
+    resolution: {integrity: sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ==}
 
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  envfile@7.1.0:
-    resolution: {integrity: sha512-dyH4QnnZsArCLhPASr29eqBWDvKpq0GggQFTmysTT/S9TTmt1JrEKNvTBc09Cd7ujVZQful2HBGRMe2agu7Krg==}
-    engines: {node: '>=8'}
-    hasBin: true
-
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
-
-  es-define-property@1.0.0:
-    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
 
   es-errors@1.3.0:
@@ -1888,68 +2002,80 @@ packages:
   es-get-iterator@1.1.3:
     resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
 
-  es6-promise@3.3.1:
-    resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
 
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  esbuild@0.25.1:
+    resolution: {integrity: sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==}
+    engines: {node: '>=18'}
     hasBin: true
 
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
-  escape-string-regexp@2.0.0:
-    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
-    engines: {node: '>=8'}
-
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-compat-utils@0.5.1:
-    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+  eslint-compat-utils@0.6.4:
+    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
 
-  eslint-config-prettier@9.1.0:
-    resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
+  eslint-config-prettier@10.1.1:
+    resolution: {integrity: sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-plugin-svelte@2.46.0:
-    resolution: {integrity: sha512-1A7iEMkzmCZ9/Iz+EAfOGYL8IoIG6zeKEq1SmpxGeM5SXmoQq+ZNnCpXFVJpsxPWYx8jIVGMerQMzX20cqUl0g==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  eslint-plugin-svelte@3.3.3:
+    resolution: {integrity: sha512-imzGqIgWbfsb/CR14d3k3M8MiVNGet+l9mjPhvo1Rm0Nxi0rNn4/eELqyR8FWlgKBMlGkOp2kshRJm0xpxNfHQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
+      eslint: ^8.57.1 || ^9.0.0
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-scope@8.3.0:
+    resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint@8.57.1:
-    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.23.0:
+    resolution: {integrity: sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
 
-  esm-env@1.1.4:
-    resolution: {integrity: sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==}
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
 
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
@@ -1960,6 +2086,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.4.5:
+    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -1968,6 +2097,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -1975,31 +2107,23 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  eventsource-parser@1.0.0:
+    resolution: {integrity: sha512-9jgfSCa3dmEme2ES3mPByGXfgZ87VbP97tng1G2nWwWx6bV2nYxm2AWCrbQjXToSe+yYlqaZNtxffR9IeQr95g==}
+    engines: {node: '>=14.18'}
+
   eventsource-parser@3.0.0:
     resolution: {integrity: sha512-T1C0XCUimhxVQzW4zFipdx0SficT651NnkR0ZSH3yQwh+mFMdLfgjABVi4YtMTtaL4s168593DaoaRLMqryavA==}
     engines: {node: '>=18.0.0'}
 
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
-
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
-
-  exit@0.1.2:
-    resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
-    engines: {node: '>= 0.8.0'}
-
-  expect@29.7.0:
-    resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+  expect-type@1.2.0:
+    resolution: {integrity: sha512-80F22aiJ3GLyVnS/B3HzgR6RelZVumzj9jkL0Rhz4h0xYbNW9PjlQz5h3J/SShErbXBc295vseR4/MIbVmUbeA==}
+    engines: {node: '>=12.0.0'}
 
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
   fast-json-stable-stringify@2.1.0:
@@ -2008,48 +2132,56 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
-  fb-watchman@2.0.2:
-    resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
 
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
-  flatted@3.3.2:
-    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  focus-trap@7.6.2:
-    resolution: {integrity: sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==}
+  focus-trap@7.6.4:
+    resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
 
-  for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
 
-  form-data@4.0.1:
-    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
     engines: {node: '>= 6'}
 
+  forwarded-parse@2.1.2:
+    resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
+
+  framesync@6.1.2:
+    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -2069,32 +2201,21 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
+    engines: {node: '>=10'}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-
-  get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-
-  get-intrinsic@1.2.4:
-    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  get-package-type@0.1.0:
-    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
-    engines: {node: '>=8.0.0'}
-
-  get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
 
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
@@ -2104,10 +2225,6 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   glob@9.3.5:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2116,31 +2233,30 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@16.0.0:
+    resolution: {integrity: sha512-iInW14XItCXET01CQFqudPOWP2jYMl7T+QRQT+UNcR/iQncN/F0UNpgd76iFkBPgNQb4+X3LV9tLJYzwh+Gl3A==}
+    engines: {node: '>=18'}
 
   globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
-  gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
 
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
 
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -2149,12 +2265,8 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  has-proto@1.0.3:
-    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
-    engines: {node: '>= 0.4'}
-
-  has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
 
   has-tostringtag@1.0.2:
@@ -2165,28 +2277,33 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  html-encoding-sniffer@3.0.0:
-    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
-    engines: {node: '>=12'}
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
-  html-escaper@2.0.2:
-    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
-  http-proxy-agent@5.0.0:
-    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
-    engines: {node: '>= 6'}
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
 
   https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
 
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
 
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
@@ -2196,20 +2313,19 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  immutable@5.0.2:
-    resolution: {integrity: sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==}
+  ignore@6.0.2:
+    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
+    engines: {node: '>= 4'}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+  immutable@5.1.1:
+    resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-in-the-middle@1.11.2:
-    resolution: {integrity: sha512-gK6Rr6EykBcc6cVWRSBR5TWf8nn6hZMYSRYqCcHa0l0d1fPK7JSYo6+Mlmck76jIX9aL/IZ71c06U2VpFwl1zA==}
-
-  import-local@3.2.0:
-    resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
-    engines: {node: '>=8'}
-    hasBin: true
+  import-in-the-middle@1.13.1:
+    resolution: {integrity: sha512-k2V9wNm9B+ysuelDTHjI9d5KPc4l8zAZTGqj+pcynvWkypZd857ryzN8jNC7Pg2YZXNMJcHRPpaDyCBbNyVRpA==}
 
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
@@ -2222,63 +2338,50 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-
-  internal-slot@1.0.7:
-    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
-  is-arguments@1.1.1:
-    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-arguments@1.2.0:
+    resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
     engines: {node: '>= 0.4'}
 
-  is-array-buffer@3.0.4:
-    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
 
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
-  is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
 
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
 
   is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
-  is-core-module@2.15.1:
-    resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
 
-  is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
-  is-generator-fn@2.1.0:
-    resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
-    engines: {node: '>=6'}
-
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -2287,58 +2390,46 @@ packages:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
 
-  is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
 
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
-  is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
   is-set@2.0.3:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
 
-  is-shared-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
-  is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
 
-  is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
     engines: {node: '>= 0.4'}
 
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
 
-  is-weakset@2.0.3:
-    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
   isarray@2.0.5:
@@ -2347,193 +2438,30 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  istanbul-lib-coverage@3.2.2:
-    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
-    engines: {node: '>=8'}
-
-  istanbul-lib-instrument@5.2.1:
-    resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
-    engines: {node: '>=8'}
-
-  istanbul-lib-instrument@6.0.3:
-    resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==}
-    engines: {node: '>=10'}
-
-  istanbul-lib-report@3.0.1:
-    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
-    engines: {node: '>=10'}
-
-  istanbul-lib-source-maps@4.0.1:
-    resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
-    engines: {node: '>=10'}
-
-  istanbul-reports@3.1.7:
-    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
-    engines: {node: '>=8'}
-
-  jest-changed-files@29.7.0:
-    resolution: {integrity: sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-circus@29.7.0:
-    resolution: {integrity: sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-cli@29.7.0:
-    resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    hasBin: true
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-
-  jest-config@29.7.0:
-    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@types/node': '*'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      ts-node:
-        optional: true
-
-  jest-diff@29.7.0:
-    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-docblock@29.7.0:
-    resolution: {integrity: sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-each@29.7.0:
-    resolution: {integrity: sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-environment-node@29.7.0:
-    resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-get-type@29.6.3:
-    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-haste-map@29.7.0:
-    resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-leak-detector@29.7.0:
-    resolution: {integrity: sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-matcher-utils@29.7.0:
-    resolution: {integrity: sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-message-util@29.7.0:
-    resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-mock@29.7.0:
-    resolution: {integrity: sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-pnp-resolver@1.2.3:
-    resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
-    engines: {node: '>=6'}
-    peerDependencies:
-      jest-resolve: '*'
-    peerDependenciesMeta:
-      jest-resolve:
-        optional: true
-
-  jest-regex-util@29.6.3:
-    resolution: {integrity: sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-resolve-dependencies@29.7.0:
-    resolution: {integrity: sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-resolve@29.7.0:
-    resolution: {integrity: sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-runner@29.7.0:
-    resolution: {integrity: sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-runtime@29.7.0:
-    resolution: {integrity: sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-snapshot@29.7.0:
-    resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-util@29.7.0:
-    resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-validate@29.7.0:
-    resolution: {integrity: sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-watcher@29.7.0:
-    resolution: {integrity: sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-worker@29.7.0:
-    resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest@29.7.0:
-    resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    hasBin: true
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-tokens@9.0.0:
-    resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==}
-
-  js-yaml@3.14.1:
-    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
-    hasBin: true
-
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsdom@22.1.0:
-    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
-    engines: {node: '>=16'}
+  jsdom@26.0.0:
+    resolution: {integrity: sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw==}
+    engines: {node: '>=18'}
     peerDependencies:
-      canvas: ^2.5.0
+      canvas: ^3.0.0
     peerDependenciesMeta:
       canvas:
         optional: true
 
-  jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
     hasBin: true
 
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -2551,10 +2479,6 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  kleur@3.0.3:
-    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
-    engines: {node: '>=6'}
-
   kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -2562,10 +2486,6 @@ packages:
   known-css-properties@0.35.0:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
 
-  leven@3.1.0:
-    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
-    engines: {node: '>=6'}
-
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2574,20 +2494,9 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
-  local-pkg@0.5.0:
-    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
-    engines: {node: '>=14'}
-
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
-
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2598,8 +2507,12 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  loupe@2.3.7:
-    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  loupe@3.1.3:
+    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
@@ -2607,16 +2520,16 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  luxon@3.5.0:
-    resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
+  luxon@3.6.0:
+    resolution: {integrity: sha512-WE7p0p7W1xji9qxkLYsvcIxZyfP48GuFrWIBQZIsbjCyf65dG1rv4n83HcOyEyhvzxJCrUoObCRNFgRNIQ5KNA==}
     engines: {node: '>=12'}
 
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-string@0.30.13:
-    resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
   magic-string@0.30.7:
     resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
@@ -2629,23 +2542,35 @@ packages:
   magicast@0.2.8:
     resolution: {integrity: sha512-zEnqeb3E6TfMKYXGyHv3utbuHNixr04o3/gVGviSzVQkbFiU46VZUd+Ea/1npKfvEsEWxBYuIksKzoztTDPg0A==}
 
-  make-dir@4.0.0:
-    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
-    engines: {node: '>=10'}
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
 
-  makeerror@1.0.12:
-    resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -2658,14 +2583,6 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-
-  mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -2692,13 +2609,6 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  mkdirp@0.5.6:
-    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
-    hasBin: true
-
-  mlly@1.7.3:
-    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
-
   module-details-from-path@1.0.3:
     resolution: {integrity: sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==}
 
@@ -2706,28 +2616,31 @@ packages:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
-  mrmime@2.0.0:
-    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
 
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@3.3.9:
-    resolution: {integrity: sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==}
+  nanoid@3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.0.8:
-    resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
+  nanoid@5.1.5:
+    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
     engines: {node: ^18 || >=20}
     hasBin: true
 
+  nanotar@0.1.1:
+    resolution: {integrity: sha512-AiJsGsSF3O0havL1BydvI4+wR76sKT+okKRwWIaK96cZUnXqH0uNBOsHlbwZq3+m2BR1VKqHDVudl3gO4mYjpQ==}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -2743,11 +2656,8 @@ packages:
       encoding:
         optional: true
 
-  node-int64@0.4.0:
-    resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
-
-  node-releases@2.0.18:
-    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -2756,19 +2666,11 @@ packages:
   normalize.css@8.0.1:
     resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
 
-  npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
+  nwsapi@2.2.20:
+    resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
 
-  npm-run-path@5.3.0:
-    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  nwsapi@2.2.13:
-    resolution: {integrity: sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==}
-
-  object-inspect@1.13.3:
-    resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
   object-is@1.1.6:
@@ -2779,57 +2681,29 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  object.assign@4.1.5:
-    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
-  onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
+  oniguruma-to-es@2.3.0:
+    resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==}
 
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
-
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@5.0.0:
-    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
-    engines: {node: '>=18'}
-
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
-
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
   parse5@7.2.1:
     resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
 
@@ -2837,18 +2711,10 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -2856,15 +2722,12 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
-  pathval@1.1.1:
-    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
 
   periscopic@3.1.0:
     resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
@@ -2873,8 +2736,8 @@ packages:
     resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
     engines: {node: '>=4.0.0'}
 
-  pg-protocol@1.7.0:
-    resolution: {integrity: sha512-hTK/mE36i8fDDhgDFjy6xNOG+LCorxLG3WO17tku+ij6sVHXh1jQUJ8hYAnRhNla4QVD2H8er/FOjc/+EgC6yQ==}
+  pg-protocol@1.8.0:
+    resolution: {integrity: sha512-jvuYlEkL03NRvOoyoRktBK7+qU5kOvlAwvmrH8sr3wbLrOdVWsRxQfz8mMy9sZFsqJ1hEWNfdWKI4SAmoL+j7g==}
 
   pg-types@2.2.0:
     resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
@@ -2887,33 +2750,29 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
-  pkg-dir@4.2.0:
-    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
-    engines: {node: '>=8'}
-
-  pkg-types@1.2.1:
-    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
 
   plausible-tracker@0.3.9:
     resolution: {integrity: sha512-hMhneYm3GCPyQon88SZrVJx+LlqhM1kZFQbuAgXPoh/Az2YvO1B6bitT9qlhpiTdJlsT5lsr3gPmzoVjb5CDXA==}
     engines: {node: '>=10'}
 
-  playwright-core@1.49.0:
-    resolution: {integrity: sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==}
+  playwright-core@1.51.1:
+    resolution: {integrity: sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.49.0:
-    resolution: {integrity: sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==}
+  playwright@1.51.1:
+    resolution: {integrity: sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==}
     engines: {node: '>=18'}
     hasBin: true
 
-  possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+  popmotion@11.0.5:
+    resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
   postcss-load-config@3.1.4:
@@ -2928,11 +2787,11 @@ packages:
       ts-node:
         optional: true
 
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.4.31
 
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
@@ -2940,12 +2799,12 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
-  postcss@8.4.49:
-    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
   postgres-array@2.0.0:
@@ -2968,14 +2827,14 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-svelte@3.2.8:
-    resolution: {integrity: sha512-PAHmmU5cGZdnhW4mWhmvxuG2PVbbHIxUuPOdUKvfE+d4Qt2d29iU5VWrPdsaW5YqVEE0nqhlvN4eoKmVMpIF3Q==}
+  prettier-plugin-svelte@3.3.3:
+    resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
 
-  prettier@3.3.3:
-    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -2987,57 +2846,49 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  prismjs@1.29.0:
-    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
 
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
 
-  prompts@2.4.2:
-    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
-    engines: {node: '>= 6'}
+  property-information@7.0.0:
+    resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
 
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  psl@1.10.0:
-    resolution: {integrity: sha512-KSKHEbjAnpUuAUserOq0FxGXCUrzC3WniuSJhvdbs102rL55266ZcHBqLWOsG30spQMlPdpy7icATiAQehg/iA==}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  pure-rand@6.1.0:
-    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
-
-  querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
 
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.2:
-    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
-    engines: {node: '>= 14.16.0'}
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
 
-  recast@0.23.9:
-    resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==}
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
 
   redent@3.0.0:
@@ -3047,8 +2898,17 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
-  regexp.prototype.flags@1.5.3:
-    resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==}
+  regex-recursion@5.1.1:
+    resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@5.1.1:
+    resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
   remarkable@2.0.1:
@@ -3056,74 +2916,53 @@ packages:
     engines: {node: '>= 6.0.0'}
     hasBin: true
 
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
-  require-in-the-middle@7.4.0:
-    resolution: {integrity: sha512-X34iHADNbNDfr6OTStIAHWSAvvKQRYgLO6duASaVf7J2VA3lvmNYboAHOuLC2huav1IwgZJtyEcJCKVzFxOSMQ==}
+  require-in-the-middle@7.5.2:
+    resolution: {integrity: sha512-gAZ+kLqBdHarXB64XpAe2VCjB7rIRv+mU8tfRWziHRJ5umKsIHN2tLLv6EtMw7WCdP19S0ERVMldNvxYCHnhSQ==}
     engines: {node: '>=8.6.0'}
 
-  requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-
-  resolve-cwd@3.0.0:
-    resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
-    engines: {node: '>=8'}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
-  resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
-
-  resolve.exports@2.0.2:
-    resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==}
-    engines: {node: '>=10'}
-
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
     hasBin: true
 
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rimraf@2.7.1:
-    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
-  rollup@4.27.3:
-    resolution: {integrity: sha512-SLsCOnlmGt9VoZ9Ek8yBK8tAdmPHeppkw+Xa7yDlCEhDTvwYei03JlWo1fdc7YTfLZ4tD8riJCUyAgTbszk1fQ==}
+  rollup@4.37.0:
+    resolution: {integrity: sha512-iAtQy/L4QFU+rTJ1YUjXqJOJzuwEghqWzCEYD2FEghT7Gsy1VdABntrO4CLopA5IkflTyqNiLNwPcOJ3S7UKLg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rrweb-cssom@0.6.0:
-    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
 
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sander@0.5.1:
-    resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
-
-  sass@1.81.0:
-    resolution: {integrity: sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==}
+  sass@1.86.0:
+    resolution: {integrity: sha512-zV8vGUld/+mP4KbMLJMX7TyGCuUp7hnkOScgCMsWuHtns8CWBoz+vmEhoGMXsaJrbUP8gj+F1dLvVe79sK8UdA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -3131,6 +2970,9 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
   secure-json-parse@2.7.0:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
 
@@ -3138,11 +2980,21 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.6.3:
-    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+  semver@7.7.1:
+    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
     hasBin: true
 
+  seroval-plugins@1.2.1:
+    resolution: {integrity: sha512-H5vs53+39+x4Udwp4J5rNZfgFuA+Lt+uU+09w1gYBVWomtAl98B+E9w7yC05Xc81/HgLvJdlyqJbU0fJCKCmdw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.2.1:
+    resolution: {integrity: sha512-yBxFFs3zmkvKNmR0pFSU//rIsYjuX418TnlDmc2weaq5XFDqDIV/NOMPBoLrbxjLH42p4UzRuXHryXh9dYcKcw==}
+    engines: {node: '>=10'}
+
   set-cookie-parser@2.7.1:
     resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
@@ -3162,41 +3014,44 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@1.29.2:
+    resolution: {integrity: sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==}
+
   shimmer@1.2.1:
     resolution: {integrity: sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==}
 
-  side-channel@1.0.6:
-    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
-  sirv@2.0.4:
-    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
-    engines: {node: '>= 10'}
-
-  sirv@3.0.0:
-    resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
+  sirv@3.0.1:
+    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
     engines: {node: '>=18'}
 
-  sisteransi@1.0.5:
-    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+  solid-js@1.9.5:
+    resolution: {integrity: sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw==}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
-  sorcery@0.11.1:
-    resolution: {integrity: sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==}
-    hasBin: true
+  solid-swr-store@0.10.7:
+    resolution: {integrity: sha512-A6d68aJmRP471aWqKKPE2tpgOiR5fH4qXQNfKIec+Vap+MGQm3tvXlT8n0I8UgJSlNAsSAUuw2VTviH2h3Vv5g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      solid-js: ^1.2
+      swr-store: ^0.10
 
   sorcery@1.0.0:
     resolution: {integrity: sha512-5ay9oJE+7sNmhzl3YNG18jEEEf4AOQCM/FAqR5wMmzqd1FtRorFbJXn3w3SKOhbiQaVgHM+Q1lszZspjri7bpA==}
@@ -3206,53 +3061,33 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map-support@0.5.13:
-    resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
-
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
-  stack-utils@2.0.6:
-    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
-    engines: {node: '>=10'}
+  sswr@2.0.0:
+    resolution: {integrity: sha512-mV0kkeBHcjcb0M5NqKtKVg/uTIYNlIIniyDfSGrSfxpEdM9C365jK0z55pl9K0xAkNTJi2OAOVFQpgMPUk+V0w==}
+    peerDependencies:
+      svelte: ^4.0.0
 
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.8.0:
-    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
+  std-env@3.8.1:
+    resolution: {integrity: sha512-vj5lIj3Mwf9D79hBkltk5qmkFI+biIKWS2IBxEyEU3AX1tUf7AoL8nSazCOiiqQsGKIq01SClsKEzweu34uwvA==}
 
-  stop-iteration-iterator@1.0.0:
-    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  string-length@4.0.2:
-    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
-    engines: {node: '>=10'}
-
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-
-  strip-bom@4.0.0:
-    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
-    engines: {node: '>=8'}
-
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
-  strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
@@ -3262,90 +3097,43 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  strip-literal@2.1.0:
-    resolution: {integrity: sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==}
+  style-value-types@5.1.2:
+    resolution: {integrity: sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==}
 
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  supports-color@8.1.1:
-    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
-    engines: {node: '>=10'}
-
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-check@3.8.6:
-    resolution: {integrity: sha512-ij0u4Lw/sOTREP13BdWZjiXD/BlHE6/e2e34XzmVmsp5IN4kVa3PWP65NM32JAgwjZlwBg/+JtiNV1MM8khu0Q==}
+  svelte-check@4.1.5:
+    resolution: {integrity: sha512-Gb0T2IqBNe1tLB9EB1Qh+LOe+JB8wt2/rNBDGvkxQVvk8vNeAoG+vZgFB/3P5+zC7RWlyBlzm9dVjZFph/maIg==}
+    engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
-      svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
 
   svelte-confetti@1.4.0:
     resolution: {integrity: sha512-B0woNwpsFGwhkEoP48BIDQgvW0bMxPhavLVD+E+tsTWevlpr1aiz1S2wA8ArIXX957BiaZWHRHKmI5/pFRDbdg==}
     peerDependencies:
       svelte: ^4.0.0
 
-  svelte-eslint-parser@0.43.0:
-    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  svelte-eslint-parser@1.1.1:
+    resolution: {integrity: sha512-QLVGPIMDettl30qRHXU2VrPvVJKG8GsGstye7n8rFbEiu3gEARksuQg9Xu4GzubNxhGNM8stfBZkhyMbBQmjFA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
+  svelte-motion@0.12.2:
+    resolution: {integrity: sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==}
     peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
-  svelte-jester@2.3.2:
-    resolution: {integrity: sha512-JtxSz4FWAaCRBXbPsh4LcDs4Ua7zdXgLC0TZvT1R56hRV0dymmNP+abw67DTPF7sQPyNxWsOKd0Sl7Q8SnP8kg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      jest: '>= 27'
-      svelte: '>= 3'
-
-  svelte-preprocess@5.1.4:
-    resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
-    engines: {node: '>= 16.0.0'}
-    peerDependencies:
-      '@babel/core': ^7.10.2
-      coffeescript: ^2.5.1
-      less: ^3.11.3 || ^4.0.0
-      postcss: ^7 || ^8
-      postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
-      pug: ^3.0.0
-      sass: ^1.26.8
-      stylus: ^0.55.0
-      sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
-      svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
-      typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      coffeescript:
-        optional: true
-      less:
-        optional: true
-      postcss:
-        optional: true
-      postcss-load-config:
-        optional: true
-      pug:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      typescript:
-        optional: true
+      svelte: '>=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0'
 
   svelte-preprocess@6.0.3:
     resolution: {integrity: sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==}
@@ -3388,23 +3176,42 @@ packages:
     resolution: {integrity: sha512-DIFm0kSNscVxtBmKkBiygAHB5otoqN1aVmJ3t57jZhJfCB7Np/lUSoTtSrvPFjmlBbMeOsb1VQ06cut1+rBYOg==}
     engines: {node: '>=16'}
 
+  svelte-sonner@0.3.28:
+    resolution: {integrity: sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
+
   svelte@4.2.19:
     resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
     engines: {node: '>=16'}
 
+  svelte@5.25.3:
+    resolution: {integrity: sha512-J9rcZ/xVJonAoESqVGHHZhrNdVbrCfkdB41BP6eiwHMoFShD9it3yZXApVYMHdGfCshBsZCKsajwJeBbS/M1zg==}
+    engines: {node: '>=18'}
+
+  swr-store@0.10.6:
+    resolution: {integrity: sha512-xPjB1hARSiRaNNlUQvWSVrG5SirCjk2TmaUyzzvk69SZQan9hCJqw/5rG9iL7xElHU784GxRPISClq4488/XVw==}
+    engines: {node: '>=10'}
+
+  swr@2.2.0:
+    resolution: {integrity: sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+
+  swrev@4.0.0:
+    resolution: {integrity: sha512-LqVcOHSB4cPGgitD1riJ1Hh4vdmITOp+BkmfmXRh4hSF/t7EnS4iD+SOTmq7w5pPm/SiPeto4ADbKS6dHUDWFA==}
+
+  swrv@1.0.4:
+    resolution: {integrity: sha512-zjEkcP8Ywmj+xOJW3lIT65ciY/4AL4e/Or7Gj0MzU3zBJNMdJiT8geVZhINavnlHRMMCcJLHhraLTAiDOTmQ9g==}
+    peerDependencies:
+      vue: '>=3.2.26 < 4'
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
-  test-exclude@6.0.0:
-    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
-    engines: {node: '>=8'}
-
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   the-new-css-reset@1.11.3:
     resolution: {integrity: sha512-61SB81vu9foUyEIqoU1CeqxrdlsVjJojj/CBXoG8BdvlKFsllB0Rza63DblnRqH+3uttPj3FGWo7+c9nu7MT+A==}
 
@@ -3417,19 +3224,34 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinypool@0.8.4:
-    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyglobby@0.2.12:
+    resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@2.2.1:
-    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
   tippy.js@6.3.7:
     resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
 
-  tmpl@1.0.5:
-    resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+  tldts-core@6.1.85:
+    resolution: {integrity: sha512-DTjUVvxckL1fIoPSb3KE7ISNtkWSawZdpfxGxwiIrZoO6EbHVDXXUIlIuWympPaeS+BLGyggozX/HTMsRAdsoA==}
+
+  tldts@6.1.85:
+    resolution: {integrity: sha512-gBdZ1RjCSevRPFix/hpaUWeak2/RNUZB4/8frF1r5uYMHjFptkiT0JXIebWvgI/0ZHXvxaUDDJshiA0j6GdL3w==}
+    hasBin: true
 
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -3439,26 +3261,32 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
-  tough-cookie@4.1.4:
-    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
-    engines: {node: '>=6'}
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
 
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  tr46@4.1.1:
-    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
-    engines: {node: '>=14'}
+  tr46@5.1.0:
+    resolution: {integrity: sha512-IUWnUK7ADYR5Sl1fZlO1INDUhVhatWl7BtJWsIhwJ0UAK7ilzzIa8uIqOO/aYVWHZPJkKbEL+362wrzoeRF7bw==}
+    engines: {node: '>=18'}
 
-  ts-api-utils@1.4.0:
-    resolution: {integrity: sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==}
-    engines: {node: '>=16'}
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
     peerDependencies:
-      typescript: '>=4.2.0'
+      typescript: '>=4.8.4'
 
   tslib@2.3.0:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
 
+  tslib@2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+
   tslib@2.7.0:
     resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
@@ -3469,42 +3297,41 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-detect@4.0.8:
-    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
-    engines: {node: '>=4'}
+  typescript-eslint@8.30.1:
+    resolution: {integrity: sha512-D7lC0kcehVH7Mb26MRQi64LMyRJsj3dToJxM1+JVTl53DQSV5/7oUGWQLcKl1C1KnoVHxMMU2FNQMffr7F3Row==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  type-detect@4.1.0:
-    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
-    engines: {node: '>=4'}
-
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
-  type-fest@0.21.3:
-    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
-    engines: {node: '>=10'}
-
-  typescript@5.6.3:
-    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.5.4:
-    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
-  undici-types@6.19.8:
-    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
-  universalify@0.2.0:
-    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
-    engines: {node: '>= 4.0.0'}
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
   unplugin@1.0.1:
     resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
 
-  update-browserslist-db@1.1.1:
-    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -3512,37 +3339,46 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  v8-to-istanbul@9.3.0:
-    resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
-    engines: {node: '>=10.12.0'}
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
-  vite-node@1.6.1:
-    resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite-node@3.0.9:
+    resolution: {integrity: sha512-w3Gdx7jDcuT9cNn9jExXgOyKmf5UOTb6WMHz8LGAm54eS1Elf5OuBhCxl6zJxGhEeIkgsE1WbHuoL0mj/UXqXg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
-  vite@5.4.11:
-    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vite@6.2.3:
+    resolution: {integrity: sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
       sass-embedded: '*'
       stylus: '*'
       sugarss: '*'
-      terser: ^5.4.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      jiti:
+        optional: true
       less:
         optional: true
       lightningcss:
@@ -3557,29 +3393,36 @@ packages:
         optional: true
       terser:
         optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.0.6:
+    resolution: {integrity: sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
       vite:
         optional: true
 
-  vitest@1.6.1:
-    resolution: {integrity: sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vitest@3.0.9:
+    resolution: {integrity: sha512-BbcFDqNyBlfSpATmTtXOAOj71RNKDDvjBM/uPfnxxVGrG+FSH2RQIwgeEngTaTkuU/h0ScFvf+tRcKfYXzBybQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 1.6.1
-      '@vitest/ui': 1.6.1
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.0.9
+      '@vitest/ui': 3.0.9
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@types/debug':
+        optional: true
       '@types/node':
         optional: true
       '@vitest/browser':
@@ -3591,12 +3434,17 @@ packages:
       jsdom:
         optional: true
 
-  w3c-xmlserializer@4.0.0:
-    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
-    engines: {node: '>=14'}
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  walker@1.0.8:
-    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
 
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
@@ -3612,30 +3460,31 @@ packages:
   webpack-virtual-modules@0.5.0:
     resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
 
-  whatwg-encoding@2.0.0:
-    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
-    engines: {node: '>=12'}
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
 
-  whatwg-mimetype@3.0.0:
-    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
-    engines: {node: '>=12'}
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
 
-  whatwg-url@12.0.1:
-    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
-    engines: {node: '>=14'}
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
 
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
-  which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
 
   which-collection@1.0.2:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
 
-  which-typed-array@1.1.15:
-    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
     engines: {node: '>= 0.4'}
 
   which@2.0.2:
@@ -3652,19 +3501,8 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-
-  write-file-atomic@4.0.2:
-    resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-
-  ws@8.18.0:
-    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+  ws@8.18.1:
+    resolution: {integrity: sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -3675,9 +3513,9 @@ packages:
       utf-8-validate:
         optional: true
 
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
 
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
@@ -3686,10 +3524,6 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
-  y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -3697,81 +3531,75 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.1.1:
-    resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
-    engines: {node: '>=12.20'}
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
 
-  zod-to-json-schema@3.24.3:
-    resolution: {integrity: sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A==}
+  zod-to-json-schema@3.24.5:
+    resolution: {integrity: sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==}
     peerDependencies:
       zod: ^3.24.1
 
-  zod@3.24.2:
-    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+  zod@3.24.3:
+    resolution: {integrity: sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==}
 
-  zrender@5.6.0:
-    resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
 snapshots:
 
-  '@adobe/css-tools@4.4.1': {}
+  '@adobe/css-tools@4.4.2': {}
 
-  '@ai-sdk/provider-utils@2.1.13(zod@3.24.2)':
+  '@ai-sdk/provider-utils@2.1.13(zod@3.24.3)':
     dependencies:
       '@ai-sdk/provider': 1.0.11
       eventsource-parser: 3.0.0
-      nanoid: 3.3.9
+      nanoid: 3.3.11
       secure-json-parse: 2.7.0
     optionalDependencies:
-      zod: 3.24.2
+      zod: 3.24.3
 
   '@ai-sdk/provider@1.0.11':
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/svelte@1.1.24(svelte@4.2.19)(zod@3.24.2)':
+  '@ai-sdk/svelte@1.1.24(svelte@5.25.3)(zod@3.24.3)':
     dependencies:
-      '@ai-sdk/provider-utils': 2.1.13(zod@3.24.2)
-      '@ai-sdk/ui-utils': 1.1.19(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.1.13(zod@3.24.3)
+      '@ai-sdk/ui-utils': 1.1.19(zod@3.24.3)
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.25.3
     transitivePeerDependencies:
       - zod
 
-  '@ai-sdk/ui-utils@1.1.19(zod@3.24.2)':
+  '@ai-sdk/ui-utils@1.1.19(zod@3.24.3)':
     dependencies:
       '@ai-sdk/provider': 1.0.11
-      '@ai-sdk/provider-utils': 2.1.13(zod@3.24.2)
-      zod-to-json-schema: 3.24.3(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.1.13(zod@3.24.3)
+      zod-to-json-schema: 3.24.5(zod@3.24.3)
     optionalDependencies:
-      zod: 3.24.2
+      zod: 3.24.3
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
   '@analytics/cookie-utils@0.2.12':
     dependencies:
       '@analytics/global-storage-utils': 0.1.7
 
-  '@analytics/core@0.12.15(@types/dlv@1.1.4)':
+  '@analytics/core@0.12.17(@types/dlv@1.1.5)':
     dependencies:
       '@analytics/global-storage-utils': 0.1.7
       '@analytics/type-utils': 0.6.2
-      analytics-utils: 1.0.12(@types/dlv@1.1.4)
+      analytics-utils: 1.0.14(@types/dlv@1.1.5)
     transitivePeerDependencies:
       - '@types/dlv'
 
@@ -3797,499 +3625,331 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c985738': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959': {}
+
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b7fa5323affb6e06db42dfda8ceb217fd382a267(svelte@5.25.3)':
+    dependencies:
+      svelte: 5.25.3
+
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d68e5e4(svelte@5.25.3)':
+    dependencies:
+      svelte: 5.25.3
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
+  '@appwrite.io/pink-icons@1.0.0': {}
+
+  '@appwrite.io/pink-legacy@1.0.3':
+    dependencies:
+      '@appwrite.io/pink-icons': 1.0.0
+      the-new-css-reset: 1.11.3
+
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b7fa532(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
+    dependencies:
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b7fa5323affb6e06db42dfda8ceb217fd382a267(svelte@5.25.3)
+      '@floating-ui/dom': 1.6.13
+      '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
+      '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
+      ansicolor: 2.0.3
+      d3: 7.9.0
+      fuse.js: 7.1.0
+      pretty-bytes: 6.1.1
+      react-dom: 18.3.1(react@18.3.1)
+      shiki: 1.29.2
+      svelte: 5.25.3
+      svelte-motion: 0.12.2(svelte@5.25.3)
+      svelte-sonner: 0.3.28(svelte@5.25.3)
+
   '@appwrite.io/pink@0.25.0':
     dependencies:
       '@appwrite.io/pink-icons': 0.25.0
       normalize.css: 8.0.1
       the-new-css-reset: 1.11.3
 
+  '@asamuzakjp/css-color@3.1.1':
+    dependencies:
+      '@csstools/css-calc': 2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-color-parser': 3.0.8(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+      lru-cache: 10.4.3
+
   '@babel/code-frame@7.26.2':
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.26.2': {}
+  '@babel/compat-data@7.26.8': {}
 
-  '@babel/core@7.26.0':
+  '@babel/core@7.26.10':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.26.2
-      '@babel/helper-compilation-targets': 7.25.9
-      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
-      '@babel/helpers': 7.26.0
-      '@babel/parser': 7.26.2
-      '@babel/template': 7.25.9
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/generator': 7.27.0
+      '@babel/helper-compilation-targets': 7.27.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10)
+      '@babel/helpers': 7.27.0
+      '@babel/parser': 7.27.0
+      '@babel/template': 7.27.0
+      '@babel/traverse': 7.27.0
+      '@babel/types': 7.27.0
       convert-source-map: 2.0.0
-      debug: 4.3.7
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.26.2':
+  '@babel/generator@7.27.0':
     dependencies:
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
-      '@jridgewell/gen-mapping': 0.3.5
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.0.2
+      jsesc: 3.1.0
 
-  '@babel/helper-compilation-targets@7.25.9':
+  '@babel/helper-compilation-targets@7.27.0':
     dependencies:
-      '@babel/compat-data': 7.26.2
+      '@babel/compat-data': 7.26.8
       '@babel/helper-validator-option': 7.25.9
-      browserslist: 4.24.2
+      browserslist: 4.24.4
       lru-cache: 5.1.1
       semver: 6.3.1
 
   '@babel/helper-module-imports@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/traverse': 7.27.0
+      '@babel/types': 7.27.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.10)':
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-module-imports': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
-      '@babel/traverse': 7.25.9
+      '@babel/traverse': 7.27.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-plugin-utils@7.25.9': {}
-
   '@babel/helper-string-parser@7.25.9': {}
 
   '@babel/helper-validator-identifier@7.25.9': {}
 
   '@babel/helper-validator-option@7.25.9': {}
 
-  '@babel/helpers@7.26.0':
+  '@babel/helpers@7.27.0':
     dependencies:
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/template': 7.27.0
+      '@babel/types': 7.27.0
 
-  '@babel/parser@7.26.2':
+  '@babel/parser@7.27.0':
     dependencies:
-      '@babel/types': 7.26.0
+      '@babel/types': 7.27.0
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/runtime@7.26.0':
+  '@babel/runtime@7.27.0':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/template@7.25.9':
+  '@babel/template@7.27.0':
     dependencies:
       '@babel/code-frame': 7.26.2
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
 
-  '@babel/traverse@7.25.9':
+  '@babel/traverse@7.27.0':
     dependencies:
       '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.26.2
-      '@babel/parser': 7.26.2
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.0
-      debug: 4.3.7
+      '@babel/generator': 7.27.0
+      '@babel/parser': 7.27.0
+      '@babel/template': 7.27.0
+      '@babel/types': 7.27.0
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.26.0':
+  '@babel/types@7.27.0':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  '@bcoe/v8-coverage@0.2.3': {}
+  '@csstools/color-helpers@5.0.2': {}
 
-  '@esbuild/aix-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm@0.21.5':
-    optional: true
-
-  '@esbuild/android-x64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-x64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-s390x@0.21.5':
-    optional: true
-
-  '@esbuild/linux-x64@0.21.5':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/sunos-x64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/win32-x64@0.21.5':
-    optional: true
-
-  '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)':
+  '@csstools/css-calc@2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
     dependencies:
-      eslint: 8.57.1
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-color-parser@3.0.8(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/color-helpers': 5.0.2
+      '@csstools/css-calc': 2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-tokenizer@3.0.3': {}
+
+  '@esbuild/aix-ppc64@0.25.1':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/android-arm@0.25.1':
+    optional: true
+
+  '@esbuild/android-x64@0.25.1':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.1':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.1':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.1':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.1':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.1':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.1':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.1':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.1':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.1':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.1':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.1':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.1':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.1':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.1':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.1':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.1':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.5.1(eslint@9.23.0)':
+    dependencies:
+      eslint: 9.23.0
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/eslintrc@2.1.4':
+  '@eslint/compat@1.2.7(eslint@9.23.0)':
+    optionalDependencies:
+      eslint: 9.23.0
+
+  '@eslint/config-array@0.19.2':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.2.0': {}
+
+  '@eslint/core@0.12.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7
-      espree: 9.6.1
-      globals: 13.24.0
+      debug: 4.4.0
+      espree: 10.3.0
+      globals: 14.0.0
       ignore: 5.3.2
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       minimatch: 3.1.2
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.57.1': {}
+  '@eslint/js@9.23.0': {}
 
-  '@floating-ui/core@1.6.8':
+  '@eslint/js@9.24.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.2.7':
     dependencies:
-      '@floating-ui/utils': 0.2.8
+      '@eslint/core': 0.12.0
+      levn: 0.4.1
 
-  '@floating-ui/dom@1.6.12':
+  '@floating-ui/core@1.6.9':
     dependencies:
-      '@floating-ui/core': 1.6.8
-      '@floating-ui/utils': 0.2.8
+      '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/utils@0.2.8': {}
-
-  '@humanwhocodes/config-array@0.13.0':
+  '@floating-ui/dom@1.6.13':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.7
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/object-schema@2.0.3': {}
+  '@humanwhocodes/retry@0.3.1': {}
 
-  '@internationalized/date@3.5.6':
+  '@humanwhocodes/retry@0.4.2': {}
+
+  '@internationalized/date@3.7.0':
     dependencies:
       '@swc/helpers': 0.5.15
 
-  '@istanbuljs/load-nyc-config@1.1.0':
-    dependencies:
-      camelcase: 5.3.1
-      find-up: 4.1.0
-      get-package-type: 0.1.0
-      js-yaml: 3.14.1
-      resolve-from: 5.0.0
-
-  '@istanbuljs/schema@0.1.3': {}
-
-  '@jest/console@29.7.0':
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      chalk: 4.1.2
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
-      slash: 3.0.0
-
-  '@jest/core@29.7.0':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/reporters': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@22.9.0)
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-resolve-dependencies: 29.7.0
-      jest-runner: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      jest-watcher: 29.7.0
-      micromatch: 4.0.8
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
-  '@jest/environment@29.7.0':
-    dependencies:
-      '@jest/fake-timers': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      jest-mock: 29.7.0
-
-  '@jest/expect-utils@29.7.0':
-    dependencies:
-      jest-get-type: 29.6.3
-
-  '@jest/expect@29.7.0':
-    dependencies:
-      expect: 29.7.0
-      jest-snapshot: 29.7.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@jest/fake-timers@29.7.0':
-    dependencies:
-      '@jest/types': 29.6.3
-      '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 22.9.0
-      jest-message-util: 29.7.0
-      jest-mock: 29.7.0
-      jest-util: 29.7.0
-
-  '@jest/globals@29.7.0':
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/expect': 29.7.0
-      '@jest/types': 29.6.3
-      jest-mock: 29.7.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@jest/reporters@29.7.0':
-    dependencies:
-      '@bcoe/v8-coverage': 0.2.3
-      '@jest/console': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.25
-      '@types/node': 22.9.0
-      chalk: 4.1.2
-      collect-v8-coverage: 1.0.2
-      exit: 0.1.2
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-instrument: 6.0.3
-      istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.7
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
-      jest-worker: 29.7.0
-      slash: 3.0.0
-      string-length: 4.0.2
-      strip-ansi: 6.0.1
-      v8-to-istanbul: 9.3.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@jest/schemas@29.6.3':
-    dependencies:
-      '@sinclair/typebox': 0.27.8
-
-  '@jest/source-map@29.6.3':
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      callsites: 3.1.0
-      graceful-fs: 4.2.11
-
-  '@jest/test-result@29.7.0':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/istanbul-lib-coverage': 2.0.6
-      collect-v8-coverage: 1.0.2
-
-  '@jest/test-sequencer@29.7.0':
-    dependencies:
-      '@jest/test-result': 29.7.0
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.7.0
-      slash: 3.0.0
-
-  '@jest/transform@29.7.0':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.25
-      babel-plugin-istanbul: 6.1.1
-      chalk: 4.1.2
-      convert-source-map: 2.0.0
-      fast-json-stable-stringify: 2.1.0
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-util: 29.7.0
-      micromatch: 4.0.8
-      pirates: 4.0.6
-      slash: 3.0.0
-      write-file-atomic: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@jest/types@29.6.3':
-    dependencies:
-      '@jest/schemas': 29.6.3
-      '@types/istanbul-lib-coverage': 2.0.6
-      '@types/istanbul-reports': 3.0.4
-      '@types/node': 22.9.0
-      '@types/yargs': 17.0.33
-      chalk: 4.1.2
-
-  '@jridgewell/gen-mapping@0.3.5':
+  '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4306,22 +3966,39 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.83.0(svelte@4.2.19))(svelte@4.2.19)':
+  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.5(svelte@5.25.3))(svelte@5.25.3)':
     dependencies:
-      '@melt-ui/svelte': 0.83.0(svelte@4.2.19)
+      '@melt-ui/svelte': 0.86.5(svelte@5.25.3)
       estree-walker: 3.0.3
-      magic-string: 0.30.13
-      svelte: 4.2.19
+      magic-string: 0.30.17
+      svelte: 5.25.3
 
-  '@melt-ui/svelte@0.83.0(svelte@4.2.19)':
+  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)':
     dependencies:
-      '@floating-ui/core': 1.6.8
-      '@floating-ui/dom': 1.6.12
-      '@internationalized/date': 3.5.6
+      '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+      svelte: 5.25.3
+
+  '@melt-ui/svelte@0.86.5(svelte@5.25.3)':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/dom': 1.6.13
+      '@internationalized/date': 3.7.0
       dequal: 2.0.3
-      focus-trap: 7.6.2
-      nanoid: 5.0.8
-      svelte: 4.2.19
+      focus-trap: 7.6.4
+      nanoid: 5.1.5
+      svelte: 5.25.3
+
+  '@melt-ui/svelte@0.86.6(svelte@5.25.3)':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/dom': 1.6.13
+      '@internationalized/date': 3.7.0
+      dequal: 2.0.3
+      focus-trap: 7.6.4
+      nanoid: 5.1.5
+      svelte: 5.25.3
 
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
@@ -4333,209 +4010,206 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
-
-  '@opentelemetry/api-logs@0.52.1':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
+      fastq: 1.19.1
 
   '@opentelemetry/api-logs@0.53.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/api-logs@0.54.2':
+  '@opentelemetry/api-logs@0.57.1':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+
+  '@opentelemetry/api-logs@0.57.2':
     dependencies:
       '@opentelemetry/api': 1.9.0
 
   '@opentelemetry/api@1.9.0': {}
 
-  '@opentelemetry/context-async-hooks@1.28.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/semantic-conventions': 1.28.0
 
-  '@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-amqplib@0.46.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.27.0
-
-  '@opentelemetry/instrumentation-amqplib@0.43.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-connect@0.40.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-connect@0.43.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
       '@types/connect': 3.4.36
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-dataloader@0.12.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-dataloader@0.16.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-express@0.44.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-express@0.47.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-fastify@0.41.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-fastify@0.44.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-fs@0.16.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-fs@0.19.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-generic-pool@0.39.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-generic-pool@0.43.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-graphql@0.44.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-graphql@0.47.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-hapi@0.41.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-hapi@0.45.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-http@0.53.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-http@0.57.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.26.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
-      semver: 7.6.3
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.28.0
+      forwarded-parse: 2.1.2
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-ioredis@0.43.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-ioredis@0.47.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
       '@opentelemetry/redis-common': 0.36.2
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-kafkajs@0.4.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-kafkajs@0.7.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-knex@0.41.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-knex@0.44.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-koa@0.43.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-koa@0.47.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-lru-memoizer@0.40.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-lru-memoizer@0.44.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongodb@0.48.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongodb@0.51.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongoose@0.42.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongoose@0.46.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql2@0.41.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql2@0.45.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
       '@opentelemetry/sql-common': 0.40.1(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql@0.41.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql@0.45.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
       '@types/mysql': 2.15.26
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-nestjs-core@0.40.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-nestjs-core@0.44.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-pg@0.44.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-pg@0.50.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
       '@opentelemetry/semantic-conventions': 1.27.0
       '@opentelemetry/sql-common': 0.40.1(@opentelemetry/api@1.9.0)
       '@types/pg': 8.6.1
@@ -4543,41 +4217,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-redis-4@0.42.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-redis-4@0.46.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
       '@opentelemetry/redis-common': 0.36.2
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/semantic-conventions': 1.30.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-tedious@0.15.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-tedious@0.18.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
       '@types/tedious': 4.0.14
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-undici@0.6.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-undici@0.10.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.52.1
-      '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.11.2
-      require-in-the-middle: 7.4.0
-      semver: 7.6.3
-      shimmer: 1.2.1
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -4586,222 +4248,234 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.53.0
       '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.11.2
-      require-in-the-middle: 7.4.0
-      semver: 7.6.3
+      import-in-the-middle: 1.13.1
+      require-in-the-middle: 7.5.2
+      semver: 7.7.1
       shimmer: 1.2.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.57.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.54.2
+      '@opentelemetry/api-logs': 0.57.1
       '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.11.2
-      require-in-the-middle: 7.4.0
-      semver: 7.6.3
+      import-in-the-middle: 1.13.1
+      require-in-the-middle: 7.5.2
+      semver: 7.7.1
+      shimmer: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.57.2
+      '@types/shimmer': 1.2.0
+      import-in-the-middle: 1.13.1
+      require-in-the-middle: 7.5.2
+      semver: 7.7.1
       shimmer: 1.2.1
     transitivePeerDependencies:
       - supports-color
 
   '@opentelemetry/redis-common@0.36.2': {}
 
-  '@opentelemetry/resources@1.28.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resources@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.28.0
 
-  '@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.28.0
 
   '@opentelemetry/semantic-conventions@1.27.0': {}
 
+  '@opentelemetry/semantic-conventions@1.28.0': {}
+
+  '@opentelemetry/semantic-conventions@1.30.0': {}
+
   '@opentelemetry/sql-common@0.40.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
 
-  '@parcel/watcher-android-arm64@2.5.0':
+  '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.0':
+  '@parcel/watcher-darwin-arm64@2.5.1':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.5.0':
+  '@parcel/watcher-darwin-x64@2.5.1':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.5.0':
+  '@parcel/watcher-freebsd-x64@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.5.0':
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm-musl@2.5.0':
+  '@parcel/watcher-linux-arm-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.0':
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.5.0':
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.5.0':
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.5.0':
+  '@parcel/watcher-linux-x64-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-win32-arm64@2.5.0':
+  '@parcel/watcher-win32-arm64@2.5.1':
     optional: true
 
-  '@parcel/watcher-win32-ia32@2.5.0':
+  '@parcel/watcher-win32-ia32@2.5.1':
     optional: true
 
-  '@parcel/watcher-win32-x64@2.5.0':
+  '@parcel/watcher-win32-x64@2.5.1':
     optional: true
 
-  '@parcel/watcher@2.5.0':
+  '@parcel/watcher@2.5.1':
     dependencies:
       detect-libc: 1.0.3
       is-glob: 4.0.3
       micromatch: 4.0.8
       node-addon-api: 7.1.1
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.0
-      '@parcel/watcher-darwin-arm64': 2.5.0
-      '@parcel/watcher-darwin-x64': 2.5.0
-      '@parcel/watcher-freebsd-x64': 2.5.0
-      '@parcel/watcher-linux-arm-glibc': 2.5.0
-      '@parcel/watcher-linux-arm-musl': 2.5.0
-      '@parcel/watcher-linux-arm64-glibc': 2.5.0
-      '@parcel/watcher-linux-arm64-musl': 2.5.0
-      '@parcel/watcher-linux-x64-glibc': 2.5.0
-      '@parcel/watcher-linux-x64-musl': 2.5.0
-      '@parcel/watcher-win32-arm64': 2.5.0
-      '@parcel/watcher-win32-ia32': 2.5.0
-      '@parcel/watcher-win32-x64': 2.5.0
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
-  '@playwright/test@1.49.0':
+  '@playwright/test@1.51.1':
     dependencies:
-      playwright: 1.49.0
+      playwright: 1.51.1
 
   '@polka/url@1.0.0-next.28': {}
 
   '@popperjs/core@2.11.8': {}
 
-  '@prisma/instrumentation@5.19.1':
+  '@prisma/instrumentation@5.22.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.52.1(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.53.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/rollup-android-arm-eabi@4.27.3':
+  '@rollup/rollup-android-arm-eabi@4.37.0':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.27.3':
+  '@rollup/rollup-android-arm64@4.37.0':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.27.3':
+  '@rollup/rollup-darwin-arm64@4.37.0':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.27.3':
+  '@rollup/rollup-darwin-x64@4.37.0':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.27.3':
+  '@rollup/rollup-freebsd-arm64@4.37.0':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.27.3':
+  '@rollup/rollup-freebsd-x64@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.27.3':
+  '@rollup/rollup-linux-arm-gnueabihf@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.27.3':
+  '@rollup/rollup-linux-arm-musleabihf@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.27.3':
+  '@rollup/rollup-linux-arm64-gnu@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.27.3':
+  '@rollup/rollup-linux-arm64-musl@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.27.3':
+  '@rollup/rollup-linux-loongarch64-gnu@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.27.3':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.27.3':
+  '@rollup/rollup-linux-riscv64-gnu@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.27.3':
+  '@rollup/rollup-linux-riscv64-musl@4.37.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.27.3':
+  '@rollup/rollup-linux-s390x-gnu@4.37.0':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.27.3':
+  '@rollup/rollup-linux-x64-gnu@4.37.0':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.27.3':
+  '@rollup/rollup-linux-x64-musl@4.37.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.27.3':
+  '@rollup/rollup-win32-arm64-msvc@4.37.0':
     optional: true
 
-  '@sentry-internal/browser-utils@8.38.0':
+  '@rollup/rollup-win32-ia32-msvc@4.37.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.37.0':
+    optional: true
+
+  '@sentry-internal/browser-utils@8.55.0':
     dependencies:
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry/core': 8.55.0
 
-  '@sentry-internal/feedback@8.38.0':
+  '@sentry-internal/feedback@8.55.0':
     dependencies:
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry/core': 8.55.0
 
-  '@sentry-internal/replay-canvas@8.38.0':
+  '@sentry-internal/replay-canvas@8.55.0':
     dependencies:
-      '@sentry-internal/replay': 8.38.0
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry-internal/replay': 8.55.0
+      '@sentry/core': 8.55.0
 
-  '@sentry-internal/replay@8.38.0':
+  '@sentry-internal/replay@8.55.0':
     dependencies:
-      '@sentry-internal/browser-utils': 8.38.0
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry-internal/browser-utils': 8.55.0
+      '@sentry/core': 8.55.0
 
   '@sentry/babel-plugin-component-annotate@2.22.6': {}
 
-  '@sentry/browser@8.38.0':
+  '@sentry/browser@8.55.0':
     dependencies:
-      '@sentry-internal/browser-utils': 8.38.0
-      '@sentry-internal/feedback': 8.38.0
-      '@sentry-internal/replay': 8.38.0
-      '@sentry-internal/replay-canvas': 8.38.0
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry-internal/browser-utils': 8.55.0
+      '@sentry-internal/feedback': 8.55.0
+      '@sentry-internal/replay': 8.55.0
+      '@sentry-internal/replay-canvas': 8.55.0
+      '@sentry/core': 8.55.0
 
   '@sentry/bundler-plugin-core@2.22.6':
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@sentry/babel-plugin-component-annotate': 2.22.6
-      '@sentry/cli': 2.38.2
-      dotenv: 16.4.5
+      '@sentry/cli': 2.43.0
+      dotenv: 16.4.7
       find-up: 5.0.0
       glob: 9.3.5
       magic-string: 0.30.8
@@ -4810,28 +4484,31 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.38.2':
+  '@sentry/cli-darwin@2.43.0':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.38.2':
+  '@sentry/cli-linux-arm64@2.43.0':
     optional: true
 
-  '@sentry/cli-linux-arm@2.38.2':
+  '@sentry/cli-linux-arm@2.43.0':
     optional: true
 
-  '@sentry/cli-linux-i686@2.38.2':
+  '@sentry/cli-linux-i686@2.43.0':
     optional: true
 
-  '@sentry/cli-linux-x64@2.38.2':
+  '@sentry/cli-linux-x64@2.43.0':
     optional: true
 
-  '@sentry/cli-win32-i686@2.38.2':
+  '@sentry/cli-win32-arm64@2.43.0':
     optional: true
 
-  '@sentry/cli-win32-x64@2.38.2':
+  '@sentry/cli-win32-i686@2.43.0':
     optional: true
 
-  '@sentry/cli@2.38.2':
+  '@sentry/cli-win32-x64@2.43.0':
+    optional: true
+
+  '@sentry/cli@2.43.0':
     dependencies:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0
@@ -4839,101 +4516,93 @@ snapshots:
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.38.2
-      '@sentry/cli-linux-arm': 2.38.2
-      '@sentry/cli-linux-arm64': 2.38.2
-      '@sentry/cli-linux-i686': 2.38.2
-      '@sentry/cli-linux-x64': 2.38.2
-      '@sentry/cli-win32-i686': 2.38.2
-      '@sentry/cli-win32-x64': 2.38.2
+      '@sentry/cli-darwin': 2.43.0
+      '@sentry/cli-linux-arm': 2.43.0
+      '@sentry/cli-linux-arm64': 2.43.0
+      '@sentry/cli-linux-i686': 2.43.0
+      '@sentry/cli-linux-x64': 2.43.0
+      '@sentry/cli-win32-arm64': 2.43.0
+      '@sentry/cli-win32-i686': 2.43.0
+      '@sentry/cli-win32-x64': 2.43.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/core@8.38.0':
-    dependencies:
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+  '@sentry/core@8.55.0': {}
 
-  '@sentry/node@8.38.0':
+  '@sentry/node@8.55.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-amqplib': 0.43.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-connect': 0.40.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-dataloader': 0.12.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-express': 0.44.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fastify': 0.41.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fs': 0.16.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-generic-pool': 0.39.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-graphql': 0.44.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-hapi': 0.41.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-ioredis': 0.43.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-kafkajs': 0.4.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-knex': 0.41.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-koa': 0.43.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.40.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongodb': 0.48.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongoose': 0.42.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql': 0.41.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql2': 0.41.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-nestjs-core': 0.40.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-pg': 0.44.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis-4': 0.42.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-tedious': 0.15.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-undici': 0.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
-      '@prisma/instrumentation': 5.19.1
-      '@sentry/core': 8.38.0
-      '@sentry/opentelemetry': 8.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.27.0)
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
-      import-in-the-middle: 1.11.2
+      '@opentelemetry/context-async-hooks': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-amqplib': 0.46.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-connect': 0.43.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-dataloader': 0.16.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-express': 0.47.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-fastify': 0.44.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-fs': 0.19.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-generic-pool': 0.43.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-graphql': 0.47.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-hapi': 0.45.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-http': 0.57.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-ioredis': 0.47.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-kafkajs': 0.7.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-knex': 0.44.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-koa': 0.47.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-lru-memoizer': 0.44.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mongodb': 0.51.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mongoose': 0.46.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mysql': 0.45.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mysql2': 0.45.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-nestjs-core': 0.44.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-pg': 0.50.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-redis-4': 0.46.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-tedious': 0.18.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-undici': 0.10.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
+      '@prisma/instrumentation': 5.22.0
+      '@sentry/core': 8.55.0
+      '@sentry/opentelemetry': 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)
+      import-in-the-middle: 1.13.1
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/opentelemetry@8.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.27.0)':
+  '@sentry/opentelemetry@8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.54.2(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.27.0
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@opentelemetry/context-async-hooks': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.30.0
+      '@sentry/core': 8.55.0
 
-  '@sentry/svelte@8.38.0(svelte@4.2.19)':
+  '@sentry/svelte@8.55.0(svelte@5.25.3)':
     dependencies:
-      '@sentry/browser': 8.38.0
-      '@sentry/core': 8.38.0
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry/browser': 8.55.0
+      '@sentry/core': 8.55.0
       magic-string: 0.30.7
-      svelte: 4.2.19
+      svelte: 5.25.3
 
-  '@sentry/sveltekit@8.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.27.0)(@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))':
+  '@sentry/sveltekit@8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
-      '@sentry/core': 8.38.0
-      '@sentry/node': 8.38.0
-      '@sentry/opentelemetry': 8.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.27.0)
-      '@sentry/svelte': 8.38.0(svelte@4.2.19)
-      '@sentry/types': 8.38.0
-      '@sentry/utils': 8.38.0
+      '@sentry/core': 8.55.0
+      '@sentry/node': 8.55.0
+      '@sentry/opentelemetry': 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)
+      '@sentry/svelte': 8.55.0(svelte@5.25.3)
       '@sentry/vite-plugin': 2.22.6
-      '@sveltejs/kit': 2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
       magic-string: 0.30.7
       magicast: 0.2.8
       sorcery: 1.0.0
     optionalDependencies:
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
     transitivePeerDependencies:
       - '@opentelemetry/api'
+      - '@opentelemetry/context-async-hooks'
       - '@opentelemetry/core'
       - '@opentelemetry/instrumentation'
       - '@opentelemetry/sdk-trace-base'
@@ -4942,12 +4611,6 @@ snapshots:
       - supports-color
       - svelte
 
-  '@sentry/types@8.38.0': {}
-
-  '@sentry/utils@8.38.0':
-    dependencies:
-      '@sentry/types': 8.38.0
-
   '@sentry/vite-plugin@2.22.6':
     dependencies:
       '@sentry/bundler-plugin-core': 2.22.6
@@ -4956,60 +4619,87 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sinclair/typebox@0.27.8': {}
-
-  '@sinonjs/commons@3.0.1':
+  '@shikijs/core@1.29.2':
     dependencies:
-      type-detect: 4.0.8
+      '@shikijs/engine-javascript': 1.29.2
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
 
-  '@sinonjs/fake-timers@10.3.0':
+  '@shikijs/engine-javascript@1.29.2':
     dependencies:
-      '@sinonjs/commons': 3.0.1
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 2.3.0
+
+  '@shikijs/engine-oniguruma@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+
+  '@shikijs/themes@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+
+  '@shikijs/types@1.29.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
 
   '@stripe/stripe-js@3.5.0': {}
 
-  '@sveltejs/adapter-static@3.0.6(@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))':
+  '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.1)':
     dependencies:
-      '@sveltejs/kit': 2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+      acorn: 8.14.1
 
-  '@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))':
+  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+
+  '@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.1.4
+      esm-env: 1.2.2
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
-      magic-string: 0.30.13
-      mrmime: 2.0.0
+      magic-string: 0.30.17
+      mrmime: 2.0.1
       sade: 1.8.1
       set-cookie-parser: 2.7.1
-      sirv: 3.0.0
-      svelte: 4.2.19
-      tiny-glob: 0.2.9
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
+      sirv: 3.0.1
+      svelte: 5.25.3
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
-      debug: 4.3.7
-      svelte: 4.2.19
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      debug: 4.4.0
+      svelte: 5.25.3
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
-      debug: 4.3.7
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
-      magic-string: 0.30.13
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
-      vitefu: 0.2.5(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
+      magic-string: 0.30.17
+      svelte: 5.25.3
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -5020,7 +4710,7 @@ snapshots:
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       chalk: 4.1.2
@@ -5030,7 +4720,7 @@ snapshots:
 
   '@testing-library/jest-dom@6.6.3':
     dependencies:
-      '@adobe/css-tools': 4.4.1
+      '@adobe/css-tools': 4.4.2
       aria-query: 5.3.2
       chalk: 3.0.0
       css.escape: 1.5.1
@@ -5038,76 +4728,51 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.4(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))(vitest@1.6.1(@types/node@22.9.0)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.81.0))':
+  '@testing-library/svelte@5.2.7(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 4.2.19
+      svelte: 5.25.3
     optionalDependencies:
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
-      vitest: 1.6.1(@types/node@22.9.0)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.81.0)
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vitest: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0)
 
-  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
     dependencies:
       '@testing-library/dom': 10.4.0
 
-  '@tootallnate/once@2.0.0': {}
-
   '@types/aria-query@5.0.4': {}
 
-  '@types/babel__core@7.20.5':
-    dependencies:
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
-      '@types/babel__generator': 7.6.8
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.6
-
-  '@types/babel__generator@7.6.8':
-    dependencies:
-      '@babel/types': 7.26.0
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
-
-  '@types/babel__traverse@7.20.6':
-    dependencies:
-      '@babel/types': 7.26.0
-
   '@types/connect@3.4.36':
     dependencies:
-      '@types/node': 22.9.0
+      '@types/node': 22.13.14
 
   '@types/cookie@0.6.0': {}
 
   '@types/deep-equal@1.0.4': {}
 
-  '@types/dlv@1.1.4': {}
+  '@types/dlv@1.1.5': {}
 
   '@types/estree@1.0.6': {}
 
-  '@types/graceful-fs@4.1.9':
-    dependencies:
-      '@types/node': 22.9.0
+  '@types/estree@1.0.7': {}
 
-  '@types/istanbul-lib-coverage@2.0.6': {}
-
-  '@types/istanbul-lib-report@3.0.3':
+  '@types/hast@3.0.4':
     dependencies:
-      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/unist': 3.0.3
 
-  '@types/istanbul-reports@3.0.4':
+  '@types/json-schema@7.0.15': {}
+
+  '@types/mdast@4.0.4':
     dependencies:
-      '@types/istanbul-lib-report': 3.0.3
+      '@types/unist': 3.0.3
 
   '@types/mysql@2.15.26':
     dependencies:
-      '@types/node': 22.9.0
+      '@types/node': 22.13.14
 
-  '@types/node@22.9.0':
+  '@types/node@22.13.14':
     dependencies:
-      undici-types: 6.19.8
+      undici-types: 6.20.0
 
   '@types/pg-pool@2.0.6':
     dependencies:
@@ -5115,182 +4780,323 @@ snapshots:
 
   '@types/pg@8.6.1':
     dependencies:
-      '@types/node': 22.9.0
-      pg-protocol: 1.7.0
+      '@types/node': 22.13.14
+      pg-protocol: 1.8.0
       pg-types: 2.2.0
 
   '@types/prismjs@1.26.5': {}
 
-  '@types/pug@2.0.10': {}
+  '@types/prop-types@15.7.14': {}
+
+  '@types/react@18.3.20':
+    dependencies:
+      '@types/prop-types': 15.7.14
+      csstype: 3.1.3
 
   '@types/remarkable@2.0.8': {}
 
   '@types/shimmer@1.2.0': {}
 
-  '@types/stack-utils@2.0.3': {}
-
   '@types/tedious@4.0.14':
     dependencies:
-      '@types/node': 22.9.0
+      '@types/node': 22.13.14
 
-  '@types/yargs-parser@21.0.3': {}
+  '@types/unist@3.0.3': {}
 
-  '@types/yargs@17.0.33':
-    dependencies:
-      '@types/yargs-parser': 21.0.3
-
-  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 7.18.0
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/scope-manager': 8.28.0
+      '@typescript-eslint/type-utils': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/visitor-keys': 8.28.0
+      eslint: 9.23.0
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 1.4.0(typescript@5.6.3)
-    optionalDependencies:
-      typescript: 5.6.3
+      ts-api-utils: 2.1.0(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.3.7
-      eslint: 8.57.1
-    optionalDependencies:
-      typescript: 5.6.3
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/scope-manager': 8.30.1
+      '@typescript-eslint/type-utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/visitor-keys': 8.30.1
+      eslint: 9.23.0
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@7.18.0':
+  '@typescript-eslint/parser@8.28.0(eslint@9.23.0)(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
-
-  '@typescript-eslint/type-utils@7.18.0(eslint@8.57.1)(typescript@5.6.3)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      debug: 4.3.7
-      eslint: 8.57.1
-      ts-api-utils: 1.4.0(typescript@5.6.3)
-    optionalDependencies:
-      typescript: 5.6.3
+      '@typescript-eslint/scope-manager': 8.28.0
+      '@typescript-eslint/types': 8.28.0
+      '@typescript-eslint/typescript-estree': 8.28.0(typescript@5.8.2)
+      '@typescript-eslint/visitor-keys': 8.28.0
+      debug: 4.4.0
+      eslint: 9.23.0
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@7.18.0': {}
-
-  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.30.1(eslint@9.23.0)(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.3.7
-      globby: 11.1.0
+      '@typescript-eslint/scope-manager': 8.30.1
+      '@typescript-eslint/types': 8.30.1
+      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.2)
+      '@typescript-eslint/visitor-keys': 8.30.1
+      debug: 4.4.0
+      eslint: 9.23.0
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.28.0':
+    dependencies:
+      '@typescript-eslint/types': 8.28.0
+      '@typescript-eslint/visitor-keys': 8.28.0
+
+  '@typescript-eslint/scope-manager@8.30.1':
+    dependencies:
+      '@typescript-eslint/types': 8.30.1
+      '@typescript-eslint/visitor-keys': 8.30.1
+
+  '@typescript-eslint/type-utils@8.28.0(eslint@9.23.0)(typescript@5.8.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.28.0(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
+      debug: 4.4.0
+      eslint: 9.23.0
+      ts-api-utils: 2.1.0(typescript@5.8.2)
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@8.30.1(eslint@9.23.0)(typescript@5.8.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      debug: 4.4.0
+      eslint: 9.23.0
+      ts-api-utils: 2.1.0(typescript@5.8.2)
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.28.0': {}
+
+  '@typescript-eslint/types@8.30.1': {}
+
+  '@typescript-eslint/typescript-estree@8.28.0(typescript@5.8.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.28.0
+      '@typescript-eslint/visitor-keys': 8.28.0
+      debug: 4.4.0
+      fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.6.3
-      ts-api-utils: 1.4.0(typescript@5.6.3)
+      semver: 7.7.1
+      ts-api-utils: 2.1.0(typescript@5.8.2)
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.30.1(typescript@5.8.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.30.1
+      '@typescript-eslint/visitor-keys': 8.30.1
+      debug: 4.4.0
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.1
+      ts-api-utils: 2.1.0(typescript@5.8.2)
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.28.0(eslint@9.23.0)(typescript@5.8.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
+      '@typescript-eslint/scope-manager': 8.28.0
+      '@typescript-eslint/types': 8.28.0
+      '@typescript-eslint/typescript-estree': 8.28.0(typescript@5.8.2)
+      eslint: 9.23.0
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.30.1(eslint@9.23.0)(typescript@5.8.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
+      '@typescript-eslint/scope-manager': 8.30.1
+      '@typescript-eslint/types': 8.30.1
+      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.2)
+      eslint: 9.23.0
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.28.0':
+    dependencies:
+      '@typescript-eslint/types': 8.28.0
+      eslint-visitor-keys: 4.2.0
+
+  '@typescript-eslint/visitor-keys@8.30.1':
+    dependencies:
+      '@typescript-eslint/types': 8.30.1
+      eslint-visitor-keys: 4.2.0
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@vitest/expect@3.0.9':
+    dependencies:
+      '@vitest/spy': 3.0.9
+      '@vitest/utils': 3.0.9
+      chai: 5.2.0
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.0.9(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+    dependencies:
+      '@vitest/spy': 3.0.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
     optionalDependencies:
-      typescript: 5.6.3
-    transitivePeerDependencies:
-      - supports-color
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
 
-  '@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.6.3)':
+  '@vitest/pretty-format@3.0.9':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      eslint: 8.57.1
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+      tinyrainbow: 2.0.0
 
-  '@typescript-eslint/visitor-keys@7.18.0':
+  '@vitest/runner@3.0.9':
     dependencies:
-      '@typescript-eslint/types': 7.18.0
-      eslint-visitor-keys: 3.4.3
+      '@vitest/utils': 3.0.9
+      pathe: 2.0.3
 
-  '@ungap/structured-clone@1.2.0': {}
-
-  '@vitest/expect@1.6.1':
+  '@vitest/snapshot@3.0.9':
     dependencies:
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      chai: 4.5.0
+      '@vitest/pretty-format': 3.0.9
+      magic-string: 0.30.17
+      pathe: 2.0.3
 
-  '@vitest/runner@1.6.1':
+  '@vitest/spy@3.0.9':
     dependencies:
-      '@vitest/utils': 1.6.1
-      p-limit: 5.0.0
-      pathe: 1.1.2
+      tinyspy: 3.0.2
 
-  '@vitest/snapshot@1.6.1':
+  '@vitest/ui@3.0.9(vitest@3.0.9)':
     dependencies:
-      magic-string: 0.30.13
-      pathe: 1.1.2
-      pretty-format: 29.7.0
-
-  '@vitest/spy@1.6.1':
-    dependencies:
-      tinyspy: 2.2.1
-
-  '@vitest/ui@1.6.0(vitest@1.6.1)':
-    dependencies:
-      '@vitest/utils': 1.6.0
-      fast-glob: 3.3.2
+      '@vitest/utils': 3.0.9
       fflate: 0.8.2
-      flatted: 3.3.2
-      pathe: 1.1.2
-      picocolors: 1.1.1
-      sirv: 2.0.4
-      vitest: 1.6.1(@types/node@22.9.0)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.81.0)
+      flatted: 3.3.3
+      pathe: 2.0.3
+      sirv: 3.0.1
+      tinyglobby: 0.2.12
+      tinyrainbow: 2.0.0
+      vitest: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0)
 
-  '@vitest/utils@1.6.0':
+  '@vitest/utils@3.0.9':
     dependencies:
-      diff-sequences: 29.6.3
-      estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
+      '@vitest/pretty-format': 3.0.9
+      loupe: 3.1.3
+      tinyrainbow: 2.0.0
 
-  '@vitest/utils@1.6.1':
+  '@vue/compiler-core@3.5.13':
     dependencies:
-      diff-sequences: 29.6.3
-      estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
+      '@babel/parser': 7.27.0
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
 
-  abab@2.0.6: {}
-
-  acorn-import-attributes@1.9.5(acorn@8.14.0):
+  '@vue/compiler-dom@3.5.13':
     dependencies:
-      acorn: 8.14.0
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
 
-  acorn-jsx@5.3.2(acorn@8.14.0):
+  '@vue/compiler-sfc@3.5.13':
     dependencies:
-      acorn: 8.14.0
+      '@babel/parser': 7.27.0
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.3
+      source-map-js: 1.2.1
 
-  acorn-walk@8.3.4:
+  '@vue/compiler-ssr@3.5.13':
     dependencies:
-      acorn: 8.14.0
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
 
-  acorn@8.14.0: {}
+  '@vue/reactivity@3.5.13':
+    dependencies:
+      '@vue/shared': 3.5.13
+
+  '@vue/runtime-core@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
+
+  '@vue/runtime-dom@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.8.2)
+
+  '@vue/shared@3.5.13': {}
+
+  acorn-import-attributes@1.9.5(acorn@8.14.1):
+    dependencies:
+      acorn: 8.14.1
+
+  acorn-jsx@5.3.2(acorn@8.14.1):
+    dependencies:
+      acorn: 8.14.1
+
+  acorn@8.14.1: {}
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
+  agent-base@7.1.3: {}
+
+  ai@2.2.37(react@18.3.1)(solid-js@1.9.5)(svelte@5.25.3)(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      eventsource-parser: 1.0.0
+      nanoid: 3.3.6
+      solid-swr-store: 0.10.7(solid-js@1.9.5)(swr-store@0.10.6)
+      sswr: 2.0.0(svelte@5.25.3)
+      swr: 2.2.0(react@18.3.1)
+      swr-store: 0.10.6
+      swrv: 1.0.4(vue@3.5.13(typescript@5.8.2))
+    optionalDependencies:
+      react: 18.3.1
+      solid-js: 1.9.5
+      svelte: 5.25.3
+      vue: 3.5.13(typescript@5.8.2)
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -5298,23 +5104,19 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  analytics-utils@1.0.12(@types/dlv@1.1.4):
+  analytics-utils@1.0.14(@types/dlv@1.1.5):
     dependencies:
       '@analytics/type-utils': 0.6.2
-      '@types/dlv': 1.1.4
+      '@types/dlv': 1.1.5
       dlv: 1.1.3
 
-  analytics@0.8.14(@types/dlv@1.1.4):
+  analytics@0.8.16(@types/dlv@1.1.5):
     dependencies:
-      '@analytics/core': 0.12.15(@types/dlv@1.1.4)
+      '@analytics/core': 0.12.17(@types/dlv@1.1.5)
       '@analytics/storage-utils': 0.4.2
     transitivePeerDependencies:
       - '@types/dlv'
 
-  ansi-escapes@4.3.2:
-    dependencies:
-      type-fest: 0.21.3
-
   ansi-regex@5.0.1: {}
 
   ansi-styles@4.3.0:
@@ -5323,6 +5125,8 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
+  ansicolor@2.0.3: {}
+
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -5340,14 +5144,12 @@ snapshots:
 
   aria-query@5.3.2: {}
 
-  array-buffer-byte-length@1.0.1:
+  array-buffer-byte-length@1.0.2:
     dependencies:
-      call-bind: 1.0.7
-      is-array-buffer: 3.0.4
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
 
-  array-union@2.1.0: {}
-
-  assertion-error@1.1.0: {}
+  assertion-error@2.0.1: {}
 
   ast-types@0.16.1:
     dependencies:
@@ -5361,65 +5163,10 @@ snapshots:
 
   available-typed-arrays@1.0.7:
     dependencies:
-      possible-typed-array-names: 1.0.0
+      possible-typed-array-names: 1.1.0
 
   axobject-query@4.1.0: {}
 
-  babel-jest@29.7.0(@babel/core@7.26.0):
-    dependencies:
-      '@babel/core': 7.26.0
-      '@jest/transform': 29.7.0
-      '@types/babel__core': 7.20.5
-      babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.6.3(@babel/core@7.26.0)
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      slash: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  babel-plugin-istanbul@6.1.1:
-    dependencies:
-      '@babel/helper-plugin-utils': 7.25.9
-      '@istanbuljs/load-nyc-config': 1.1.0
-      '@istanbuljs/schema': 0.1.3
-      istanbul-lib-instrument: 5.2.1
-      test-exclude: 6.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  babel-plugin-jest-hoist@29.6.3:
-    dependencies:
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.0
-      '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.20.6
-
-  babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.0):
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.0)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.0)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.0)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.26.0)
-      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.0)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.0)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.0)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.0)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.0)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.0)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.0)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.0)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.0)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.0)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.0)
-
-  babel-preset-jest@29.6.3(@babel/core@7.26.0):
-    dependencies:
-      '@babel/core': 7.26.0
-      babel-plugin-jest-hoist: 29.6.3
-      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.0)
-
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -5437,48 +5184,45 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.24.2:
+  browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001680
-      electron-to-chromium: 1.5.63
-      node-releases: 2.0.18
-      update-browserslist-db: 1.1.1(browserslist@4.24.2)
-
-  bser@2.1.1:
-    dependencies:
-      node-int64: 0.4.0
-
-  buffer-crc32@1.0.0: {}
-
-  buffer-from@1.1.2: {}
+      caniuse-lite: 1.0.30001707
+      electron-to-chromium: 1.5.128
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
   cac@6.7.14: {}
 
-  call-bind@1.0.7:
+  call-bind-apply-helpers@1.0.2:
     dependencies:
-      es-define-property: 1.0.0
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
       set-function-length: 1.2.2
 
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
   callsites@3.1.0: {}
 
-  camelcase@5.3.1: {}
+  caniuse-lite@1.0.30001707: {}
 
-  camelcase@6.3.0: {}
+  ccount@2.0.1: {}
 
-  caniuse-lite@1.0.30001680: {}
-
-  chai@4.5.0:
+  chai@5.2.0:
     dependencies:
-      assertion-error: 1.1.0
-      check-error: 1.0.3
-      deep-eql: 4.1.4
-      get-func-name: 2.0.2
-      loupe: 2.3.7
-      pathval: 1.1.1
-      type-detect: 4.1.0
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.1.3
+      pathval: 2.0.0
 
   chalk@3.0.0:
     dependencies:
@@ -5490,11 +5234,11 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  char-regex@1.0.2: {}
+  character-entities-html4@2.1.0: {}
 
-  check-error@1.0.3:
-    dependencies:
-      get-func-name: 2.0.2
+  character-entities-legacy@3.0.0: {}
+
+  check-error@2.1.1: {}
 
   chokidar@3.6.0:
     dependencies:
@@ -5508,32 +5252,22 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  chokidar@4.0.1:
+  chokidar@4.0.3:
     dependencies:
-      readdirp: 4.0.2
+      readdirp: 4.1.2
 
-  ci-info@3.9.0: {}
+  cjs-module-lexer@1.4.3: {}
 
-  cjs-module-lexer@1.4.1: {}
-
-  cliui@8.0.1:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-
-  co@4.6.0: {}
+  clsx@2.1.1: {}
 
   code-red@1.0.4:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.14.0
+      '@types/estree': 1.0.7
+      acorn: 8.14.1
       estree-walker: 3.0.3
       periscopic: 3.1.0
 
-  collect-v8-coverage@1.0.2: {}
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -5544,32 +5278,19 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
-  concat-map@0.0.1: {}
+  comma-separated-tokens@2.0.3: {}
 
-  confbox@0.1.8: {}
+  commander@7.2.0: {}
+
+  concat-map@0.0.1: {}
 
   convert-source-map@2.0.0: {}
 
   cookie@0.6.0: {}
 
-  create-jest@29.7.0(@types/node@22.9.0):
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@22.9.0)
-      jest-util: 29.7.0
-      prompts: 2.4.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   cron-parser@4.9.0:
     dependencies:
-      luxon: 3.5.0
+      luxon: 3.6.0
 
   cross-spawn@7.0.6:
     dependencies:
@@ -5586,50 +5307,200 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssstyle@3.0.0:
+  cssstyle@4.3.0:
     dependencies:
-      rrweb-cssom: 0.6.0
+      '@asamuzakjp/css-color': 3.1.1
+      rrweb-cssom: 0.8.0
 
-  data-urls@4.0.0:
+  csstype@3.1.3: {}
+
+  d3-array@3.2.4:
     dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 12.0.1
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
 
   dayjs@1.11.13: {}
 
-  debug@4.3.7:
+  debug@4.4.0:
     dependencies:
       ms: 2.1.3
 
-  decimal.js@10.4.3: {}
+  decimal.js@10.5.0: {}
 
-  dedent@1.5.3: {}
-
-  deep-eql@4.1.4:
-    dependencies:
-      type-detect: 4.1.0
+  deep-eql@5.0.2: {}
 
   deep-equal@2.2.3:
     dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
       es-get-iterator: 1.1.3
-      get-intrinsic: 1.2.4
-      is-arguments: 1.1.1
-      is-array-buffer: 3.0.4
-      is-date-object: 1.0.5
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
+      get-intrinsic: 1.3.0
+      is-arguments: 1.2.0
+      is-array-buffer: 3.0.5
+      is-date-object: 1.1.0
+      is-regex: 1.2.1
+      is-shared-array-buffer: 1.0.4
       isarray: 2.0.5
       object-is: 1.1.6
       object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.3
-      side-channel: 1.0.6
-      which-boxed-primitive: 1.0.2
+      object.assign: 4.1.7
+      regexp.prototype.flags: 1.5.4
+      side-channel: 1.1.0
+      which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.15
+      which-typed-array: 1.1.19
 
   deep-is@0.1.4: {}
 
@@ -5637,9 +5508,9 @@ snapshots:
 
   define-data-property@1.1.4:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
       es-errors: 1.3.0
-      gopd: 1.0.1
+      gopd: 1.2.0
 
   define-properties@1.2.1:
     dependencies:
@@ -5647,197 +5518,192 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
 
-  detect-indent@6.1.0: {}
-
   detect-libc@1.0.3:
     optional: true
 
-  detect-newline@3.1.0: {}
-
   devalue@5.1.1: {}
 
-  diff-sequences@29.6.3: {}
-
-  dir-glob@3.0.1:
+  devlop@1.1.0:
     dependencies:
-      path-type: 4.0.0
+      dequal: 2.0.3
 
   dlv@1.1.3: {}
 
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
-
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
 
-  domexception@4.0.0:
+  dotenv@16.4.7: {}
+
+  dunder-proto@1.0.1:
     dependencies:
-      webidl-conversions: 7.0.0
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
 
-  dotenv@16.4.5: {}
-
-  echarts@5.5.1:
+  echarts@5.6.0:
     dependencies:
       tslib: 2.3.0
-      zrender: 5.6.0
+      zrender: 5.6.1
 
-  electron-to-chromium@1.5.63: {}
+  electron-to-chromium@1.5.128: {}
 
-  emittery@0.13.1: {}
-
-  emoji-regex@8.0.0: {}
+  emoji-regex-xs@1.0.0: {}
 
   entities@4.5.0: {}
 
-  envfile@7.1.0: {}
-
-  error-ex@1.3.2:
-    dependencies:
-      is-arrayish: 0.2.1
-
-  es-define-property@1.0.0:
-    dependencies:
-      get-intrinsic: 1.2.4
+  es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
   es-get-iterator@1.1.3:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
-      is-arguments: 1.1.1
+      call-bind: 1.0.8
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      is-arguments: 1.2.0
       is-map: 2.0.3
       is-set: 2.0.3
-      is-string: 1.0.7
+      is-string: 1.1.1
       isarray: 2.0.5
-      stop-iteration-iterator: 1.0.0
+      stop-iteration-iterator: 1.1.0
 
-  es6-promise@3.3.1: {}
+  es-module-lexer@1.6.0: {}
 
-  esbuild@0.21.5:
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  esbuild@0.25.1:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
+      '@esbuild/aix-ppc64': 0.25.1
+      '@esbuild/android-arm': 0.25.1
+      '@esbuild/android-arm64': 0.25.1
+      '@esbuild/android-x64': 0.25.1
+      '@esbuild/darwin-arm64': 0.25.1
+      '@esbuild/darwin-x64': 0.25.1
+      '@esbuild/freebsd-arm64': 0.25.1
+      '@esbuild/freebsd-x64': 0.25.1
+      '@esbuild/linux-arm': 0.25.1
+      '@esbuild/linux-arm64': 0.25.1
+      '@esbuild/linux-ia32': 0.25.1
+      '@esbuild/linux-loong64': 0.25.1
+      '@esbuild/linux-mips64el': 0.25.1
+      '@esbuild/linux-ppc64': 0.25.1
+      '@esbuild/linux-riscv64': 0.25.1
+      '@esbuild/linux-s390x': 0.25.1
+      '@esbuild/linux-x64': 0.25.1
+      '@esbuild/netbsd-arm64': 0.25.1
+      '@esbuild/netbsd-x64': 0.25.1
+      '@esbuild/openbsd-arm64': 0.25.1
+      '@esbuild/openbsd-x64': 0.25.1
+      '@esbuild/sunos-x64': 0.25.1
+      '@esbuild/win32-arm64': 0.25.1
+      '@esbuild/win32-ia32': 0.25.1
+      '@esbuild/win32-x64': 0.25.1
 
   escalade@3.2.0: {}
 
-  escape-string-regexp@2.0.0: {}
-
   escape-string-regexp@4.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@8.57.1):
+  eslint-compat-utils@0.6.4(eslint@9.23.0):
     dependencies:
-      eslint: 8.57.1
-      semver: 7.6.3
+      eslint: 9.23.0
+      semver: 7.7.1
 
-  eslint-config-prettier@9.1.0(eslint@8.57.1):
+  eslint-config-prettier@10.1.1(eslint@9.23.0):
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.23.0
 
-  eslint-plugin-svelte@2.46.0(eslint@8.57.1)(svelte@4.2.19):
+  eslint-plugin-svelte@3.3.3(eslint@9.23.0)(svelte@5.25.3):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
       '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 8.57.1
-      eslint-compat-utils: 0.5.1(eslint@8.57.1)
+      eslint: 9.23.0
+      eslint-compat-utils: 0.6.4(eslint@9.23.0)
       esutils: 2.0.3
       known-css-properties: 0.35.0
-      postcss: 8.4.49
-      postcss-load-config: 3.1.4(postcss@8.4.49)
-      postcss-safe-parser: 6.0.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      semver: 7.6.3
-      svelte-eslint-parser: 0.43.0(svelte@4.2.19)
+      postcss: 8.5.3
+      postcss-load-config: 3.1.4(postcss@8.5.3)
+      postcss-safe-parser: 7.0.1(postcss@8.5.3)
+      semver: 7.7.1
+      svelte-eslint-parser: 1.1.1(svelte@5.25.3)
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.25.3
     transitivePeerDependencies:
       - ts-node
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.3.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint@8.57.1:
+  eslint-visitor-keys@4.2.0: {}
+
+  eslint@9.23.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@eslint/config-array': 0.19.2
+      '@eslint/config-helpers': 0.2.0
+      '@eslint/core': 0.12.0
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.23.0
+      '@eslint/plugin-kit': 0.2.7
+      '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
+      '@humanwhocodes/retry': 0.4.2
+      '@types/estree': 1.0.7
+      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.3.7
-      doctrine: 3.0.0
+      debug: 4.4.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.3.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
 
-  esm-env@1.1.4: {}
+  esm-env@1.2.2: {}
 
-  espree@9.6.1:
+  espree@10.3.0:
     dependencies:
-      acorn: 8.14.0
-      acorn-jsx: 5.3.2(acorn@8.14.0)
-      eslint-visitor-keys: 3.4.3
+      acorn: 8.14.1
+      acorn-jsx: 5.3.2(acorn@8.14.1)
+      eslint-visitor-keys: 4.2.0
 
   esprima@4.0.1: {}
 
@@ -5845,57 +5711,33 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.4.5:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
 
   estraverse@5.3.0: {}
 
+  estree-walker@2.0.2: {}
+
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.7
 
   esutils@2.0.3: {}
 
+  eventsource-parser@1.0.0: {}
+
   eventsource-parser@3.0.0: {}
 
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
-
-  exit@0.1.2: {}
-
-  expect@29.7.0:
-    dependencies:
-      '@jest/expect-utils': 29.7.0
-      jest-get-type: 29.6.3
-      jest-matcher-utils: 29.7.0
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
+  expect-type@1.2.0: {}
 
   fast-deep-equal@3.1.3: {}
 
-  fast-glob@3.3.2:
+  fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@nodelib/fs.walk': 1.2.8
@@ -5907,56 +5749,57 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fastq@1.17.1:
+  fastq@1.19.1:
     dependencies:
-      reusify: 1.0.4
+      reusify: 1.1.0
 
-  fb-watchman@2.0.2:
-    dependencies:
-      bser: 2.1.1
+  fdir@6.4.3(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
 
   fflate@0.8.2: {}
 
-  file-entry-cache@6.0.1:
+  file-entry-cache@8.0.0:
     dependencies:
-      flat-cache: 3.2.0
+      flat-cache: 4.0.1
 
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-up@4.1.0:
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  flat-cache@3.2.0:
+  flat-cache@4.0.1:
     dependencies:
-      flatted: 3.3.2
+      flatted: 3.3.3
       keyv: 4.5.4
-      rimraf: 3.0.2
 
-  flatted@3.3.2: {}
+  flatted@3.3.3: {}
 
-  focus-trap@7.6.2:
+  focus-trap@7.6.4:
     dependencies:
       tabbable: 6.2.0
 
-  for-each@0.3.3:
+  for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
 
-  form-data@4.0.1:
+  form-data@4.0.2:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
       mime-types: 2.1.35
 
+  forwarded-parse@2.1.2: {}
+
+  framesync@6.1.2:
+    dependencies:
+      tslib: 2.4.0
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.2:
@@ -5969,25 +5812,27 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuse.js@7.1.0: {}
+
   gensync@1.0.0-beta.2: {}
 
-  get-caller-file@2.0.5: {}
-
-  get-func-name@2.0.2: {}
-
-  get-intrinsic@1.2.4:
+  get-intrinsic@1.3.0:
     dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
       es-errors: 1.3.0
+      es-object-atoms: 1.1.1
       function-bind: 1.1.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
       hasown: 2.0.2
+      math-intrinsics: 1.1.0
 
-  get-package-type@0.1.0: {}
-
-  get-stream@6.0.1: {}
-
-  get-stream@8.0.1: {}
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
 
   glob-parent@5.1.2:
     dependencies:
@@ -5997,15 +5842,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   glob@9.3.5:
     dependencies:
       fs.realpath: 1.0.0
@@ -6015,75 +5851,82 @@ snapshots:
 
   globals@11.12.0: {}
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
+  globals@14.0.0: {}
+
+  globals@16.0.0: {}
 
   globalyzer@0.1.0: {}
 
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.3.2
-      merge2: 1.4.1
-      slash: 3.0.0
-
   globrex@0.1.2: {}
 
-  gopd@1.0.1:
-    dependencies:
-      get-intrinsic: 1.2.4
-
-  graceful-fs@4.2.11: {}
+  gopd@1.2.0: {}
 
   graphemer@1.4.0: {}
 
-  has-bigints@1.0.2: {}
+  has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.2:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
 
-  has-proto@1.0.3: {}
-
-  has-symbols@1.0.3: {}
+  has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
     dependencies:
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
-  html-encoding-sniffer@3.0.0:
+  hast-util-to-html@9.0.5:
     dependencies:
-      whatwg-encoding: 2.0.0
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
 
-  html-escaper@2.0.2: {}
-
-  http-proxy-agent@5.0.0:
+  hast-util-whitespace@3.0.0:
     dependencies:
-      '@tootallnate/once': 2.0.0
-      agent-base: 6.0.2
-      debug: 4.3.7
+      '@types/hast': 3.0.4
+
+  hey-listen@1.0.8: {}
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-void-elements@3.0.0: {}
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
-  human-signals@2.1.0: {}
-
-  human-signals@5.0.0: {}
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.4.0
+    transitivePeerDependencies:
+      - supports-color
 
   iconv-lite@0.6.3:
     dependencies:
@@ -6091,537 +5934,165 @@ snapshots:
 
   ignore@5.3.2: {}
 
-  immutable@5.0.2: {}
+  ignore@6.0.2: {}
 
-  import-fresh@3.3.0:
+  immutable@5.1.1: {}
+
+  import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-in-the-middle@1.11.2:
+  import-in-the-middle@1.13.1:
     dependencies:
-      acorn: 8.14.0
-      acorn-import-attributes: 1.9.5(acorn@8.14.0)
-      cjs-module-lexer: 1.4.1
+      acorn: 8.14.1
+      acorn-import-attributes: 1.9.5(acorn@8.14.1)
+      cjs-module-lexer: 1.4.3
       module-details-from-path: 1.0.3
 
-  import-local@3.2.0:
-    dependencies:
-      pkg-dir: 4.2.0
-      resolve-cwd: 3.0.0
-
   import-meta-resolve@4.1.0: {}
 
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
-  inherits@2.0.4: {}
-
-  internal-slot@1.0.7:
+  internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
-      side-channel: 1.0.6
+      side-channel: 1.1.0
 
-  is-arguments@1.1.1:
+  internmap@2.0.3: {}
+
+  is-arguments@1.2.0:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-array-buffer@3.0.4:
+  is-array-buffer@3.0.5:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
 
-  is-arrayish@0.2.1: {}
-
-  is-bigint@1.0.4:
+  is-bigint@1.1.0:
     dependencies:
-      has-bigints: 1.0.2
+      has-bigints: 1.1.0
 
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-boolean-object@1.1.2:
+  is-boolean-object@1.2.2:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-callable@1.2.7: {}
 
-  is-core-module@2.15.1:
+  is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
 
-  is-date-object@1.0.5:
+  is-date-object@1.1.0:
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-extglob@2.1.1: {}
 
-  is-fullwidth-code-point@3.0.0: {}
-
-  is-generator-fn@2.1.0: {}
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
   is-map@2.0.3: {}
 
-  is-number-object@1.0.7:
+  is-number-object@1.1.1:
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-potential-custom-element-name@1.0.1: {}
 
   is-reference@3.0.3:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.7
 
-  is-regex@1.1.4:
+  is-regex@1.2.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
+      gopd: 1.2.0
       has-tostringtag: 1.0.2
+      hasown: 2.0.2
 
   is-set@2.0.3: {}
 
-  is-shared-array-buffer@1.0.3:
+  is-shared-array-buffer@1.0.4:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
 
-  is-stream@2.0.1: {}
-
-  is-stream@3.0.0: {}
-
-  is-string@1.0.7:
+  is-string@1.1.1:
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-symbol@1.0.4:
+  is-symbol@1.1.1:
     dependencies:
-      has-symbols: 1.0.3
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
 
   is-weakmap@2.0.2: {}
 
-  is-weakset@2.0.3:
+  is-weakset@2.0.4:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
 
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
 
-  istanbul-lib-coverage@3.2.2: {}
-
-  istanbul-lib-instrument@5.2.1:
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/parser': 7.26.2
-      '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.2
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  istanbul-lib-instrument@6.0.3:
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/parser': 7.26.2
-      '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.2
-      semver: 7.6.3
-    transitivePeerDependencies:
-      - supports-color
-
-  istanbul-lib-report@3.0.1:
-    dependencies:
-      istanbul-lib-coverage: 3.2.2
-      make-dir: 4.0.0
-      supports-color: 7.2.0
-
-  istanbul-lib-source-maps@4.0.1:
-    dependencies:
-      debug: 4.3.7
-      istanbul-lib-coverage: 3.2.2
-      source-map: 0.6.1
-    transitivePeerDependencies:
-      - supports-color
-
-  istanbul-reports@3.1.7:
-    dependencies:
-      html-escaper: 2.0.2
-      istanbul-lib-report: 3.0.1
-
-  jest-changed-files@29.7.0:
-    dependencies:
-      execa: 5.1.1
-      jest-util: 29.7.0
-      p-limit: 3.1.0
-
-  jest-circus@29.7.0:
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/expect': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      chalk: 4.1.2
-      co: 4.6.0
-      dedent: 1.5.3
-      is-generator-fn: 2.1.0
-      jest-each: 29.7.0
-      jest-matcher-utils: 29.7.0
-      jest-message-util: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      p-limit: 3.1.0
-      pretty-format: 29.7.0
-      pure-rand: 6.1.0
-      slash: 3.0.0
-      stack-utils: 2.0.6
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
-  jest-cli@29.7.0(@types/node@22.9.0):
-    dependencies:
-      '@jest/core': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@22.9.0)
-      exit: 0.1.2
-      import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@22.9.0)
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
-  jest-config@29.7.0(@types/node@22.9.0):
-    dependencies:
-      '@babel/core': 7.26.0
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.26.0)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.8
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 22.9.0
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
-  jest-diff@29.7.0:
-    dependencies:
-      chalk: 4.1.2
-      diff-sequences: 29.6.3
-      jest-get-type: 29.6.3
-      pretty-format: 29.7.0
-
-  jest-docblock@29.7.0:
-    dependencies:
-      detect-newline: 3.1.0
-
-  jest-each@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      jest-get-type: 29.6.3
-      jest-util: 29.7.0
-      pretty-format: 29.7.0
-
-  jest-environment-node@29.7.0:
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/fake-timers': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      jest-mock: 29.7.0
-      jest-util: 29.7.0
-
-  jest-get-type@29.6.3: {}
-
-  jest-haste-map@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/graceful-fs': 4.1.9
-      '@types/node': 22.9.0
-      anymatch: 3.1.3
-      fb-watchman: 2.0.2
-      graceful-fs: 4.2.11
-      jest-regex-util: 29.6.3
-      jest-util: 29.7.0
-      jest-worker: 29.7.0
-      micromatch: 4.0.8
-      walker: 1.0.8
-    optionalDependencies:
-      fsevents: 2.3.3
-
-  jest-leak-detector@29.7.0:
-    dependencies:
-      jest-get-type: 29.6.3
-      pretty-format: 29.7.0
-
-  jest-matcher-utils@29.7.0:
-    dependencies:
-      chalk: 4.1.2
-      jest-diff: 29.7.0
-      jest-get-type: 29.6.3
-      pretty-format: 29.7.0
-
-  jest-message-util@29.7.0:
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@jest/types': 29.6.3
-      '@types/stack-utils': 2.0.3
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      micromatch: 4.0.8
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      stack-utils: 2.0.6
-
-  jest-mock@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      jest-util: 29.7.0
-
-  jest-pnp-resolver@1.2.3(jest-resolve@29.7.0):
-    optionalDependencies:
-      jest-resolve: 29.7.0
-
-  jest-regex-util@29.6.3: {}
-
-  jest-resolve-dependencies@29.7.0:
-    dependencies:
-      jest-regex-util: 29.6.3
-      jest-snapshot: 29.7.0
-    transitivePeerDependencies:
-      - supports-color
-
-  jest-resolve@29.7.0:
-    dependencies:
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.7.0
-      jest-pnp-resolver: 1.2.3(jest-resolve@29.7.0)
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      resolve: 1.22.8
-      resolve.exports: 2.0.2
-      slash: 3.0.0
-
-  jest-runner@29.7.0:
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/environment': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      chalk: 4.1.2
-      emittery: 0.13.1
-      graceful-fs: 4.2.11
-      jest-docblock: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-haste-map: 29.7.0
-      jest-leak-detector: 29.7.0
-      jest-message-util: 29.7.0
-      jest-resolve: 29.7.0
-      jest-runtime: 29.7.0
-      jest-util: 29.7.0
-      jest-watcher: 29.7.0
-      jest-worker: 29.7.0
-      p-limit: 3.1.0
-      source-map-support: 0.5.13
-    transitivePeerDependencies:
-      - supports-color
-
-  jest-runtime@29.7.0:
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/fake-timers': 29.7.0
-      '@jest/globals': 29.7.0
-      '@jest/source-map': 29.6.3
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      chalk: 4.1.2
-      cjs-module-lexer: 1.4.1
-      collect-v8-coverage: 1.0.2
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-mock: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      slash: 3.0.0
-      strip-bom: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  jest-snapshot@29.7.0:
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/generator': 7.26.2
-      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
-      '@babel/types': 7.26.0
-      '@jest/expect-utils': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.0)
-      chalk: 4.1.2
-      expect: 29.7.0
-      graceful-fs: 4.2.11
-      jest-diff: 29.7.0
-      jest-get-type: 29.6.3
-      jest-matcher-utils: 29.7.0
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
-      natural-compare: 1.4.0
-      pretty-format: 29.7.0
-      semver: 7.6.3
-    transitivePeerDependencies:
-      - supports-color
-
-  jest-util@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      graceful-fs: 4.2.11
-      picomatch: 2.3.1
-
-  jest-validate@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      camelcase: 6.3.0
-      chalk: 4.1.2
-      jest-get-type: 29.6.3
-      leven: 3.1.0
-      pretty-format: 29.7.0
-
-  jest-watcher@29.7.0:
-    dependencies:
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.9.0
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      emittery: 0.13.1
-      jest-util: 29.7.0
-      string-length: 4.0.2
-
-  jest-worker@29.7.0:
-    dependencies:
-      '@types/node': 22.9.0
-      jest-util: 29.7.0
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-
-  jest@29.7.0(@types/node@22.9.0):
-    dependencies:
-      '@jest/core': 29.7.0
-      '@jest/types': 29.6.3
-      import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.9.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   js-tokens@4.0.0: {}
 
-  js-tokens@9.0.0: {}
-
-  js-yaml@3.14.1:
-    dependencies:
-      argparse: 1.0.10
-      esprima: 4.0.1
-
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@22.1.0:
+  jsdom@26.0.0:
     dependencies:
-      abab: 2.0.6
-      cssstyle: 3.0.0
-      data-urls: 4.0.0
-      decimal.js: 10.4.3
-      domexception: 4.0.0
-      form-data: 4.0.1
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
+      cssstyle: 4.3.0
+      data-urls: 5.0.0
+      decimal.js: 10.5.0
+      form-data: 4.0.2
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.13
+      nwsapi: 2.2.20
       parse5: 7.2.1
-      rrweb-cssom: 0.6.0
+      rrweb-cssom: 0.8.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.4
-      w3c-xmlserializer: 4.0.0
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
       webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 12.0.1
-      ws: 8.18.0
-      xml-name-validator: 4.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.18.1
+      xml-name-validator: 5.0.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  jsesc@3.0.2: {}
+  jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-schema@0.4.0: {}
@@ -6634,14 +6105,10 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
-  kleur@3.0.3: {}
-
   kleur@4.1.5: {}
 
   known-css-properties@0.35.0: {}
 
-  leven@3.1.0: {}
-
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -6649,19 +6116,8 @@ snapshots:
 
   lilconfig@2.1.0: {}
 
-  lines-and-columns@1.2.4: {}
-
-  local-pkg@0.5.0:
-    dependencies:
-      mlly: 1.7.3
-      pkg-types: 1.2.1
-
   locate-character@3.0.0: {}
 
-  locate-path@5.0.0:
-    dependencies:
-      p-locate: 4.1.0
-
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -6670,9 +6126,11 @@ snapshots:
 
   lodash@4.17.21: {}
 
-  loupe@2.3.7:
+  loose-envify@1.4.0:
     dependencies:
-      get-func-name: 2.0.2
+      js-tokens: 4.0.0
+
+  loupe@3.1.3: {}
 
   lru-cache@10.4.3: {}
 
@@ -6680,11 +6138,11 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  luxon@3.5.0: {}
+  luxon@3.6.0: {}
 
   lz-string@1.5.0: {}
 
-  magic-string@0.30.13:
+  magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -6698,24 +6156,45 @@ snapshots:
 
   magicast@0.2.8:
     dependencies:
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
-      recast: 0.23.9
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
+      recast: 0.23.11
 
-  make-dir@4.0.0:
-    dependencies:
-      semver: 7.6.3
+  math-intrinsics@1.1.0: {}
 
-  makeerror@1.0.12:
+  mdast-util-to-hast@13.2.0:
     dependencies:
-      tmpl: 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
 
   mdn-data@2.0.30: {}
 
-  merge-stream@2.0.0: {}
-
   merge2@1.4.1: {}
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -6727,10 +6206,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mimic-fn@2.1.0: {}
-
-  mimic-fn@4.0.0: {}
-
   min-indent@1.0.1: {}
 
   minimatch@3.1.2:
@@ -6751,30 +6226,21 @@ snapshots:
 
   minipass@7.1.2: {}
 
-  mkdirp@0.5.6:
-    dependencies:
-      minimist: 1.2.8
-
-  mlly@1.7.3:
-    dependencies:
-      acorn: 8.14.0
-      pathe: 1.1.2
-      pkg-types: 1.2.1
-      ufo: 1.5.4
-
   module-details-from-path@1.0.3: {}
 
   mri@1.2.0: {}
 
-  mrmime@2.0.0: {}
+  mrmime@2.0.1: {}
 
   ms@2.1.3: {}
 
-  nanoid@3.3.7: {}
+  nanoid@3.3.11: {}
 
-  nanoid@3.3.9: {}
+  nanoid@3.3.6: {}
 
-  nanoid@5.0.8: {}
+  nanoid@5.1.5: {}
+
+  nanotar@0.1.1: {}
 
   natural-compare@1.4.0: {}
 
@@ -6785,51 +6251,37 @@ snapshots:
     dependencies:
       whatwg-url: 5.0.0
 
-  node-int64@0.4.0: {}
-
-  node-releases@2.0.18: {}
+  node-releases@2.0.19: {}
 
   normalize-path@3.0.0: {}
 
   normalize.css@8.0.1: {}
 
-  npm-run-path@4.0.1:
-    dependencies:
-      path-key: 3.1.1
+  nwsapi@2.2.20: {}
 
-  npm-run-path@5.3.0:
-    dependencies:
-      path-key: 4.0.0
-
-  nwsapi@2.2.13: {}
-
-  object-inspect@1.13.3: {}
+  object-inspect@1.13.4: {}
 
   object-is@1.1.6:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
 
   object-keys@1.1.1: {}
 
-  object.assign@4.1.5:
+  object.assign@4.1.7:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      has-symbols: 1.0.3
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  once@1.4.0:
+  oniguruma-to-es@2.3.0:
     dependencies:
-      wrappy: 1.0.2
-
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
-  onetime@6.0.0:
-    dependencies:
-      mimic-fn: 4.0.0
+      emoji-regex-xs: 1.0.0
+      regex: 5.1.1
+      regex-recursion: 5.1.1
 
   optionator@0.9.4:
     dependencies:
@@ -6840,51 +6292,26 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  p-limit@2.3.0:
-    dependencies:
-      p-try: 2.2.0
-
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@5.0.0:
-    dependencies:
-      yocto-queue: 1.1.1
-
-  p-locate@4.1.0:
-    dependencies:
-      p-limit: 2.3.0
-
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
-  p-try@2.2.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
   parse5@7.2.1:
     dependencies:
       entities: 4.5.0
 
   path-exists@4.0.0: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@3.1.1: {}
 
-  path-key@4.0.0: {}
-
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -6892,21 +6319,19 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
-  path-type@4.0.0: {}
+  pathe@2.0.3: {}
 
-  pathe@1.1.2: {}
-
-  pathval@1.1.1: {}
+  pathval@2.0.0: {}
 
   periscopic@3.1.0:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.7
       estree-walker: 3.0.3
       is-reference: 3.0.3
 
   pg-int8@1.0.1: {}
 
-  pg-protocol@1.7.0: {}
+  pg-protocol@1.8.0: {}
 
   pg-types@2.2.0:
     dependencies:
@@ -6920,53 +6345,50 @@ snapshots:
 
   picomatch@2.3.1: {}
 
-  pirates@4.0.6: {}
-
-  pkg-dir@4.2.0:
-    dependencies:
-      find-up: 4.1.0
-
-  pkg-types@1.2.1:
-    dependencies:
-      confbox: 0.1.8
-      mlly: 1.7.3
-      pathe: 1.1.2
+  picomatch@4.0.2: {}
 
   plausible-tracker@0.3.9: {}
 
-  playwright-core@1.49.0: {}
+  playwright-core@1.51.1: {}
 
-  playwright@1.49.0:
+  playwright@1.51.1:
     dependencies:
-      playwright-core: 1.49.0
+      playwright-core: 1.51.1
     optionalDependencies:
       fsevents: 2.3.2
 
-  possible-typed-array-names@1.0.0: {}
+  popmotion@11.0.5:
+    dependencies:
+      framesync: 6.1.2
+      hey-listen: 1.0.8
+      style-value-types: 5.1.2
+      tslib: 2.4.0
 
-  postcss-load-config@3.1.4(postcss@8.4.49):
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-load-config@3.1.4(postcss@8.5.3):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.49
+      postcss: 8.5.3
 
-  postcss-safe-parser@6.0.0(postcss@8.4.49):
+  postcss-safe-parser@7.0.1(postcss@8.5.3):
     dependencies:
-      postcss: 8.4.49
+      postcss: 8.5.3
 
-  postcss-scss@4.0.9(postcss@8.4.49):
+  postcss-scss@4.0.9(postcss@8.5.3):
     dependencies:
-      postcss: 8.4.49
+      postcss: 8.5.3
 
-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss@8.4.49:
+  postcss@8.5.3:
     dependencies:
-      nanoid: 3.3.7
+      nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -6982,12 +6404,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.2.8(prettier@3.3.3)(svelte@4.2.19):
+  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.25.3):
     dependencies:
-      prettier: 3.3.3
-      svelte: 4.2.19
+      prettier: 3.5.3
+      svelte: 5.25.3
 
-  prettier@3.3.3: {}
+  prettier@3.5.3: {}
 
   pretty-bytes@6.1.1: {}
 
@@ -6997,46 +6419,37 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  pretty-format@29.7.0:
-    dependencies:
-      '@jest/schemas': 29.6.3
-      ansi-styles: 5.2.0
-      react-is: 18.3.1
-
-  prismjs@1.29.0: {}
+  prismjs@1.30.0: {}
 
   progress@2.0.3: {}
 
-  prompts@2.4.2:
-    dependencies:
-      kleur: 3.0.3
-      sisteransi: 1.0.5
+  property-information@7.0.0: {}
 
   proxy-from-env@1.1.0: {}
 
-  psl@1.10.0:
-    dependencies:
-      punycode: 2.3.1
-
   punycode@2.3.1: {}
 
-  pure-rand@6.1.0: {}
-
-  querystringify@2.2.0: {}
-
   queue-microtask@1.2.3: {}
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
   react-is@17.0.2: {}
 
-  react-is@18.3.1: {}
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
 
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.2: {}
+  readdirp@4.1.2: {}
 
-  recast@0.23.9:
+  recast@0.23.11:
     dependencies:
       ast-types: 0.16.1
       esprima: 4.0.1
@@ -7051,11 +6464,24 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
-  regexp.prototype.flags@1.5.3:
+  regex-recursion@5.1.1:
     dependencies:
-      call-bind: 1.0.7
+      regex: 5.1.1
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@5.1.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
       define-properties: 1.2.1
       es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
       set-function-name: 2.0.2
 
   remarkable@2.0.1:
@@ -7063,104 +6489,99 @@ snapshots:
       argparse: 1.0.10
       autolinker: 3.16.2
 
-  require-directory@2.1.1: {}
-
-  require-in-the-middle@7.4.0:
+  require-in-the-middle@7.5.2:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       module-details-from-path: 1.0.3
-      resolve: 1.22.8
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
-  requires-port@1.0.0: {}
-
-  resolve-cwd@3.0.0:
-    dependencies:
-      resolve-from: 5.0.0
-
   resolve-from@4.0.0: {}
 
-  resolve-from@5.0.0: {}
-
-  resolve.exports@2.0.2: {}
-
-  resolve@1.22.8:
+  resolve@1.22.10:
     dependencies:
-      is-core-module: 2.15.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  reusify@1.0.4: {}
+  reusify@1.1.0: {}
 
-  rimraf@2.7.1:
-    dependencies:
-      glob: 7.2.3
+  robust-predicates@3.0.2: {}
 
-  rimraf@3.0.2:
-    dependencies:
-      glob: 7.2.3
-
-  rollup@4.27.3:
+  rollup@4.37.0:
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.27.3
-      '@rollup/rollup-android-arm64': 4.27.3
-      '@rollup/rollup-darwin-arm64': 4.27.3
-      '@rollup/rollup-darwin-x64': 4.27.3
-      '@rollup/rollup-freebsd-arm64': 4.27.3
-      '@rollup/rollup-freebsd-x64': 4.27.3
-      '@rollup/rollup-linux-arm-gnueabihf': 4.27.3
-      '@rollup/rollup-linux-arm-musleabihf': 4.27.3
-      '@rollup/rollup-linux-arm64-gnu': 4.27.3
-      '@rollup/rollup-linux-arm64-musl': 4.27.3
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.27.3
-      '@rollup/rollup-linux-riscv64-gnu': 4.27.3
-      '@rollup/rollup-linux-s390x-gnu': 4.27.3
-      '@rollup/rollup-linux-x64-gnu': 4.27.3
-      '@rollup/rollup-linux-x64-musl': 4.27.3
-      '@rollup/rollup-win32-arm64-msvc': 4.27.3
-      '@rollup/rollup-win32-ia32-msvc': 4.27.3
-      '@rollup/rollup-win32-x64-msvc': 4.27.3
+      '@rollup/rollup-android-arm-eabi': 4.37.0
+      '@rollup/rollup-android-arm64': 4.37.0
+      '@rollup/rollup-darwin-arm64': 4.37.0
+      '@rollup/rollup-darwin-x64': 4.37.0
+      '@rollup/rollup-freebsd-arm64': 4.37.0
+      '@rollup/rollup-freebsd-x64': 4.37.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.37.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.37.0
+      '@rollup/rollup-linux-arm64-gnu': 4.37.0
+      '@rollup/rollup-linux-arm64-musl': 4.37.0
+      '@rollup/rollup-linux-loongarch64-gnu': 4.37.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.37.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.37.0
+      '@rollup/rollup-linux-riscv64-musl': 4.37.0
+      '@rollup/rollup-linux-s390x-gnu': 4.37.0
+      '@rollup/rollup-linux-x64-gnu': 4.37.0
+      '@rollup/rollup-linux-x64-musl': 4.37.0
+      '@rollup/rollup-win32-arm64-msvc': 4.37.0
+      '@rollup/rollup-win32-ia32-msvc': 4.37.0
+      '@rollup/rollup-win32-x64-msvc': 4.37.0
       fsevents: 2.3.3
 
-  rrweb-cssom@0.6.0: {}
+  rrweb-cssom@0.8.0: {}
 
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
 
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
   safer-buffer@2.1.2: {}
 
-  sander@0.5.1:
+  sass@1.86.0:
     dependencies:
-      es6-promise: 3.3.1
-      graceful-fs: 4.2.11
-      mkdirp: 0.5.6
-      rimraf: 2.7.1
-
-  sass@1.81.0:
-    dependencies:
-      chokidar: 4.0.1
-      immutable: 5.0.2
+      chokidar: 4.0.3
+      immutable: 5.1.1
       source-map-js: 1.2.1
     optionalDependencies:
-      '@parcel/watcher': 2.5.0
+      '@parcel/watcher': 2.5.1
 
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
 
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
   secure-json-parse@2.7.0: {}
 
   semver@6.3.1: {}
 
-  semver@7.6.3: {}
+  semver@7.7.1: {}
+
+  seroval-plugins@1.2.1(seroval@1.2.1):
+    dependencies:
+      seroval: 1.2.1
+
+  seroval@1.2.1: {}
 
   set-cookie-parser@2.7.1: {}
 
@@ -7169,8 +6590,8 @@ snapshots:
       define-data-property: 1.1.4
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
       has-property-descriptors: 1.0.2
 
   set-function-name@2.0.2:
@@ -7186,43 +6607,65 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@1.29.2:
+    dependencies:
+      '@shikijs/core': 1.29.2
+      '@shikijs/engine-javascript': 1.29.2
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/langs': 1.29.2
+      '@shikijs/themes': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   shimmer@1.2.1: {}
 
-  side-channel@1.0.6:
+  side-channel-list@1.0.0:
     dependencies:
-      call-bind: 1.0.7
       es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      object-inspect: 1.13.3
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
 
   siginfo@2.0.0: {}
 
-  signal-exit@3.0.7: {}
-
-  signal-exit@4.1.0: {}
-
-  sirv@2.0.4:
+  sirv@3.0.1:
     dependencies:
       '@polka/url': 1.0.0-next.28
-      mrmime: 2.0.0
+      mrmime: 2.0.1
       totalist: 3.0.1
 
-  sirv@3.0.0:
+  solid-js@1.9.5:
     dependencies:
-      '@polka/url': 1.0.0-next.28
-      mrmime: 2.0.0
-      totalist: 3.0.1
+      csstype: 3.1.3
+      seroval: 1.2.1
+      seroval-plugins: 1.2.1(seroval@1.2.1)
 
-  sisteransi@1.0.5: {}
-
-  slash@3.0.0: {}
-
-  sorcery@0.11.1:
+  solid-swr-store@0.10.7(solid-js@1.9.5)(swr-store@0.10.6):
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      buffer-crc32: 1.0.0
-      minimist: 1.2.8
-      sander: 0.5.1
+      solid-js: 1.9.5
+      swr-store: 0.10.6
 
   sorcery@1.0.0:
     dependencies:
@@ -7232,47 +6675,30 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map-support@0.5.13:
-    dependencies:
-      buffer-from: 1.1.2
-      source-map: 0.6.1
-
   source-map@0.6.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   sprintf-js@1.0.3: {}
 
-  stack-utils@2.0.6:
+  sswr@2.0.0(svelte@5.25.3):
     dependencies:
-      escape-string-regexp: 2.0.0
+      svelte: 5.25.3
+      swrev: 4.0.0
 
   stackback@0.0.2: {}
 
-  std-env@3.8.0: {}
+  std-env@3.8.1: {}
 
-  stop-iteration-iterator@1.0.0:
+  stop-iteration-iterator@1.1.0:
     dependencies:
-      internal-slot: 1.0.7
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
 
-  string-length@4.0.2:
+  stringify-entities@4.0.4:
     dependencies:
-      char-regex: 1.0.2
-      strip-ansi: 6.0.1
-
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  strip-ansi@6.0.1:
-    dependencies:
-      ansi-regex: 5.0.1
-
-  strip-bom@4.0.0: {}
-
-  strip-final-newline@2.0.0: {}
-
-  strip-final-newline@3.0.0: {}
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
 
   strip-indent@3.0.0:
     dependencies:
@@ -7280,100 +6706,79 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  strip-literal@2.1.0:
+  style-value-types@5.1.2:
     dependencies:
-      js-tokens: 9.0.0
+      hey-listen: 1.0.8
+      tslib: 2.4.0
 
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
-  supports-color@8.1.1:
-    dependencies:
-      has-flag: 4.0.0
-
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.8.6(@babel/core@7.26.0)(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(svelte@4.2.19):
+  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.25.3)(typescript@5.8.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
+      chokidar: 4.0.3
+      fdir: 6.4.3(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 4.2.19
-      svelte-preprocess: 5.1.4(@babel/core@7.26.0)(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(svelte@4.2.19)(typescript@5.6.3)
-      typescript: 5.6.3
+      svelte: 5.25.3
+      typescript: 5.8.2
     transitivePeerDependencies:
-      - '@babel/core'
-      - coffeescript
-      - less
-      - postcss
-      - postcss-load-config
-      - pug
-      - sass
-      - stylus
-      - sugarss
+      - picomatch
 
-  svelte-confetti@1.4.0(svelte@4.2.19):
+  svelte-confetti@1.4.0(svelte@5.25.3):
     dependencies:
-      svelte: 4.2.19
+      svelte: 5.25.3
 
-  svelte-eslint-parser@0.43.0(svelte@4.2.19):
+  svelte-eslint-parser@1.1.1(svelte@5.25.3):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      postcss: 8.4.49
-      postcss-scss: 4.0.9(postcss@8.4.49)
+      eslint-scope: 8.3.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
+      postcss: 8.5.3
+      postcss-scss: 4.0.9(postcss@8.5.3)
+      postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.25.3
 
-  svelte-hmr@0.16.0(svelte@4.2.19):
+  svelte-motion@0.12.2(svelte@5.25.3):
     dependencies:
-      svelte: 4.2.19
+      '@types/react': 18.3.20
+      framesync: 6.1.2
+      popmotion: 11.0.5
+      style-value-types: 5.1.2
+      svelte: 5.25.3
+      tslib: 2.8.1
 
-  svelte-jester@2.3.2(jest@29.7.0(@types/node@22.9.0))(svelte@4.2.19):
+  svelte-preprocess@6.0.3(@babel/core@7.26.10)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.0)(svelte@5.25.3)(typescript@5.8.2):
     dependencies:
-      jest: 29.7.0(@types/node@22.9.0)
-      svelte: 4.2.19
-
-  svelte-preprocess@5.1.4(@babel/core@7.26.0)(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(svelte@4.2.19)(typescript@5.6.3):
-    dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.13
-      sorcery: 0.11.1
-      strip-indent: 3.0.0
-      svelte: 4.2.19
+      svelte: 5.25.3
     optionalDependencies:
-      '@babel/core': 7.26.0
-      postcss: 8.4.49
-      postcss-load-config: 3.1.4(postcss@8.4.49)
-      sass: 1.81.0
-      typescript: 5.6.3
-
-  svelte-preprocess@6.0.3(@babel/core@7.26.0)(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(svelte@4.2.19)(typescript@5.6.3):
-    dependencies:
-      svelte: 4.2.19
-    optionalDependencies:
-      '@babel/core': 7.26.0
-      postcss: 8.4.49
-      postcss-load-config: 3.1.4(postcss@8.4.49)
-      sass: 1.81.0
-      typescript: 5.6.3
+      '@babel/core': 7.26.10
+      postcss: 8.5.3
+      postcss-load-config: 3.1.4(postcss@8.5.3)
+      sass: 1.86.0
+      typescript: 5.8.2
 
   svelte-sequential-preprocessor@2.0.2:
     dependencies:
       svelte: 4.2.19
       tslib: 2.7.0
 
+  svelte-sonner@0.3.28(svelte@5.25.3):
+    dependencies:
+      svelte: 5.25.3
+
   svelte@4.2.19:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
-      '@types/estree': 1.0.6
-      acorn: 8.14.0
+      '@types/estree': 1.0.7
+      acorn: 8.14.1
       aria-query: 5.3.2
       axobject-query: 4.1.0
       code-red: 1.0.4
@@ -7381,21 +6786,45 @@ snapshots:
       estree-walker: 3.0.3
       is-reference: 3.0.3
       locate-character: 3.0.0
-      magic-string: 0.30.13
+      magic-string: 0.30.17
       periscopic: 3.1.0
 
+  svelte@5.25.3:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1)
+      '@types/estree': 1.0.7
+      acorn: 8.14.1
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.5
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.17
+      zimmerframe: 1.1.2
+
+  swr-store@0.10.6:
+    dependencies:
+      dequal: 2.0.3
+
+  swr@2.2.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)
+
+  swrev@4.0.0: {}
+
+  swrv@1.0.4(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+
   symbol-tree@3.2.4: {}
 
   tabbable@6.2.0: {}
 
-  test-exclude@6.0.0:
-    dependencies:
-      '@istanbuljs/schema': 0.1.3
-      glob: 7.2.3
-      minimatch: 3.1.2
-
-  text-table@0.2.0: {}
-
   the-new-css-reset@1.11.3: {}
 
   tiny-glob@0.2.9:
@@ -7407,15 +6836,28 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinypool@0.8.4: {}
+  tinyexec@0.3.2: {}
 
-  tinyspy@2.2.1: {}
+  tinyglobby@0.2.12:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
+  tinypool@1.0.2: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@3.0.2: {}
 
   tippy.js@6.3.7:
     dependencies:
       '@popperjs/core': 2.11.8
 
-  tmpl@1.0.5: {}
+  tldts-core@6.1.85: {}
+
+  tldts@6.1.85:
+    dependencies:
+      tldts-core: 6.1.85
 
   to-regex-range@5.0.1:
     dependencies:
@@ -7423,25 +6865,26 @@ snapshots:
 
   totalist@3.0.1: {}
 
-  tough-cookie@4.1.4:
+  tough-cookie@5.1.2:
     dependencies:
-      psl: 1.10.0
-      punycode: 2.3.1
-      universalify: 0.2.0
-      url-parse: 1.5.10
+      tldts: 6.1.85
 
   tr46@0.0.3: {}
 
-  tr46@4.1.1:
+  tr46@5.1.0:
     dependencies:
       punycode: 2.3.1
 
-  ts-api-utils@1.4.0(typescript@5.6.3):
+  trim-lines@3.0.1: {}
+
+  ts-api-utils@2.1.0(typescript@5.8.2):
     dependencies:
-      typescript: 5.6.3
+      typescript: 5.8.2
 
   tslib@2.3.0: {}
 
+  tslib@2.4.0: {}
+
   tslib@2.7.0: {}
 
   tslib@2.8.1: {}
@@ -7450,32 +6893,53 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-detect@4.0.8: {}
+  typescript-eslint@8.30.1(eslint@9.23.0)(typescript@5.8.2):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/parser': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      eslint: 9.23.0
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
 
-  type-detect@4.1.0: {}
+  typescript@5.8.2: {}
 
-  type-fest@0.20.2: {}
+  undici-types@6.20.0: {}
 
-  type-fest@0.21.3: {}
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
 
-  typescript@5.6.3: {}
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
 
-  ufo@1.5.4: {}
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
 
-  undici-types@6.19.8: {}
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
 
-  universalify@0.2.0: {}
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
 
   unplugin@1.0.1:
     dependencies:
-      acorn: 8.14.0
+      acorn: 8.14.1
       chokidar: 3.6.0
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
 
-  update-browserslist-db@1.1.1(browserslist@4.24.2):
+  update-browserslist-db@1.1.3(browserslist@4.24.4):
     dependencies:
-      browserslist: 4.24.2
+      browserslist: 4.24.4
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -7483,28 +6947,32 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  url-parse@1.5.10:
+  use-sync-external-store@1.5.0(react@18.3.1):
     dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
+      react: 18.3.1
 
   util-deprecate@1.0.2: {}
 
-  v8-to-istanbul@9.3.0:
+  vfile-message@4.0.2:
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      '@types/istanbul-lib-coverage': 2.0.6
-      convert-source-map: 2.0.0
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
 
-  vite-node@1.6.1(@types/node@22.9.0)(sass@1.81.0):
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+
+  vite-node@3.0.9(@types/node@22.13.14)(sass@1.86.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7
-      pathe: 1.1.2
-      picocolors: 1.1.1
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
+      debug: 4.4.0
+      es-module-lexer: 1.6.0
+      pathe: 2.0.3
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
     transitivePeerDependencies:
       - '@types/node'
+      - jiti
       - less
       - lightningcss
       - sass
@@ -7513,64 +6981,76 @@ snapshots:
       - sugarss
       - supports-color
       - terser
+      - tsx
+      - yaml
 
-  vite@5.4.11(@types/node@22.9.0)(sass@1.81.0):
+  vite@6.2.3(@types/node@22.13.14)(sass@1.86.0):
     dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.49
-      rollup: 4.27.3
+      esbuild: 0.25.1
+      postcss: 8.5.3
+      rollup: 4.37.0
     optionalDependencies:
-      '@types/node': 22.9.0
+      '@types/node': 22.13.14
       fsevents: 2.3.3
-      sass: 1.81.0
+      sass: 1.86.0
 
-  vitefu@0.2.5(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)):
+  vitefu@1.0.6(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)):
     optionalDependencies:
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
 
-  vitest@1.6.1(@types/node@22.9.0)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.81.0):
+  vitest@3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0):
     dependencies:
-      '@vitest/expect': 1.6.1
-      '@vitest/runner': 1.6.1
-      '@vitest/snapshot': 1.6.1
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      acorn-walk: 8.3.4
-      chai: 4.5.0
-      debug: 4.3.7
-      execa: 8.0.1
-      local-pkg: 0.5.0
-      magic-string: 0.30.13
-      pathe: 1.1.2
-      picocolors: 1.1.1
-      std-env: 3.8.0
-      strip-literal: 2.1.0
+      '@vitest/expect': 3.0.9
+      '@vitest/mocker': 3.0.9(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@vitest/pretty-format': 3.0.9
+      '@vitest/runner': 3.0.9
+      '@vitest/snapshot': 3.0.9
+      '@vitest/spy': 3.0.9
+      '@vitest/utils': 3.0.9
+      chai: 5.2.0
+      debug: 4.4.0
+      expect-type: 1.2.0
+      magic-string: 0.30.17
+      pathe: 2.0.3
+      std-env: 3.8.1
       tinybench: 2.9.0
-      tinypool: 0.8.4
-      vite: 5.4.11(@types/node@22.9.0)(sass@1.81.0)
-      vite-node: 1.6.1(@types/node@22.9.0)(sass@1.81.0)
+      tinyexec: 0.3.2
+      tinypool: 1.0.2
+      tinyrainbow: 2.0.0
+      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite-node: 3.0.9(@types/node@22.13.14)(sass@1.86.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.9.0
-      '@vitest/ui': 1.6.0(vitest@1.6.1)
-      jsdom: 22.1.0
+      '@types/node': 22.13.14
+      '@vitest/ui': 3.0.9(vitest@3.0.9)
+      jsdom: 26.0.0
     transitivePeerDependencies:
+      - jiti
       - less
       - lightningcss
+      - msw
       - sass
       - sass-embedded
       - stylus
       - sugarss
       - supports-color
       - terser
+      - tsx
+      - yaml
 
-  w3c-xmlserializer@4.0.0:
+  vue@3.5.13(typescript@5.8.2):
     dependencies:
-      xml-name-validator: 4.0.0
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.2))
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      typescript: 5.8.2
 
-  walker@1.0.8:
+  w3c-xmlserializer@5.0.0:
     dependencies:
-      makeerror: 1.0.12
+      xml-name-validator: 5.0.0
 
   webidl-conversions@3.0.1: {}
 
@@ -7580,15 +7060,15 @@ snapshots:
 
   webpack-virtual-modules@0.5.0: {}
 
-  whatwg-encoding@2.0.0:
+  whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
 
-  whatwg-mimetype@3.0.0: {}
+  whatwg-mimetype@4.0.0: {}
 
-  whatwg-url@12.0.1:
+  whatwg-url@14.2.0:
     dependencies:
-      tr46: 4.1.1
+      tr46: 5.1.0
       webidl-conversions: 7.0.0
 
   whatwg-url@5.0.0:
@@ -7596,27 +7076,29 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
-  which-boxed-primitive@1.0.2:
+  which-boxed-primitive@1.1.1:
     dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
 
   which-collection@1.0.2:
     dependencies:
       is-map: 2.0.3
       is-set: 2.0.3
       is-weakmap: 2.0.2
-      is-weakset: 2.0.3
+      is-weakset: 2.0.4
 
-  which-typed-array@1.1.15:
+  which-typed-array@1.1.19:
     dependencies:
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
       has-tostringtag: 1.0.2
 
   which@2.0.2:
@@ -7630,55 +7112,30 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
+  ws@8.18.1: {}
 
-  wrappy@1.0.2: {}
-
-  write-file-atomic@4.0.2:
-    dependencies:
-      imurmurhash: 0.1.4
-      signal-exit: 3.0.7
-
-  ws@8.18.0: {}
-
-  xml-name-validator@4.0.0: {}
+  xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}
 
   xtend@4.0.2: {}
 
-  y18n@5.0.8: {}
-
   yallist@3.1.1: {}
 
   yaml@1.10.2: {}
 
-  yargs-parser@21.1.1: {}
-
-  yargs@17.7.2:
-    dependencies:
-      cliui: 8.0.1
-      escalade: 3.2.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      string-width: 4.2.3
-      y18n: 5.0.8
-      yargs-parser: 21.1.1
-
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.1.1: {}
+  zimmerframe@1.1.2: {}
 
-  zod-to-json-schema@3.24.3(zod@3.24.2):
+  zod-to-json-schema@3.24.5(zod@3.24.3):
     dependencies:
-      zod: 3.24.2
+      zod: 3.24.3
 
-  zod@3.24.2: {}
+  zod@3.24.3: {}
 
-  zrender@5.6.0:
+  zrender@5.6.1:
     dependencies:
       tslib: 2.3.0
+
+  zwitch@2.0.4: {}
diff --git a/src/app.html b/src/app.html
index 206daa685..18a92b1fa 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,133 +5,9 @@
         <meta
             name="description"
             content="Appwrite is an open-source platform for building applications at any scale, using your preferred programming languages and tools." />
-
         <link rel="icon" type="image/svg+xml" href="/console/logos/appwrite-icon.svg" />
         <link rel="mask-icon" type="image/png" href="/console/logos/appwrite-icon.png" />
-
-        <link
-            rel="preload"
-            href="/console/fonts/inter/inter-v8-latin-600.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="/console/fonts/inter/inter-v8-latin-regular.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="/console/fonts/poppins/poppins-v19-latin-500.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="/console/fonts/poppins/poppins-v19-latin-600.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="/console/fonts/poppins/poppins-v19-latin-700.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="/console/fonts/source-code-pro/source-code-pro-v20-latin-regular.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Air.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-AirItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Thin.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-ThinItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Light.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-LightItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Regular.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-RegularItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Medium.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-MediumItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Bold.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-BoldItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Black.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link
-            rel="preload"
-            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-BlackItalic.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin />
-        <link rel="preload" as="style" type="text/css" href="/console/fonts/main.css" />
         <link rel="stylesheet" href="/console/css/loading.css" />
-        <link rel="stylesheet" href="/console/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         %sveltekit.head%
     </head>
diff --git a/src/hooks.client.ts b/src/hooks.client.ts
index 9c8679912..8f67377ef 100644
--- a/src/hooks.client.ts
+++ b/src/hooks.client.ts
@@ -13,6 +13,7 @@ Sentry.init({
 
 export const handleError: HandleClientError = Sentry.handleErrorWithSentry(
     async ({ error, message, status }) => {
+        console.error(error);
         if (error instanceof AppwriteException) {
             status = error.code === 0 ? undefined : error.code;
             message = error.message;
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 260cffe51..8ca755571 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -1,7 +1,7 @@
 import Analytics, { type AnalyticsPlugin } from 'analytics';
 import Plausible from 'plausible-tracker';
 import { get } from 'svelte/store';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { user } from '$lib/stores/user';
 import { ENV, MODE, VARS, isCloud } from '$lib/system';
 import { AppwriteException } from '@appwrite.io/console';
@@ -56,13 +56,12 @@ export function trackEvent(name: string, data: object = null): void {
         return;
     }
 
-    const currentPage = get(page);
-    const path = currentPage.route.id;
+    const path = page.route.id;
 
-    if (currentPage.params?.project) {
+    if (page.params?.project) {
         data = {
             ...data,
-            project: currentPage.params.project
+            project: page.params.project
         };
     }
 
@@ -141,6 +140,64 @@ export function isTrackingAllowed() {
     }
 }
 
+export enum Click {
+    BackupCopyIdClick = 'click_backup_copy_id',
+    BackupDeleteClick = 'click_backup_delete',
+    BackupRestoreClick = 'click_backup_restore',
+    BreadcrumbClick = 'click_breadcrumb',
+    ConnectRepositoryClick = 'click_connect_repository',
+    CreditsRedeemClick = 'click_credits_redeem',
+    CloudSignupClick = 'click_cloud_signup',
+    DatabaseAttributeDelete = 'click_attribute_delete',
+    DatabaseIndexDelete = 'click_index_delete',
+    DatabaseCollectionDelete = 'click_collection_delete',
+    DatabaseDatabaseDelete = 'click_database_delete',
+    DatabaseImportCsv = 'click_database_import_csv',
+    DomainCreateClick = 'click_domain_create',
+    DomainDeleteClick = 'click_domain_delete',
+    DomainRetryDomainVerificationClick = 'click_domain_retry_domain_verification',
+    FeedbackSubmitClick = 'click_leave_feedback',
+    FilterApplyClick = 'click_apply_filter',
+    FunctionsRedeployClick = 'click_function_redeploy',
+    FunctionsDeploymentDeleteClick = 'click_deployment_delete',
+    FunctionsDeploymentCancelClick = 'click_deployment_cancel',
+    KeyCreateClick = 'click_key_create',
+    DevKeyCreateClick = 'click_dev_key_create',
+    MenuDropDownClick = 'click_menu_dropdown',
+    MenuOverviewClick = 'click_menu_overview',
+    ModalCloseClick = 'click_close_modal',
+    MessagingScheduleClick = 'click_messaging_schedule',
+    MessagingTopicCreateClick = 'click_messaging_topic_create',
+    MessagingTargetCreateClick = 'click_messaging_target_create',
+    MembershipDeleteClick = 'click_delete_membership',
+    PlatformCreateClick = 'click_platform_create',
+    OrganizationClickCreate = 'click_create_organization',
+    OrganizationClickUpgrade = 'click_organization_upgrade',
+    OnboardingSetupDatabaseClick = 'click_onboarding_setup_database',
+    OnboardingApiReferencesClick = 'click_onboarding_api_references',
+    OnboardingTutorialsClick = 'click_onboarding_tutorials',
+    OnboardingStorageQuickstartClick = 'click_onboarding_storage_quickstart',
+    OnboardingFunctionsQuickstartClick = 'click_onboarding_functions_quickstart',
+    OnboardingAuthEmailPasswordClick = 'click_onboarding_auth_email_password',
+    OnboardingAuthOauth2Click = 'click_onboarding_auth_oauth2',
+    OnboardingAuthAllMethodsClick = 'click_onboarding_auth_all_methods',
+    OnboardingDiscordClick = 'click_onboarding_discord',
+    StorageBucketDeleteClick = 'click_bucket_delete',
+    SettingsWebhookUpdateSignatureClick = 'click_webhook_update_signature',
+    SettingsWebhookDeleteClick = 'click_webhook_delete',
+    SettingsInstallProviderClick = 'click_install_provider',
+    SettingsStartMigrationClick = 'click_start_migration',
+    SubmitFormClick = 'click_submit_form',
+    ShowCustomIdClick = 'click_show_custom_id',
+    SupportOpenClick = 'click_open_support_menu',
+    PromoClick = 'click_promo',
+    PolicyDeleteClick = 'click_policy_delete',
+    VariablesCreateClick = 'click_variable_create',
+    VariablesUpdateClick = 'click_variable_update',
+    VariablesImportClick = 'click_variable_import',
+    WebsiteOpenClick = 'click_open_website'
+}
+
 export enum Submit {
     DownloadDPA = 'submit_download_dpa',
     Error = 'submit_error',
@@ -161,6 +218,9 @@ export enum Submit {
     AccountRecoveryCodesCreate = 'submit_account_recovery_codes_create',
     AccountRecoveryCodesUpdate = 'submit_account_recovery_codes_update',
     AccountDeleteIdentity = 'submit_account_delete_identity',
+    FeedbackSubmit = 'submit_leave_feedback',
+    FilterClear = 'submit_clear_filter',
+    FilterApply = 'submit_filter_apply',
     UserCreate = 'submit_user_create',
     UserDelete = 'submit_user_delete',
     UserUpdateEmail = 'submit_user_update_email',
@@ -168,6 +228,7 @@ export enum Submit {
     UserUpdateName = 'submit_user_update_name',
     UserUpdatePassword = 'submit_user_update_password',
     UserUpdatePhone = 'submit_user_update_phone',
+    UserUpdateMfa = 'submit_user_update_mfa',
     UserUpdatePreferences = 'submit_user_update_preferences',
     UserUpdateStatus = 'submit_user_update_status',
     UserUpdateVerificationEmail = 'submit_user_update_verification_email',
@@ -189,9 +250,12 @@ export enum Submit {
     MemberDelete = 'submit_member_delete',
     MembershipUpdate = 'submit_membership_update',
     MembershipUpdateStatus = 'submit_membership_update_status',
+    MessagingTargetUpdate = 'submit_messaging_target_update',
+    MessagingUpdateHtmlMode = 'submit_update_html_mode',
     ProviderUpdate = 'submit_provider_update',
     TeamCreate = 'submit_team_create',
     TeamDelete = 'submit_team_delete',
+    TeamUpdatePreferences = 'submit_team_update_preferences',
     TeamUpdateName = 'submit_team_update_name',
     AuthLimitUpdate = 'submit_auth_limit_update',
     AuthStatusUpdate = 'submit_auth_status_update',
@@ -208,6 +272,7 @@ export enum Submit {
     DatabaseCreate = 'submit_database_create',
     DatabaseDelete = 'submit_database_delete',
     DatabaseUpdateName = 'submit_database_update_name',
+    DatabaseImportCsv = 'submit_database_import_csv',
     AttributeCreate = 'submit_attribute_create',
     AttributeUpdate = 'submit_attribute_update',
     AttributeDelete = 'submit_attribute_delete',
@@ -234,6 +299,8 @@ export enum Submit {
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
     FunctionUpdateScopes = 'submit_function_key_update_scopes',
+    FunctionUpdateRuntime = 'submit_function_update_runtime',
+    FunctionUpdateBuildCommand = 'submit_function_update_build_command',
     FunctionConnectRepo = 'submit_function_connect_repo',
     FunctionDisconnectRepo = 'submit_function_disconnect_repo',
     FunctionRedeploy = 'submit_function_redeploy',
@@ -247,17 +314,26 @@ export enum Submit {
     VariableDelete = 'submit_variable_delete',
     VariableUpdate = 'submit_variable_update',
     VariableEditor = 'submit_variable_editor',
+
     KeyCreate = 'submit_key_create',
     KeyDelete = 'submit_key_delete',
     KeyUpdateName = 'submit_key_update_name',
     KeyUpdateScopes = 'submit_key_update_scopes',
     KeyUpdateExpire = 'submit_key_update_expire',
+
+    DevKeyCreate = 'submit_dev_key_create',
+    DevKeyDelete = 'submit_dev_key_delete',
+    DevKeyUpdateName = 'submit_dev_key_update_name',
+    DevKeyUpdateExpire = 'submit_dev_key_update_expire',
+
     PlatformCreate = 'submit_platform_create',
     PlatformDelete = 'submit_platform_delete',
     PlatformUpdate = 'submit_platform_update',
+
     DomainCreate = 'submit_domain_create',
     DomainDelete = 'submit_domain_delete',
     DomainUpdateVerification = 'submit_domain_update_verification',
+    CertificateDelete = 'submit_certificate_delete',
     WebhookCreate = 'submit_webhook_create',
     WebhookDelete = 'submit_webhook_delete',
     WebhookUpdateSignature = 'submit_webhook_update_signature',
@@ -279,6 +355,9 @@ export enum Submit {
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
+    FileTokenCreate = 'submit_file_token',
+    FileTokenDelete = 'submit_file_delete',
+    FileTokenUpdate = 'submit_file_update_expiry',
     BudgetCapUpdate = 'submit_budget_cap_update',
     BudgetAlertsUpdate = 'submit_budget_alert_conditions_update',
     CreditRedeem = 'submit_credit_redeem',
@@ -327,5 +406,26 @@ export enum Submit {
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete',
     ApplyQuickFilter = 'submit_apply_quick_filter',
     RequestBAA = 'submit_request_baa',
-    RequestSoc2 = 'submit_request_soc2'
+    RequestSoc2 = 'submit_request_soc2',
+    SiteCreate = 'submit_site_create',
+    SiteDelete = 'submit_site_delete',
+    SiteUpdateName = 'submit_site_update_name',
+    SiteUpdatePermissions = 'submit_site_update_permissions',
+    SiteUpdateSchedule = 'submit_site_update_schedule',
+    SiteUpdateConfiguration = 'submit_site_update_configuration',
+    SiteUpdateLogging = 'submit_site_update_logging',
+    SiteUpdateTimeout = 'submit_site_update_timeout',
+    SiteUpdateEvents = 'submit_site_update_events',
+    SiteUpdateScopes = 'submit_site_key_update_scopes',
+    SiteUpdateBuildSettings = 'submit_site_update_build_settings',
+    SiteUpdateSinglePageApplication = 'submit_site_update_single_page_application',
+    SiteConnectRepo = 'submit_site_connect_repo',
+    SiteRedeploy = 'submit_site_redeploy',
+    SiteDisconnectRepo = 'submit_site_disconnect_repo',
+    SiteActivateDeployment = 'submit_site_activate_deployment',
+    RecordCreate = 'submit_dns_record_create',
+    RecordUpdate = 'submit_dns_record_update',
+    RecordDelete = 'submit_dns_record_delete',
+    SearchClear = 'submit_clear_search',
+    FrameworkDetect = 'submit_framework_detect'
 }
diff --git a/src/lib/actions/timer.ts b/src/lib/actions/timer.ts
index 1e5f9411e..1f6bff7e1 100644
--- a/src/lib/actions/timer.ts
+++ b/src/lib/actions/timer.ts
@@ -22,7 +22,13 @@ export const timer: Action<HTMLElement, Props> = (node, props) => {
 
     function step() {
         const diffInSeconds = Math.floor((new Date().getTime() - startDate.getTime()) / 1000);
-        node.textContent = calculateTime(diffInSeconds);
+        const minutes = Math.floor(diffInSeconds / 60);
+        if (minutes > 0) {
+            const seconds = diffInSeconds % 60;
+            node.textContent = `${minutes}m ${seconds}s`;
+        } else {
+            node.textContent = calculateTime(diffInSeconds);
+        }
         frame = window.requestAnimationFrame(step);
     }
 
diff --git a/src/lib/charts/base.json b/src/lib/charts/base.json
index 0cbfc0897..3d0545ded 100644
--- a/src/lib/charts/base.json
+++ b/src/lib/charts/base.json
@@ -1,5 +1,121 @@
 {
-    "backgroundColor": "rgba(255,255,255,0)",
+    "backgroundColor": "var(--bgcolor-neutral-primary)",
+    "categoryAxis": {
+        "axisLine": {
+            "lineStyle": {
+                "color": "var(--fgcolor-neutral-tertiary)"
+            },
+            "show": true
+        },
+        "axisTick": {
+            "lineStyle": {
+                "color": "var(--fgcolor-neutral-tertiary)"
+            },
+            "show": true
+        },
+        "axisLabel": {
+            "color": "var(--fgcolor-neutral-tertiary)",
+            "show": true
+        },
+        "splitLine": {
+            "show": false
+        },
+        "splitArea": {
+            "show": false
+        }
+    },
+    "valueAxis": {
+        "axisLabel": {
+            "color": "var(--fgcolor-neutral-tertiary)",
+            "show": true
+        },
+        "splitLine": {
+            "lineStyle": {
+                "color": ["var(--border-neutral)"]
+            },
+            "show": true
+        },
+        "axisLine": {
+            "show": false
+        },
+        "axisTick": {
+            "show": false
+        },
+        "splitArea": {
+            "show": false
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "lineStyle": {
+                "color": "var(--fgcolor-neutral-tertiary)"
+            },
+            "show": true
+        },
+        "axisTick": {
+            "lineStyle": {
+                "color": "var(--fgcolor-neutral-tertiary)"
+            },
+            "show": true
+        },
+        "axisLabel": {
+            "color": "var(--fgcolor-neutral-tertiary)",
+            "show": true
+        },
+        "splitLine": {
+            "lineStyle": {
+                "color": ["var(--border-neutral)"]
+            },
+            "show": true
+        },
+        "splitArea": {
+            "show": false
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "lineStyle": {
+                "color": "var(--fgcolor-neutral-tertiary)"
+            },
+            "show": true
+        },
+        "axisTick": {
+            "lineStyle": {
+                "color": "var(--fgcolor-neutral-tertiary)"
+            },
+            "show": true
+        },
+        "axisLabel": {
+            "color": "var(--fgcolor-neutral-tertiary)",
+            "show": true
+        },
+        "splitLine": {
+            "lineStyle": {
+                "color": ["var(--border-neutral)"]
+            },
+            "show": true
+        },
+        "splitArea": {
+            "show": false
+        }
+    },
+    "tooltip": {
+        "backgroundColor": "var(--bgcolor-neutral-primary)",
+        "borderColor": "var(--border-neutral)",
+        "textStyle": {
+            "color": "var(--fgcolor-neutral-secondary)"
+        },
+        "axisPointer": {
+            "lineStyle": {
+                "color": "var(--border-neutral-strong)",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "var(--border-neutral-strong)",
+                "width": 1
+            }
+        }
+    },
     "textStyle": {},
     "line": {
         "itemStyle": {
@@ -12,89 +128,6 @@
         "symbol": "emptyCircle",
         "smooth": true
     },
-    "bar": {
-        "itemStyle": {
-            "barBorderColor": "#ccc"
-        }
-    },
-    "categoryAxis": {
-        "axisLine": {
-            "show": true
-        },
-        "axisTick": {
-            "show": true
-        },
-        "axisLabel": {
-            "show": true
-        },
-        "splitLine": {
-            "show": false
-        },
-        "splitArea": {
-            "show": false
-        }
-    },
-    "valueAxis": {
-        "axisLine": {
-            "show": false
-        },
-        "axisTick": {
-            "show": false
-        },
-        "axisLabel": {
-            "show": true
-        },
-        "splitLine": {
-            "show": true
-        },
-        "splitArea": {
-            "show": false
-        }
-    },
-    "logAxis": {
-        "axisLine": {
-            "show": true
-        },
-        "axisTick": {
-            "show": true
-        },
-        "axisLabel": {
-            "show": true
-        },
-        "splitLine": {
-            "show": true
-        },
-        "splitArea": {
-            "show": false
-        }
-    },
-    "timeAxis": {
-        "axisLine": {
-            "show": true
-        },
-        "axisTick": {
-            "show": true
-        },
-        "axisLabel": {
-            "show": true
-        },
-        "splitLine": {
-            "show": true
-        },
-        "splitArea": {
-            "show": false
-        }
-    },
-    "tooltip": {
-        "axisPointer": {
-            "lineStyle": {
-                "width": 1
-            },
-            "crossStyle": {
-                "width": 1
-            }
-        }
-    },
     "timeline": {
         "lineStyle": {
             "width": 1
diff --git a/src/lib/charts/base.svelte b/src/lib/charts/base.svelte
index 3c25fedde..98e8de5a2 100644
--- a/src/lib/charts/base.svelte
+++ b/src/lib/charts/base.svelte
@@ -4,15 +4,13 @@
     import { app } from '$lib/stores/app';
     import { dailyFormat, hourlyFormat, defaultConfig } from './config';
     import base from './base.json';
-    import light from './light.json';
-    import dark from './dark.json';
     import type { ECharts } from 'echarts/core';
     import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';
     import type { EChartsOption } from 'echarts';
     import { wizard } from '$lib/stores/wizard';
 
-    registerTheme('light', { ...base, ...light });
-    registerTheme('dark', { ...base, ...dark });
+    registerTheme('light', base);
+    registerTheme('dark', base);
 
     export let options: EChartsOption;
     export let series: (BarSeriesOption | LineSeriesOption)[];
@@ -90,7 +88,7 @@
 
 <svelte:window on:resize={onResize} />
 
-<div class="echart" bind:this={container} />
+<div class="echart" bind:this={container}></div>
 
 <style>
     .echart {
diff --git a/src/lib/charts/dark.json b/src/lib/charts/dark.json
index ec07fda73..0845bf4ab 100644
--- a/src/lib/charts/dark.json
+++ b/src/lib/charts/dark.json
@@ -120,10 +120,10 @@
                 "color": "#444444"
             }
         },
-        "backgroundColor": "#373B4D",
-        "borderColor": "#373B4D",
+        "backgroundColor": "var(--bgcolor-neutral-primary)",
+        "borderColor": "var(--border-neutral)",
         "textStyle": {
-            "color": "#F2F2F8"
+            "color": "var(--fgcolor-neutral-secondary)"
         }
     },
     "timeline": {
diff --git a/src/lib/charts/light.json b/src/lib/charts/light.json
index e6ddb057a..1e6d3faae 100644
--- a/src/lib/charts/light.json
+++ b/src/lib/charts/light.json
@@ -1,149 +1,82 @@
 {
-    "backgroundColor": "rgba(255,255,255,0)",
-    "title": {
-        "textStyle": {
-            "color": "#373b4d"
-        },
-        "subtextStyle": {
-            "color": "#616b7c"
-        }
-    },
-    "bar": {
-        "itemStyle": {
-            "barBorderColor": "#ccc"
-        }
-    },
+    "backgroundColor": "var(--bgcolor-neutral-primary)",
     "categoryAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "#6E7079"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisTick": {
             "lineStyle": {
-                "color": "#6E7079"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisLabel": {
-            "color": "#6E7079"
+            "color": "var(--fgcolor-neutral-tertiary)"
         }
     },
     "valueAxis": {
         "axisLabel": {
-            "color": "#6E7079"
+            "color": "var(--fgcolor-neutral-tertiary)"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["#E8E9F0"]
+                "color": ["var(--border-neutral)"]
             }
         }
     },
     "logAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "#6E7079"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisTick": {
             "lineStyle": {
-                "color": "#6E7079"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisLabel": {
-            "color": "#6E7079"
+            "color": "var(--fgcolor-neutral-tertiary)"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["#E0E6F1"]
+                "color": ["var(--border-neutral)"]
             }
         }
     },
     "timeAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "#6E7079"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisTick": {
             "lineStyle": {
-                "color": "#6E7079"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisLabel": {
-            "color": "#6E7079"
+            "color": "var(--fgcolor-neutral-tertiary)"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["#E0E6F1"]
+                "color": ["var(--border-neutral)"]
             }
         }
     },
-    "toolbox": {
-        "iconStyle": {
-            "borderColor": "#999"
-        },
-        "emphasis": {
-            "iconStyle": {
-                "borderColor": "#666"
-            }
-        }
-    },
-    "legend": {
-        "textStyle": {
-            "color": "#333"
-        }
-    },
     "tooltip": {
+        "backgroundColor": "var(--bgcolor-neutral-primary)",
+        "borderColor": "var(--border-neutral)",
+        "textStyle": {
+            "color": "var(--fgcolor-neutral-secondary)"
+        },
         "axisPointer": {
             "lineStyle": {
-                "color": "#ccc"
+                "color": "var(--border-neutral-strong)"
             },
             "crossStyle": {
-                "color": "#ccc"
-            }
-        }
-    },
-    "timeline": {
-        "lineStyle": {
-            "color": "#DAE1F5"
-        },
-        "itemStyle": {
-            "color": "#A4B1D7"
-        },
-        "controlStyle": {
-            "color": "#A4B1D7",
-            "borderColor": "#A4B1D7"
-        },
-        "checkpointStyle": {
-            "color": "#316bf3",
-            "borderColor": "#fff"
-        },
-        "label": {
-            "color": "#A4B1D7"
-        },
-        "emphasis": {
-            "itemStyle": {
-                "color": "#FFF"
-            },
-            "controlStyle": {
-                "color": "#A4B1D7",
-                "borderColor": "#A4B1D7"
-            },
-            "label": {
-                "color": "#A4B1D7"
-            }
-        }
-    },
-    "visualMap": {
-        "color": ["#bf444c", "#d88273", "#f6efa6"]
-    },
-    "markPoint": {
-        "label": {
-            "color": "#eee"
-        },
-        "emphasis": {
-            "label": {
-                "color": "#eee"
+                "color": "var(--border-neutral-strong)"
             }
         }
     }
diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
index 3e527a0f4..c82a5c035 100644
--- a/src/lib/commandCenter/commandCenter.svelte
+++ b/src/lib/commandCenter/commandCenter.svelte
@@ -99,7 +99,7 @@
         return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName);
     }
 
-    const handleKeydown = (e) => {
+    const handleKeydown = (e: KeyboardEvent) => {
         if (!$subPanels.length) {
             if (isInputEvent(e)) return;
             keys = [...keys, e.key].slice(-10);
diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts
index 959542e46..b191b892f 100644
--- a/src/lib/commandCenter/commands.ts
+++ b/src/lib/commandCenter/commands.ts
@@ -1,7 +1,7 @@
 import { debounce } from '$lib/helpers/debounce';
 import { isMac } from '$lib/helpers/platform';
 import { wizard } from '$lib/stores/wizard';
-import { onMount } from 'svelte';
+import { type ComponentType, onMount } from 'svelte';
 import { derived, writable } from 'svelte/store';
 import { nanoid } from 'nanoid/non-secure';
 import { trackEvent } from '$lib/actions/analytics';
@@ -37,7 +37,8 @@ const groups = [
     'buckets',
     'files',
     'misc',
-    'settings'
+    'settings',
+    'sites'
 ] as const;
 
 export type CommandGroup = (typeof groups)[number];
@@ -48,7 +49,7 @@ type BaseCommand = {
     disabled?: boolean;
     forceEnable?: boolean;
     group?: CommandGroup;
-    icon?: string;
+    icon?: ComponentType;
     image?: string;
     rank?: number;
     nested?: boolean;
diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 13326ac8e..9bda77da8 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { Remarkable } from 'remarkable';
     import Template from './template.svelte';
+    import { Alert, Keyboard, Layout } from '@appwrite.io/pink-svelte';
 
     const markdownInstance = new Remarkable();
 
-    import { Alert, AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
+    import { AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from '@ai-sdk/svelte';
     import { subPanels } from '../subPanels';
@@ -158,14 +159,13 @@
     </div>
 
     <div slot="option" let:option class="u-flex u-cross-center u-gap-8">
-        <i class="icon-question-mark-circle" />
+        <i class="icon-question-mark-circle"></i>
         <span>{option.label}</span>
     </div>
 
     {#if !$preferences.hideAiDisclaimer}
         <div style="padding: 1rem; padding-block-end: 0;">
-            <Alert
-                type="default"
+            <Alert.Inline
                 dismissible
                 on:dismiss={() => {
                     $preferences.hideAiDisclaimer = true;
@@ -173,7 +173,7 @@
                 <span slot="title">
                     We collect user responses to refine our experimental AI feature.
                 </span>
-            </Alert>
+            </Alert.Inline>
         </div>
     {/if}
 
@@ -218,57 +218,54 @@
 
     {#if $error}
         <div style="padding: 1rem; padding-block-end: 0;">
-            <Alert type="error">
-                <span slot="title">Something went wrong</span>
-                <p>
-                    An unexpected error occurred while handling your request. Please try again
-                    later.
-                </p>
-            </Alert>
+            <Alert.Inline status="error" title="Something went wrong">
+                An unexpected error occurred while handling your request. Please try again later.
+            </Alert.Inline>
         </div>
     {/if}
 
-    <div class="footer" slot="footer">
-        <div class="u-flex u-cross-center u-gap-4">
-            <AvatarInitials size={32} name={$user.name || $user.email} />
-            <form
-                class="input-text-wrapper u-width-full-line"
-                style="--amount-of-buttons: 1;"
-                on:submit|preventDefault={(e) => {
-                    handleSubmit(e);
-                }}>
-                <!--  svelte-ignore a11y-autofocus -->
-                <input
-                    type="text"
-                    class="input-text"
-                    placeholder="Ask a question..."
-                    autofocus
-                    bind:value={$input}
-                    disabled={$isLoading} />
-                <div class="options-list">
-                    <button
-                        class="options-list-button"
-                        aria-label="ask AI"
-                        type="submit"
-                        disabled={!$input.trim() || $isLoading}>
-                        <span class="icon-arrow-sm-right" aria-hidden="true" />
-                    </button>
-                </div>
-            </form>
-        </div>
-
-        <div class="u-flex u-main-end u-cross-center u-gap-16 u-margin-block-start-16">
-            <div class="u-flex u-cross-center u-gap-4">
-                <kbd class="kbd">Enter</kbd>
-                <span>to search</span>
-            </div>
-            <div class="sep" />
-            <div class="u-flex u-cross-center u-gap-4">
-                <kbd class="kbd">Esc</kbd>
-                <span>to {$subPanels.length === 1 ? 'close' : 'go back'}</span>
-            </div>
-        </div>
-    </div>
+    <Layout.Stack slot="footer">
+        <Layout.Stack gap="l">
+            <Layout.Stack direction="row" gap="s">
+                <AvatarInitials size="s" name={$user.name} />
+                <form
+                    class="input-text-wrapper u-width-full-line"
+                    style="--amount-of-buttons: 1;"
+                    on:submit|preventDefault={(e) => {
+                        handleSubmit(e);
+                    }}>
+                    <!--  svelte-ignore a11y-autofocus -->
+                    <input
+                        type="text"
+                        class="input-text"
+                        placeholder="Ask a question..."
+                        autofocus
+                        bind:value={$input}
+                        disabled={$isLoading} />
+                    <div class="options-list">
+                        <button
+                            class="options-list-button"
+                            aria-label="ask AI"
+                            type="submit"
+                            disabled={!$input.trim() || $isLoading}>
+                            <span class="icon-arrow-sm-right" aria-hidden="true"></span>
+                        </button>
+                    </div>
+                </form>
+            </Layout.Stack>
+            <Layout.Stack direction="row" justifyContent="space-between" gap="xxl">
+                <Layout.Stack direction="row" alignItems="center" gap="xxs">
+                    <Keyboard key="Enter" autoWidth={true} /> <span>to search</span></Layout.Stack>
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="flex-end"
+                    alignItems="center"
+                    gap="xxs">
+                    <Keyboard key="Esc" autoWidth={true} />
+                    <span>to {$subPanels.length === 1 ? 'close' : 'go back'}</span></Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
 </Template>
 
 <style lang="scss">
@@ -280,14 +277,6 @@
         --logo-bg: #f2f2f8;
     }
 
-    :global(.theme-dark) .footer {
-        --sep-clr: hsl(var(--color-neutral-150));
-    }
-
-    :global(.theme-light) .footer {
-        --sep-clr: hsl(var(--color-neutral-30));
-    }
-
     .content {
         overflow: auto;
         padding: 1rem;
@@ -323,14 +312,6 @@
         }
     }
 
-    .footer {
-        .sep {
-            width: 1px;
-            height: 1.5rem;
-            background-color: var(--sep-clr);
-        }
-    }
-
     .experimental {
         display: flex;
         padding: 0.09375rem 0.25rem;
diff --git a/src/lib/commandCenter/panels/createAttribute.svelte b/src/lib/commandCenter/panels/createAttribute.svelte
index ee7e3619a..98d312698 100644
--- a/src/lib/commandCenter/panels/createAttribute.svelte
+++ b/src/lib/commandCenter/panels/createAttribute.svelte
@@ -22,7 +22,7 @@
 
 <Template options={filteredOptions} bind:search>
     <div class="u-flex u-cross-center u-gap-8" slot="option" let:option>
-        <i class="icon-{option.icon}" />
+        <i class="icon-{option.icon}"></i>
         <span>{option.label}</span>
     </div>
 </Template>
diff --git a/src/lib/commandCenter/panels/createMessage.svelte b/src/lib/commandCenter/panels/createMessage.svelte
index 874167a8c..3e410d718 100644
--- a/src/lib/commandCenter/panels/createMessage.svelte
+++ b/src/lib/commandCenter/panels/createMessage.svelte
@@ -67,7 +67,7 @@
 
 <Template options={filteredOptions} bind:search>
     <div class="u-flex u-cross-center u-gap-8" slot="option" let:option>
-        <i class="icon-{option.icon}" />
+        <i class="icon-{option.icon}"></i>
         <span>{option.label}</span>
     </div>
 </Template>
diff --git a/src/lib/commandCenter/panels/platforms.svelte b/src/lib/commandCenter/panels/platforms.svelte
index 048f3a3b6..2a28876ca 100644
--- a/src/lib/commandCenter/panels/platforms.svelte
+++ b/src/lib/commandCenter/panels/platforms.svelte
@@ -4,13 +4,14 @@
         addPlatform
     } from '$routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte';
     import Template from './template.svelte';
+    import { IconAndroid, IconApple, IconCode, IconFlutter } from '@appwrite.io/pink-icons-svelte';
 
     let search = '';
 
     let platforms = [
         {
             label: 'Web',
-            icon: 'code',
+            icon: IconCode,
             group: 'platforms',
             callback: () => {
                 addPlatform(Platform.Web);
@@ -18,7 +19,7 @@
         },
         {
             label: 'Flutter',
-            icon: 'flutter',
+            icon: IconFlutter,
             group: 'platforms',
             callback: () => {
                 addPlatform(Platform.Flutter);
@@ -26,7 +27,7 @@
         },
         {
             label: 'Android',
-            icon: 'android',
+            icon: IconAndroid,
             group: 'platforms',
             callback: () => {
                 addPlatform(Platform.Android);
@@ -34,7 +35,7 @@
         },
         {
             label: 'Apple',
-            icon: 'apple',
+            icon: IconApple,
             group: 'platforms',
             callback: () => {
                 addPlatform(Platform.Apple);
@@ -49,7 +50,7 @@
 
 <Template options={filteredPlatforms} bind:search>
     <div class="u-flex u-cross-center u-gap-8" slot="option" let:option>
-        <i class="icon-{option.icon}" />
+        <i class="icon-{option.icon}"></i>
         <span>{option.label}</span>
     </div>
 </Template>
diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte
index 3aca62151..79ab6e7cb 100644
--- a/src/lib/commandCenter/panels/root.svelte
+++ b/src/lib/commandCenter/panels/root.svelte
@@ -8,6 +8,8 @@
     import { isMac } from '$lib/helpers/platform';
     import { commands, searchers, type Command, isKeyedCommand } from '../commands';
     import Template from './template.svelte';
+    import { Icon, Keyboard, Layout } from '@appwrite.io/pink-svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
 
     let search = '';
 
@@ -53,43 +55,56 @@
     };
 </script>
 
-<Template options={results} bind:search searchPlaceholder="Search for commands or content...">
-    <div slot="option" class="u-flex u-main-space-between content" let:option={command}>
-        <div class="u-flex u-gap-8 u-cross-center">
+<Template options={results} bind:search searchPlaceholder="Search...">
+    <Layout.Stack
+        slot="option"
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        let:option={command}>
+        <Layout.Stack direction="row" alignItems="center" gap="s">
             {#if command.image}
                 <img
                     src={`${base}/icons/${$app.themeInUse}/color/${command.image}.svg`}
                     alt={command.label} />
+            {:else if command.icon}
+                <Icon icon={command.icon} size="s" color="--fgcolor-neutral-tertiary" />
             {:else}
-                <i class="icon-{command.icon ?? 'arrow-sm-right'}" />
+                <Icon icon={IconArrowSmRight} size="s" color="--fgcolor-neutral-tertiary" />
             {/if}
             <span>
                 {command.label}
             </span>
-        </div>
-        <div class="u-flex u-gap-4 u-cross-center">
+        </Layout.Stack>
+        <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center" gap="s">
             {#if hasCtrl(command)}
-                <kbd class="kbd"> {isMac() ? '⌘' : 'Ctrl'} </kbd>
+                <Keyboard autoWidth={!isMac()} key={isMac() ? '⌘' : 'Ctrl'} />
             {/if}
             {#if hasShift(command)}
-                <kbd class="kbd"> {isMac() ? '⇧' : 'Shift'} </kbd>
+                <Keyboard autoWidth={!isMac()} key={isMac() ? '⇧' : 'Shift'} />
             {/if}
             {#if hasAlt(command)}
-                <kbd class="kbd"> {isMac() ? '⌥' : 'Alt'} </kbd>
+                <Keyboard autoWidth={!isMac()} key={isMac() ? '⌥' : 'Alt'} />
             {/if}
             {#if isKeyedCommand(command)}
                 {#each command.keys as key, i}
                     {@const hasNext = command.keys.length - 1 !== i}
 
-                    <kbd class="kbd">
-                        {key.toUpperCase()}
-                    </kbd>
+                    <Keyboard key={key.toUpperCase()} />
                     {#if hasNext}
-                        <span class="u-margin-inline-4" style:opacity={0.5}>then</span>
+                        <span class="then">then</span>
                     {/if}
                 {/each}
             {/if}
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
     <svelte:fragment slot="no-options">No commands found</svelte:fragment>
 </Template>
+
+<style>
+    .then {
+        color: var(--fgcolor-neutral-tertiary, #97979b);
+        font-size: var(--font-size-s, 14px);
+        font-weight: 400;
+    }
+</style>
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 31a14a33e..78dc3fe74 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -8,6 +8,9 @@
     import { getCommandCenterCtx } from '../commandCenter.svelte';
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Keyboard, Layout } from '@appwrite.io/pink-svelte';
+    import { Submit, trackEvent } from '$lib/actions/analytics';
 
     /* eslint no-undef: "off" */
     type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
@@ -20,6 +23,7 @@
     let selected = 0;
     let usingKeyboard = false;
     let contentEl: HTMLElement;
+    let didSearch = false;
 
     async function triggerOption(option: Option) {
         const prevPanels = $subPanels.length;
@@ -41,6 +45,14 @@
         if (!open) return;
         usingKeyboard = true;
 
+        if (search.length > 0) {
+            didSearch = true;
+        }
+
+        if (search === '' && didSearch) {
+            trackEvent(Submit.SearchClear);
+        }
+
         let canceled = false;
         dispatch('keydown', {
             originalEvent: event,
@@ -250,7 +262,7 @@
             {@const isLast = i === breadcrumbs.length - 1}
             <button class="crumb" on:click={() => handleCrumbClick(i)}>
                 <span>{crumb}</span>
-                <i class="icon-x" />
+                <i class="icon-x"></i>
             </button>
             {#if !isLast}
                 <span style="opacity: 50%">/</span>
@@ -284,7 +296,7 @@
                             class:first-nested={isFirstNested(i)}
                             class:last-nested={isLastNested(i)}>
                             {#if isSelected}
-                                <div class="bg" />
+                                <div class="bg"></div>
                             {/if}
                             <button
                                 class="option"
@@ -293,12 +305,22 @@
                                 on:mouseleave={getOptionBlurHandler()}
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
-                                    <div class="u-flex u-gap-8 u-cross-center">
-                                        <i class="icon-{item.icon ?? 'arrow-sm-right'}" />
+                                    <Layout.Stack direction="column" gap="s">
+                                        {#if item.icon}
+                                            <Icon
+                                                icon={item.icon}
+                                                size="s"
+                                                color="--fgcolor-neutral-tertiary" />
+                                        {:else}
+                                            <Icon
+                                                icon={IconArrowSmRight}
+                                                size="s"
+                                                color="--fgcolor-neutral-tertiary" />
+                                        {/if}
                                         <span>
                                             {item.label}
                                         </span>
-                                    </div>
+                                    </Layout.Stack>
                                 </slot>
                             </button>
                         </li>
@@ -316,15 +338,17 @@
 
     <div class="footer">
         <slot name="footer">
-            <div class=" u-flex u-flex u-cross-center u-main-space-between">
-                <div class="u-flex u-cross-center u-gap-4">
-                    <kbd class="kbd">Enter</kbd> <span>to select</span>
-                </div>
-                <div class="u-flex u-cross-center u-gap-4">
-                    <kbd class="kbd">Esc</kbd>
-                    <span>to {$subPanels.length > 1 ? 'go back' : 'close'}</span>
-                </div>
-            </div>
+            <Layout.Stack direction="row" justifyContent="space-between"
+                ><Layout.Stack direction="row" alignItems="center" gap="xxs">
+                    <Keyboard key="Enter" autoWidth={true} /> <span>to select</span></Layout.Stack>
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="flex-end"
+                    alignItems="center"
+                    gap="xxs">
+                    <Keyboard key="Esc" autoWidth={true} />
+                    <span>to {$subPanels.length > 1 ? 'go back' : 'close'}</span></Layout.Stack>
+            </Layout.Stack>
         </slot>
     </div>
 </div>
@@ -363,45 +387,16 @@
         animation: scale-up 150ms cubic-bezier(0.5, 1, 0.89, 1);
     }
 
-    // Theme
-    :global(.theme-light) .card {
-        --cmd-center-bg: hsl(var(--color-neutral-0));
-        --cmd-center-border: hsl(var(--color-neutral-10));
-        --cmd-center-shadow: 0px 16px 32px 0px rgba(55, 59, 77, 0.04);
-
-        --kbd-bg: hsl(var(--color-neutral-15));
-        --kbd-color: hsl(var(--color-neutral-60));
-
-        --crumb-bg: hsl(var(--color-neutral-10));
-        --crumb-color: hsl(var(--color-neutral-100));
-
-        --result-bg: hsl(var(--color-neutral-10));
-        --footer-bg: linear-gradient(180deg, #fff 0%, #e8e9f0 100%);
-
-        --icon-color: hsl(var(--color-neutral-50));
-        --label-color: hsl(var(--color-neutral-60));
-    }
-
-    :global(.theme-dark) .card {
-        --cmd-center-bg: hsl(var(--color-neutral-90));
-        --cmd-center-border: hsl(var(--color-neutral-80));
-        --cmd-center-shadow: 0px 16px 32px 0px #14141f;
-
-        --kbd-bg: hsl(var(--color-neutral-80));
-        --kbd-color: hsl(var(--color-neutral-15));
-
-        --crumb-bg: hsl(var(--color-neutral-150));
-        --crumb-color: hsl(var(--color-neutral-30));
-
-        --result-bg: hsl(var(--color-neutral-85));
-        --footer-bg: linear-gradient(
-            180deg,
-            hsl(var(--color-neutral-100)) 0%,
-            hsl(var(--color-neutral-85)) 100%
-        );
-
-        --icon-color: hsl(var(--color-neutral-70));
-        --label-color: hsl(var(--color-neutral-15));
+    .card {
+        --cmd-center-bg: var(--bgcolor-neutral-primary);
+        --footer-bg: var(--bgcolor-neutral-primary);
+        --cmd-center-border: var(--border-neutral);
+        --result-bg: var(--overlay-neutral-hover);
+        --kbd-bg: var(--overlay-on-neutral);
+        --kbd-color: var(--fgcolor-neutral-secondary);
+        --icon-color: var(--fgcolor-neutral-tertiary);
+        --label-color: var(--fgcolor-neutral-secondary);
+        --crumb-color: var(--fgcolor-neutral-secondary);
     }
 
     // Elements
@@ -420,11 +415,14 @@
         max-height: min(calc(100vh - var(--top) - 4rem), var(--max-height, 32rem));
         overflow: hidden;
         padding: 0;
+        box-shadow:
+            0 56px 32px 0 rgba(0, 0, 0, 0.02),
+            0 6px 14px 0 rgba(0, 0, 0, 0.04),
+            0 24px 25px 0 rgba(0, 0, 0, 0.03);
 
         border-radius: 0.5rem;
         border: 1px solid var(--cmd-center-border);
         background: var(--cmd-center-bg);
-        box-shadow: var(--cmd-center-shadow);
         backdrop-filter: blur(6px);
 
         &.fullheight {
@@ -434,7 +432,7 @@
         :global(.kbd) {
             color: var(--kbd-color);
             background-color: var(--kbd-bg);
-            padding-inline: 0.25rem;
+            padding-inline: var(--space-2, 4px);
         }
     }
 
@@ -444,7 +442,7 @@
         align-items: center;
         width: 100%;
 
-        border-bottom: 1px solid hsl(var(--color-border));
+        border-bottom: 1px solid var(--border-neutral, #ededf0);
         font-size: 16px;
         padding: 1rem;
 
@@ -465,7 +463,6 @@
         gap: 0.25rem;
 
         border-radius: 0.25rem;
-        background: var(--crumb-bg);
         color: var(--crumb-color);
         text-align: center;
         font-family: Inter;
@@ -493,13 +490,14 @@
             padding: 1rem;
 
             .group {
-                color: hsl(var(--color-neutral-70));
+                color: var(--fgcolor-neutral-secondary, #56565c);
                 margin-inline-start: 0.25rem;
                 margin-block-end: 0.25rem;
                 position: relative;
                 z-index: 10;
 
-                font-size: 10px !important;
+                font-size: var(--font-size-xs, 12px);
+                font-weight: 500;
 
                 &:not(:first-child) {
                     margin-block-start: 1rem;
@@ -560,7 +558,7 @@
                         content: '';
                         position: absolute;
                         left: -8px;
-                        border-left: 1px solid hsl(var(--color-border));
+                        border-left: 1px solid var(--border-neutral, #ededf0);
                         height: 100%;
                     }
                 }
@@ -570,8 +568,8 @@
 
     .footer {
         background: var(--footer-bg);
-        border-top: 1px solid hsl(var(--color-border));
+        border-top: 1px solid var(--border-neutral, #ededf0);
 
-        padding: 0.5rem 1rem;
+        padding: 0.75rem 1rem;
     }
 </style>
diff --git a/src/lib/commandCenter/searchers/buckets.ts b/src/lib/commandCenter/searchers/buckets.ts
index 6c6a30f4f..a3ede978c 100644
--- a/src/lib/commandCenter/searchers/buckets.ts
+++ b/src/lib/commandCenter/searchers/buckets.ts
@@ -7,7 +7,14 @@ import type { Command, Searcher } from '../commands';
 import { addSubPanel } from '../subPanels';
 import { FilesPanel } from '../panels';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import {
+    IconFolder,
+    IconKey,
+    IconLockClosed,
+    IconPuzzle,
+    IconSearch
+} from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
 const getBucketCommand = (bucket: Models.Bucket, region: string, projectId: string) => {
     return {
@@ -16,16 +23,15 @@ const getBucketCommand = (bucket: Models.Bucket, region: string, projectId: stri
             goto(`${base}/project-${region}-${projectId}/storage/bucket-${bucket.$id}`);
         },
         group: 'buckets',
-        icon: 'folder'
+        icon: IconFolder
     } satisfies Command;
 };
 
 export const bucketSearcher = (async (query: string) => {
-    const $page = get(page);
     const $project = get(project);
-    const region = $page.params.region;
+    const region = page.params.region;
     const { buckets } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .storage.listBuckets([Query.orderDesc('$createdAt')]);
 
     const filtered = buckets.filter((bucket) => bucket.name.includes(query));
@@ -44,7 +50,7 @@ export const bucketSearcher = (async (query: string) => {
                 },
                 group: 'buckets',
                 nested: true,
-                icon: 'search',
+                icon: IconSearch,
                 keepOpen: true
             },
             {
@@ -57,7 +63,7 @@ export const bucketSearcher = (async (query: string) => {
                 },
                 group: 'buckets',
                 nested: true,
-                icon: 'key'
+                icon: IconKey
             },
             {
                 label: 'Extensions',
@@ -68,7 +74,7 @@ export const bucketSearcher = (async (query: string) => {
                 },
                 group: 'buckets',
                 nested: true,
-                icon: 'puzzle'
+                icon: IconPuzzle
             },
             {
                 label: 'File Security',
@@ -80,7 +86,7 @@ export const bucketSearcher = (async (query: string) => {
                 },
                 group: 'buckets',
                 nested: true,
-                icon: 'lock-closed'
+                icon: IconLockClosed
             }
         ];
     }
diff --git a/src/lib/commandCenter/searchers/collections.ts b/src/lib/commandCenter/searchers/collections.ts
index 1045b17d2..c3ffaebe9 100644
--- a/src/lib/commandCenter/searchers/collections.ts
+++ b/src/lib/commandCenter/searchers/collections.ts
@@ -4,13 +4,12 @@ import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 
 export const collectionsSearcher = (async (query: string) => {
     const databaseId = get(database).$id;
-    const $page = get(page);
     const { collections } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .databases.listCollections(databaseId);
 
     return collections
@@ -22,7 +21,7 @@ export const collectionsSearcher = (async (query: string) => {
                     label: col.name,
                     callback: () => {
                         goto(
-                            `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${databaseId}/collection-${col.$id}`
+                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${col.$id}`
                         );
                     }
                 }) as const
diff --git a/src/lib/commandCenter/searchers/databases.ts b/src/lib/commandCenter/searchers/databases.ts
index 605afbb92..f50a1474d 100644
--- a/src/lib/commandCenter/searchers/databases.ts
+++ b/src/lib/commandCenter/searchers/databases.ts
@@ -1,14 +1,13 @@
 import { goto } from '$app/navigation';
-import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { IconDatabase } from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
 export const dbSearcher = (async (query: string) => {
-    const $page = get(page);
     const { databases } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .databases.list();
 
     return databases
@@ -20,10 +19,10 @@ export const dbSearcher = (async (query: string) => {
                     label: db.name,
                     callback: () => {
                         goto(
-                            `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${db.$id}`
+                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${db.$id}`
                         );
                     },
-                    icon: 'database'
+                    icon: IconDatabase
                 }) as const
         );
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/files.ts b/src/lib/commandCenter/searchers/files.ts
index 48149dc2a..858441740 100644
--- a/src/lib/commandCenter/searchers/files.ts
+++ b/src/lib/commandCenter/searchers/files.ts
@@ -6,15 +6,15 @@ import { Query } from '@appwrite.io/console';
 import { goto } from '$app/navigation';
 import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { IconDocument } from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
 export const fileSearcher = (async (query: string) => {
     const $bucket = get(bucket);
     const $project = get(project);
-    const $page = get(page);
 
     const { files } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .storage.listFiles($bucket.$id, [Query.orderDesc('')], query || undefined);
 
     return files.map((file) => ({
@@ -24,7 +24,7 @@ export const fileSearcher = (async (query: string) => {
                 `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/file-${file.$id}`
             );
         },
-        icon: 'document',
+        icon: IconDocument,
         group: 'files'
     }));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/functions.ts b/src/lib/commandCenter/searchers/functions.ts
index 091491993..d28992964 100644
--- a/src/lib/commandCenter/searchers/functions.ts
+++ b/src/lib/commandCenter/searchers/functions.ts
@@ -4,9 +4,10 @@ import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { showCreateDeployment } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
 import { base } from '$app/paths';
+import { IconLightningBolt, IconPlus } from '@appwrite.io/pink-icons-svelte';
 
 const getFunctionCommand = (fn: Models.Function, region: string, projectId: string) => {
     return {
@@ -15,15 +16,14 @@ const getFunctionCommand = (fn: Models.Function, region: string, projectId: stri
             goto(`${base}/project-${region}-${projectId}/functions/function-${fn.$id}`);
         },
         group: 'functions',
-        icon: 'lightning-bolt'
+        icon: IconLightningBolt
     } as const;
 };
 
 export const functionsSearcher = (async (query: string) => {
-    const $page = get(page);
     const projectId = get(project).$id;
     const { functions } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .functions.list();
 
     const filtered = functions.filter((fn) => fn.name.toLowerCase().includes(query.toLowerCase()));
@@ -31,28 +31,27 @@ export const functionsSearcher = (async (query: string) => {
     if (filtered.length === 1) {
         const func = filtered[0];
         return [
-            getFunctionCommand(func, $page.params.region, projectId),
+            getFunctionCommand(func, page.params.region, projectId),
             {
                 label: 'Create deployment',
                 nested: true,
                 async callback() {
-                    const $page = get(page);
-                    if (!$page.url.pathname.endsWith(func.$id)) {
+                    if (!page.url.pathname.endsWith(func.$id)) {
                         await goto(
-                            `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}`
+                            `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}`
                         );
                     }
                     showCreateDeployment.set(true);
                 },
                 group: 'functions',
-                icon: 'plus'
+                icon: IconPlus
             },
             {
                 label: 'Go to deployments',
                 nested: true,
                 callback() {
                     goto(
-                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}`
+                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}`
                     );
                 },
                 group: 'functions'
@@ -62,7 +61,7 @@ export const functionsSearcher = (async (query: string) => {
                 nested: true,
                 callback() {
                     goto(
-                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}/usage`
+                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}/usage`
                     );
                 },
                 group: 'functions'
@@ -72,7 +71,7 @@ export const functionsSearcher = (async (query: string) => {
                 nested: true,
                 callback() {
                     goto(
-                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}/executions`
+                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}/executions`
                     );
                 },
                 group: 'functions'
@@ -82,7 +81,7 @@ export const functionsSearcher = (async (query: string) => {
                 nested: true,
                 callback() {
                     goto(
-                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}/settings`
+                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}/settings`
                     );
                 },
                 group: 'functions'
@@ -90,5 +89,5 @@ export const functionsSearcher = (async (query: string) => {
         ];
     }
 
-    return filtered.map((fn) => getFunctionCommand(fn, $page.params.region, projectId));
+    return filtered.map((fn) => getFunctionCommand(fn, page.params.region, projectId));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/messages.ts b/src/lib/commandCenter/searchers/messages.ts
index 3e5e72c27..e90db994b 100644
--- a/src/lib/commandCenter/searchers/messages.ts
+++ b/src/lib/commandCenter/searchers/messages.ts
@@ -1,19 +1,19 @@
 import { goto } from '$app/navigation';
-import { get } from 'svelte/store';
 import { type Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { MessagingProviderType, type Models } from '@appwrite.io/console';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { IconAnnotation, IconDeviceMobile, IconMail } from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
-const getLabel = (message) => {
+const getLabel = (message: Models.Message) => {
     switch (message.providerType) {
         case MessagingProviderType.Push:
-            return message.data.title;
+            return message.data['title'];
         case MessagingProviderType.Sms:
-            return message.data.content;
+            return message.data['content'];
         case MessagingProviderType.Email:
-            return message.data.subject;
+            return message.data['subject'];
         default:
             return 'null';
     }
@@ -22,20 +22,19 @@ const getLabel = (message) => {
 const getIcon = (message: Models.Message) => {
     switch (message.providerType) {
         case MessagingProviderType.Push:
-            return 'device-mobile';
+            return IconDeviceMobile;
         case MessagingProviderType.Sms:
-            return 'annotation';
+            return IconAnnotation;
         case MessagingProviderType.Email:
-            return 'mail';
+            return IconMail;
         default:
-            return 'send';
+            throw new Error('Unsupported provider type');
     }
 };
 
 export const messagesSearcher = (async (query: string) => {
-    const $page = get(page);
     const { messages } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .messaging.listMessages([], query || undefined);
 
     return messages
@@ -47,7 +46,7 @@ export const messagesSearcher = (async (query: string) => {
                     label: getLabel(message),
                     callback: () => {
                         goto(
-                            `${base}/project-${$page.params.region}-${$page.params.project}/messaging/message-${message.$id}`
+                            `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${message.$id}`
                         );
                     },
                     icon: getIcon(message)
diff --git a/src/lib/commandCenter/searchers/providers.ts b/src/lib/commandCenter/searchers/providers.ts
index 4a30a9e65..f2c154c45 100644
--- a/src/lib/commandCenter/searchers/providers.ts
+++ b/src/lib/commandCenter/searchers/providers.ts
@@ -1,10 +1,9 @@
 import { goto } from '$app/navigation';
-import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { getProviderDisplayNameAndIcon } from '$routes/(console)/project-[region]-[project]/messaging/provider.svelte';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 
 const getIcon = (provider: string) => {
     const { icon } = getProviderDisplayNameAndIcon(provider);
@@ -12,9 +11,8 @@ const getIcon = (provider: string) => {
 };
 
 export const providersSearcher = (async (query: string) => {
-    const $page = get(page);
     const { providers } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .messaging.listProviders([], query || undefined);
 
     return providers
@@ -26,7 +24,7 @@ export const providersSearcher = (async (query: string) => {
                     label: provider.name,
                     callback: () => {
                         goto(
-                            `${base}/project-${$page.params.region}-${$page.params.project}/messaging/providers/provider-${provider.$id}`
+                            `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
                         );
                     },
                     image: getIcon(provider.provider)
diff --git a/src/lib/commandCenter/searchers/teams.ts b/src/lib/commandCenter/searchers/teams.ts
index 47de6470e..ba8d76ca9 100644
--- a/src/lib/commandCenter/searchers/teams.ts
+++ b/src/lib/commandCenter/searchers/teams.ts
@@ -1,10 +1,10 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { IconUserCircle } from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
 const getTeamCommand = (team: Models.Team<Models.Preferences>, region: string, projectId: string) =>
     ({
@@ -13,23 +13,22 @@ const getTeamCommand = (team: Models.Team<Models.Preferences>, region: string, p
             goto(`${base}/project-${region}-${projectId}/auth/teams/team-${team.$id}`);
         },
         group: 'teams',
-        icon: 'user-circle'
+        icon: IconUserCircle
     }) satisfies Command;
 
 export const teamSearcher = (async (query: string) => {
-    const $page = get(page);
     const { teams } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .teams.list([], query);
 
     if (teams.length === 1) {
         return [
-            getTeamCommand(teams[0], $page.params.region, $page.params.project),
+            getTeamCommand(teams[0], page.params.region, page.params.project),
             {
                 label: 'Go to members',
                 callback: () => {
                     goto(
-                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${teams[0].$id}/members`
+                        `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${teams[0].$id}/members`
                     );
                 },
                 group: 'teams',
@@ -40,7 +39,7 @@ export const teamSearcher = (async (query: string) => {
                 label: 'Go to activity',
                 callback: () => {
                     goto(
-                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${teams[0].$id}/activity`
+                        `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${teams[0].$id}/activity`
                     );
                 },
                 group: 'teams',
@@ -48,5 +47,5 @@ export const teamSearcher = (async (query: string) => {
             }
         ];
     }
-    return teams.map((team) => getTeamCommand(team, $page.params.region, $page.params.project));
+    return teams.map((team) => getTeamCommand(team, page.params.region, page.params.project));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/topics.ts b/src/lib/commandCenter/searchers/topics.ts
index 7e47149de..a2407c39a 100644
--- a/src/lib/commandCenter/searchers/topics.ts
+++ b/src/lib/commandCenter/searchers/topics.ts
@@ -1,14 +1,13 @@
 import { goto } from '$app/navigation';
-import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
 export const topicsSearcher = (async (query: string) => {
-    const $page = get(page);
     const { topics } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .messaging.listTopics([], query || undefined);
 
     return topics
@@ -20,10 +19,10 @@ export const topicsSearcher = (async (query: string) => {
                     label: topic.name,
                     callback: () => {
                         goto(
-                            `${base}/project-${$page.params.region}-${$page.params.project}/messaging/topics/topic-${topic.$id}`
+                            `${base}/project-${page.params.region}-${page.params.project}/messaging/topics/topic-${topic.$id}`
                         );
                     },
-                    icon: 'send'
+                    icon: IconChevronRight // TODO: @itznotabug - 'send' no replacement yet.
                 }) as const
         );
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/users.ts b/src/lib/commandCenter/searchers/users.ts
index 31bfeadee..197b15e89 100644
--- a/src/lib/commandCenter/searchers/users.ts
+++ b/src/lib/commandCenter/searchers/users.ts
@@ -1,11 +1,11 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { promptDeleteUser } from '$routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte';
 import { base } from '$app/paths';
-import { page } from '$app/stores';
+import { IconTrash, IconUserCircle } from '@appwrite.io/pink-icons-svelte';
+import { page } from '$app/state';
 
 const getUserCommand = (user: Models.User<Models.Preferences>, region: string, projectId: string) =>
     ({
@@ -14,18 +14,17 @@ const getUserCommand = (user: Models.User<Models.Preferences>, region: string, p
             goto(`${base}/project-${region}-${projectId}/auth/user-${user.$id}`);
         },
         group: 'users',
-        icon: 'user-circle'
+        icon: IconUserCircle
     }) satisfies Command;
 
 export const userSearcher = (async (query: string) => {
-    const $page = get(page);
     const { users } = await sdk
-        .forProject($page.params.region, $page.params.project)
+        .forProject(page.params.region, page.params.project)
         .users.list([], query || undefined);
 
     if (users.length === 1) {
         return [
-            getUserCommand(users[0], $page.params.region, $page.params.project),
+            getUserCommand(users[0], page.params.region, page.params.project),
             {
                 label: 'Delete user',
                 callback: () => {
@@ -33,13 +32,13 @@ export const userSearcher = (async (query: string) => {
                 },
                 group: 'users',
                 nested: true,
-                icon: 'trash'
+                icon: IconTrash
             },
             {
                 label: 'Go to activity',
                 callback: () => {
                     goto(
-                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${users[0].$id}/activity`
+                        `${base}/project-${page.params.region}-${page.params.project}/auth/user-${users[0].$id}/activity`
                     );
                 },
                 group: 'users',
@@ -49,7 +48,7 @@ export const userSearcher = (async (query: string) => {
                 label: 'Go to sessions',
                 callback: () => {
                     goto(
-                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${users[0].$id}/sessions`
+                        `${base}/project-${page.params.region}-${page.params.project}/auth/user-${users[0].$id}/sessions`
                     );
                 },
                 group: 'users',
@@ -59,7 +58,7 @@ export const userSearcher = (async (query: string) => {
                 label: 'Go to memberships',
                 callback: () => {
                     goto(
-                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${users[0].$id}/memberships`
+                        `${base}/project-${page.params.region}-${page.params.project}/auth/user-${users[0].$id}/memberships`
                     );
                 },
                 group: 'users',
@@ -67,5 +66,5 @@ export const userSearcher = (async (query: string) => {
             }
         ];
     }
-    return users.map((user) => getUserCommand(user, $page.params.region, $page.params.project));
+    return users.map((user) => getUserCommand(user, page.params.region, page.params.project));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/subPanels.ts b/src/lib/commandCenter/subPanels.ts
index 8bd262815..3c764295f 100644
--- a/src/lib/commandCenter/subPanels.ts
+++ b/src/lib/commandCenter/subPanels.ts
@@ -1,9 +1,9 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 import { writable } from 'svelte/store';
 
 export type SubPanel = {
     name: string;
-    component: typeof SvelteComponent<unknown>;
+    component: Component;
 };
 
 type CastSubPanel = Omit<SubPanel, 'component'> & {
diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index f37e83fe1..2fafbabc0 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -31,7 +31,7 @@
                 class="button is-text is-only-icon"
                 aria-label="close alert box"
                 on:click={() => dispatch('dismiss')}>
-                <span class="icon-x" aria-hidden="true" />
+                <span class="icon-x" aria-hidden="true"></span>
             </button>
         {/if}
         <span
@@ -39,7 +39,7 @@
             class:icon-check-circle={type === 'success'}
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
-            aria-hidden="true" />
+            aria-hidden="true"></span>
         <div class="alert-content" data-private>
             {#if $$slots.title}
                 <h6 class="alert-title">
diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte
index 75528fa0c..e341375aa 100644
--- a/src/lib/components/avatar.svelte
+++ b/src/lib/components/avatar.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
-    export let size: number;
-    export let src: string;
-    export let name: string;
-    export let color = 'transparent';
+    import { Avatar } from '@appwrite.io/pink-svelte';
+
+    type AvatarProps = Partial<{
+        src: string;
+        alt: string;
+        size: 'xs' | 's' | 'm' | 'l' | 'xl';
+        empty: boolean;
+    }>;
+
+    export let size: AvatarProps['size'] = 'm';
+    export let src: AvatarProps['src'] = undefined;
+    export let alt: AvatarProps['alt'];
 </script>
 
-<img
-    width={size}
-    height={size}
-    class="avatar"
-    style="--size: {size / 16}rem; background-color: {color};"
-    {src}
-    title={name}
-    alt={name} />
+<Avatar {alt} {src} {size}>
+    <slot />
+</Avatar>
diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index c874eb46c..499cd5e95 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -1,44 +1,32 @@
 <script lang="ts">
+    import { AvatarGroup, Avatar, Icon } from '@appwrite.io/pink-svelte';
     import AvatarInitials from './avatarInitials.svelte';
+    import type { ComponentProps, ComponentType } from 'svelte';
 
     export let avatars: string[] = [];
-    export let icons: string[] = [];
+    export let icons: ComponentType[] = [];
     export let total = avatars.length;
-    export let size = 40;
-    export let avatarSize: keyof typeof Sizes = 'medium';
-    export let bordered = false;
-    export let color = '';
-
-    let classes = '';
-    export { classes as class };
-
-    enum Sizes {
-        xsmall = 'is-size-x-small',
-        small = 'is-size-small',
-        medium = '',
-        large = 'is-size-large',
-        xlarge = 'is-size-x-large'
-    }
+    export let size: ComponentProps<Avatar>['size'] = 'm';
 </script>
 
-<ul class="avatars-group {classes}" class:is-with-border={bordered}>
+<AvatarGroup>
     {#each avatars as name, index}
         {#if index < 2}
-            <li class="avatars-group-item">
-                <AvatarInitials {size} {name} />
-            </li>
+            <AvatarInitials {size} {name} />
         {/if}
     {/each}
 
     {#each icons as icon}
-        <li class="avatars-group-item">
-            <span class="avatar {Sizes[avatarSize]} {color}"><span class={`icon-${icon}`} /></span>
-        </li>
+        <Avatar {size}>
+            <Icon {icon} size="s" />
+        </Avatar>
     {/each}
 
     {#if total > 2}
-        <li class="avatars-group-item">
-            <div class="avatar {Sizes[avatarSize]} {color}">+{total - 2}</div>
-        </li>
+        <Avatar {size}>
+            <span style:font-size="10px">
+                +{total - 2}
+            </span>
+        </Avatar>
     {/if}
-</ul>
+</AvatarGroup>
diff --git a/src/lib/components/avatarInitials.svelte b/src/lib/components/avatarInitials.svelte
index 1696404a5..fe6cd54a0 100644
--- a/src/lib/components/avatarInitials.svelte
+++ b/src/lib/components/avatarInitials.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
     import { sdk } from '$lib/stores/sdk';
+    import type { ComponentProps } from 'svelte';
     import Avatar from './avatar.svelte';
 
-    export let name: string;
-    export let size: number;
-    export let background: string | undefined = undefined;
-    export let color = 'black';
+    type AvatarProps = ComponentProps<Avatar>;
 
-    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background);
+    export let name: string;
+    export let size: AvatarProps['size'] = 'm';
+    export let background: string | undefined = undefined;
+
+    $: src = sdk.forConsole.avatars.getInitials(name, 192, 192, background).toString();
 </script>
 
-<Avatar {name} {size} {src} {color} />
+<Avatar alt={name} {size} {src} />
diff --git a/src/lib/components/backupDatabaseAlert.svelte b/src/lib/components/backupDatabaseAlert.svelte
index dd1b30559..1c2ceed16 100644
--- a/src/lib/components/backupDatabaseAlert.svelte
+++ b/src/lib/components/backupDatabaseAlert.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
@@ -8,6 +8,8 @@
     import { upgradeURL } from '$lib/stores/billing';
     import { hideNotification } from '$lib/helpers/notifications';
     import { backupsBannerId, showPolicyAlert } from '$lib/stores/database';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     function handleClose() {
         showPolicyAlert.set(false);
@@ -15,7 +17,7 @@
     }
 </script>
 
-{#if $showPolicyAlert && isCloud && $organization?.$id && $page.url.pathname.match(/\/databases\/database-[^/]+$/)}
+{#if $showPolicyAlert && isCloud && $organization?.$id && page.url.pathname.match(/\/databases\/database-[^/]+$/)}
     {@const isFreePlan = $organization?.billingPlan === BillingPlan.FREE}
 
     {@const subtitle = isFreePlan
@@ -23,7 +25,7 @@
         : 'Protect your data by quickly adding a backup policy'}
 
     {@const ctaText = isFreePlan ? 'Upgrade plan' : 'Create policy'}
-    {@const ctaURL = isFreePlan ? $upgradeURL : `${$page.url.pathname}/backups`}
+    {@const ctaURL = isFreePlan ? $upgradeURL : `${page.url.pathname}/backups`}
 
     <HeaderAlert type="warning" title="Your database has no backup policy">
         <svelte:fragment>{subtitle}</svelte:fragment>
@@ -38,7 +40,7 @@
                 </Button>
 
                 <Button text on:click={handleClose} event="backup_banner_close">
-                    <span class="icon-x" aria-hidden="true"></span>
+                    <Icon icon={IconX} slot="start" size="s" />
                 </Button>
             </div>
         </svelte:fragment>
diff --git a/src/lib/components/backupRestoreBox.svelte b/src/lib/components/backupRestoreBox.svelte
index 99e26f515..1598341f7 100644
--- a/src/lib/components/backupRestoreBox.svelte
+++ b/src/lib/components/backupRestoreBox.svelte
@@ -7,11 +7,12 @@
     import { BillingPlan, Dependencies } from '$lib/constants';
     import type { BackupArchive, BackupRestoration } from '$lib/sdk/backups';
     import { goto, invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { base } from '$app/paths';
     import { getProjectId } from '$lib/helpers/project';
     import { toLocaleDate } from '$lib/helpers/date';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     const backupRestoreItems: {
         archives: Map<string, BackupArchive>;
@@ -33,8 +34,8 @@
 
     function showRestoreNotification(newDatabaseId: string, newDatabaseName: string) {
         if (newDatabaseId && newDatabaseName && lastDatabaseRestorationId !== newDatabaseId) {
-            const region = $page.params.region;
-            const project = $page.params.project;
+            const region = page.params.region;
+            const project = page.params.project;
             lastDatabaseRestorationId = newDatabaseId;
 
             addNotification({
@@ -126,7 +127,7 @@
         if (isSelfHosted || (isCloud && $organization.billingPlan === BillingPlan.FREE)) return;
 
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe('console', (response) => {
                 if (!response.channels.includes(`projects.${getProjectId()}`)) return;
 
@@ -151,7 +152,9 @@
                 <section class="upload-box">
                     <header class="upload-box-header">
                         <h4 class="upload-box-title">
-                            <span class="text">{titleText} ({items.size})</span>
+                            <Typography.Text variant="m-500">
+                                {titleText} ({items.size})
+                            </Typography.Text>
                         </h4>
                         <button
                             class="upload-box-button"
@@ -160,13 +163,13 @@
                             on:click={() => {
                                 openStates[key] = !openStates[key];
                             }}>
-                            <span class="icon-cheveron-up" aria-hidden="true" />
+                            <span class="icon-cheveron-up" aria-hidden="true"></span>
                         </button>
                         <button
                             class="upload-box-button"
                             aria-label="close backup restore box"
                             on:click={() => handleClose(key)}>
-                            <span class="icon-x" aria-hidden="true" />
+                            <span class="icon-x" aria-hidden="true"></span>
                         </button>
                     </header>
 
@@ -177,18 +180,19 @@
                                     <section class="progress-bar u-width-full-line">
                                         <div
                                             class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
-                                            <span class="body-text-2">
+                                            <Typography.Text>
                                                 {text(item.status, key)}
-                                            </span>
+                                            </Typography.Text>
 
-                                            <span class="backup-name">
+                                            <Typography.Caption variant="400">
                                                 {backupName(item, key)}
-                                            </span>
+                                            </Typography.Caption>
                                         </div>
                                         <div
                                             class="progress-bar-container"
                                             class:is-danger={item.status === 'failed'}
-                                            style="--graph-size:{graphSize(item.status)}%" />
+                                            style="--graph-size:{graphSize(item.status)}%">
+                                        </div>
                                     </section>
                                 </li>
                             {/each}
@@ -200,7 +204,7 @@
     </div>
 {/if}
 
-<style>
+<style lang="scss">
     .upload-box-title {
         font-size: 11px;
     }
@@ -216,13 +220,17 @@
         justify-content: center;
     }
 
-    .backup-name {
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 130%;
-        font-style: normal;
-        letter-spacing: -0.12px;
-        color: var(--mid-neutrals-50, #818186);
-        font-family: var(--font-family-sansSerif, Inter);
+    .progress-bar-container {
+        height: 4px;
+
+        &::before {
+            height: 4px;
+            background-color: var(--bgcolor-neutral-invert);
+        }
+
+        &.is-danger::before {
+            height: 4px;
+            background-color: var(--bgcolor-error);
+        }
     }
 </style>
diff --git a/src/lib/components/billing/alerts/limitReached.svelte b/src/lib/components/billing/alerts/limitReached.svelte
index f3b5cc4b9..11d832107 100644
--- a/src/lib/components/billing/alerts/limitReached.svelte
+++ b/src/lib/components/billing/alerts/limitReached.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
@@ -9,7 +9,7 @@
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert
         type="error"
         title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>
@@ -26,7 +26,7 @@
             <Button
                 href={$upgradeURL}
                 on:click={() => {
-                    trackEvent('click_organization_upgrade', {
+                    trackEvent(Click.OrganizationClickUpgrade, {
                         from: 'button',
                         source: 'limit_reached_banner'
                     });
diff --git a/src/lib/components/billing/alerts/markedForDeletion.svelte b/src/lib/components/billing/alerts/markedForDeletion.svelte
index 6ff3cd426..096cda904 100644
--- a/src/lib/components/billing/alerts/markedForDeletion.svelte
+++ b/src/lib/components/billing/alerts/markedForDeletion.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { HeaderAlert } from '$lib/layout';
     import { hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.markedForDeletion && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $organization?.markedForDeletion && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert title="Organization flagged for deletion">
         <svelte:fragment>
             All existing projects in the {$organization.name} organization have been paused. This organization
diff --git a/src/lib/components/billing/alerts/missingPaymentMethod.svelte b/src/lib/components/billing/alerts/missingPaymentMethod.svelte
index 1dbfda565..96c29c5d7 100644
--- a/src/lib/components/billing/alerts/missingPaymentMethod.svelte
+++ b/src/lib/components/billing/alerts/missingPaymentMethod.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
@@ -8,7 +8,7 @@
     import { orgMissingPaymentMethod } from '$routes/(console)/store';
 </script>
 
-{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert
         type="error"
         title={`Payment method required for ${$orgMissingPaymentMethod.name}`}>
diff --git a/src/lib/components/billing/alerts/newDevUpgradePro.svelte b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
index 7f8c30878..ab48d3798 100644
--- a/src/lib/components/billing/alerts/newDevUpgradePro.svelte
+++ b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { BillingPlan, NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
@@ -21,7 +21,7 @@
     }
 </script>
 
-{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.includes('/console/account')}
+{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !page.url.pathname.includes('/console/account')}
     <GradientBanner on:close={handleClose}>
         <div class="u-flex u-gap-24 u-main-center u-cross-center u-flex-vertical-mobile">
             <span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>
@@ -31,7 +31,7 @@
                 class="u-line-height-1"
                 href={`${base}/apply-credit?code=${NEW_DEV_PRO_UPGRADE_COUPON}&org=${$organization.$id}`}
                 on:click={() => {
-                    trackEvent('click_credits_redeem', {
+                    trackEvent(Click.CreditsRedeemClick, {
                         from: 'button',
                         source: 'cloud_credits_banner',
                         campaign: 'WelcomeManual'
diff --git a/src/lib/components/billing/alerts/paymentAuthRequired.svelte b/src/lib/components/billing/alerts/paymentAuthRequired.svelte
index 8984cdf1d..a67537ab0 100644
--- a/src/lib/components/billing/alerts/paymentAuthRequired.svelte
+++ b/src/lib/components/billing/alerts/paymentAuthRequired.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
     import { actionRequiredInvoices, hideBillingHeaderRoutes } from '$lib/stores/billing';
@@ -9,7 +9,7 @@
     const endpoint = getApiEndpoint();
 </script>
 
-{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert title="Authorization required" type="error">
         Please authorize your upcoming payment for {$organization.name}. Your bank requires this
         security measure to proceed with payment.
diff --git a/src/lib/components/billing/alerts/paymentFailed.svelte b/src/lib/components/billing/alerts/paymentFailed.svelte
index 9646864a9..83b44dc2d 100644
--- a/src/lib/components/billing/alerts/paymentFailed.svelte
+++ b/src/lib/components/billing/alerts/paymentFailed.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
     import { failedInvoice } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
 
-    $: isOnProjects = $page.route.id.includes('project-[project]');
+    $: isOnProjects = page.route.id.includes('project-[region]-[project]');
 </script>
 
 {#if $failedInvoice && $failedInvoice.teamId === $organization.$id && isOnProjects}
diff --git a/src/lib/components/billing/alerts/paymentMandate.svelte b/src/lib/components/billing/alerts/paymentMandate.svelte
index fa7f75a85..b55f5d20b 100644
--- a/src/lib/components/billing/alerts/paymentMandate.svelte
+++ b/src/lib/components/billing/alerts/paymentMandate.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
     import { hideBillingHeaderRoutes, paymentMissingMandate } from '$lib/stores/billing';
@@ -16,7 +16,7 @@
     }
 </script>
 
-{#if $paymentMissingMandate && $paymentMissingMandate?.country?.toLowerCase() === 'in' && $paymentMissingMandate.mandateId === null && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $paymentMissingMandate && $paymentMissingMandate?.country?.toLowerCase() === 'in' && $paymentMissingMandate.mandateId === null && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert title="Authorization required" type="info">
         The payment method for {$organization.name} needs to be verified.
         <svelte:fragment slot="buttons">
diff --git a/src/lib/components/billing/alerts/projectsAtRisk.svelte b/src/lib/components/billing/alerts/projectsAtRisk.svelte
index 6272c85a8..c464c8042 100644
--- a/src/lib/components/billing/alerts/projectsAtRisk.svelte
+++ b/src/lib/components/billing/alerts/projectsAtRisk.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { diffDays, toLocaleDate } from '$lib/helpers/date';
     import { HeaderAlert } from '$lib/layout';
     import { failedInvoice, hideBillingHeaderRoutes } from '$lib/stores/billing';
 </script>
 
-{#if $failedInvoice && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $failedInvoice && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     {@const daysPassed = diffDays(new Date($failedInvoice.dueAt), new Date())}
     <HeaderAlert title="Your projects are at risk">
         <svelte:fragment>
diff --git a/src/lib/components/billing/couponInput.svelte b/src/lib/components/billing/couponInput.svelte
index a6c1658ec..85e73411c 100644
--- a/src/lib/components/billing/couponInput.svelte
+++ b/src/lib/components/billing/couponInput.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { formatCurrency } from '$lib/helpers/numbers';
     import type { Coupon } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
+    import { Layout } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     const dispatch = createEventDispatcher();
@@ -36,42 +37,36 @@
     }
 </script>
 
-<FormList gap={8}>
+<Layout.Stack direction="row" gap="s" wrap="wrap" alignItems="center">
     <InputText
         placeholder="Coupon code"
         id="code"
         label="Add credits"
         {required}
-        hideRequired
         disabled={couponData?.status === 'active'}
         bind:value={coupon}>
-        <Button
-            secondary
-            disabled={couponData?.status === 'active' || !coupon}
-            on:click={addCoupon}>
-            Apply
-        </Button>
     </InputText>
-    {#if couponData?.status === 'error'}
+    <Button secondary disabled={couponData?.status === 'active' || !coupon} on:click={addCoupon}>
+        Apply
+    </Button>
+</Layout.Stack>
+{#if couponData?.status === 'error'}
+    <div>
+        <span class="icon-exclamation-circle u-color-text-danger"></span>
+        <span>
+            {couponData.code.toUpperCase()} is not a valid promo code
+        </span>
+    </div>
+{:else if couponData?.status === 'active'}
+    <div class="u-flex u-main-space-between u-cross-center">
         <div>
-            <span class="icon-exclamation-circle u-color-text-danger" />
-            <span>
-                {couponData.code.toUpperCase()} is not a valid promo code
-            </span>
+            <span class="icon-tag u-color-text-success"></span>
+            <slot data={couponData}>
+                <span>
+                    {couponData.code.toUpperCase()} applied (-{formatCurrency(couponData.credits)})
+                </span>
+            </slot>
         </div>
-    {:else if couponData?.status === 'active'}
-        <div class="u-flex u-main-space-between u-cross-center">
-            <div>
-                <span class="icon-tag u-color-text-success" />
-                <slot data={couponData}>
-                    <span>
-                        {couponData.code.toUpperCase()} applied (-{formatCurrency(
-                            couponData.credits
-                        )})
-                    </span>
-                </slot>
-            </div>
-            <Button round text on:click={removeCoupon}><span class="icon-x"></span></Button>
-        </div>
-    {/if}
-</FormList>
+        <Button icon text on:click={removeCoupon}><span class="icon-x"></span></Button>
+    </div>
+{/if}
diff --git a/src/lib/components/billing/creditsApplied.svelte b/src/lib/components/billing/creditsApplied.svelte
index 1010f0f5e..61386b9f0 100644
--- a/src/lib/components/billing/creditsApplied.svelte
+++ b/src/lib/components/billing/creditsApplied.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
     import { formatCurrency } from '$lib/helpers/numbers';
     import type { Coupon } from '$lib/sdk/billing';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let couponData: Partial<Coupon> = {
         code: null,
@@ -15,13 +15,16 @@
     <span class="u-flex u-main-space-between">
         <div class="u-flex u-cross-center u-gap-4">
             <p class="text">
-                <span class="icon-tag u-color-text-success" aria-hidden="true" />
+                <span class="icon-tag u-color-text-success" aria-hidden="true"></span>
                 {#if couponData.credits >= 100}
                     {couponData?.code?.toUpperCase()}
                 {:else}
-                    <span use:tooltip={{ content: couponData?.code?.toUpperCase() }}>
-                        Credits applied
-                    </span>
+                    <span
+                        ><Tooltip
+                            >Credits applied <span slot="tooltip"
+                                >{couponData?.code?.toUpperCase()}</span
+                            ></Tooltip
+                        ></span>
                 {/if}
             </p>
             {#if !fixedCoupon}
@@ -37,7 +40,7 @@
                             status: null,
                             credits: null
                         })}>
-                    <span class="icon-x" aria-hidden="true" />
+                    <span class="icon-x" aria-hidden="true"></span>
                 </button>
             {/if}
         </div>
diff --git a/src/lib/components/billing/discountsApplied.svelte b/src/lib/components/billing/discountsApplied.svelte
index 433d02ecf..e77bf3ca3 100644
--- a/src/lib/components/billing/discountsApplied.svelte
+++ b/src/lib/components/billing/discountsApplied.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { formatCurrency } from '$lib/helpers/numbers';
     import type { Coupon } from '$lib/sdk/billing';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     export let label: string;
     export let value: number;
@@ -16,7 +18,7 @@
     <span class="u-flex u-main-space-between">
         <div class="u-flex u-cross-center u-gap-4">
             <p class="text">
-                <span class="icon-tag u-color-text-success" aria-hidden="true" />
+                <span class="icon-tag u-color-text-success" aria-hidden="true"></span>
                 <span>
                     {label}
                 </span>
@@ -34,7 +36,7 @@
                             status: null,
                             credits: null
                         })}>
-                    <span class="icon-x" aria-hidden="true" />
+                    <Icon icon={IconX} />
                 </button>
             {/if}
         </div>
diff --git a/src/lib/components/billing/emptyCardCloud.svelte b/src/lib/components/billing/emptyCardCloud.svelte
index 7b7638ce6..b83676f28 100644
--- a/src/lib/components/billing/emptyCardCloud.svelte
+++ b/src/lib/components/billing/emptyCardCloud.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { Card } from '..';
 
     export let service: string;
@@ -11,25 +12,24 @@
 
 <Card>
     <slot>
-        <div class="u-flex u-flex-vertical u-main-center u-cross-center u-gap-8">
-            <h6 class="body-text-1 u-bold u-trim-1">Upgrade to add {service}</h6>
-            <p class="text u-text-center">
+        <Layout.Stack alignItems="center">
+            <Typography.Text variant="m-600">Upgrade to add {service}</Typography.Text>
+            <Typography.Text>
                 Upgrade to a {tierToPlan(BillingPlan.PRO).name} plan to add {service} to your organization
-            </p>
+            </Typography.Text>
 
             <Button
-                class="u-margin-block-start-16"
                 secondary
                 fullWidthMobile
                 href={$upgradeURL}
                 on:click={() => {
-                    trackEvent('click_organization_upgrade', {
+                    trackEvent(Click.OrganizationClickUpgrade, {
                         from: 'button',
                         source: eventSource
                     });
                 }}>
                 Upgrade
             </Button>
-        </div>
+        </Layout.Stack>
     </slot>
 </Card>
diff --git a/src/lib/components/billing/estimatedTotal.svelte b/src/lib/components/billing/estimatedTotal.svelte
index c0e5c5233..7e7e84803 100644
--- a/src/lib/components/billing/estimatedTotal.svelte
+++ b/src/lib/components/billing/estimatedTotal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormList, InputChoice, InputNumber } from '$lib/elements/forms';
+    import { InputChoice, InputNumber } from '$lib/elements/forms';
     import { formatCurrency } from '$lib/helpers/numbers';
     import type { Coupon, Estimation } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
@@ -107,7 +107,7 @@
             {#each estimation.discounts ?? [] as item}
                 <DiscountsApplied {fixedCoupon} bind:couponData {...item} />
             {/each}
-            <div class="u-sep-block-start" />
+            <div class="u-sep-block-start"></div>
             <span class="u-flex u-main-space-between">
                 <p class="text">Total due</p>
                 <p class="text">
@@ -122,25 +122,23 @@
             </p>
         {/if}
 
-        <FormList class="u-margin-block-start-24">
-            <InputChoice
-                type="switchbox"
-                id="budget"
-                label="Enable budget cap"
-                tooltip="If enabled, you will be notified when your spending reaches 75% of the set cap. Update cap alerts in your organization settings."
-                fullWidth
-                bind:value={budgetEnabled}>
-                {#if budgetEnabled}
-                    <div class="u-margin-block-start-16">
-                        <InputNumber
-                            id="budget"
-                            label="Budget cap (USD)"
-                            placeholder="0"
-                            min={0}
-                            bind:value={billingBudget} />
-                    </div>
-                {/if}
-            </InputChoice>
-        </FormList>
+        <InputChoice
+            type="switchbox"
+            id="budget"
+            label="Enable budget cap"
+            tooltip="If enabled, you will be notified when your spending reaches 75% of the set cap. Update cap alerts in your organization settings."
+            fullWidth
+            bind:value={budgetEnabled}>
+            {#if budgetEnabled}
+                <div class="u-margin-block-start-16">
+                    <InputNumber
+                        id="budget"
+                        label="Budget cap (USD)"
+                        placeholder="0"
+                        min={0}
+                        bind:value={billingBudget} />
+                </div>
+            {/if}
+        </InputChoice>
     </Card>
 {/if}
diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte
new file mode 100644
index 000000000..112d506c1
--- /dev/null
+++ b/src/lib/components/billing/estimatedTotalBox.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { InputChoice, InputNumber } from '$lib/elements/forms';
+    import { toLocaleDate } from '$lib/helpers/date';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import type { Coupon, PlansMap } from '$lib/sdk/billing';
+    import { type Tier } from '$lib/stores/billing';
+    import { Card, Divider, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { CreditsApplied } from '.';
+
+    export let billingPlan: Tier;
+    export let collaborators: string[];
+    export let couponData: Partial<Coupon>;
+    export let plans: PlansMap;
+    export let billingBudget: number;
+    export let fixedCoupon = false; // If true, the coupon cannot be removed
+    export let isDowngrade = false;
+
+    const today = new Date();
+    const billingPayDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
+
+    let budgetEnabled = false;
+
+    $: currentPlan = plans.get(billingPlan);
+    $: extraSeatsCost = 0; // 0 untile trial period later replace (collaborators?.length ?? 0) * (currentPlan?.addons?.member?.price ?? 0);
+    $: grossCost = currentPlan.price + extraSeatsCost;
+    $: estimatedTotal =
+        couponData?.status === 'active'
+            ? grossCost - couponData.credits >= 0
+                ? grossCost - couponData.credits
+                : 0
+            : grossCost;
+    $: trialEndDate = new Date(
+        billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000
+    );
+</script>
+
+<Card.Base padding="s">
+    <Layout.Stack>
+        <slot />
+        <Layout.Stack direction="row" justifyContent="space-between">
+            <Typography.Text>{currentPlan.name} plan</Typography.Text>
+            <Typography.Text>{formatCurrency(currentPlan.price)}</Typography.Text>
+        </Layout.Stack>
+        <Layout.Stack direction="row" justifyContent="space-between">
+            <Typography.Text variant={isDowngrade ? 'm-500' : 'm-400'}
+                >Additional seats ({collaborators?.length ?? 0})</Typography.Text>
+            <Typography.Text variant={isDowngrade ? 'm-500' : 'm-400'}
+                >{formatCurrency(extraSeatsCost)}</Typography.Text>
+        </Layout.Stack>
+        {#if couponData?.status === 'active'}
+            <CreditsApplied bind:couponData {fixedCoupon} />
+        {/if}
+        <Divider />
+        <Layout.Stack direction="row" justifyContent="space-between">
+            <Typography.Text>
+                Upcoming charge<br />
+                Due on {!currentPlan.trialDays
+                    ? toLocaleDate(billingPayDate.toString())
+                    : toLocaleDate(trialEndDate.toString())}</Typography.Text>
+            <Typography.Text>{formatCurrency(estimatedTotal)}</Typography.Text>
+        </Layout.Stack>
+
+        <Typography.Text>
+            You'll pay <b>{formatCurrency(estimatedTotal)}</b> now, with your first billing cycle
+            starting on
+            <b
+                >{!currentPlan.trialDays
+                    ? toLocaleDate(billingPayDate.toString())
+                    : toLocaleDate(trialEndDate.toString())}</b
+            >. {#if couponData?.status === 'active'}Once your credits run out, you'll be charged
+                <b>{formatCurrency(currentPlan.price)}</b> plus usage fees every 30 days.
+            {/if}
+        </Typography.Text>
+
+        <InputChoice
+            type="switchbox"
+            id="budget"
+            label="Enable budget cap"
+            tooltip="If enabled, you will be notified when your spending reaches 75% of the set cap. Update cap alerts in your organization settings."
+            fullWidth
+            bind:value={budgetEnabled}>
+            {#if budgetEnabled}
+                <div class="u-margin-block-start-16">
+                    <InputNumber
+                        required
+                        autofocus
+                        id="budget"
+                        label="Budget cap (USD)"
+                        placeholder="0"
+                        min={0}
+                        bind:value={billingBudget} />
+                </div>
+            {/if}
+        </InputChoice>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
index 0ff377796..be241fdf7 100644
--- a/src/lib/components/billing/paymentBoxes.svelte
+++ b/src/lib/components/billing/paymentBoxes.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-    import { FormList, InputChoice, InputText } from '$lib/elements/forms';
-    import { onDestroy, onMount } from 'svelte';
-    import { CreditCardBrandImage, RadioBoxes } from '..';
-    import { unmountPaymentElement } from '$lib/stores/stripe';
-    import { Pill } from '$lib/elements';
+    import { InputChoice, InputText } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import { CreditCardBrandImage } from '..';
+    import { initializeStripe, unmountPaymentElement } from '$lib/stores/stripe';
+    import { Badge, Card, Layout } from '@appwrite.io/pink-svelte';
+    import type { PaymentMethodData } from '$lib/sdk/billing';
 
-    export let methods: Record<string, unknown>[];
+    export let methods: PaymentMethodData[];
     export let group: string;
     export let name: string;
     export let defaultMethod: string = null;
@@ -36,61 +37,48 @@
                 }
             }
         });
-    });
 
-    onDestroy(() => {
-        observer.disconnect();
-        unmountPaymentElement();
+        return () => {
+            observer.disconnect();
+            unmountPaymentElement();
+        };
     });
 
     $: if (element) {
+        initializeStripe(element);
         observer.observe(element, { childList: true });
     }
 
     //Set setAsDefault as false when group changes
-    $: if (group || group === null) {
+    $: if (group || group === '$new') {
         setAsDefault = false;
     }
 </script>
 
-<RadioBoxes
-    elements={methods}
-    total={methods?.length}
-    variableName="$id"
-    name="payment"
-    bind:group
-    {disabledCondition}>
-    <svelte:fragment slot="element" let:element>
-        <slot {element}>
-            <span class="u-flex u-gap-16 u-flex-vertical">
-                <span class="u-flex u-gap-16">
-                    <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
-                        <span>
-                            <span class="u-capitalize">{element.brand}</span> ending in {element.last4}</span>
-                        <CreditCardBrandImage brand={element.brand?.toString()} />
-                    </span>
-                    {#if element.$id === backupMethod}
-                        <Pill>Backup</Pill>
-                    {:else if element.$id === defaultMethod}
-                        <Pill>Default</Pill>
-                    {/if}
-                </span>
-                {#if !!defaultMethod && element.$id !== defaultMethod && group === element.$id && showSetAsDefault && element.$id !== backupMethod}
-                    <ul>
-                        <InputChoice
-                            bind:value={setAsDefault}
-                            id="default"
-                            label="Set as default payment method for this organization" />
-                    </ul>
+<Layout.Stack>
+    {#each methods as method}
+        {@const value = method.$id}
+        <Card.Selector
+            title={method.name}
+            name={value}
+            bind:group
+            {value}
+            disabled={disabledCondition ? value === disabledCondition : false}>
+            <svelte:fragment slot="action">
+                {#if method.$id === backupMethod}
+                    <Badge variant="secondary" content="Backup" size="xs" />
+                {:else if method.$id === defaultMethod}
+                    <Badge variant="secondary" content="Default" size="xs" />
                 {/if}
-            </span>
-        </slot>
-    </svelte:fragment>
-    <svelte:fragment slot="new">
-        <span style="padding-inline:0.25rem">Add new payment method</span>
-    </svelte:fragment>
-
-    <FormList class="u-margin-block-start-8" gap={16}>
+            </svelte:fragment>
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                {method.brand} ending in {method.last4}
+                <CreditCardBrandImage brand={method.brand?.toString()} />
+            </Layout.Stack>
+        </Card.Selector>
+    {/each}
+    <Card.Selector title="Add new payment method" name="$new" bind:group value="$new" />
+    {#if group === '$new'}
         <InputText
             id="name"
             label="Cardholder name"
@@ -103,20 +91,16 @@
             <div class="loader-container" bind:this={loader}>
                 <div class="loader"></div>
             </div>
-            <div id="payment-element" bind:this={element}>
-                <!-- Stripe will create form elements here -->
-            </div>
+            <div bind:this={element}></div>
         </div>
         {#if showSetAsDefault}
-            <ul>
-                <InputChoice
-                    bind:value={setAsDefault}
-                    id="default"
-                    label="Set as default payment method for this organization" />
-            </ul>
+            <InputChoice
+                bind:value={setAsDefault}
+                id="default"
+                label="Set as default payment method for this organization" />
         {/if}
-    </FormList>
-</RadioBoxes>
+    {/if}
+</Layout.Stack>
 
 <style lang="scss">
     .aw-stripe-container {
diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index 16388b948..4f1afcdf6 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { FakeModal } from '$lib/components';
-    import { InputText, Button, FormList } from '$lib/elements/forms';
-    import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+    import { InputText, Button } from '$lib/elements/forms';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { initializeStripe, submitStripeCard } from '$lib/stores/stripe';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
+    import { Spinner } from '@appwrite.io/pink-svelte';
 
     export let show = false;
 
@@ -15,16 +16,12 @@
     let name: string;
     let error: string;
 
-    onMount(async () => {
-        await initializeStripe();
-    });
-
     async function handleSubmit() {
         try {
-            const card = await submitStripeCard(name, $page?.params?.organization ?? null);
+            const card = await submitStripeCard(name, page?.params?.organization ?? null);
+            show = false;
             invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
-            show = false;
             addNotification({
                 type: 'success',
                 message: 'A new payment method has been added to your account'
@@ -34,12 +31,13 @@
         }
     }
 
+    let isLoading = true;
     let element: HTMLElement;
-    let loader: HTMLDivElement;
 
     let observer: MutationObserver;
 
     onMount(() => {
+        initializeStripe(element);
         observer = new MutationObserver((mutationsList) => {
             for (let mutation of mutationsList) {
                 if (mutation.type === 'childList') {
@@ -49,18 +47,17 @@
                                 node instanceof Element &&
                                 node.className.toLowerCase().includes('__privatestripeelement')
                             ) {
-                                loader.style.display = 'none';
+                                isLoading = false;
                             }
                         }
                     }
                 }
             }
         });
-    });
 
-    onDestroy(() => {
-        observer.disconnect();
-        document.documentElement.classList.remove('u-overflow-hidden');
+        return () => {
+            observer.disconnect();
+        };
     });
 
     $: if (element) {
@@ -68,32 +65,28 @@
     }
 </script>
 
-<FakeModal
-    bind:show
-    title="Add payment method"
-    bind:error
-    onSubmit={handleSubmit}
-    headerDivider={false}>
-    <FormList gap={16}>
-        <slot />
-        <InputText
-            id="name"
-            label="Cardholder name"
-            placeholder="Cardholder name"
-            bind:value={name}
-            required
-            autofocus={true}
-            hideRequired />
-        <div class="aw-stripe-container" data-private>
-            <div class="loader-container" bind:this={loader}>
-                <div class="loader"></div>
-            </div>
-            <div id="payment-element" bind:this={element}>
-                <!-- Stripe will create form elements here -->
+<FakeModal bind:show title="Add payment method" bind:error onSubmit={handleSubmit}>
+    <slot />
+    <InputText
+        id="name"
+        required
+        autofocus={true}
+        bind:value={name}
+        label="Cardholder name"
+        placeholder="Cardholder name" />
+
+    <div class="aw-stripe-container" data-private>
+        {#if isLoading}
+            <div class="loader-element">
+                <Spinner />
             </div>
+        {/if}
+
+        <div class="stripe-element" bind:this={element}>
+            <!-- Stripe will create form elements here -->
         </div>
-        <slot name="end"></slot>
-    </FormList>
+    </div>
+    <slot name="end"></slot>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit disabled={!name}>Add</Button>
@@ -102,14 +95,17 @@
 
 <style lang="scss">
     .aw-stripe-container {
-        min-height: 295px;
-        position: relative;
-        .loader-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 0;
+        display: flex;
+        min-height: 245px;
+
+        .stripe-element {
+            width: 100%;
+        }
+
+        .loader-element {
+            width: 100%;
+            align-self: center;
+            justify-items: end;
         }
     }
 </style>
diff --git a/src/lib/components/billing/planComparisonBox.svelte b/src/lib/components/billing/planComparisonBox.svelte
index 6d11df4fd..9d7443df4 100644
--- a/src/lib/components/billing/planComparisonBox.svelte
+++ b/src/lib/components/billing/planComparisonBox.svelte
@@ -2,38 +2,40 @@
     import { BillingPlan } from '$lib/constants';
     import { formatNum } from '$lib/helpers/string';
     import { plansInfo, tierFree, tierPro, tierScale, type Tier } from '$lib/stores/billing';
-    import { Card, SecondaryTabs, SecondaryTabsItem } from '..';
+    import { Card, Layout, Tabs, Typography } from '@appwrite.io/pink-svelte';
+
+    export let downgrade = false;
 
     let selectedTab: Tier = BillingPlan.FREE;
-    export let downgrade = false;
 
     $: plan = $plansInfo.get(selectedTab);
 </script>
 
-<Card style="--card-padding: 1.5rem">
-    <div class="comparison-box">
-        <SecondaryTabs stretch>
-            <SecondaryTabsItem
-                disabled={selectedTab === BillingPlan.FREE}
+<Card.Base>
+    <Layout.Stack>
+        <Tabs.Root stretch let:root>
+            <Tabs.Item.Button
+                {root}
+                active={selectedTab === BillingPlan.FREE}
                 on:click={() => (selectedTab = BillingPlan.FREE)}>
                 {tierFree.name}
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                disabled={selectedTab === BillingPlan.PRO}
+            </Tabs.Item.Button>
+            <Tabs.Item.Button
+                {root}
+                active={selectedTab === BillingPlan.PRO}
                 on:click={() => (selectedTab = BillingPlan.PRO)}>
                 {tierPro.name}
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                disabled={selectedTab === BillingPlan.SCALE}
+            </Tabs.Item.Button>
+            <Tabs.Item.Button
+                {root}
+                active={selectedTab === BillingPlan.SCALE}
                 on:click={() => (selectedTab = BillingPlan.SCALE)}>
                 {tierScale.name}
-            </SecondaryTabsItem>
-        </SecondaryTabs>
-    </div>
+            </Tabs.Item.Button>
+        </Tabs.Root>
 
-    <div class="u-margin-block-start-24">
+        <Typography.Text variant="m-600">{plan.name} plan</Typography.Text>
         {#if selectedTab === BillingPlan.FREE}
-            <h3 class="u-bold body-text-1">{plan.name} plan</h3>
             {#if downgrade}
                 <ul class="u-margin-block-start-8 list u-gap-4 u-small">
                     <li class="list-item u-gap-4 u-cross-center">
@@ -67,37 +69,26 @@
                     </li>
                 </ul>
             {:else}
-                <ul class="u-margin-block-start-8 un-order-list">
+                <ul class="un-order-list">
                     <li>
-                        <span class="text">
-                            Limited to {plan.databases} Database, {plan.buckets} Buckets, {plan.functions}
-                            Functions per project
-                        </span>
+                        Limited to {plan.databases} Database, {plan.buckets} Buckets, {plan.functions}
+                        Functions per project
+                    </li>
+                    <li>Limited to 1 organization member</li>
+                    <li>
+                        Limited to {plan.bandwidth}GB bandwidth
                     </li>
                     <li>
-                        <span class="text"> Limited to 1 organization member </span>
+                        Limited to {plan.storage}GB storage
                     </li>
                     <li>
-                        <span class="text">
-                            {plan.bandwidth}GB bandwidth
-                        </span>
-                    </li>
-                    <li>
-                        <span class="text">
-                            {plan.storage}GB storage
-                        </span>
-                    </li>
-                    <li>
-                        <span class="text">
-                            {formatNum(plan.executions)} executions
-                        </span>
+                        Limited to {formatNum(plan.executions)} executions
                     </li>
                 </ul>
             {/if}
         {:else if selectedTab === BillingPlan.PRO}
-            <h3 class="u-bold body-text-1">{plan.name} plan</h3>
-            <p class="u-margin-block-start-8">Everything in the Free plan, plus:</p>
-            <ul class="un-order-list u-margin-inline-start-4">
+            <Typography.Text>Everything in the Free plan, plus:</Typography.Text>
+            <ul class="un-order-list">
                 <li>Unlimited databases, buckets, functions</li>
                 <li>{plan.bandwidth}GB bandwidth</li>
                 <li>{plan.storage}GB storage</li>
@@ -105,9 +96,8 @@
                 <li>Email support</li>
             </ul>
         {:else if selectedTab === BillingPlan.SCALE}
-            <h3 class="u-bold body-text-1">{plan.name} plan</h3>
-            <p class="u-margin-block-start-8">Everything in the Pro plan, plus:</p>
-            <ul class="un-order-list u-margin-inline-start-4">
+            <Typography.Text>Everything in the Pro plan, plus:</Typography.Text>
+            <ul class="un-order-list">
                 <li>Unlimited seats</li>
                 <li>Organization roles</li>
                 <li>SOC-2, HIPAA compliance</li>
@@ -115,29 +105,5 @@
                 <li>Priority support</li>
             </ul>
         {/if}
-    </div>
-</Card>
-
-<style lang="scss">
-    .comparison-box {
-        border-radius: var(--border-radius-small);
-        background: hsl(var(--color-neutral-5));
-    }
-    :global(.theme-dark) .comparison-box {
-        background: hsl(var(--color-neutral-85));
-    }
-
-    .comparison-box :global(.secondary-tabs-button:where(:disabled)) {
-        background: hsl(var(--color-neutral-0));
-        border: 1px solid hsl(var(--color-neutral-10));
-    }
-    :global(.theme-dark) .comparison-box :global(.secondary-tabs-button:where(:disabled)) {
-        background: hsl(var(--color-neutral-80));
-        border: 1px solid hsl(var(--color-neutral-85));
-    }
-
-    .inline-tag {
-        line-height: 140%;
-        font-weight: 500;
-    }
-</style>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/lib/components/billing/planExcess.svelte b/src/lib/components/billing/planExcess.svelte
index 97f56e9d8..02793dc70 100644
--- a/src/lib/components/billing/planExcess.svelte
+++ b/src/lib/components/billing/planExcess.svelte
@@ -1,14 +1,4 @@
 <script lang="ts">
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { Alert } from '$lib/components';
     import { calculateExcess, plansInfo, tierToPlan, type Tier } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { toLocaleDate } from '$lib/helpers/date';
@@ -19,7 +9,8 @@
     import type { Aggregation } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
     import { BillingPlan } from '$lib/constants';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Alert, Icon, Table, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
 
     export let tier: Tier;
 
@@ -44,97 +35,91 @@
     });
 </script>
 
-<Alert type="warning" {...$$restProps}>
-    <svelte:fragment slot="title">
-        Your organization will switch to {tierToPlan(BillingPlan.FREE).name} plan on {toLocaleDate(
+{#if showExcess}
+    <Alert.Inline
+        status="error"
+        title={`  Your organization will switch to ${tierToPlan(BillingPlan.FREE).name} plan on ${toLocaleDate(
             $organization.billingNextInvoiceDate
-        )}.
-    </svelte:fragment>
-    {#if !showExcess}
-        You will retain access to your {tierToPlan($organization.billingPlan).name} plan features until
-        your billing period ends. After that, your organization will be limited to Free plan resources,
-        and service disruptions may occur if usage exceeds plan limits.
-    {:else}
+        )}`}>
         You will retain access to {tierToPlan($organization.billingPlan).name} plan features until your
         billing period ends. After that,
         {#if excess?.members > 0}<span class="u-bold">
                 all team members except the owner will be removed,</span>
+        {:else}
+            <span class="u-bold">your organization will be limited to Free plan resources,</span>
         {/if} and service disruptions may occur if usage exceeds Free plan limits.
-    {/if}
-</Alert>
-{#if showExcess}
-    <TableScroll dense class="u-margin-block-start-16">
-        <TableHeader>
-            <TableCellHead>Resource</TableCellHead>
-            <TableCellHead>Free limit</TableCellHead>
-            <TableCellHead>
-                Excess usage <span
-                    use:tooltip={{ content: 'Metrics are estimates updated every 24 hours' }}
-                    class="icon-info"></span>
-            </TableCellHead>
-        </TableHeader>
-        <TableBody>
-            {#if excess?.members}
-                <TableRow>
-                    <TableCellText title="members">Organization members</TableCellText>
-                    <TableCellText title="limit"
-                        >{plan.addons.seats.limit || 0} members</TableCellText>
-                    <TableCell title="excess">
-                        <p class="u-color-text-danger u-flex u-cross-center u-gap-4">
-                            <span class="icon-arrow-up" />
-                            {excess?.members} members
-                        </p>
-                    </TableCell>
-                </TableRow>
-            {/if}
-            {#if excess?.storage}
-                <TableRow>
-                    <TableCellText title="storage">Storage</TableCellText>
-                    <TableCellText title="limit">{plan.storage} GB</TableCellText>
-                    <TableCell title="excess">
-                        <p class="u-color-text-danger">
-                            <span class="icon-arrow-up" />
-                            {humanFileSize(excess?.storage).value}
-                            {humanFileSize(excess?.storage).unit}
-                        </p>
-                    </TableCell>
-                </TableRow>
-            {/if}
-            {#if excess?.executions}
-                <TableRow>
-                    <TableCellText title="executions">Function executions</TableCellText>
-                    <TableCellText title="limit">
-                        {abbreviateNumber(plan.executions)} executions
-                    </TableCellText>
-                    <TableCell title="excess">
-                        <p class="u-color-text-danger">
-                            <span class="icon-arrow-up" />
-                            <span
-                                title={excess?.executions
-                                    ? excess.executions.toString()
-                                    : 'executions'}>
-                                {formatNum(excess?.executions)} executions
-                            </span>
-                        </p>
-                    </TableCell>
-                </TableRow>
-            {/if}
-            {#if excess?.users}
-                <TableRow>
-                    <TableCellText title="users">Users</TableCellText>
-                    <TableCellText title="limit">
-                        {abbreviateNumber(plan.users)} users
-                    </TableCellText>
-                    <TableCell title="excess">
-                        <p class="u-color-text-danger">
-                            <span class="icon-arrow-up" />
-                            <span title={excess?.users ? excess.users.toString() : 'users'}>
-                                {formatNum(excess?.users)} users
-                            </span>
-                        </p>
-                    </TableCell>
-                </TableRow>
-            {/if}
-        </TableBody>
-    </TableScroll>
+    </Alert.Inline>
+
+    <Table.Root columns={3} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Resource</Table.Header.Cell>
+            <Table.Header.Cell {root}>Free limit</Table.Header.Cell>
+            <Table.Header.Cell {root}>
+                Excess usage <Tooltip maxWidth="fit-content"
+                    ><Icon icon={IconInfo} />
+                    <span slot="tooltip">Metrics are estimates updated every 24 hours</span>
+                </Tooltip>
+            </Table.Header.Cell>
+        </svelte:fragment>
+        {#if excess?.members}
+            <Table.Row.Base {root}>
+                <Table.Cell {root}>Organization members</Table.Cell>
+                <Table.Cell {root}>{plan.addons.seats.limit} members</Table.Cell>
+                <Table.Cell {root}>
+                    <p class="u-color-text-danger u-flex u-cross-center u-gap-4">
+                        <span class="icon-arrow-up"></span>
+                        {excess?.members} members
+                    </p>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/if}
+        {#if excess?.storage}
+            <Table.Row.Base {root}>
+                <Table.Cell {root}>Storage</Table.Cell>
+                <Table.Cell {root}>{plan.storage} GB</Table.Cell>
+                <Table.Cell {root}>
+                    <p class="u-color-text-danger">
+                        <span class="icon-arrow-up"></span>
+                        {humanFileSize(excess?.storage).value}
+                        {humanFileSize(excess?.storage).unit}
+                    </p>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/if}
+        {#if excess?.executions}
+            <Table.Row.Base {root}>
+                <Table.Cell {root}>Function executions</Table.Cell>
+                <Table.Cell {root}>
+                    {abbreviateNumber(plan.executions)} executions
+                </Table.Cell>
+                <Table.Cell {root}>
+                    <p class="u-color-text-danger">
+                        <span class="icon-arrow-up"></span>
+                        <span
+                            title={excess?.executions
+                                ? excess.executions.toString()
+                                : 'executions'}>
+                            {formatNum(excess?.executions)} executions
+                        </span>
+                    </p>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/if}
+        {#if excess?.users}
+            <Table.Row.Base {root}>
+                <Table.Cell {root}>Users</Table.Cell>
+                <Table.Cell {root}>
+                    {abbreviateNumber(plan.users)} users
+                </Table.Cell>
+                <Table.Cell column="usage" {root}>
+                    <p class="u-color-text-danger">
+                        <span class="icon-arrow-up"></span>
+                        <span title={excess?.users ? excess.users.toString() : 'users'}>
+                            {formatNum(excess?.users)} users
+                        </span>
+                    </p>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/if}
+    </Table.Root>
 {/if}
diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte
index 76d307374..d2889d66f 100644
--- a/src/lib/components/billing/planSelection.svelte
+++ b/src/lib/components/billing/planSelection.svelte
@@ -1,107 +1,75 @@
 <script lang="ts">
     import { BillingPlan } from '$lib/constants';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import { plansInfo, tierFree, tierPro, tierScale, type Tier } from '$lib/stores/billing';
+    import { plansInfo, type Tier, tierFree, tierPro, tierScale } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { LabelCard } from '..';
 
     export let billingPlan: Tier;
     export let anyOrgFree = false;
     export let isNewOrg = false;
     export let selfService = true;
-    let classes: string = '';
-    export { classes as class };
 
     $: freePlan = $plansInfo.get(BillingPlan.FREE);
     $: proPlan = $plansInfo.get(BillingPlan.PRO);
     $: scalePlan = $plansInfo.get(BillingPlan.SCALE);
 </script>
 
-{#if billingPlan}
-    <ul class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-8 {classes}">
-        <li>
-            <LabelCard
-                name="plan"
-                bind:group={billingPlan}
-                disabled={anyOrgFree || !selfService}
-                value={BillingPlan.FREE}
-                tooltipShow={anyOrgFree}
-                tooltipText="You are limited to 1 Free organization per account."
-                padding={1.5}>
-                <svelte:fragment slot="custom" let:disabled>
-                    <div
-                        class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
-                        class:u-opacity-50={disabled}>
-                        <h4 class="body-text-2 u-bold">
-                            {tierFree.name}
-                            {#if $organization?.billingPlan === BillingPlan.FREE && !isNewOrg}
-                                <span class="inline-tag">Current plan</span>
-                            {/if}
-                        </h4>
-                        <p class="u-color-text-offline u-small">
-                            {tierFree.description}
-                        </p>
-                        <p>
-                            {formatCurrency(freePlan?.price ?? 0)}
-                        </p>
-                    </div>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
-
-        <li>
-            <LabelCard
-                name="plan"
-                disabled={!selfService}
-                bind:group={billingPlan}
-                value={BillingPlan.PRO}
-                padding={1.5}>
-                <svelte:fragment slot="custom" let:disabled>
-                    <div
-                        class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
-                        class:u-opacity-50={disabled}>
-                        <h4 class="body-text-2 u-bold">
-                            {tierPro.name}
-                            {#if $organization?.billingPlan === BillingPlan.PRO && !isNewOrg}
-                                <span class="inline-tag">Current plan</span>
-                            {/if}
-                        </h4>
-                        <p class="u-color-text-offline u-small">
-                            {tierPro.description}
-                        </p>
-                        <p>
-                            {formatCurrency(proPlan?.price ?? 0)} per member/month + usage
-                        </p>
-                    </div>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
-        <li>
-            <LabelCard
-                name="plan"
-                bind:group={billingPlan}
-                value={BillingPlan.SCALE}
-                padding={1.5}
-                disabled={!selfService}>
-                <svelte:fragment slot="custom" let:disabled>
-                    <div
-                        class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
-                        class:u-opacity-50={disabled}>
-                        <h4 class="body-text-2 u-bold">
-                            {tierScale.name}
-                            {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
-                                <span class="inline-tag">Current plan</span>
-                            {/if}
-                        </h4>
-                        <p class="u-color-text-offline u-small">
-                            {tierScale.description}
-                        </p>
-                        <p>
-                            {formatCurrency(scalePlan?.price ?? 0)} per month + usage
-                        </p>
-                    </div>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
-    </ul>
-{/if}
+<Layout.Stack>
+    <LabelCard
+        name="plan"
+        bind:group={billingPlan}
+        disabled={anyOrgFree || !selfService}
+        value={BillingPlan.FREE}
+        tooltipShow={anyOrgFree}
+        title={tierFree.name}
+        tooltipText="You are limited to 1 Free organization per account.">
+        <svelte:fragment slot="action">
+            {#if $organization?.billingPlan === BillingPlan.FREE && !isNewOrg}
+                <Badge variant="secondary" size="xs" content="Current plan" />
+            {/if}
+        </svelte:fragment>
+        <Typography.Caption variant="400">
+            {tierFree.description}
+        </Typography.Caption>
+        <Typography.Text>
+            {formatCurrency(freePlan?.price ?? 0)}
+        </Typography.Text>
+    </LabelCard>
+    <LabelCard
+        name="plan"
+        disabled={!selfService}
+        bind:group={billingPlan}
+        value={BillingPlan.PRO}
+        title={tierPro.name}>
+        <svelte:fragment slot="action">
+            {#if $organization?.billingPlan === BillingPlan.PRO && !isNewOrg}
+                <Badge variant="secondary" size="xs" content="Current plan" />
+            {/if}
+        </svelte:fragment>
+        <Typography.Caption variant="400">
+            {tierPro.description}
+        </Typography.Caption>
+        <Typography.Text>
+            {formatCurrency(proPlan?.price ?? 0)} per month + usage
+        </Typography.Text>
+    </LabelCard>
+    <LabelCard
+        name="plan"
+        bind:group={billingPlan}
+        value={BillingPlan.SCALE}
+        title={tierScale.name}>
+        <svelte:fragment slot="action">
+            {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
+                <Badge variant="secondary" size="xs" content="Current plan" />
+            {/if}
+        </svelte:fragment>
+        <Typography.Caption variant="400">
+            {tierScale.description}
+        </Typography.Caption>
+        <Typography.Text>
+            {formatCurrency(scalePlan?.price ?? 0)} per month + usage
+        </Typography.Text>
+    </LabelCard>
+</Layout.Stack>
diff --git a/src/lib/components/billing/selectPaymentMethod.svelte b/src/lib/components/billing/selectPaymentMethod.svelte
index 8e82a806e..dac287731 100644
--- a/src/lib/components/billing/selectPaymentMethod.svelte
+++ b/src/lib/components/billing/selectPaymentMethod.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-    import { Button, Helper, InputChoice, InputSelectSearch, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
-    import { sdk } from '$lib/stores/sdk';
     import { hasStripePublicKey, isCloud } from '$lib/system';
     import { onMount } from 'svelte';
-    import { Alert, Card, CreditCardBrandImage } from '..';
     import PaymentModal from './paymentModal.svelte';
     import { capitalize } from '$lib/helpers/string';
+    import { Alert, Icon, Layout, Selector, Card, Typography } from '@appwrite.io/pink-svelte';
+    import { IconExclamationCircle, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     export let methods: PaymentList;
     export let value: string;
@@ -14,22 +17,10 @@
 
     let showTaxId = false;
     let showPaymentModal = false;
-    let input: HTMLInputElement;
-    let error: string;
-
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        if (input.validity.valueMissing) {
-            error = 'This field is required';
-            return;
-        }
-        error = input.validationMessage;
-    }
 
     async function cardSaved(event: CustomEvent<PaymentMethodData>) {
         value = event.detail.$id;
-        methods = await sdk.forConsole.billing.listPaymentMethods();
+        invalidate(Dependencies.UPGRADE_PLAN);
     }
 
     onMount(() => {
@@ -39,113 +30,76 @@
     });
 
     $: filteredMethods = methods?.paymentMethods?.filter((method) => !!method?.last4);
-
     $: selectedPaymentMethod = methods?.paymentMethods?.find((method) => method.$id === value);
 </script>
 
-{#if filteredMethods?.length}
-    {#if selectedPaymentMethod?.country?.toLowerCase() === 'in'}
-        <Alert type="warning">
-            <svelte:fragment slot="title">Indian credit or debit card-holders</svelte:fragment>
-            To comply with RBI regulations in India, Appwrite will ask for verification to charge up
-            to $150 USD on your payment method. We will never charge more than the cost of your plan
-            and the resources you use, or your budget cap limit. For higher usage limits, please contact
-            us.
-        </Alert>
-    {/if}
-    <InputSelectSearch
-        id="method"
-        required
-        label="Payment method"
-        placeholder="Select payment method"
-        bind:value
-        options={filteredMethods.map((method) => {
-            return {
-                value: method.$id,
-                label: `${capitalize(method.brand)} ending in ${method.last4}`,
-                data: [method.brand]
-            };
-        })}
-        interactiveOutput
-        let:option={o}>
-        <svelte:fragment slot="output" let:option={o}>
-            <output class="input-text u-cursor-pointer">
-                <span class="u-flex u-gap-16 u-flex-vertical">
-                    <span class="u-flex u-gap-16">
-                        <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
-                            <span>{o.label}</span>
-                            <CreditCardBrandImage brand={o.data?.toString()} />
-                        </span>
-                    </span>
-                </span>
-            </output>
-        </svelte:fragment>
-
-        <span class="u-flex u-gap-16 u-flex-vertical">
-            <span class="u-flex u-gap-16">
-                <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
-                    <span>{o.label}</span>
-                    <CreditCardBrandImage brand={o.data?.toString()} />
-                </span>
-            </span>
-        </span>
-        <svelte:fragment slot="listEnd">
-            <Button text on:click={() => (showPaymentModal = true)}>
-                <span class="icon-plus"></span>
-                <span class="text">Add new payment method</span>
-            </Button>
-        </svelte:fragment>
-    </InputSelectSearch>
-{:else}
-    <div>
-        <input
-            bind:this={input}
-            on:invalid={handleInvalid}
-            required
-            class="u-hide"
-            type="text"
-            name="method"
-            id="method" />
-        <Card
-            isDashed
-            style="--p-card-padding:0.75rem; --p-card-bg-color: transparent; --p-card-border-radius: 0.5rem"
-            isTile>
-            <div class="u-flex u-main-space-between u-cross-center">
-                <p>
-                    <span class="icon-exclamation-circle"></span>
-                    <span class="text">No saved payment methods</span>
-                </p>
-                <Button secondary on:click={() => (showPaymentModal = true)}>
-                    <span class="icon-plus"></span> <span class="text">Add</span>
-                </Button>
-            </div>
-        </Card>
-        {#if error}
-            <Helper class="u-position-relative" type="warning">{error}</Helper>
+<Layout.Stack gap="s">
+    {#if filteredMethods?.length}
+        {#if selectedPaymentMethod?.country?.toLowerCase() === 'in'}
+            <Alert.Inline status="warning">
+                <svelte:fragment slot="title">Indian credit or debit card-holders</svelte:fragment>
+                To comply with RBI regulations in India, Appwrite will ask for verification to charge
+                up to $150 USD on your payment method. We will never charge more than the cost of your
+                plan and the resources you use, or your budget cap limit. For higher usage limits, please
+                contact us.
+            </Alert.Inline>
         {/if}
-    </div>
-{/if}
+        <InputSelect
+            id="method"
+            required
+            label="Payment method"
+            placeholder="Select payment method"
+            bind:value
+            options={filteredMethods.map((method) => {
+                return {
+                    value: method.$id,
+                    label: `${capitalize(method.brand)} ending in ${method.last4}`,
+                    data: [method.brand]
+                };
+            })} />
+        <Layout.Stack direction="row" alignItems="center">
+            <Button on:click={() => (showPaymentModal = true)} compact size="s">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add payment method
+            </Button>
+            <slot name="actions" />
+        </Layout.Stack>
+    {:else}
+        <Card.Base variant="secondary" radius="s" padding="xs">
+            <Layout.Stack direction="row">
+                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                    <Icon
+                        icon={IconExclamationCircle}
+                        size="m"
+                        color="--fgcolor-neutral-tertiary" />
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary"
+                        >No saved payment methods</Typography.Text>
+                </Layout.Stack>
+                <Button secondary on:click={() => (showPaymentModal = true)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add
+                </Button>
+            </Layout.Stack>
+            <slot name="actions" />
+        </Card.Base>
+    {/if}
+</Layout.Stack>
 
 {#if showPaymentModal && isCloud && hasStripePublicKey}
     <PaymentModal bind:show={showPaymentModal} on:submit={cardSaved}>
         <svelte:fragment slot="end">
-            <InputChoice
-                type="checkbox"
+            <Selector.Checkbox
                 id="taxIdCheck"
                 label="I'm purchasing as a business"
-                fullWidth
-                bind:value={showTaxId}>
-                {#if showTaxId}
-                    <div class="u-margin-block-start-8">
-                        <InputText
-                            id="taxId"
-                            label="Tax ID"
-                            autofocus
-                            placeholder="Tax ID"
-                            bind:value={taxId} />
-                    </div>
-                {/if}
-            </InputChoice>
+                bind:checked={showTaxId} />
+            {#if showTaxId}
+                <InputText
+                    id="taxId"
+                    label="Tax ID"
+                    autofocus
+                    placeholder="Tax ID"
+                    bind:value={taxId} />
+            {/if}
         </svelte:fragment>
     </PaymentModal>
 {/if}
diff --git a/src/lib/components/billing/selectPlan.svelte b/src/lib/components/billing/selectPlan.svelte
index 8aae2f0ac..2b9d9498f 100644
--- a/src/lib/components/billing/selectPlan.svelte
+++ b/src/lib/components/billing/selectPlan.svelte
@@ -24,8 +24,7 @@
                     tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
                     tooltipText={plan.$id === BillingPlan.FREE
                         ? 'You are limited to 1 Free organization per account.'
-                        : ''}
-                    padding={1.5}>
+                        : ''}>
                     <svelte:fragment slot="custom" let:disabled>
                         <div
                             class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
diff --git a/src/lib/components/billing/usageRates.svelte b/src/lib/components/billing/usageRates.svelte
index 699241134..653b9c154 100644
--- a/src/lib/components/billing/usageRates.svelte
+++ b/src/lib/components/billing/usageRates.svelte
@@ -1,19 +1,12 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { organization, type Organization } from '$lib/stores/organization';
+    import { type Organization } from '$lib/stores/organization';
     import { plansInfo } from '$lib/stores/billing';
     import { abbreviateNumber, formatCurrency } from '$lib/helpers/numbers';
     import { BillingPlan } from '$lib/constants';
+    import { Table, Typography } from '@appwrite.io/pink-svelte';
 
     export let show = false;
     export let org: Organization;
@@ -22,7 +15,7 @@
 
     $: nextDate = org?.name
         ? new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toString()
-        : $organization?.billingNextInvoiceDate;
+        : org?.billingNextInvoiceDate;
 
     const planData = [
         {
@@ -52,71 +45,67 @@
     $: isFree = org.billingPlan === BillingPlan.FREE;
 
     // equal or above means unlimited!
-    $: getCorrectSeatsCountValue = (count: number): string | number => {
+    const getCorrectSeatsCountValue = (count: number): string | number => {
         // php int max is always larger than js
         const exceedsSafeLimit = count >= Number.MAX_SAFE_INTEGER;
         return exceedsSafeLimit ? 'Unlimited' : count || 0;
     };
 </script>
 
-<Modal bind:show size="big" headerDivider={false} title="Usage rates">
+<Modal bind:show title="Usage rates">
     {#if isFree}
-        Usage on the {$plansInfo?.get(BillingPlan.FREE).name} plan is limited for the following resources.
-        Next billing period: {toLocaleDate(nextDate)}.
+        <Typography.Text>
+            Usage on the {$plansInfo?.get(BillingPlan.FREE).name} plan is limited for the following resources.
+            Next billing period: {toLocaleDate(nextDate)}.
+        </Typography.Text>
     {:else if org.billingPlan === BillingPlan.PRO}
-        <p>
+        <Typography.Text>
             Usage on the Pro plan will be charged at the end of each billing period at the following
             rates. Next billing period: {toLocaleDate(nextDate)}.
-        </p>
+        </Typography.Text>
     {:else if org.billingPlan === BillingPlan.SCALE}
-        <p>
+        <Typography.Text>
             Usage on the Scale plan will be charged at the end of each billing period at the
             following rates. Next billing period: {toLocaleDate(nextDate)}.
-        </p>
+        </Typography.Text>
     {/if}
-    <Table noStyles noMargin>
-        <TableHeader>
-            <TableCellHead>Resource</TableCellHead>
-            <TableCellHead>Limit</TableCellHead>
-            {#if !isFree}
-                <TableCellHead>Rate</TableCellHead>
+    <Table.Root
+        columns={[{ id: 'resource' }, { id: 'limit' }, { id: 'rate', hide: isFree }]}
+        let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell column="resource" {root}>Resource</Table.Header.Cell>
+            <Table.Header.Cell column="limit" {root}>Limit</Table.Header.Cell>
+            <Table.Header.Cell column="rate" {root}>Rate</Table.Header.Cell>
+        </svelte:fragment>
+        {#each planData as usage}
+            {#if usage['id'] === 'members'}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="resource" {root}>{usage.resource}</Table.Cell>
+                    <Table.Cell column="limit" {root}>
+                        {getCorrectSeatsCountValue(plan.addons.seats.limit)}
+                    </Table.Cell>
+                    <Table.Cell column="rate" {root}>
+                        {formatCurrency(plan.addons?.seats?.price)}/{usage?.unit}
+                    </Table.Cell>
+                </Table.Row.Base>
+            {:else}
+                {@const addon = plan.addons[usage.id]}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="resource" {root}>{usage.resource}</Table.Cell>
+                    <Table.Cell column="limit" {root}>
+                        {abbreviateNumber(plan[usage.id])}{usage?.unit}
+                    </Table.Cell>
+                    {#if !isFree}
+                        <Table.Cell column="rate" {root}>
+                            {formatCurrency(addon?.price)}/{['MB', 'GB', 'TB'].includes(addon?.unit)
+                                ? addon?.value
+                                : abbreviateNumber(addon?.value, 0)}{usage?.unit}
+                        </Table.Cell>
+                    {/if}
+                </Table.Row.Base>
             {/if}
-        </TableHeader>
-        <TableBody>
-            {#each planData as usage}
-                {#if usage['id'] === 'members'}
-                    <TableRow>
-                        <TableCellText title="resource">{usage.resource}</TableCellText>
-                        <TableCellText title="limit">
-                            {getCorrectSeatsCountValue(plan.addons.seats.limit)}
-                        </TableCellText>
-                        {#if !isFree}
-                            <TableCellText title="rate">
-                                {formatCurrency(plan.addons.seats.price)}/{usage?.unit}
-                            </TableCellText>
-                        {/if}
-                    </TableRow>
-                {:else}
-                    {@const addon = plan.usage[usage.id]}
-                    <TableRow>
-                        <TableCellText title="resource">{usage.resource}</TableCellText>
-                        <TableCellText title="limit">
-                            {abbreviateNumber(plan[usage.id])}{usage?.unit}
-                        </TableCellText>
-                        {#if !isFree}
-                            <TableCellText title="rate">
-                                {formatCurrency(addon?.price)}/{['MB', 'GB', 'TB'].includes(
-                                    addon?.unit
-                                )
-                                    ? addon?.value
-                                    : abbreviateNumber(addon?.value, 0)}{usage?.unit}
-                            </TableCellText>
-                        {/if}
-                    </TableRow>
-                {/if}
-            {/each}
-        </TableBody>
-    </Table>
+        {/each}
+    </Table.Root>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Close</Button>
     </svelte:fragment>
diff --git a/src/lib/components/billing/validateCreditModal.svelte b/src/lib/components/billing/validateCreditModal.svelte
index deefc106f..130532a7b 100644
--- a/src/lib/components/billing/validateCreditModal.svelte
+++ b/src/lib/components/billing/validateCreditModal.svelte
@@ -1,24 +1,43 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import type { Coupon } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
 
-    const dispatch = createEventDispatcher();
     export let show = false;
-    let error: string = null;
-    let coupon: string = '';
+    export let isNewOrg = false;
     export let couponData: Partial<Coupon> = {
         code: null,
         status: null,
         credits: null
     };
+    let error: string = null;
+    let coupon: string = '';
+    const dispatch = createEventDispatcher();
 
     async function addCoupon() {
         try {
-            const response = await sdk.forConsole.billing.getCouponAccount(coupon);
+            // const response = await sdk.forConsole.billing.getCoupon(coupon);
+            const response = await sdk.forConsole.billing.getCouponAccount(coupon); //TODO: double check that this is the correct method
+
+            if (response.onlyNewOrgs && !isNewOrg) {
+                show = false;
+                addNotification({
+                    type: 'error',
+                    message: 'Coupon only valid for new organizations'
+                });
+            } else {
+                couponData = response;
+                dispatch('validation', couponData);
+                coupon = null;
+                show = false;
+                addNotification({
+                    type: 'success',
+                    message: 'Credits applied successfully'
+                });
+            }
             couponData = response;
             dispatch('validation', couponData);
             coupon = null;
@@ -37,21 +56,20 @@
     }
 </script>
 
-<Modal
-    bind:show
-    title="Add credits"
-    headerDivider={false}
-    onSubmit={addCoupon}
-    size="big"
-    bind:error>
-    Credits will be applied automatically to your next invoice.
+<Modal bind:show title="Add credits" onSubmit={addCoupon} bind:error>
+    <svelte:fragment slot="description">
+        Credits will be applied automatically to your next invoice.
+    </svelte:fragment>
 
-    <FormList>
-        <InputText placeholder="Promo code" id="code" label="Add promo code" bind:value={coupon} />
-    </FormList>
+    <InputText
+        required
+        placeholder="Promo code"
+        id="code"
+        label="Add promo code"
+        bind:value={coupon} />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button submit>Add</Button>
+        <Button submit disabled={coupon === ''}>Add</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/lib/components/bottom-sheet/SheetMenuBlock.svelte b/src/lib/components/bottom-sheet/SheetMenuBlock.svelte
new file mode 100644
index 000000000..a8d65c4be
--- /dev/null
+++ b/src/lib/components/bottom-sheet/SheetMenuBlock.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import type { SheetMenu, SubMenu } from '$lib/components/bottom-sheet/index.js';
+    import { ActionMenu, Layout, Selector } from '@appwrite.io/pink-svelte';
+
+    export let menu: SubMenu;
+    export let isOpen: boolean;
+    export let navigateSubMenu: (menu: SheetMenu) => void;
+    export let navigatePreviousMenu: () => void;
+</script>
+
+{#if menu?.title}
+    <span class="menu-title">{menu.title}</span>
+{/if}
+<ActionMenu.Root>
+    {#each menu.items as menuItem}
+        {#if menuItem.href}
+            <ActionMenu.Item.Anchor
+                size="l"
+                leadingIcon={menuItem.leadingIcon}
+                trailingIcon={menuItem.trailingIcon}
+                href={menuItem.href}
+                on:click={() => {
+                    isOpen = false;
+                }}>
+                <span class="anchor">{menuItem.name}</span>
+            </ActionMenu.Item.Anchor>
+        {:else}
+            <ActionMenu.Item.Button
+                size="l"
+                leadingIcon={menuItem.leadingIcon}
+                trailingIcon={menuItem.trailingIcon}
+                on:click={() => {
+                    if (menuItem.subMenu) {
+                        navigateSubMenu(menuItem.subMenu);
+                    } else if (menuItem.navigatePrevious) {
+                        navigatePreviousMenu();
+                    } else if (menuItem.onClick !== undefined) {
+                        menuItem.onClick();
+                        if (menuItem.closeOnClick !== false) {
+                            isOpen = false;
+                        }
+                    }
+                }}>
+                {#if menuItem?.checked !== undefined}
+                    <Layout.Stack direction="row" gap="s">
+                        <Selector.Checkbox checked={menuItem.checked} size="s" />
+                        {menuItem.name}
+                    </Layout.Stack>
+                {:else}
+                    {menuItem.name}
+                {/if}
+            </ActionMenu.Item.Button>
+        {/if}
+    {/each}
+</ActionMenu.Root>
+
+<style lang="scss">
+    .menu-title {
+        padding: var(--space-3) var(--space-5);
+        display: block;
+        text-transform: uppercase;
+        font-size: var(--font-size-xs, 12px);
+        line-height: 130%; /* 15.6px */
+        letter-spacing: 0.96px;
+    }
+</style>
diff --git a/src/lib/components/bottom-sheet/bottomSheetMenu.svelte b/src/lib/components/bottom-sheet/bottomSheetMenu.svelte
new file mode 100644
index 000000000..b83d07b1e
--- /dev/null
+++ b/src/lib/components/bottom-sheet/bottomSheetMenu.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import SheetMenuBlock from './SheetMenuBlock.svelte';
+    import { BottomSheet } from '@appwrite.io/pink-svelte';
+    import type { $$Props, SheetMenu } from '$lib/components/bottom-sheet/index';
+
+    export let menu: $$Props['menu'];
+    export let isOpen: $$Props['isOpen'] = false;
+    let sheetContainerRef: $$Props['sheetContainerRef'];
+    let activeMenu = menu;
+    let showDivider = true;
+    let previousMenu = activeMenu;
+
+    function navigateSubMenu(subMenu: SheetMenu) {
+        previousMenu = activeMenu;
+        if (sheetContainerRef) {
+            const currentHeight = sheetContainerRef.offsetHeight;
+            sheetContainerRef.style.overflowY = 'hidden';
+            sheetContainerRef.style.maxHeight = `${currentHeight}px`;
+            activeMenu = subMenu;
+            requestAnimationFrame(() => {
+                if (sheetContainerRef) {
+                    const newHeight = sheetContainerRef.scrollHeight;
+                    sheetContainerRef.style.maxHeight = `${newHeight + 5}px`;
+                }
+            });
+        } else {
+            activeMenu = subMenu;
+        }
+        showDivider = activeMenu.bottom !== undefined;
+    }
+
+    function navigatePreviousMenu() {
+        activeMenu = previousMenu;
+        showDivider = activeMenu.bottom !== undefined;
+    }
+
+    function restoreMenu(isOpenState: boolean) {
+        showDivider = activeMenu.bottom !== undefined;
+        if (!isOpenState) {
+            setTimeout(() => {
+                activeMenu = menu;
+            }, 400);
+        }
+    }
+
+    $: restoreMenu(isOpen);
+</script>
+
+<BottomSheet.Default bind:isOpen useSlots={true} bind:sheetContainerRef bind:showDivider>
+    <div slot="top">
+        <SheetMenuBlock
+            menu={activeMenu.top}
+            {navigateSubMenu}
+            {navigatePreviousMenu}
+            bind:isOpen />
+    </div>
+    <div slot="bottom">
+        {#if activeMenu.bottom}
+            <SheetMenuBlock
+                menu={activeMenu.bottom}
+                {navigateSubMenu}
+                {navigatePreviousMenu}
+                bind:isOpen />
+        {/if}
+    </div>
+</BottomSheet.Default>
diff --git a/src/lib/components/bottom-sheet/index.ts b/src/lib/components/bottom-sheet/index.ts
new file mode 100644
index 000000000..be8134d22
--- /dev/null
+++ b/src/lib/components/bottom-sheet/index.ts
@@ -0,0 +1,30 @@
+import Menu from './bottomSheetMenu.svelte';
+import type { ComponentType } from 'svelte';
+
+export type $$Props = {
+    isOpen: boolean;
+    useSlots?: boolean;
+    sheetContainerRef?: HTMLDialogElement;
+    showDivider?: boolean;
+    menu: SheetMenu;
+};
+export type SubMenu = {
+    title?: string;
+    items: MenuItem[];
+};
+
+type MenuItem = {
+    name: string;
+    leadingIcon?: ComponentType;
+    trailingIcon?: ComponentType;
+    onClick?: () => void;
+    href?: string;
+    closeOnClick?: boolean;
+    navigatePrevious?: boolean;
+    checked?: boolean;
+    subMenu?: { top: SubMenu; bottom: SubMenu };
+};
+
+export type SheetMenu = { top: SubMenu; bottom: SubMenu };
+
+export default { Menu };
diff --git a/src/lib/components/bottomModalAlert.svelte b/src/lib/components/bottomModalAlert.svelte
index 876b40575..3e98be3ca 100644
--- a/src/lib/components/bottomModalAlert.svelte
+++ b/src/lib/components/bottomModalAlert.svelte
@@ -14,15 +14,15 @@
     import { upgradeURL } from '$lib/stores/billing';
     import { addBottomModalAlerts } from '$routes/(console)/bottomAlerts';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
-    import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { goto } from '$app/navigation';
 
     let currentIndex = 0;
     let openModalOnMobile = false;
 
     function getPageScope(pathname: string) {
-        const isProjectPage = pathname.includes('project-[project]');
+        const isProjectPage = pathname.includes('project-[region]-[project]');
         const isOrganizationPage = pathname.includes('organization-[organization]');
 
         return { isProjectPage, isOrganizationPage };
@@ -49,7 +49,7 @@
             });
     }
 
-    $: filteredModalAlerts = filterModalAlerts($bottomModalAlertsConfig.alerts, $page.route.id);
+    $: filteredModalAlerts = filterModalAlerts($bottomModalAlertsConfig.alerts, page.route.id);
 
     $: currentModalAlert = filteredModalAlerts[currentIndex] as BottomModalAlertItem;
 
@@ -131,13 +131,16 @@
     });
 </script>
 
-{#if filteredModalAlerts.length > 0 && currentModalAlert && !$page.url.pathname.includes('console/onboarding')}
+{#if filteredModalAlerts.length > 0 && currentModalAlert && !page.url.pathname.includes('console/onboarding')}
     {@const shouldShowUpgrade = showUpgrade()}
     <div class="main-alert-wrapper is-not-mobile">
         <div class="alert-container">
             <article class="card">
                 {#key currentModalAlert.id}
-                    <button class="icon-inline-tag" on:click={() => handleClose()}>
+                    <button
+                        aria-label="Close modal"
+                        class="icon-inline-tag"
+                        on:click={() => handleClose()}>
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="20"
@@ -173,17 +176,19 @@
 
                                 <div class="u-flex u-gap-10">
                                     <button
+                                        aria-label="Previous"
                                         class="icon-cheveron-left"
                                         on:click={showPrevious}
                                         disabled={currentIndex === 0}
-                                        class:active={currentIndex > 0} />
+                                        class:active={currentIndex > 0}></button>
 
                                     <button
+                                        aria-label="Next"
                                         class="icon-cheveron-right"
                                         on:click={showNext}
                                         disabled={currentIndex === filteredModalAlerts.length - 1}
                                         class:active={currentIndex !==
-                                            filteredModalAlerts.length - 1} />
+                                            filteredModalAlerts.length - 1}></button>
                                 </div>
                             </div>
                         {/if}
@@ -220,7 +225,7 @@
                                         handleClose();
                                     }
 
-                                    trackEvent('click_promo', {
+                                    trackEvent(Click.PromoClick, {
                                         promo: currentModalAlert.id,
                                         type: shouldShowUpgrade ? 'upgrade' : 'try_now'
                                     });
@@ -253,7 +258,10 @@
             <div class="alert-container">
                 <article class="card">
                     {#key currentModalAlert.id}
-                        <button class="icon-inline-tag" on:click={() => handleClose()}>
+                        <button
+                            aria-label="Close modal"
+                            class="icon-inline-tag"
+                            on:click={() => handleClose()}>
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="20"
@@ -289,18 +297,20 @@
 
                                     <div class="u-flex u-gap-10">
                                         <button
+                                            aria-label="Previous"
                                             class="icon-cheveron-left"
                                             on:click={showPrevious}
                                             disabled={currentIndex === 0}
-                                            class:active={currentIndex > 0} />
+                                            class:active={currentIndex > 0}></button>
 
                                         <button
+                                            aria-label="Next"
                                             class="icon-cheveron-right"
                                             on:click={showNext}
                                             disabled={currentIndex ===
                                                 filteredModalAlerts.length - 1}
                                             class:active={currentIndex !==
-                                                filteredModalAlerts.length - 1} />
+                                                filteredModalAlerts.length - 1}></button>
                                     </div>
                                 </div>
                             {/if}
@@ -332,7 +342,7 @@
                                     fullWidthMobile
                                     on:click={() => {
                                         openModalOnMobile = false;
-                                        trackEvent('click_promo', {
+                                        trackEvent(Click.PromoClick, {
                                             promo: currentModalAlert.id,
                                             type: shouldShowUpgrade ? 'upgrade' : 'try_now'
                                         });
@@ -363,7 +373,11 @@
             </div>
         {:else}
             {@const mobileConfig = getMobileWindowConfig()}
-            <button
+            <!-- we don't need keydown because we show this only on mobile -->
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+                tabindex="0"
+                role="button"
                 class:showing={!openModalOnMobile}
                 class="card notification-card u-width-full-line"
                 on:click={() => {
@@ -377,8 +391,8 @@
                 <div class="u-flex-vertical u-gap-4">
                     <div class="u-flex u-cross-center u-main-space-between">
                         <h3 class="body-text-2 u-bold">{mobileConfig.title}</h3>
-                        <button on:click={hideAllModalAlerts}>
-                            <span class="icon-x" />
+                        <button on:click={hideAllModalAlerts} aria-label="Close">
+                            <span class="icon-x"></span>
                         </button>
                     </div>
 
@@ -390,7 +404,7 @@
                         {/if}
                     </span>
                 </div>
-            </button>
+            </div>
         {/if}
     </div>
 {/if}
diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
index 9d164cd57..d129900a0 100644
--- a/src/lib/components/box.svelte
+++ b/src/lib/components/box.svelte
@@ -1,20 +1,11 @@
 <script lang="ts">
-    export let radius: keyof typeof radiuses = 'small';
-    export let padding = 24;
-    let classes = '';
-    export { classes as class };
+    import { Card } from '@appwrite.io/pink-svelte';
+    import type { BaseCardProps } from './card.svelte';
 
-    enum radiuses {
-        xsmall = '--border-radius-xsmall',
-        small = '--border-radius-small',
-        medium = '--border-radius-medium',
-        large = '--border-radius-large'
-    }
+    export let radius: BaseCardProps['radius'] = 'm';
+    export let padding: BaseCardProps['padding'] = 's';
 </script>
 
-<div
-    class="box {classes}"
-    style:--box-border-radius={`var(${radiuses[radius]})`}
-    style:--box-padding={`${padding / 16}rem`}>
+<Card.Base variant="secondary" {radius} {padding}>
     <slot />
-</div>
+</Card.Base>
diff --git a/src/lib/components/boxAvatar.svelte b/src/lib/components/boxAvatar.svelte
index 3e9a814f0..7ba70c789 100644
--- a/src/lib/components/boxAvatar.svelte
+++ b/src/lib/components/boxAvatar.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { Box } from '.';
+    import { Layout } from '@appwrite.io/pink-svelte';
 </script>
 
 <Box>
-    <div class="u-flex u-gap-16">
+    <Layout.Stack direction="row" justifyContent="flex-start" alignItems="center">
         <slot name="image" />
-        <div class="u-cross-child-center u-line-height-1-5">
+        <div>
             <slot name="title" />
             <slot />
         </div>
-    </div>
+    </Layout.Stack>
 </Box>
diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
new file mode 100644
index 000000000..7d9329f3c
--- /dev/null
+++ b/src/lib/components/breadcrumbs.svelte
@@ -0,0 +1,459 @@
+<script lang="ts">
+    import { createMenubar, melt } from '@melt-ui/svelte';
+    import { Badge, Icon, type SheetMenu, ActionMenu, Card } from '@appwrite.io/pink-svelte';
+    import {
+        IconChevronDown,
+        IconChevronRight,
+        IconPlus,
+        IconPlusSm
+    } from '@appwrite.io/pink-icons-svelte';
+    import { BottomSheet } from '$lib/components';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isCloud } from '$lib/system';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { newOrgModal } from '$lib/stores/organization';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+
+    type Project = {
+        name: string;
+        $id: string;
+        isSelected: boolean;
+        region: string;
+    };
+    type Organization = {
+        name: string;
+        $id: string;
+        tierName: string;
+        isSelected: boolean;
+        projects: Array<Project>;
+    };
+
+    const {
+        elements: { menubar },
+        builders: { createMenu }
+    } = createMenubar();
+
+    const {
+        elements: {
+            trigger: triggerOrganizations,
+            menu: menuOrganizations,
+            item: itemOrganizations,
+            separator: separatorOrganizations
+        },
+        builders: { createSubmenu: createSubmenuOrganizations, createMenuRadioGroup }
+    } = createMenu();
+
+    const {
+        elements: { radioGroup: radioGroupOrganizations }
+    } = createMenuRadioGroup({});
+
+    const {
+        elements: { subMenu: subMenuOrganizations, subTrigger: subTriggerOrganizations }
+    } = createSubmenuOrganizations();
+
+    const {
+        elements: {
+            trigger: triggerProjects,
+            menu: menuProjects,
+            item: itemProjects,
+            separator: separatorProjects
+        }
+    } = createMenu();
+
+    export let organizations: Organization[] = [];
+
+    $: selectedOrg = organizations.find((organization) => organization.isSelected);
+    $: selectedProject = selectedOrg?.projects.find((project) => project.isSelected);
+
+    let organisationBottomSheetOpen = false;
+    let projectsBottomSheetOpen = false;
+
+    function createOrg() {
+        trackEvent(Click.OrganizationClickCreate, { source: 'breadcrumbs' });
+        if (isCloud) {
+            goto(`${base}/create-organization`);
+        } else newOrgModal.set(true);
+    }
+
+    const switchOrganization = {
+        top: {
+            title: 'Switch Organization',
+            items: organizations.map((organization) => ({
+                name: organization.name,
+                href: `/console/organization-${organization?.$id}`
+            }))
+        },
+        bottom: {
+            items: [
+                {
+                    name: 'Create organization',
+                    leadingIcon: IconPlus,
+                    onClick: createOrg
+                }
+            ]
+        }
+    };
+
+    $: organizationsBottomSheet = !selectedOrg
+        ? switchOrganization
+        : {
+              top: {
+                  items: [
+                      {
+                          name: 'Organization overview',
+                          href: `/console/organization-${selectedOrg?.$id}`
+                      }
+                  ]
+              },
+              bottom:
+                  organizations.length > 1
+                      ? {
+                            items: [
+                                {
+                                    name: 'Switch organization',
+                                    trailingIcon: IconChevronRight,
+                                    subMenu: switchOrganization
+                                }
+                            ]
+                        }
+                      : {
+                            items: [
+                                {
+                                    name: 'Create organization',
+                                    leadingIcon: IconPlus,
+                                    onClick: createOrg
+                                }
+                            ]
+                        }
+          };
+    let projectsBottomSheet: SheetMenu;
+    $: projectsBottomSheet = {
+        top:
+            selectedOrg?.projects.length > 1
+                ? {
+                      title: 'Switch project',
+                      items: !selectedOrg
+                          ? []
+                          : selectedOrg?.projects
+                                .map((project, index) => {
+                                    if (index < 4) {
+                                        return {
+                                            name: project.name,
+                                            href: `/console/project-${project.region}-${project.$id}/overview`
+                                        };
+                                    } else if (index === 4) {
+                                        return {
+                                            name: 'All projects',
+                                            href: `/console/organization-${selectedOrg?.$id}`
+                                        };
+                                    }
+                                    return null;
+                                })
+                                .filter((project) => project !== null)
+                  }
+                : {
+                      items: [
+                          {
+                              name: 'Create project',
+                              trailingIcon: IconPlus,
+                              href: `/console/organization-${selectedOrg?.$id}?create-project`
+                          }
+                      ]
+                  },
+        bottom:
+            selectedOrg?.projects.length > 1
+                ? {
+                      items: [
+                          {
+                              name: 'Create project',
+                              trailingIcon: IconPlus,
+                              href: `/console/organization-${selectedOrg?.$id}?create-project`
+                          }
+                      ]
+                  }
+                : undefined
+    };
+
+    function onResize() {
+        if ((organisationBottomSheetOpen || projectsBottomSheetOpen) && !$isSmallViewport) {
+            organisationBottomSheetOpen = false;
+            projectsBottomSheetOpen = false;
+        }
+    }
+</script>
+
+<svelte:window on:resize={onResize} />
+<div use:melt={$menubar}>
+    {#if !$isSmallViewport}
+        <span class="breadcrumb-separator">/</span>
+        <button
+            type="button"
+            class="trigger"
+            use:melt={$triggerOrganizations}
+            aria-label="Open organizations tab">
+            <span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
+            <span class="not-mobile"
+                >{#if selectedOrg?.tierName}<Badge
+                        variant="secondary"
+                        content={selectedOrg?.tierName} />{/if}</span>
+            <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
+        </button>
+    {:else}
+        <button
+            type="button"
+            class="trigger"
+            on:click={() => {
+                organisationBottomSheetOpen = true;
+            }}
+            aria-label="Open organizations tab">
+            <span class="orgName" class:noProjects={!selectedProject}
+                >{selectedOrg?.name ?? 'Organization'}</span>
+            <span class="not-mobile"
+                ><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
+            <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
+        </button>
+    {/if}
+
+    <div class="menu" use:melt={$menuOrganizations}>
+        <Card.Base padding="xxxs" shadow={true}>
+            {#if selectedOrg}
+                <div use:melt={$itemOrganizations}>
+                    <ActionMenu.Root>
+                        <ActionMenu.Item.Anchor href={`/console/organization-${selectedOrg?.$id}`}
+                            >Organization overview</ActionMenu.Item.Anchor
+                        ></ActionMenu.Root>
+                </div>
+                {#if organizations.length > 1}
+                    <div class="separator" use:melt={$separatorOrganizations}></div>
+
+                    <div use:melt={$subTriggerOrganizations}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button trailingIcon={IconChevronRight}
+                                >Switch organization</ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </div>
+                    <div class="menu subMenu" use:melt={$subMenuOrganizations}>
+                        <Card.Base padding="xxxs" shadow={true}>
+                            <div use:melt={$radioGroupOrganizations}>
+                                {#each organizations as organization}
+                                    <div use:melt={$itemOrganizations}>
+                                        <ActionMenu.Root>
+                                            <ActionMenu.Item.Anchor
+                                                href={`/console/organization-${organization?.$id}`}
+                                                >{organization.name}</ActionMenu.Item.Anchor>
+                                        </ActionMenu.Root>
+                                    </div>
+                                {/each}
+                                <div class="separator" use:melt={$separatorOrganizations}></div>
+                                <div use:melt={$itemOrganizations}>
+                                    <ActionMenu.Root>
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPlusSm}
+                                            on:click={createOrg}
+                                            >Create organization</ActionMenu.Item.Button
+                                        ></ActionMenu.Root>
+                                </div>
+                            </div>
+                        </Card.Base>
+                    </div>
+                {:else}
+                    <div class="separator" use:melt={$separatorOrganizations}></div>
+                    <div use:melt={$itemOrganizations}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
+                                >Create organization</ActionMenu.Item.Button
+                            ></ActionMenu.Root>
+                    </div>
+                {/if}
+            {:else}
+                {#each organizations as organization}
+                    <div use:melt={$itemOrganizations}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Anchor
+                                href={`/console/organization-${organization?.$id}`}
+                                >{organization.name}</ActionMenu.Item.Anchor
+                            ></ActionMenu.Root>
+                    </div>
+                {/each}
+                <div class="separator" use:melt={$separatorOrganizations}></div>
+                <div use:melt={$itemOrganizations}>
+                    <ActionMenu.Root>
+                        <ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
+                            >Create organization</ActionMenu.Item.Button
+                        ></ActionMenu.Root>
+                </div>
+            {/if}
+        </Card.Base>
+    </div>
+
+    {#if selectedOrg && selectedProject}
+        <span class="breadcrumb-separator">/</span>
+        {#if !$isSmallViewport}
+            <button
+                type="button"
+                class="trigger"
+                use:melt={$triggerProjects}
+                aria-label="Open projects tab">
+                <span class="projectName">{selectedProject.name}</span>
+                <Icon icon={IconChevronDown} size="s" />
+            </button>
+        {:else}
+            <button
+                type="button"
+                class="trigger"
+                on:click={() => (projectsBottomSheetOpen = true)}
+                aria-label="Open projects tab">
+                <span class="projectName">{selectedProject.name}</span>
+                <Icon icon={IconChevronDown} size="s" />
+            </button>
+        {/if}
+
+        <div class="menu" use:melt={$menuProjects}>
+            <Card.Base padding="xxxs" shadow={true}>
+                {#if selectedOrg.projects.length > 1}
+                    {#each selectedOrg.projects as project, index}
+                        {#if index < 4}
+                            <div use:melt={$itemProjects}>
+                                <ActionMenu.Root>
+                                    <ActionMenu.Item.Anchor
+                                        href={`/console/project-${project.region}-${project.$id}`}
+                                        >{project.name}</ActionMenu.Item.Anchor
+                                    ></ActionMenu.Root>
+                            </div>
+                        {:else if index === 4}
+                            <div use:melt={$itemProjects}>
+                                <ActionMenu.Root>
+                                    <ActionMenu.Item.Anchor
+                                        href={`/console/organization-${selectedOrg.$id}`}
+                                        >All projects</ActionMenu.Item.Anchor
+                                    ></ActionMenu.Root>
+                            </div>
+                        {/if}
+                    {/each}
+                    <div class="separator" use:melt={$separatorProjects}></div>
+                {/if}
+                <div use:melt={$itemProjects}>
+                    <ActionMenu.Root>
+                        <ActionMenu.Item.Anchor
+                            leadingIcon={IconPlusSm}
+                            href={`/console/organization-${selectedOrg?.$id}?create-project`}
+                            >Create project</ActionMenu.Item.Anchor
+                        ></ActionMenu.Root>
+                </div>
+            </Card.Base>
+        </div>
+    {/if}
+</div>
+<BottomSheet.Menu bind:isOpen={organisationBottomSheetOpen} menu={organizationsBottomSheet}
+></BottomSheet.Menu>
+<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} menu={projectsBottomSheet}
+></BottomSheet.Menu>
+
+<style lang="scss">
+    .menu {
+        min-width: 244px;
+        z-index: 20;
+    }
+
+    .not-mobile {
+        display: none;
+
+        @media (min-width: 768px) {
+            display: block;
+        }
+    }
+
+    .subMenu {
+        min-width: 244px;
+        margin-inline: -4px;
+        margin-block: -4px;
+    }
+
+    .orgName,
+    .projectName {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 60px;
+        color: var(--fgcolor-neutral-secondary);
+
+        @media (min-width: 390px) {
+            max-width: 95px;
+        }
+
+        @media (min-width: 400px) {
+            max-width: 105px;
+        }
+
+        @media (min-width: 800px) {
+            max-width: 125px;
+        }
+
+        @media (min-width: 1024px) {
+            max-width: 150px;
+        }
+    }
+
+    .noProjects {
+        max-width: 150px;
+    }
+
+    :global(.item[data-highlighted]) {
+        border-radius: var(--border-radius-S, 8px);
+        background: var(--overlay-neutral-hover, rgba(25, 25, 28, 0.03));
+    }
+    .trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-1, 2px) var(--space-2, 4px) var(--space-1, 2px) var(--space-3, 6px);
+        gap: var(--space-2, 4px);
+        margin: 0 var(--space-5, 10px) 0 var(--space-5, 10px);
+
+        transition: color 0.2s ease;
+
+        color: var(--fgcolor-neutral-primary, #2d2d31);
+        border-radius: var(--corner-radius-medium, 8px);
+
+        cursor: pointer;
+        /* Body text/level 2 Regular */
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%; /* 21px */
+    }
+
+    .trigger:hover {
+        background: var(--overlay-neutral-hover, rgba(25, 25, 28, 0.03));
+    }
+
+    :global(.trigger[data-highlighted]) {
+        outline: none;
+        background: var(--bgcolor-neutral-secondary, #f4f4f7);
+    }
+
+    :global(.trigger[data-highlighted]:focus-visible) {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--bgcolor-neutral-secondary, #f4f4f7);
+    }
+
+    .trigger:focus-visible {
+        z-index: 30;
+        box-shadow:
+            var(--shadow-offsetx-0, 0px) var(--shadow-offsety-0, 0px) 0 2px
+                var(--bgcolor-neutral-default, #fafafb),
+            0 0 0 4px var(--border-focus, #818186);
+    }
+    .separator {
+        height: 1px;
+        margin-block: 2px;
+        margin-inline-start: calc(var(--base-4) * -1);
+        width: calc(100% + var(--base-8));
+        background-color: var(--border-neutral);
+    }
+    .breadcrumb-separator {
+        color: var(--fgcolor-neutral-tertiary, #97979b);
+    }
+</style>
diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
index 26a799747..fd94436ab 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -1,8 +1,18 @@
+<script context="module" lang="ts">
+    export type BaseCardProps = Partial<{
+        variant: 'primary' | 'secondary';
+        radius: 's' | 'm' | 'l';
+        padding: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
+        border: 'solid' | 'dashed';
+        shadow?: boolean;
+        disabled?: boolean;
+    }>;
+</script>
+
 <script lang="ts">
-    import { clickOnEnter } from '$lib/helpers/a11y';
+    import { Card, Layout } from '@appwrite.io/pink-svelte';
 
     type BaseProps = {
-        isTile?: boolean;
         isDashed?: boolean;
         danger?: boolean;
         style?: string;
@@ -19,41 +29,43 @@
         isButton?: never;
     };
 
-    type $$Props = BaseProps & (ButtonProps | AnchorProps | BaseProps);
+    type $$Props = BaseProps & (ButtonProps | AnchorProps | BaseProps) & BaseCardProps;
 
-    export let isTile = false;
     export let isDashed = false;
     export let isButton = false;
-    export let danger = false;
     export let href: string = null;
     let classes = '';
     export { classes as class };
     export let style = '';
+    export let padding: $$Props['padding'] = 'm';
+    export let radius: $$Props['radius'] = 'm';
+    export let variant: $$Props['variant'] = 'primary';
 
-    function getElement() {
-        switch (true) {
-            case !!href:
-                return 'a';
-            case isButton:
-                return 'button';
-            default:
-                return 'article';
-        }
-    }
+    $: resolvedClasses = [classes].filter(Boolean).join(' ');
 </script>
 
-<svelte:element
-    this={getElement()}
-    class="card {classes}"
-    class:common-section={!isTile}
-    class:is-border-dashed={isDashed}
-    class:is-danger={danger}
-    class:is-allowed-focus={href}
-    {...$$restProps}
-    {style}
-    on:click
-    on:keyup={clickOnEnter}
-    role={href || isButton ? 'button' : 'presentation'}
-    {href}>
-    <slot />
-</svelte:element>
+{#if href}
+    <Card.Link class={resolvedClasses} {href} {style} {padding} {radius} {variant} on:click>
+        <Layout.Stack gap="xl">
+            <slot />
+        </Layout.Stack>
+    </Card.Link>
+{:else if isButton}
+    <Card.Button class={resolvedClasses} {style} {padding} {radius} {variant} on:click>
+        <Layout.Stack gap="xl">
+            <slot />
+        </Layout.Stack>
+    </Card.Button>
+{:else}
+    <Card.Base
+        class={resolvedClasses}
+        {style}
+        border={isDashed ? 'dashed' : 'solid'}
+        {padding}
+        {radius}
+        {variant}>
+        <Layout.Stack gap="xl">
+            <slot />
+        </Layout.Stack>
+    </Card.Base>
+{/if}
diff --git a/src/lib/components/cardContainer.svelte b/src/lib/components/cardContainer.svelte
index 8021ec796..ac5223a6d 100644
--- a/src/lib/components/cardContainer.svelte
+++ b/src/lib/components/cardContainer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Empty } from '$lib/components';
     import { CARD_LIMIT } from '$lib/constants';
     import { getServiceLimit, type PlanServices } from '$lib/stores/billing';
@@ -7,7 +7,7 @@
     import { isCloud } from '$lib/system';
     import CardPlanLimit from './cardPlanLimit.svelte';
 
-    export let showEmpty = true;
+    export let disableEmpty = true;
     export let offset = 0;
     export let total = 0;
     export let event: string = null;
@@ -16,22 +16,29 @@
 
     $: planLimit = getServiceLimit(serviceId) || Infinity;
 
-    $: limit = preferences.get($page.params.project, $page.route)?.limit ?? CARD_LIMIT;
+    $: limit = preferences.get(page.route)?.limit ?? CARD_LIMIT;
 </script>
 
-<ul
-    class="grid-box common-section u-margin-block-start-32"
-    style={`--grid-gap:1.5rem; --grid-item-size-small-screens: 18rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}
-    data-private>
+<ul class="grid-box" style={`--grid-item-size:${total > 3 ? '22rem' : '25rem'};`} data-private>
     <slot />
 
     {#if total > 3 ? total < limit + offset : total % 2 !== 0}
         {#if isCloud && serviceId && total >= planLimit}
             <CardPlanLimit {service} />
-        {:else if showEmpty}
-            <Empty on:click target={event}>
+        {:else}
+            <Empty on:click target={event} disabled={disableEmpty}>
                 <slot name="empty" />
             </Empty>
         {/if}
     {/if}
 </ul>
+
+<style lang="scss">
+    .grid-box {
+        display: grid;
+        grid-auto-rows: 1fr;
+        gap: var(--gap-xl);
+        flex-shrink: 0;
+        grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-size), 1fr));
+    }
+</style>
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index 61665591c..0d5e4bfb4 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -1,30 +1,33 @@
 <script lang="ts">
-    import { Card } from './';
+    import { Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
 
-    export let danger = false;
-    export let hideOverflow = false;
     export let hideFooter = false;
+    export let gap: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'l';
 </script>
 
-<Card {danger} class={danger ? 'u-padding-inline-start-32' : ''}>
-    <div class="common-section grid-1-2" class:hideOverflow>
-        <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
-            <slot />
-        </div>
-        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
-            <slot name="aside" />
-        </div>
-    </div>
-    {#if $$slots.actions && !hideFooter}
-        <div class="common-section card-separator u-flex u-main-end">
-            <slot name="actions" />
-        </div>
-    {/if}
-</Card>
-
-<style lang="scss">
-    .hideOverflow > * {
-        width: 100%;
-        overflow: hidden;
-    }
-</style>
+<Card.Base>
+    <Layout.Stack gap="xl" justifyContent="space-around">
+        <Layout.GridFraction gap="xxxl" rowGap="xl" start={1} end={2}>
+            <Layout.Stack gap="xxs">
+                <Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
+                {#if $$slots.default}
+                    <Typography.Text>
+                        <slot />
+                    </Typography.Text>
+                {/if}
+            </Layout.Stack>
+            <Layout.Stack {gap}>
+                <slot name="aside" />
+            </Layout.Stack>
+        </Layout.GridFraction>
+        {#if $$slots.actions && !hideFooter}
+            <span
+                style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
+                <Divider />
+            </span>
+            <Layout.Stack direction="row-reverse">
+                <slot name="actions" />
+            </Layout.Stack>
+        {/if}
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/lib/components/cardPlanLimit.svelte b/src/lib/components/cardPlanLimit.svelte
index 51fd5242e..3baae619d 100644
--- a/src/lib/components/cardPlanLimit.svelte
+++ b/src/lib/components/cardPlanLimit.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { upgradeURL } from '$lib/stores/billing';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export let service: string;
 </script>
@@ -8,6 +9,11 @@
 <article class="card u-grid u-cross-center u-width-full-line">
     <div class="u-flex u-flex-vertical u-gap-24 u-main-center u-cross-center">
         <p class="text u-text-center">Upgrade your plan to add more {service}</p>
-        <Button secondary href={$upgradeURL}>Change plan</Button>
+        <Button
+            secondary
+            href={$upgradeURL}
+            on:click={() => {
+                trackEvent(Click.OrganizationClickUpgrade, { source: 'card_plan_limit' });
+            }}>Change plan</Button>
     </div>
 </article>
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 5b818a7b8..f08dee3da 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -51,7 +51,7 @@
         {#if label}
             <Pill>
                 {#if labelIcon}
-                    <span class={`icon-${labelIcon}`} aria-hidden="true" />
+                    <span class={`icon-${labelIcon}`} aria-hidden="true"></span>
                 {/if}
                 {label}
             </Pill>
@@ -59,7 +59,7 @@
         {#if withCopy}
             <Copy value={code}>
                 <button class="button is-small is-text is-only-icon" aria-label="copy code">
-                    <span class="icon-duplicate" aria-hidden="true" />
+                    <span class="icon-duplicate" aria-hidden="true"></span>
                 </button>
             </Copy>
         {/if}
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index f008ba598..9a02ed38f 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -24,6 +24,7 @@
             <!-- svelte-ignore a11y-no-redundant-roles -->
             <summary
                 class={`collapsible-button u-position-relative u-gap-${gap}`}
+                style="padding: 0"
                 on:keyup={clickOnEnter}
                 on:click
                 role="button"
@@ -43,7 +44,7 @@
                         <span
                             class="icon-cheveron-down u-font-size-20"
                             class:u-color-text-disabled={disabled}
-                            aria-hidden="true" />
+                            aria-hidden="true"></span>
                     </div>
                 </slot>
             </summary>
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
new file mode 100644
index 000000000..37c1640ad
--- /dev/null
+++ b/src/lib/components/columnSelector.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import type { Writable } from 'svelte/store';
+    import { preferences } from '$lib/stores/preferences';
+    import { onMount, type Snippet } from 'svelte';
+    import type { Column } from '$lib/helpers/types';
+    import { ActionMenu, Layout, Popover, Selector } from '@appwrite.io/pink-svelte';
+
+    let {
+        columns,
+        isCustomCollection = false,
+        allowNoColumns = false,
+        children
+    }: {
+        columns: Writable<Column[]>;
+        isCustomCollection?: boolean;
+        allowNoColumns?: boolean;
+        children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>;
+    } = $props();
+
+    onMount(async () => {
+        if (isCustomCollection) {
+            const prefs = preferences.getCustomCollectionColumns(page.params.collection);
+            columns.set(
+                $columns.map((column) => {
+                    column.hide = prefs?.includes(column.id) ?? false;
+                    return column;
+                })
+            );
+        } else {
+            const prefs = preferences.get(page.route);
+
+            // Override the shown columns only if a preference was set
+            if (prefs?.columns) {
+                columns.set(
+                    $columns.map((column) => {
+                        column.hide = prefs.columns?.includes(column.id) ?? false;
+                        return column;
+                    })
+                );
+            }
+        }
+
+        columns.subscribe((ctx) => {
+            const columns = ctx.filter((n) => n.hide === true).map((n) => n.id);
+
+            if (isCustomCollection) {
+                preferences.setCustomCollectionColumns(columns);
+            } else {
+                preferences.setColumns(columns);
+            }
+        });
+    });
+
+    let selectedColumnsNumber = $derived(
+        $columns.reduce((acc, column) => {
+            if (column.hide === true) return acc;
+
+            return ++acc;
+        }, 0)
+    );
+</script>
+
+{#if $columns?.length}
+    <Popover let:toggle placement="bottom-end" padding="none">
+        {@render children(toggle, selectedColumnsNumber)}
+        <svelte:fragment slot="tooltip">
+            <ActionMenu.Root>
+                {#each $columns as column}
+                    {#if !column?.exclude}
+                        <ActionMenu.Item.Button
+                            on:click={() => (column.hide = !column.hide)}
+                            disabled={allowNoColumns
+                                ? false
+                                : selectedColumnsNumber <= 1 && column.hide !== true}>
+                            <Layout.Stack direction="row" gap="s">
+                                <Selector.Checkbox
+                                    checked={!column.hide}
+                                    size="s"
+                                    on:click={() => (column.hide = !column.hide)} />
+                                {column.title}
+                            </Layout.Stack>
+                        </ActionMenu.Item.Button>
+                    {/if}
+                {/each}
+            </ActionMenu.Root>
+        </svelte:fragment>
+    </Popover>
+{/if}
diff --git a/src/lib/components/confirm.svelte b/src/lib/components/confirm.svelte
new file mode 100644
index 000000000..303dfdb36
--- /dev/null
+++ b/src/lib/components/confirm.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { Button, Form, InputCheckbox } from '$lib/elements/forms';
+    import { Alert, Dialog, Layout } from '@appwrite.io/pink-svelte';
+
+    export let open: boolean;
+    export let title: string;
+    export let error: string = null;
+    export let action: string = 'Delete';
+    export let canDelete: boolean = true;
+    export let disabled: boolean = false;
+    export let confirmDeletion: boolean = false;
+    export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
+        return;
+    };
+
+    let confirm = false;
+    let checkboxId = `delete_${title.replaceAll(' ', '_').toLowerCase()}`;
+
+    // reset checkbox status
+    $: if (open && confirmDeletion) {
+        confirm = false;
+    }
+</script>
+
+<Form isModal {onSubmit}>
+    <Dialog {title} bind:open>
+        <Layout.Stack gap="xl">
+            {#if error}
+                <Alert.Inline
+                    dismissible
+                    status="error"
+                    on:dismiss={() => {
+                        error = null;
+                    }}>
+                    {error}
+                </Alert.Inline>
+            {/if}
+
+            <Layout.Stack gap="l">
+                <slot />
+
+                {#if confirmDeletion}
+                    <InputCheckbox
+                        size="s"
+                        required
+                        id={checkboxId}
+                        bind:checked={confirm}
+                        label="I understand and confirm" />
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
+
+        <svelte:fragment slot="footer">
+            <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+                <slot name="footer">
+                    <Button text on:click={() => (open = false)}>Cancel</Button>
+                    {#if canDelete}
+                        <Button
+                            danger
+                            submit
+                            disabled={disabled || (confirmDeletion ? !confirm : false)}
+                            >{action}</Button>
+                    {/if}
+                </slot>
+            </Layout.Stack>
+        </svelte:fragment>
+    </Dialog>
+</Form>
diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 630cd4efb..322a48ca1 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -122,7 +122,7 @@
 </Modal>
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
     .card {
         position: fixed;
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 9fe81891f..0579e6eb0 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { copy } from '$lib/helpers/copy';
     import { addNotification } from '$lib/stores/notifications';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let value: string;
     export let event: string = null;
     export let eventContext = 'click_id_tag';
+    export let tooltipDisabled = false;
     export let copyText: string = 'Click to copy';
-    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
 
     let content = copyText;
 
@@ -31,20 +31,20 @@
             });
         }
     }
+    //TODO: remove this component
 </script>
 
-<span
-    data-private
-    role="button"
-    tabindex="0"
-    style:cursor="pointer"
-    on:click|preventDefault={handleClick}
-    on:keyup={clickOnEnter}
-    on:mouseenter={() => setTimeout(() => (content = copyText))}
-    use:tooltip={{
-        content,
-        hideOnClick: false,
-        appendTo
-    }}>
-    <slot />
-</span>
+<Tooltip disabled={tooltipDisabled}>
+    <span
+        data-private
+        style:display="inline-flex"
+        role="button"
+        tabindex="0"
+        style:cursor="pointer"
+        on:click|preventDefault|stopPropagation={handleClick}
+        on:keyup={clickOnEnter}
+        on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}>
+        <slot />
+    </span>
+    <p slot="tooltip">{content}</p>
+</Tooltip>
diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index 3ff70378d..51d80c74b 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -1,58 +1,17 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
-    import { Label } from '$lib/elements/forms';
-    import type { SvelteComponent } from 'svelte';
-    import { Copy, Drop } from '.';
+    import { Copy } from '.';
+    import { Input, Layout } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
 
     export let value: string;
     export let label: string = null;
     export let optionalText: string | undefined = undefined;
-    export let showLabel = false;
-    export let labelTooltip: string = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
-
-    let show = false;
 </script>
 
-<div>
-    {#if label}
-        <Label tooltip={labelTooltip} {optionalText} hide={!showLabel} for={label}>
-            {label}{#if popover}
-                <Drop isPopover bind:show display="inline-block">
-                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                    &nbsp;<button
-                        type="button"
-                        on:click={() => (show = !show)}
-                        class="tooltip"
-                        aria-label="input tooltip">
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style:font-size="var(--icon-size-small)" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <div
-                            class="dropped card u-max-width-250"
-                            style:--p-card-padding=".75rem"
-                            style:--card-border-radius="var(--border-radius-small)"
-                            style:box-shadow="var(--shadow-large)">
-                            <svelte:component this={popover} {...popoverProps} />
-                        </div>
-                    </svelte:fragment>
-                </Drop>
-            {/if}
-        </Label>
-    {/if}
-    <div class="input-text-wrapper" style="--amount-of-buttons:1">
-        <input id={label} type="text" {value} readonly />
-        <div class="options-list">
-            {#key appendTo}
-                <Copy {value} {appendTo}>
-                    <span class="icon-duplicate" aria-hidden="true" />
-                </Copy>
-            {/key}
-        </div>
-    </div>
-</div>
+<Input.Text readonly {value} {label} helper={optionalText} required>
+    <Copy {value} slot="end">
+        <Layout.Stack>
+            <Input.Action icon={IconDuplicate} />
+        </Layout.Stack>
+    </Copy>
+</Input.Text>
diff --git a/src/lib/components/creditCardInfo.svelte b/src/lib/components/creditCardInfo.svelte
index f18743134..849146456 100644
--- a/src/lib/components/creditCardInfo.svelte
+++ b/src/lib/components/creditCardInfo.svelte
@@ -1,41 +1,41 @@
 <script lang="ts">
     import type { PaymentMethodData } from '$lib/sdk/billing';
-    import { Alert } from '.';
+    import { Badge, Layout, Link, Popover, Table } from '@appwrite.io/pink-svelte';
     import CreditCardBrandImage from './creditCardBrandImage.svelte';
+    import type { TableRootProp } from '$lib/helpers/types';
 
-    export let isBox = false;
+    export let root: TableRootProp;
     export let paymentMethod: PaymentMethodData;
+    export let isBackup: boolean = false;
 </script>
 
-<div class:box={isBox}>
-    <div class="u-flex u-main-space-between u-cross-start" style="padding-block: 0.5rem;">
-        <div class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2">
-            <span class="u-flex u-cross-center u-gap-8">
-                <p class="text u-bold">
-                    <span class="u-capitalize">{paymentMethod?.brand}</span> ending in {paymentMethod?.last4}
-                </p>
-                <CreditCardBrandImage brand={paymentMethod?.brand} />
-            </span>
-            <p class="text">
-                Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}
-            </p>
-            {#if paymentMethod?.name}
-                <p class="text">
-                    {paymentMethod.name}
-                </p>
-            {/if}
-        </div>
-
-        <slot />
-    </div>
-    {#if paymentMethod?.expired}
-        <Alert type="error" class="u-margin-block-start-16 u-width-full-line">
-            <svelte:fragment slot="title">This payment method has expired</svelte:fragment>
-        </Alert>
+<Table.Cell column="cc" {root}>
+    <Layout.Stack direction="row" alignItems="center" gap="s">
+        <CreditCardBrandImage brand={paymentMethod?.brand} />
+        <span>ending in {paymentMethod?.last4}</span>
+        {#if isBackup}
+            <Badge variant="secondary" content="Backup" />
+        {/if}
+    </Layout.Stack>
+</Table.Cell>
+<Table.Cell column="name" {root}>{paymentMethod?.name}</Table.Cell>
+<Table.Cell column="expiry" {root}
+    >{paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}</Table.Cell>
+<Table.Cell column="status" {root}>
+    {#if paymentMethod?.lastError || paymentMethod?.expired}
+        <Popover let:toggle>
+            <Layout.Stack gap="xs" direction="row">
+                <Badge variant="secondary" type="error" content="Failed" />
+                <Link.Button on:click={toggle}>Details</Link.Button>
+            </Layout.Stack>
+            <svelte:fragment slot="tooltip">
+                {#if paymentMethod?.expired}
+                    This payment method has expired
+                {/if}
+                {#if paymentMethod?.lastError}
+                    {paymentMethod.lastError}
+                {/if}
+            </svelte:fragment>
+        </Popover>
     {/if}
-    {#if paymentMethod?.lastError}
-        <Alert type="error" class="u-margin-block-start-16 u-width-full-line">
-            {paymentMethod.lastError}
-        </Alert>
-    {/if}
-</div>
+</Table.Cell>
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
new file mode 100644
index 000000000..8c0e48b8a
--- /dev/null
+++ b/src/lib/components/csvImportBox.svelte
@@ -0,0 +1,242 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { goto, invalidate } from '$app/navigation';
+    import { getProjectId } from '$lib/helpers/project';
+    import { writable, type Writable } from 'svelte/store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { type Models, type Payload, Query } from '@appwrite.io/console';
+
+    type ImportItem = {
+        status: string;
+        collection?: string;
+    };
+
+    type ImportItemsMap = Map<string, ImportItem>;
+
+    /**
+     * Keeps a track of the active and ongoing csv migrations.
+     *
+     * The structure is as follows -
+     * `{ migrationId: { status: status, collection: collection } }`
+     */
+    const importItems: Writable<ImportItemsMap> = writable(new Map());
+
+    async function showCompletionNotification(
+        databaseId: string,
+        collectionId: string,
+        importData: Payload
+    ) {
+        await invalidate(Dependencies.DOCUMENTS);
+        const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}`;
+
+        // extract clean message from nested backend error.
+        const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
+        const errorMessage = match?.[1];
+
+        const type = importData.status === 'completed' ? 'success' : 'error';
+        const message =
+            importData.status === 'completed'
+                ? 'CSV import finished successfully.'
+                : `${errorMessage}`;
+
+        addNotification({
+            type,
+            message,
+            isHtml: true,
+            buttons:
+                collectionId === page.params.collection || type === 'error'
+                    ? undefined
+                    : [
+                          {
+                              name: 'View documents',
+                              method: () => goto(url)
+                          }
+                      ]
+        });
+    }
+
+    async function updateOrAddItem(importData: Payload | Models.Migration) {
+        if (importData.source.toLowerCase() !== 'csv') return;
+
+        const status = importData.status;
+        const resourceId = importData.resourceId ?? '';
+        const [databaseId, collectionId] = resourceId.split(':') ?? [];
+
+        const current = $importItems.get(importData.$id);
+        let collectionName = current?.collection ?? null;
+
+        if (!collectionName && collectionId) {
+            try {
+                const collection = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .databases.getCollection(databaseId, collectionId);
+                collectionName = collection.name;
+            } catch {
+                collectionName = null;
+            }
+        }
+
+        importItems.update((items) => {
+            const existing = items.get(importData.$id);
+
+            const isDone = (s: string) => s === 'completed' || s === 'failed';
+            const isInProgress = (s: string) => ['pending', 'processing', 'uploading'].includes(s);
+
+            const shouldSkip =
+                (existing && isDone(existing.status) && isInProgress(status)) ||
+                existing?.status === status;
+
+            if (shouldSkip) return items;
+
+            const next = new Map(items);
+            next.set(importData.$id, { status, collection: collectionName ?? undefined });
+            return next;
+        });
+
+        if (status === 'completed' || status === 'failed') {
+            await showCompletionNotification(databaseId, collectionId, importData);
+        }
+    }
+
+    function clear() {
+        importItems.update((items) => {
+            items.clear();
+            return items;
+        });
+    }
+
+    function graphSize(status: string): number {
+        switch (status) {
+            case 'pending':
+                return 10;
+            case 'processing':
+                return 30;
+            case 'uploading':
+                return 60;
+            case 'completed':
+            case 'failed':
+                return 100;
+            default:
+                return 30;
+        }
+    }
+
+    function text(status: string, collectionName = '') {
+        const name = collectionName ? `<b>${collectionName}</b>` : '';
+        switch (status) {
+            case 'completed':
+            case 'failed':
+                return `Import to ${name} ${status}`;
+            case 'processing':
+                return `Importing CSV file${name ? ` to ${name}` : ''}`;
+            default:
+                return 'Preparing CSV for import...';
+        }
+    }
+
+    onMount(() => {
+        sdk.forProject(page.params.region, page.params.project)
+            .migrations.list([
+                Query.equal('source', 'CSV'),
+                Query.equal('status', ['pending', 'processing'])
+            ])
+            .then((migrations) => {
+                migrations.migrations.forEach(updateOrAddItem);
+            });
+
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+            if (response.events.includes('migrations.*')) {
+                updateOrAddItem(response.payload as Payload);
+            }
+        });
+    });
+
+    $: isOpen = true;
+    $: showCsvImportBox = $importItems.size > 0;
+</script>
+
+{#if showCsvImportBox}
+    <Layout.Stack direction="column" gap="l" alignItems="flex-end">
+        <section class="upload-box">
+            <header class="upload-box-header">
+                <h4 class="upload-box-title">
+                    <Typography.Text variant="m-500">
+                        Importing documents ({$importItems.size})
+                    </Typography.Text>
+                </h4>
+                <button
+                    class="upload-box-button"
+                    class:is-open={isOpen}
+                    aria-label="toggle upload box"
+                    on:click={() => (isOpen = !isOpen)}>
+                    <span class="icon-cheveron-up" aria-hidden="true"></span>
+                </button>
+                <button
+                    class="upload-box-button"
+                    aria-label="close backup restore box"
+                    on:click={clear}>
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </header>
+
+            {#each [...$importItems.entries()] as [key, value] (key)}
+                <div class="upload-box-content" class:is-open={isOpen}>
+                    <ul class="upload-box-list">
+                        <li class="upload-box-item">
+                            <section class="progress-bar u-width-full-line">
+                                <div
+                                    class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
+                                    <Typography.Text>
+                                        {@html text(value.status, value.collection)}
+                                    </Typography.Text>
+                                </div>
+                                <div
+                                    class="progress-bar-container"
+                                    class:is-danger={value.status === 'failed'}
+                                    style="--graph-size:{graphSize(value.status)}%">
+                                </div>
+                            </section>
+                        </li>
+                    </ul>
+                </div>
+            {/each}
+        </section>
+    </Layout.Stack>
+{/if}
+
+<style lang="scss">
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-content {
+        min-width: 400px;
+        max-width: 100vw;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .progress-bar-container {
+        height: 4px;
+
+        &::before {
+            height: 4px;
+            background-color: var(--bgcolor-neutral-invert);
+        }
+
+        &.is-danger::before {
+            height: 4px;
+            background-color: var(--bgcolor-error);
+        }
+    }
+</style>
diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 173e984a7..77c32899f 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { InnerModal } from '$lib/components';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { InputId } from '$lib/elements/forms';
     import { InputProjectId } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Divider, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     export let show = false;
     export let name: string;
     export let id: string;
     export let autofocus = true;
-    export let fullWidth = false;
     export let isProject = false;
     $: if (!show) {
         id = null;
@@ -18,22 +19,36 @@
     }
 
     $: if (show) {
-        trackEvent('click_show_custom_id');
+        trackEvent(Click.ShowCustomIdClick);
     }
 </script>
 
-<InnerModal bind:show {fullWidth}>
-    <svelte:fragment slot="title">{name} ID</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Enter a custom {name} ID. Leave blank for a randomly generated one.
-    </svelte:fragment>
-    <svelte:fragment slot="content">
-        <div class="form">
+{#if show}
+    <Card.Base
+        variant="secondary"
+        padding="s"
+        --input-background-color="var(--bgcolor-neutral-primary)">
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="s">
+                <Layout.Stack direction="row" justifyContent="space-between" alignContent="center">
+                    <Typography.Text variant="m-600">{name} ID</Typography.Text>
+                    <Button extraCompact on:click={() => (show = false)}>
+                        <Icon icon={IconX} size="s" />
+                    </Button>
+                </Layout.Stack>
+                <Typography.Text>
+                    Enter a custom {name} ID. Leave blank for a randomly generated one.
+                </Typography.Text>
+            </Layout.Stack>
+            <span
+                style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
+                <Divider />
+            </span>
             {#if isProject}
                 <InputProjectId bind:value={id} {autofocus} />
             {:else}
-                <InputId bind:value={id} {autofocus} />
+                <InputId required bind:value={id} {autofocus} />
             {/if}
-        </div>
-    </svelte:fragment>
-</InnerModal>
+        </Layout.Stack>
+    </Card.Base>
+{/if}
diff --git a/src/lib/components/domains/cnameTable.svelte b/src/lib/components/domains/cnameTable.svelte
new file mode 100644
index 000000000..9880f5ebf
--- /dev/null
+++ b/src/lib/components/domains/cnameTable.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { Link } from '$lib/elements';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Badge,
+        Layout,
+        Typography,
+        Table,
+        Icon,
+        InteractiveText
+    } from '@appwrite.io/pink-svelte';
+
+    export let domain: string;
+    export let verified = false;
+
+    let subdomain = domain.split('.').slice(0, -2).join('.');
+</script>
+
+<Layout.Stack gap="xl">
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+                {domain}
+            </Typography.Text>
+            {#if verified}
+                <Badge variant="secondary" type="success" content="Verified" />
+            {:else if verified === false}
+                <Badge variant="secondary" type="error" content="Verification failed" />
+            {:else}
+                <Badge
+                    variant="secondary"
+                    type="warning"
+                    size="xs"
+                    content="Pending verification" />
+            {/if}
+        </Layout.Stack>
+        <Typography.Text variant="m-400">
+            Add the following record on your DNS provider. Note that DNS changes may take time to
+            propagate fully.
+        </Typography.Text>
+    </Layout.Stack>
+
+    <Table.Root columns={3} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Type</Table.Header.Cell>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Value</Table.Header.Cell>
+        </svelte:fragment>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>CNAME</Table.Cell>
+            <Table.Cell {root}>{subdomain}</Table.Cell>
+            <Table.Cell {root}>
+                <InteractiveText
+                    variant="copy"
+                    isVisible
+                    text={$consoleVariables._APP_DOMAIN_TARGET_CNAME} />
+            </Table.Cell>
+        </Table.Row.Base>
+    </Table.Root>
+    <Layout.Stack gap="s" direction="row" alignItems="center">
+        <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+            A list of all domain providers and their DNS setting is available <Link
+                variant="muted"
+                external
+                href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+            >.
+        </Typography.Text>
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/lib/components/domains/nameserverTable.svelte b/src/lib/components/domains/nameserverTable.svelte
new file mode 100644
index 000000000..da5375bce
--- /dev/null
+++ b/src/lib/components/domains/nameserverTable.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { consoleVariables } from '$routes/(console)/store';
+
+    import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
+
+    export let domain: string;
+    export let verified = false;
+
+    const nameserverList = $consoleVariables?._APP_DOMAINS_NAMESERVERS
+        ? $consoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',')
+        : ['ns1.appwrite.io', 'ns2.appwrite.io'];
+</script>
+
+<Layout.Stack gap="s">
+    <Layout.Stack gap="s" direction="row" alignItems="center">
+        <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+            {domain}
+        </Typography.Text>
+        {#if verified}
+            <Badge variant="secondary" type="success" content="Verified" />
+        {:else if verified === false}
+            <Badge variant="secondary" type="warning" size="xs" content="Pending verification" />
+        {/if}
+    </Layout.Stack>
+    <Typography.Text variant="m-400">
+        Add the following nameservers on your DNS provider. Note that DNS changes may take time to
+        propagate fully.
+    </Typography.Text>
+</Layout.Stack>
+
+<Table.Root columns={2} let:root>
+    <svelte:fragment slot="header" let:root>
+        <Table.Header.Cell {root}>Type</Table.Header.Cell>
+        <Table.Header.Cell {root}>Value</Table.Header.Cell>
+    </svelte:fragment>
+    {#each nameserverList as nameserver}
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>NS</Table.Cell>
+            <Table.Cell {root}>
+                <InteractiveText variant="copy" isVisible text={nameserver} />
+            </Table.Cell>
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
diff --git a/src/lib/components/domains/recordTable.svelte b/src/lib/components/domains/recordTable.svelte
new file mode 100644
index 000000000..385a89cfa
--- /dev/null
+++ b/src/lib/components/domains/recordTable.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { Link } from '$lib/elements';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Badge,
+        Layout,
+        Typography,
+        Table,
+        Icon,
+        InteractiveText,
+        Alert
+    } from '@appwrite.io/pink-svelte';
+
+    export let domain: string;
+    export let verified = false;
+    export let variant: 'cname' | 'a' | 'aaaa';
+
+    let subdomain = domain?.split('.')?.slice(0, -2)?.join('.');
+
+    function setTarget() {
+        switch (variant) {
+            case 'cname':
+                return $consoleVariables._APP_DOMAIN_TARGET_CNAME;
+            case 'a':
+                return $consoleVariables._APP_DOMAIN_TARGET_A;
+            case 'aaaa':
+                return $consoleVariables._APP_DOMAIN_TARGET_AAAA;
+        }
+    }
+</script>
+
+<Layout.Stack gap="xl">
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+                {domain}
+            </Typography.Text>
+            {#if verified}
+                <Badge variant="secondary" type="success" content="Verified" />
+            {:else if verified === false}
+                <Badge variant="secondary" type="error" content="Verification failed" />
+            {:else}
+                <Badge
+                    variant="secondary"
+                    type="warning"
+                    size="xs"
+                    content="Pending verification" />
+            {/if}
+        </Layout.Stack>
+        <Typography.Text variant="m-400">
+            Add the following record on your DNS provider. Note that DNS changes may take time to
+            propagate fully.
+        </Typography.Text>
+    </Layout.Stack>
+
+    <Table.Root columns={3} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Type</Table.Header.Cell>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Value</Table.Header.Cell>
+        </svelte:fragment>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>{variant.toUpperCase()}</Table.Cell>
+            <Table.Cell {root}>{subdomain || '@'}</Table.Cell>
+            <Table.Cell {root}>
+                <InteractiveText variant="copy" isVisible text={setTarget()} />
+            </Table.Cell>
+        </Table.Row.Base>
+    </Table.Root>
+    <Layout.Stack gap="s" direction="row" alignItems="center">
+        <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+        {#if variant === 'cname'}
+            <Alert.Inline>
+                If your domain uses CAA records, ensure certainly.com is authorized — otherwise, SSL
+                setup may fail. A list of all domain providers and their DNS setting is available <Link
+                    variant="muted"
+                    external
+                    href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+                >.
+            </Alert.Inline>
+        {:else}
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                A list of all domain providers and their DNS setting is available <Link
+                    variant="muted"
+                    external
+                    href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+                >.
+            </Typography.Text>
+        {/if}
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index db5eac60e..1103d38c0 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -125,7 +125,8 @@
         class="drop-arrow"
         class:is-popover={isPopover}
         class:u-hide={!show || (show && noArrow)}
-        bind:this={arrow} />
+        bind:this={arrow}>
+    </div>
     {#if show}
         <slot name="list" />
     {/if}
diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index 13844d86b..241b79ad6 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -28,10 +28,10 @@
         {disabled}>
         <span class="text"><slot /></span>
         {#if icon}
-            <span class={`icon-${icon}`} aria-hidden="true" />
+            <span class={`icon-${icon}`} aria-hidden="true"></span>
         {/if}
         {#if loading}
-            <span class="loader is-small u-line-height-1-5" aria-hidden="true" />
+            <span class="loader is-small u-line-height-1-5" aria-hidden="true"></span>
         {/if}
     </button>
 </li>
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index a2ef47b99..00543fd19 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -30,7 +30,7 @@
         rel={external ? 'noopener noreferrer' : ''}>
         <span class="text"><slot /></span>
         {#if icon}
-            <span class={`icon-${icon}`} style={iconStyle} aria-hidden="true" />
+            <span class={`icon-${icon}`} style={iconStyle} aria-hidden="true"></span>
         {/if}
     </a>
 </li>
diff --git a/src/lib/components/dualTimeView.svelte b/src/lib/components/dualTimeView.svelte
new file mode 100644
index 000000000..2c3271b02
--- /dev/null
+++ b/src/lib/components/dualTimeView.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { type ComponentProps } from 'svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import {
+        timeFromNow,
+        toLocaleDateTime,
+        toLocalDateTimeISO,
+        toISOString
+    } from '$lib/helpers/date';
+    import { Badge, InteractiveText, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
+    import { menuOpen } from '$lib/components/menu/store';
+
+    export let time: string = '';
+    export let placement: ComponentProps<Popover>['placement'] = 'bottom';
+
+    function timeDifference(dateString: string): string {
+        const SECONDS_IN_MINUTE = 60;
+        const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+        const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+        const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
+
+        const now = new Date();
+        const pastDate = new Date(dateString);
+
+        if (isNaN(pastDate.getTime())) return 'Invalid time';
+
+        const diffInSeconds = Math.floor((now.getTime() - pastDate.getTime()) / 1000);
+
+        const timeParts = [
+            { label: 'month', value: Math.floor(diffInSeconds / SECONDS_IN_MONTH) },
+            { label: 'day', value: Math.floor(diffInSeconds / SECONDS_IN_DAY) % 30 },
+            { label: 'hour', value: Math.floor(diffInSeconds / SECONDS_IN_HOUR) % 24 },
+            { label: 'minute', value: Math.floor(diffInSeconds / SECONDS_IN_MINUTE) % 60 },
+            { label: 'second', value: diffInSeconds % 60 }
+        ];
+
+        const month = timeParts[0].value;
+        const day = timeParts[1].value;
+        const hour = timeParts[2].value;
+        const second = timeParts[4].value;
+
+        let outputParts: { label: string; value: number }[];
+
+        if (month === 0 && day === 0 && hour === 0 && second > 0) {
+            // Seconds exist but no months, days, hours — show minutes + seconds
+            outputParts = timeParts.slice(3).filter((unit) => unit.value > 0);
+        } else {
+            // Normal logic — top 3 non-zero units, no seconds.
+            outputParts = timeParts
+                .filter((unit) => unit.label !== 'second' && unit.value > 0)
+                .slice(0, 3);
+        }
+
+        const formattedTime = outputParts
+            .map((unit) => `${unit.value} ${unit.label}${unit.value > 1 ? 's' : ''}`)
+            .join(', ');
+
+        return formattedTime ? `${formattedTime} ago` : 'Just now';
+    }
+
+    let isMouseOverTooltip = false;
+    function hidePopover(hideTooltip: () => void, timeout = true) {
+        if (!timeout) {
+            isMouseOverTooltip = false;
+            return hideTooltip();
+        }
+
+        setTimeout(() => {
+            if (!isMouseOverTooltip) {
+                hideTooltip();
+            }
+        }, 150);
+    }
+
+    $: timeToString = time ? timeDifference(time) : 'Invalid time';
+</script>
+
+<Popover let:show let:hide {placement} portal>
+    <button
+        on:mouseenter={() => {
+            if (!$menuOpen) {
+                setTimeout(show, 150);
+            }
+        }}
+        on:mouseleave={() => hidePopover(hide)}>
+        <slot>{capitalize(timeFromNow(time))}</slot>
+    </button>
+
+    <div
+        let:hide
+        slot="tooltip"
+        role="tooltip"
+        style:padding="1rem"
+        style:margin="-1rem"
+        on:mouseenter={() => (isMouseOverTooltip = true)}
+        on:mouseleave={() => hidePopover(hide, false)}>
+        <Layout.Stack gap="s" alignContent="flex-start">
+            <!-- `Raw time` as per design -->
+            <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
+                {timeToString}
+            </Typography.Caption>
+
+            <!-- `Absolute time` as per design -->
+            <Layout.Stack gap="xxs">
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    alignContent="center"
+                    justifyContent="space-between">
+                    <InteractiveText
+                        isVisible
+                        variant="copy"
+                        text={toLocaleDateTime(time, false, 'UTC')}
+                        value={toISOString(time)} />
+
+                    <Badge variant="secondary" content="UTC" size="xs" />
+                </Layout.Stack>
+
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    alignContent="center"
+                    justifyContent="space-between">
+                    <InteractiveText
+                        isVisible
+                        variant="copy"
+                        text={toLocaleDateTime(time)}
+                        value={toLocalDateTimeISO(time)} />
+                    <Badge variant="secondary" content="Local" size="xs" />
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+    </div>
+</Popover>
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 11bede718..aebffa965 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -1,28 +1,16 @@
 <script lang="ts">
-    import { app } from '$lib/stores/app';
-    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 '.';
     import { trackEvent } from '$lib/actions/analytics';
-    import { createEventDispatcher } from 'svelte';
+    import { Empty, Card, Layout, Avatar, Icon, Typography } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let single = false;
-    export let isCard = true;
-    export let noMedia = false;
     export let target: string = null;
     export let href: string = null;
-    export let marginTop = false;
     export let allowCreate = true;
-
-    const dispatch = createEventDispatcher();
-
-    function onClick(event) {
-        if (!allowCreate) {
-            return;
-        }
-        dispatch('click', event);
-    }
+    export let description = 'Need a hand? Learn more in our documentation.';
+    export let disabled = false;
+    export let src: string = null;
 
     function track() {
         if (!allowCreate) {
@@ -37,67 +25,33 @@
 </script>
 
 {#if single}
-    <article class:card={isCard} class="u-grid u-cross-center u-width-full-line common-section">
-        <div
-            class="u-flex u-flex-vertical u-cross-center u-gap-24 u-width-full-line u-overflow-hidden u-padding-block-8">
-            {#if !noMedia}
-                <button
-                    type="button"
+    <Card.Base padding="none">
+        <Empty title={`Create your first ${target}`} {description} {src}>
+            <slot name="actions" slot="actions">
+                <Button
+                    external
+                    {href}
+                    text
+                    event="empty_documentation"
+                    size="s"
+                    ariaLabel="create {target}">Documentation</Button>
+                <Button
+                    secondary
+                    on:mousedown
+                    on:click
                     on:click={track}
-                    on:click={onClick}
-                    aria-label="create {target}">
-                    <slot name="empty-media">
-                        {#if $app.themeInUse === 'dark'}
-                            <img src={EmptyDark} alt="create" aria-hidden="true" height="242" />
-                        {:else}
-                            <img src={EmptyLight} alt="create" aria-hidden="true" height="242" />
-                        {/if}
-                    </slot>
-                </button>
-            {/if}
-            <slot>
-                <div class="u-text-center">
-                    <Heading size="7" tag="h2" trimmed={false}>
-                        Create a {target} to get started.
-                    </Heading>
-                    <p class="body-text-2 u-bold u-margin-block-start-4">
-                        Need a hand? Learn more in our documentation.
-                    </p>
-                </div>
-                <div class="u-flex u-flex-wrap u-gap-16 u-main-center">
-                    <Button
-                        external
-                        {href}
-                        text
-                        event="empty_documentation"
-                        ariaLabel="create {target}">Documentation</Button>
-                    {#if allowCreate}
-                        <Button secondary on:click on:click={track}>
-                            Create {target}
-                        </Button>
-                    {/if}
-                </div>
+                    disabled={!allowCreate}
+                    size="s">
+                    Create {target}
+                </Button>
             </slot>
-        </div>
-    </article>
+        </Empty>
+    </Card.Base>
 {:else}
-    <button
-        on:click|preventDefault
-        on:click={track}
-        aria-label="create"
-        type="button"
-        class:card={isCard}
-        class="u-grid u-cross-center u-width-full-line dashed"
-        class:common-section={marginTop}>
-        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
-            <div class="common-section">
-                <div class="button is-secondary is-only-icon">
-                    <i class="icon-plus" />
-                </div>
-            </div>
-            <div class="common-section">
-                <slot />
-            </div>
-        </div>
-    </button>
+    <Card.Button on:click on:click={track} aria-label="create" {disabled}>
+        <Layout.Stack justifyContent="center" alignItems="center" gap="m">
+            <Avatar size="s"><Icon icon={IconPlus} size="s" /></Avatar>
+            <Typography.Text variation="m-400" align="center"><slot /></Typography.Text>
+        </Layout.Stack>
+    </Card.Button>
 {/if}
diff --git a/src/lib/components/emptyCardImageCloud.svelte b/src/lib/components/emptyCardImageCloud.svelte
index fd9b1c3df..b6c29c2e6 100644
--- a/src/lib/components/emptyCardImageCloud.svelte
+++ b/src/lib/components/emptyCardImageCloud.svelte
@@ -1,30 +1,26 @@
 <script>
     import { getNextTier, tierToPlan } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
-    import Card from './card.svelte';
+    import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let source = 'empty_state_card';
-    export let noAspectRatio = false;
 </script>
 
-<Card style="--card-padding:1.5rem; --card-padding-mobile: 2rem">
-    <div class="u-flex u-gap-24 u-flex-vertical-mobile">
+<Card.Base variant="secondary" padding="s" radius="s">
+    <Layout.Stack direction="row" gap="l">
         {#if $$slots?.image}
-            <div class="u-stretch">
-                <div
-                    style:--p-file-preview-border-color="transparent"
-                    class="file-preview is-full-cover-image u-width-full-line u-height-100-percent"
-                    style={noAspectRatio ? 'aspect-ratio: auto' : ''}>
-                    <slot name="image" />
-                </div>
+            <div style="flex-shrink:0">
+                <slot name="image" />
             </div>
         {/if}
-        <div class="u-stretch u-flex-vertical u-main-center">
-            <h3 class="body-text-2 u-bold"><slot name="title" /></h3>
-            <p class="u-margin-block-start-8">
-                <slot nextTier={tierToPlan(getNextTier($organization.billingPlan)).name} />
-            </p>
+        <Layout.Stack justifyContent="center">
+            <Layout.Stack gap="xxs">
+                <Typography.Text variant="m-600"><slot name="title" /></Typography.Text>
+                <Typography.Text>
+                    <slot nextTier={tierToPlan(getNextTier($organization.billingPlan)).name} />
+                </Typography.Text>
+            </Layout.Stack>
             <slot name="cta" {source} />
-        </div>
-    </div>
-</Card>
+        </Layout.Stack>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/lib/components/emptyFilter.svelte b/src/lib/components/emptyFilter.svelte
index 6e13c0cd8..41b7fccca 100644
--- a/src/lib/components/emptyFilter.svelte
+++ b/src/lib/components/emptyFilter.svelte
@@ -1,26 +1,28 @@
 <script lang="ts">
+    import { Card, Empty, Layout } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
-    import { EmptySearch } from '.';
     import { queries } from './filters';
 
     export let resource: string;
 </script>
 
-<EmptySearch hidePages>
-    <div class="common-section">
-        <div class="u-text-center common-section">
-            <b class="body-text-2 u-bold">Sorry, we couldn't find any {resource}.</b>
-            <p>There are no {resource} that match your filters.</p>
-        </div>
-        <div class="u-flex common-section u-main-center">
-            <Button
-                secondary
-                on:click={() => {
-                    queries.clearAll();
-                    queries.apply();
-                }}>
-                Clear filters
-            </Button>
-        </div>
-    </div>
-</EmptySearch>
+<Card.Base padding="none">
+    <Empty
+        title={`Sorry, we couldn't find any ${resource}`}
+        description={`There are no ${resource} that match your filters.`}
+        type="secondary">
+        <svelte:fragment slot="actions">
+            <Layout.Stack direction="row" justifyContent="center">
+                <Button
+                    secondary
+                    on:click={() => {
+                        queries.clearAll();
+                        queries.apply();
+                    }}>
+                    Clear filters
+                </Button>
+                <slot />
+            </Layout.Stack>
+        </svelte:fragment>
+    </Empty>
+</Card.Base>
diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
index 423995556..fac974d5e 100644
--- a/src/lib/components/emptySearch.svelte
+++ b/src/lib/components/emptySearch.svelte
@@ -1,27 +1,32 @@
 <script lang="ts">
-    import { app } from '$lib/stores/app';
-    import Light from '$lib/images/search-light.svg';
-    import Dark from '$lib/images/search-dark.svg';
     import PaginationInline from './paginationInline.svelte';
-
+    import { Card, Empty, Layout } from '@appwrite.io/pink-svelte';
     export let hidePagination = false;
     export let hidePages = false;
+    export let target = '';
+    export let search = '';
 </script>
 
-<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 u-overflow-hidden">
-        {#if $app.themeInUse === 'dark'}
-            <img src={Dark} height="175" alt="create" aria-hidden="true" />
-        {:else}
-            <img src={Light} height="175" alt="create" aria-hidden="true" />
-        {/if}
-        <slot />
-    </div>
-</article>
+<Layout.Stack gap="l">
+    <Card.Base padding="none">
+        <Empty
+            title={`Sorry, we couldn't find ${search ? `‘${search}’` : `any ${target}`}`}
+            description={`There are no ${target} that match your search.`}
+            type="secondary">
+            <svelte:fragment slot="actions">
+                <slot />
+            </svelte:fragment>
+        </Empty>
+    </Card.Base>
 
-{#if !hidePagination}
-    <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
-        <p class="text">Total results: 0</p>
-        <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
-    </div>
-{/if}
+    {#if !hidePagination}
+        <Layout.Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            wrap="wrap">
+            <p class="text">Total results: 0</p>
+            <PaginationInline limit={1} offset={0} total={0} {hidePages} />
+        </Layout.Stack>
+    {/if}
+</Layout.Stack>
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 1b20dbb36..db94a7142 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -4,8 +4,6 @@
     import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
     import { at, empty } from '$lib/helpers/array';
-    import Copy from './copy.svelte';
-    import { selectionStart } from '$lib/actions/selectionStart';
     import { singular } from '$lib/helpers/string';
     import {
         eventServices as services,
@@ -13,8 +11,9 @@
         type EventResource,
         type EventService
     } from '$lib/constants';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Tooltip, Input, Tag, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { trackEvent } from '$lib/actions/analytics';
+    import { IconCheck, IconDuplicate, IconPencil, IconX } from '@appwrite.io/pink-icons-svelte';
 
     // Props
     export let show = false;
@@ -189,7 +188,6 @@
     let customInput: string = null;
     let customInputCursor = -1;
     let showInput = false;
-    let copyParent: HTMLElement;
 
     $: if (show && initialValue) {
         customInput = initialValue;
@@ -235,7 +233,6 @@
 
     $: if (!show) {
         resetSelected();
-        helper = null;
         customInput = null;
         showInput = false;
     }
@@ -245,61 +242,58 @@
     }
 </script>
 
-<Modal title="Create event" bind:show onSubmit={create} size="big">
+<Modal title="Create event" bind:show onSubmit={create}>
     <slot />
-    <div>
-        <p class="u-text">Choose a service</p>
-        <div class="u-flex u-gap-8 u-margin-block-start-8 u-flex-wrap">
+    <Layout.Stack gap="s">
+        <Typography.Text variant="m-500">Choose a service</Typography.Text>
+        <Layout.Stack gap="s" wrap="wrap" direction="row">
             {#each available.services as service}
-                <Pill
+                <Tag
                     disabled={showInput}
                     selected={selected.service?.name === service.name}
-                    button
                     on:click={() => select('service', service)}>
                     {service.name}
-                </Pill>
+                </Tag>
             {/each}
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if !empty(available.resources)}
-        <div>
-            <p class="u-text">Choose a resource (optional)</p>
-            <div class="u-flex u-gap-8 u-margin-block-start-8">
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-500">Choose a resource (optional)</Typography.Text>
+            <Layout.Stack gap="s" wrap="wrap" direction="row">
                 {#each available.resources as resource}
-                    <Pill
+                    <Tag
                         disabled={showInput}
                         selected={selected.resource?.name === resource.name}
-                        button
                         on:click={() => select('resource', resource)}>
                         {resource.name}
-                    </Pill>
+                    </Tag>
                 {/each}
-            </div>
-        </div>
+            </Layout.Stack>
+        </Layout.Stack>
     {/if}
 
     {#if !empty(available.actions)}
-        <div>
-            <p class="u-text">Choose an action (optional)</p>
-            <div class="u-flex u-gap-8 u-margin-block-start-8">
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-500">Choose an action (optional)</Typography.Text>
+            <Layout.Stack gap="s" wrap="wrap" direction="row">
                 {#each available.actions as action}
-                    <Pill
+                    <Tag
                         disabled={showInput}
                         selected={selected.action?.name === action.name}
-                        button
                         on:click={() => select('action', action)}>
                         {action.name}
-                    </Pill>
+                    </Tag>
                 {/each}
-            </div>
-        </div>
+            </Layout.Stack>
+        </Layout.Stack>
     {/if}
 
     {#if !empty(available.attributes)}
-        <div>
-            <p class="u-text">Choose an attribute (optional)</p>
-            <div class="u-flex u-gap-8 u-margin-block-start-8">
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-500">Choose an attribute (optional)</Typography.Text>
+            <Layout.Stack gap="s" wrap="wrap" direction="row">
                 {#each available.attributes as attribute}
                     <Pill
                         disabled={showInput}
@@ -309,71 +303,40 @@
                         {attribute}
                     </Pill>
                 {/each}
-            </div>
-        </div>
+            </Layout.Stack>
+        </Layout.Stack>
     {/if}
 
     {#if showInput}
-        <div class="input-text-wrapper" style="--amount-of-buttons:2">
-            <input
-                type="text"
-                placeholder="Enter custom event"
-                bind:value={customInput}
-                use:selectionStart={{ onChange: (newValue) => (customInputCursor = newValue) }} />
-            <div class="options-list">
-                <button on:click={toggleShowInput} class="options-list-button" aria-label="confirm">
-                    <span class="icon-check" aria-hidden="true" />
-                </button>
-                <button on:click={toggleShowInput} class="options-list-button" aria-label="cancel">
-                    <span class="icon-x" aria-hidden="true" />
-                </button>
-            </div>
-            <p style="height: 2rem;">{helper ?? ''}</p>
-        </div>
+        <Layout.Stack gap="s">
+            <Input.Text bind:value={customInput} placeholder="Enter custom event">
+                <svelte:fragment slot="end">
+                    <Input.Action icon={IconCheck} on:click={toggleShowInput} />
+                    <Input.Action icon={IconX} />
+                </svelte:fragment>
+            </Input.Text>
+
+            <!-- TODO: get checked by design -->
+            <Typography.Caption variant="400">{helper ?? ''}</Typography.Caption>
+        </Layout.Stack>
     {:else}
-        <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
-            <!--
-                This object syntax avoids TS erroring because 'type' isn't a valid HTMLDivElement attribute
-                (we need to set it to 'text' to add styling)
-             -->
-            <div {...{ type: 'text' }} style="min-height: 2.5rem;">
-                {#each eventString as route, i}
-                    <span
-                        role="tooltip"
-                        class:u-opacity-0-5={helper !== route.description}
-                        on:mouseenter={() => (helper = route.description)}
-                        on:mouseleave={() => (helper = null)}>
-                        {route.value}
-                    </span>
-                    <span class="u-opacity-0-5">
-                        {i + 1 < eventString?.length ? '.' : ''}
-                    </span>
-                {/each}
-            </div>
-            <div class="options-list">
-                {#key copyParent}
-                    <button
+        <Input.Text
+            value={eventString.map((e) => e.value).join('.')}
+            placeholder="Enter custom event"
+            readonly>
+            <svelte:fragment slot="end">
+                <Tooltip>
+                    <Input.Action
+                        icon={IconPencil}
                         on:click={(e) => {
                             customInput = inputValue;
                             toggleShowInput(e);
-                        }}
-                        use:tooltip={{ content: 'Edit event', appendTo: copyParent }}
-                        class="options-list-button"
-                        aria-label="edit event">
-                        <span class="icon-pencil" aria-hidden="true" />
-                    </button>
-                    <button
-                        disabled={!inputValue}
-                        class="options-list-button"
-                        aria-label="copy text">
-                        <Copy value={inputValue} appendTo={copyParent}>
-                            <span class="icon-duplicate" aria-hidden="true" />
-                        </Copy>
-                    </button>
-                {/key}
-            </div>
-            <p style="height: 2rem;">{helper ?? ''}</p>
-        </div>
+                        }} />
+                    <div slot="tooltip">Edit event</div>
+                </Tooltip>
+                <Input.Action icon={IconDuplicate} />
+            </svelte:fragment>
+        </Input.Text>
     {/if}
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/expirationInput.svelte b/src/lib/components/expirationInput.svelte
similarity index 50%
rename from src/routes/(console)/project-[region]-[project]/overview/keys/expirationInput.svelte
rename to src/lib/components/expirationInput.svelte
index 843cc9f3d..554574913 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/expirationInput.svelte
+++ b/src/lib/components/expirationInput.svelte
@@ -1,5 +1,12 @@
+<script context="module" lang="ts">
+    export type ExpirationOptions = {
+        label: string;
+        value: string;
+    };
+</script>
+
 <script lang="ts">
-    import { Helper, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { InputDateTime, InputSelect } from '$lib/elements/forms';
     import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
@@ -19,7 +26,7 @@
         return date.toISOString();
     }
 
-    const options = [
+    const defaultOptions: ExpirationOptions[] = [
         {
             label: 'Never',
             value: null
@@ -46,10 +53,37 @@
         }
     ];
 
+    const limitedOptions: ExpirationOptions[] = [
+        {
+            label: '1 Day',
+            value: incrementToday(1, 'day')
+        },
+        {
+            label: '7 Days',
+            value: incrementToday(7, 'day')
+        },
+        {
+            label: '30 days',
+            value: incrementToday(30, 'day')
+        }
+    ];
+
     export let value: string | null = null;
+    export let dateSelectorLabel: string | undefined = undefined;
+    export let selectorLabel: string | undefined = 'Expiration date';
+    export let resourceType: string | 'key' | 'token' | undefined = 'key';
+    export let expiryOptions: 'default' | 'limited' | ExpirationOptions[] = 'default';
+
+    const options = Array.isArray(expiryOptions)
+        ? expiryOptions
+        : expiryOptions === 'default'
+          ? defaultOptions
+          : limitedOptions;
 
     function initExpirationSelect() {
-        if (value === null || !isValidDate(value)) return null;
+        if (value === null || !isValidDate(value)) {
+            return options[0]?.value ?? null;
+        }
 
         let result = 'custom';
         for (const option of options) {
@@ -63,23 +97,37 @@
 
         return result;
     }
+
+    /**
+     * Custom picker only supports `dd/mm/yy` format.
+     */
+    function splitDateValue(value: string): string {
+        return value.slice(0, 10);
+    }
+
     let expirationSelect = initExpirationSelect();
-    let expirationCustom: string | null = value ?? null;
+    let expirationCustom: string | null = value ? splitDateValue(value) : null;
 
     $: {
         if (!isSameDay(new Date(expirationSelect), new Date(value))) {
             value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
         }
     }
+
+    $: helper =
+        expirationSelect !== 'custom' && expirationSelect !== null
+            ? `Your ${resourceType} will expire in ${toLocaleDate(value)}`
+            : null;
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date">
-    <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom' && expirationSelect !== null}
-            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
-        {/if}
-    </svelte:fragment>
-</InputSelect>
+<InputSelect
+    required
+    {helper}
+    {options}
+    id="preset"
+    label={selectorLabel}
+    bind:value={expirationSelect} />
+
 {#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label="" bind:value={expirationCustom} showLabel={false} />
+    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
 {/if}
diff --git a/src/lib/components/fakeModal.svelte b/src/lib/components/fakeModal.svelte
index 23bb89aa7..0db0ad65d 100644
--- a/src/lib/components/fakeModal.svelte
+++ b/src/lib/components/fakeModal.svelte
@@ -2,7 +2,7 @@
     import { Alert } from '$lib/components';
     import { onMount } from 'svelte';
     import Form from '$lib/elements/forms/form.svelte';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let show = false;
@@ -23,7 +23,7 @@
 
     function handleBLur(event: MouseEvent) {
         if (event.target === backdrop) {
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'backdrop'
             });
             closeModal();
@@ -38,14 +38,14 @@
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'escape'
             });
             closeModal();
         }
     }
 
-    $: if (backdrop) {
+    $: if (backdrop && show && !document.body.contains(backdrop)) {
         document.body.appendChild(backdrop);
     }
 
@@ -82,7 +82,7 @@
                                     class:is-warning={state === 'warning'}
                                     class:is-danger={state === 'error'}
                                     class:is-info={state === 'info'}>
-                                    <span class={`icon-${icon}`} aria-hidden="true" />
+                                    <span class={`icon-${icon}`} aria-hidden="true"></span>
                                 </div>
                             {/if}
 
@@ -100,11 +100,11 @@
                                 aria-label="Close Modal"
                                 title="Close Modal"
                                 on:click={() =>
-                                    trackEvent('click_close_modal', {
+                                    trackEvent(Click.ModalCloseClick, {
                                         from: 'button'
                                     })}
                                 on:click={closeModal}>
-                                <span class="icon-x" aria-hidden="true" />
+                                <span class="icon-x" aria-hidden="true"></span>
                             </button>
                         {/if}
                     </div>
@@ -149,8 +149,10 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        :global() {
-            background-color: hsl(240 5% 8% / 0.6);
+        background-color: hsl(240 5% 8% / 0.6);
+
+        & :global(.modal-form) {
+            position: unset;
         }
     }
 </style>
diff --git a/src/lib/components/feedback/evaluation.svelte b/src/lib/components/feedback/evaluation.svelte
index 1e770e900..deaad320f 100644
--- a/src/lib/components/feedback/evaluation.svelte
+++ b/src/lib/components/feedback/evaluation.svelte
@@ -1,27 +1,22 @@
 <script lang="ts">
+    import { Tag } from '@appwrite.io/pink-svelte';
+
     export let value: number = null;
 </script>
 
 <fieldset class="u-margin-block-start-8 u-min-width-0">
-    <legend class="label is-required u-margin-0 u-line-height-1-5 u-bold">
-        <slot />
-    </legend>
     <ol
-        class="u-flex u-main-space-between u-margin-block-start-16 u-overflow-x-auto"
+        class="u-flex u-main-space-between u-overflow-x-auto u-gap-6"
         style="padding-block: 0.13rem">
         {#each Array(11) as _, i}
             <li>
-                <input
-                    on:click={() => (value = i)}
-                    type="radio"
-                    name="recommend"
-                    class="radio-button"
-                    data-text={i}
-                    checked={value === i} />
+                <Tag size="m" selected={value === i} on:click={() => (value = i)}>
+                    {i}
+                </Tag>
             </li>
         {/each}
     </ol>
-    <div class="u-flex u-main-space-between u-margin-block-start-8">
+    <div class="u-flex u-main-space-between u-margin-block-start-8 u-margin-block-end-24">
         <span class:u-color-text-gray={value === null}>Not at all likely</span>
         <span class:u-color-text-gray={value === null}>Extremely likely</span>
     </div>
diff --git a/src/lib/components/feedback/feedback.svelte b/src/lib/components/feedback/feedback.svelte
index 864a3da31..ed500aa15 100644
--- a/src/lib/components/feedback/feedback.svelte
+++ b/src/lib/components/feedback/feedback.svelte
@@ -9,17 +9,20 @@
     import { user } from '$lib/stores/user';
     import { organization } from '$lib/stores/organization';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
 
     $: $selectedFeedback = feedbackOptions.find((option) => option.type === $feedback.type);
 
+    export let isMobile: boolean = false;
+
     async function submit() {
         try {
             await feedback.submitFeedback(
                 `feedback-${$feedback.type}`,
                 $feedbackData.message,
-                $page.url.href,
+                page.url.href,
                 $user.name,
                 $user.email,
                 $organization?.billingPlan,
@@ -43,28 +46,34 @@
     }
 </script>
 
-<section class="drop-section u-padding-24">
-    <header class="u-flex u-main-space-between u-gap-16">
-        <h4 class="label u-bold" style:font-size="var(--font-size-1)">{$selectedFeedback.title}</h4>
-        <button
-            type="button"
-            class="button is-text is-only-icon u-margin-inline-start-auto"
-            style="--button-size:1.5rem;"
-            aria-label="Close feedback"
-            title="Close feedback"
-            on:click={() => feedback.toggleFeedback()}>
-            <span class="icon-x" aria-hidden="true" />
-        </button>
+<section class="u-flex u-flex-vertical u-gap-24" class:drop-section={!isMobile}>
+    <header class="u-flex u-flex-vertical u-gap-4">
+        {#if !isMobile}
+            <Typography.Title size="s">Feedback</Typography.Title>
+        {/if}
+        {#if $selectedFeedback.desc}
+            <Typography.Text variant="m-400" size="m">{$selectedFeedback.desc}</Typography.Text>
+        {/if}
     </header>
-    <div class="u-margin-block-start-8 u-line-height-1-5">
-        {$selectedFeedback.desc}
-    </div>
 
     <Form onSubmit={submit}>
         <svelte:component this={$selectedFeedback.component} />
-        <div class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
+
+        <div
+            class:u-flex-vertical={isMobile}
+            class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
             <Button text on:click={() => feedback.toggleFeedback()}>Cancel</Button>
             <Button secondary submit>Submit</Button>
         </div>
     </Form>
 </section>
+
+<style lang="scss">
+    .drop-section {
+        padding: 1rem;
+
+        @media (max-width: 768px) {
+            padding: 0;
+        }
+    }
+</style>
diff --git a/src/lib/components/feedback/feedbackGeneral.svelte b/src/lib/components/feedback/feedbackGeneral.svelte
index 642cbf6bb..a60f65f01 100644
--- a/src/lib/components/feedback/feedbackGeneral.svelte
+++ b/src/lib/components/feedback/feedbackGeneral.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { FormList, InputTextarea } from '$lib/elements/forms';
+    import { InputTextarea } from '$lib/elements/forms';
     import { feedbackData } from '$lib/stores/feedback';
 </script>
 
-<FormList>
-    <InputTextarea
-        id="feedback"
-        placeholder="Your message here"
-        label="Message"
-        required
-        bind:value={$feedbackData.message} />
-</FormList>
+<InputTextarea
+    required
+    id="feedback"
+    bind:value={$feedbackData.message}
+    label="Tell us more about your experience"
+    placeholder="Share your suggestions and feature requests..." />
diff --git a/src/lib/components/feedback/feedbackNPS.svelte b/src/lib/components/feedback/feedbackNPS.svelte
index 1560580f6..7b65f2d5a 100644
--- a/src/lib/components/feedback/feedbackNPS.svelte
+++ b/src/lib/components/feedback/feedbackNPS.svelte
@@ -1,20 +1,16 @@
 <script lang="ts">
-    import { FormList, InputTextarea } from '$lib/elements/forms';
-    import { feedbackData } from '$lib/stores/feedback';
     import Evaluation from './evaluation.svelte';
+    import { feedbackData } from '$lib/stores/feedback';
+    import { InputTextarea } from '$lib/elements/forms';
 </script>
 
-<FormList>
-    <Evaluation bind:value={$feedbackData.value}>
-        How likely are you to recommend Appwrite to a friend or colleague?
-    </Evaluation>
-    {#if $feedbackData.value !== null}
-        <InputTextarea
-            id="feedback"
-            placeholder="Your message here"
-            label="Message"
-            required
-            bind:value={$feedbackData.message}
-            showLabel={false} />
-    {/if}
-</FormList>
+<Evaluation bind:value={$feedbackData.value} />
+{#if $feedbackData.value !== null}
+    <!-- TODO: @itznotabug, helper is a plain string atm, cannot add html/anchor for Discord link -->
+    <InputTextarea
+        id="feedback"
+        bind:value={$feedbackData.message}
+        label="Tell us more about your experience (optional)"
+        placeholder="Share your suggestions and feature requests..."
+        helper="Need help? Join our Discord for community support" />
+{/if}
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 0896d6d52..b60f49bf5 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -1,36 +1,45 @@
 <script lang="ts">
-    import { Id, ModalWrapper, Trim } from '.';
-    import { Button, Form } from '$lib/elements/forms';
+    import { EmptySearch, Id } from '.';
+    import { onMount } from 'svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
-    import { ID, Query, Permission, Role } from '@appwrite.io/console';
+    import { goto } from '$app/navigation';
+    import { writable } from 'svelte/store';
+    import { Button, InputSelect } from '$lib/elements/forms';
+    import DualTimeView from './dualTimeView.svelte';
     import type { Models } from '@appwrite.io/console';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
-    import { toLocaleDate } from '$lib/helpers/date';
-    import {
-        Table,
-        TableBody,
-        TableRowButton,
-        TableHeader,
-        TableCell,
-        TableCellText,
-        TableCellHead
-    } from '$lib/elements/table';
     import InputSearch from '$lib/elements/forms/inputSearch.svelte';
-    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    import FormList from '$lib/elements/forms/formList.svelte';
-    import { writable } from 'svelte/store';
-    import { onMount } from 'svelte';
-    import Heading from './heading.svelte';
-    import { clickOnEnter } from '$lib/helpers/a11y';
-    import Empty from './empty.svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { ID, Query, Permission, Role } from '@appwrite.io/console';
+    import {
+        ActionMenu,
+        Card,
+        Divider,
+        Empty,
+        Layout,
+        Modal,
+        Selector,
+        Spinner,
+        Table,
+        ToggleButton,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
+    import { showCreateBucket } from '$routes/(console)/project-[region]-[project]/storage/+page.svelte';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
+    export let allowedExtension: string = '*';
     export let selectedBucket: string = null;
     export let selectedFile: string = null;
     export let onSelect: (e: Models.File) => void;
+    export let gridImageDimensions: { imageHeight?: number; imageWidth?: number } = {
+        imageHeight: 148
+    };
 
     let search = writable('');
     let searchEnabled = false;
@@ -42,7 +51,7 @@
         selectedBucket = currentBucket?.$id;
     });
 
-    function submitForm() {
+    function onSubmit() {
         onSelect(currentFile);
         closeModal();
     }
@@ -50,7 +59,7 @@
     function getPreview(bucketId: string, fileId: string, size: number = 64) {
         return (
             sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.getFilePreview(bucketId, fileId, size, size)
                 .toString() + '&mode=admin'
         );
@@ -60,7 +69,7 @@
         try {
             uploading = true;
             const file = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.createFile(selectedBucket, ID.unique(), fileSelector.files[0], [
                     Permission.read(Role.any())
                 ]);
@@ -74,6 +83,7 @@
     }
 
     function selectBucket(bucket: Models.Bucket | null) {
+        search.set('');
         currentBucket = bucket;
         selectedBucket = bucket?.$id ?? null;
         resetFile();
@@ -108,9 +118,10 @@
     let currentBucket: Models.Bucket = null;
     let currentFile: Models.File = null;
     let buckets: Promise<Models.BucketList> = loadBuckets();
+
     async function loadBuckets() {
         const response = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .storage.listBuckets();
         const bucket = response.buckets[0] ?? null;
         if (bucket) {
@@ -121,15 +132,28 @@
         return response;
     }
 
+    function truncatedFilename(file: Models.File, max: number = 15): string {
+        const length = file.name.length;
+        return length > 15 ? `${file.name.substring(0, max)}...` : file.name;
+    }
+
+    function getProperQuery(): string[] {
+        let query = [Query.orderDesc('$createdAt')];
+
+        if (allowedExtension === '*') {
+            query.push(Query.startsWith('mimeType', mimeTypeQuery));
+        } else {
+            query.push(Query.endsWith('name', `.${allowedExtension}`));
+        }
+
+        return query;
+    }
+
     $: files =
         currentBucket &&
         sdk
-            .forProject($page.params.region, $page.params.project)
-            .storage.listFiles(
-                currentBucket.$id,
-                [Query.startsWith('mimeType', mimeTypeQuery), Query.orderDesc('$createdAt')],
-                $search || undefined
-            )
+            .forProject(page.params.region, page.params.project)
+            .storage.listFiles(currentBucket.$id, getProperQuery(), $search || undefined)
             .then((response) => {
                 if ($search === '') {
                     searchEnabled = response.total > 0;
@@ -141,153 +165,155 @@
     $: if ($search) {
         resetFile();
     }
+
+    $: extension = allowedExtension === '*' ? mimeTypeQuery : `.${allowedExtension}`;
+
+    $: console.log(`Allowed extensions: ${allowedExtension}, MimeType: ${mimeTypeQuery}`);
 </script>
 
 <svelte:document on:visibilitychange={handleVisibilityChange} />
 
-<ModalWrapper bind:show size="huge">
-    <Form isModal onSubmit={submitForm} class="u-stretch">
-        <header class="modal-header u-margin-block-end-0">
-            <div class="u-flex u-main-space-between u-cross-center u-gap-16">
-                <h4 class="modal-title heading-level-5">Select file</h4>
-                <button
-                    type="button"
-                    on:click={closeModal}
-                    class="button is-text is-small is-only-icon"
-                    aria-label="Close modal">
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
-            </div>
-        </header>
-        <div
-            class="modal-content u-stretch u-flex-vertical u-padding-0 u-margin-block-0 u-overflow-visible">
-            <div class="u-flex u-min-height-0 u-stretch">
-                <aside
-                    class="drop-section u-width-200 u-padding-16
-                            u-flex-vertical u-gap-8
-                            u-flex-shrink-0 u-margin-inline-0 u-overflow-y-auto is-not-mobile">
-                    <h6
-                        class="eyebrow-heading-3"
-                        style:--heading-text-color="var(--color-neutral-50)">
-                        Buckets
-                    </h6>
-                    <ul class="drop-list">
-                        {#await buckets}
-                            <div class="u-flex u-main-center">
-                                <div class="loader" />
-                            </div>
-                        {:then response}
-                            {#each response.buckets as bucket}
-                                {@const isSelected = bucket.$id === selectedBucket}
-                                <li class="drop-list-item">
-                                    <button
-                                        type="button"
-                                        class="drop-button"
-                                        class:is-selected={isSelected}
-                                        on:click={() => selectBucket(bucket)}>
-                                        <span>{bucket.name}</span>
-                                    </button>
-                                </li>
-                            {:else}
-                                <li class="drop-list-item">
-                                    <span class="drop-button">No buckets found</span>
-                                </li>
-                            {/each}
-                        {/await}
-                    </ul>
-                </aside>
-                <article
-                    style:padding-inline="calc(var(--p-modal-padding))"
-                    class="modal-content-main u-flex-vertical u-gap-24 u-sep-inline-start u-flex-basis-1000 u-padding-block-24 u-overflow-y-auto">
-                    <div class="is-only-mobile">
-                        {#await buckets}
-                            loading
-                        {:then response}
-                            {#if currentBucket?.$id}
-                                <FormList>
-                                    <InputSelect
-                                        wrapperTag="div"
-                                        label="Buckets"
-                                        options={response.buckets.map((n) => ({
-                                            value: n.$id,
-                                            label: n.name
-                                        }))}
-                                        bind:value={currentBucket.$id}
-                                        id="buckets" />
-                                </FormList>
-                            {/if}
-                        {/await}
-                    </div>
-                    {#await buckets}
-                        <div class="u-flex-vertical u-stretch u-position-relative u-main-center">
-                            <div
-                                class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
-                                style="inset-inline-start: 0;">
-                                <div class="loader" />
-                                <p class="text">Loading files...</p>
-                            </div>
+<Form {onSubmit} isModal class="file-picker-modal-form">
+    <Modal bind:open={show} title="Select file" size="l">
+        <Layout.Stack direction={$isSmallViewport ? 'column' : 'row'} height="50vh" gap="none">
+            <!-- min-width to avoid a layout-shift -->
+            <aside>
+                {#if !$isSmallViewport}
+                    <Typography.Caption variant="500">Buckets</Typography.Caption>
+                {/if}
+
+                {#await buckets}
+                    {#if $isSmallViewport}
+                        <!-- disabled state -->
+                        <div style:padding-block-start="1rem">
+                            <InputSelect
+                                required
+                                disabled
+                                id="bucket"
+                                value={null}
+                                options={[]}
+                                label="Bucket"
+                                placeholder="Loading buckets..." />
                         </div>
-                    {:then response}
+                    {/if}
+                {:then response}
+                    {#if $isSmallViewport}
+                        <div style:padding-block-start="1rem">
+                            <InputSelect
+                                required
+                                id="bucket"
+                                label="Bucket"
+                                bind:value={selectedBucket}
+                                placeholder="Select bucket"
+                                on:change={(event) => {
+                                    const bucketId = event.detail;
+                                    const bucket = response.buckets.find(
+                                        (bucket) => bucket.$id === bucketId
+                                    );
+                                    selectBucket(bucket);
+                                }}
+                                options={response.buckets.map((bucket) => {
+                                    return {
+                                        value: bucket.$id,
+                                        label: `${bucket.name}`
+                                    };
+                                })} />
+                        </div>
+                    {:else}
+                        <div class="action-menu-holder">
+                            <ActionMenu.Root width="180px">
+                                {#each response.buckets as bucket}
+                                    {@const isSelected = bucket.$id === selectedBucket}
+                                    <div class="action-button" class:active-item={isSelected}>
+                                        <ActionMenu.Item.Button
+                                            on:click={() => selectBucket(bucket)}>
+                                            {bucket.name}
+                                        </ActionMenu.Item.Button>
+                                    </div>
+                                {:else}
+                                    <ActionMenu.Item.Button
+                                        >No buckets found</ActionMenu.Item.Button>
+                                {/each}
+                            </ActionMenu.Root>
+                        </div>
+                    {/if}
+                {/await}
+            </aside>
+
+            <div style:padding-inline-start="1rem" style:opacity={$isSmallViewport ? 0 : 1}>
+                <Divider vertical />
+            </div>
+
+            <div class="files-section">
+                <Layout.Stack gap="l">
+                    {#if $isSmallViewport}
+                        <Button
+                            secondary
+                            disabled={uploading}
+                            on:click={() => fileSelector.click()}>
+                            <input
+                                type="file"
+                                tabindex="-1"
+                                class="u-hide"
+                                accept={extension}
+                                on:change={uploadFile}
+                                bind:this={fileSelector} />
+                            {#if uploading}
+                                <div class="loader is-small"></div>
+                                <span>Uploading</span>
+                            {:else}
+                                <span class="icon-upload" aria-hidden="true"></span>
+                                <span>Upload</span>
+                            {/if}
+                        </Button>
+                    {/if}
+
+                    {#await buckets then response}
                         {#if response?.total}
                             {#if currentBucket}
-                                <header class="u-flex-vertical u-gap-32">
-                                    <div class="u-flex u-gap-16">
-                                        <h5 class="heading-level-6 u-trim u-min-width-0">
-                                            {currentBucket?.name}
-                                        </h5>
-                                        <Id value={currentBucket?.$id} event="bucket">
-                                            {currentBucket?.$id}
-                                        </Id>
-                                    </div>
-                                    <div
-                                        class="u-flex u-main-space-between u-gap-16 u-flex-vertical-mobile">
+                                <Layout.Stack>
+                                    {#if !$isSmallViewport}
+                                        {#key currentBucket?.$id}
+                                            <Layout.Stack direction="row" alignItems="center">
+                                                <Typography.Title size="s"
+                                                    >{currentBucket?.name}</Typography.Title>
+                                                <Id value={currentBucket?.$id} event="bucket">
+                                                    {currentBucket?.$id}
+                                                </Id>
+                                            </Layout.Stack>
+                                        {/key}
+                                    {/if}
+                                    <Layout.Stack direction="row" alignItems="center">
                                         <InputSearch
                                             placeholder="Search files"
                                             bind:value={$search}
-                                            disabled={!searchEnabled}
-                                            style="min-inline-size: 17.5rem; block-size: 100%" />
-                                        <div class="u-flex u-gap-16">
-                                            <div class="toggle-button">
-                                                <ul class="toggle-button-list">
-                                                    <li class="toggle-button-item">
-                                                        <button
-                                                            on:click={() => (view = 'list')}
-                                                            disabled={!searchEnabled}
-                                                            type="button"
-                                                            class="toggle-button-element"
-                                                            class:is-selected={view === 'list'}
-                                                            aria-label="List View">
-                                                            <span
-                                                                class="icon-view-list"
-                                                                aria-hidden="true" />
-                                                        </button>
-                                                    </li>
-                                                    <li class="toggle-button-item">
-                                                        <button
-                                                            on:click={() => (view = 'grid')}
-                                                            disabled={!searchEnabled}
-                                                            type="button"
-                                                            class="toggle-button-element"
-                                                            class:is-selected={view === 'grid'}
-                                                            aria-label="Grid View">
-                                                            <span
-                                                                class="icon-view-grid"
-                                                                aria-hidden="true" />
-                                                        </button>
-                                                    </li>
-                                                </ul>
-                                            </div>
-
+                                            disabled={!searchEnabled} />
+                                        <ToggleButton
+                                            bind:active={view}
+                                            buttons={[
+                                                {
+                                                    id: 'list',
+                                                    label: 'list view',
+                                                    disabled: !searchEnabled,
+                                                    icon: IconViewList
+                                                },
+                                                {
+                                                    id: 'grid',
+                                                    label: 'grid view',
+                                                    disabled: !searchEnabled,
+                                                    icon: IconViewGrid
+                                                }
+                                            ]} />
+                                        {#if !$isSmallViewport}
                                             <Button
                                                 secondary
-                                                class="is-full-width-in-stack-mobile u-height-100-percent"
                                                 disabled={uploading}
                                                 on:click={() => fileSelector.click()}>
                                                 <input
-                                                    tabindex="-1"
                                                     type="file"
-                                                    accept="image/*"
+                                                    tabindex="-1"
                                                     class="u-hide"
+                                                    accept={extension}
                                                     on:change={uploadFile}
                                                     bind:this={fileSelector} />
                                                 {#if uploading}
@@ -299,250 +325,303 @@
                                                     <span>Upload</span>
                                                 {/if}
                                             </Button>
-                                        </div>
-                                    </div>
-                                </header>
+                                        {/if}
+                                    </Layout.Stack>
+                                </Layout.Stack>
 
                                 {#if files}
                                     {#await files}
-                                        <div
-                                            class="u-flex-vertical u-stretch u-position-relative u-main-center">
-                                            <div
-                                                class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
-                                                style="inset-inline-start: 0;">
-                                                <div class="loader" />
-                                                <p class="text">Loading files...</p>
-                                            </div>
-                                        </div>
+                                        <Layout.Stack
+                                            justifyContent="center"
+                                            alignContent="center"
+                                            alignItems="center"
+                                            gap="xl"
+                                            height="100%">
+                                            <Spinner size="l" />
+                                            <span>Loading files...</span>
+                                        </Layout.Stack>
                                     {:then response}
-                                        <div class="u-flex-vertical u-stretch">
-                                            {#if response?.files?.length}
-                                                {#if view === 'grid'}
-                                                    <ul
-                                                        class="grid-box"
-                                                        style="--grid-gap:40px; --grid-item-size:120px; --grid-item-size-small-screens:100px;">
+                                        {#if response?.files?.length}
+                                            {#if view === 'grid'}
+                                                {#if $isSmallViewport}
+                                                    <Layout.Stack gap="l">
                                                         {#each response?.files as file}
-                                                            <li>
-                                                                <div
-                                                                    class="u-flex-vertical u-gap-8">
-                                                                    <div
-                                                                        role="button"
-                                                                        style:background-size="cover"
-                                                                        style:background-image={`url(${getPreview(
-                                                                            currentBucket.$id,
-                                                                            file.$id,
-                                                                            360
-                                                                        )})`}
-                                                                        on:click={() =>
-                                                                            selectFile(file)}
-                                                                        on:keyup={clickOnEnter}
-                                                                        tabindex="0"
-                                                                        style:aspect-ratio="1/1"
-                                                                        style:display="flex"
-                                                                        style:align-items="flex-end"
-                                                                        style:flex-direction="row-reverse"
-                                                                        style:box-shadow="none"
-                                                                        class="card u-height-100-percent u-gap-16"
-                                                                        style="--card-padding:0.5rem;--card-padding-mobile:0.5rem; --card-border-radius:var(--border-radius-medium);">
-                                                                        <input
-                                                                            class="u-position-absolute is-small u-margin-block-start-2"
-                                                                            type="radio"
-                                                                            name="file"
-                                                                            value={file.$id}
-                                                                            style:pointer-events="none"
-                                                                            checked={selectedFile ===
-                                                                                file.$id} />
-                                                                    </div>
-                                                                    <span class="u-text-center"
-                                                                        ><Trim alternativeTrim
-                                                                            >{file.name}</Trim
-                                                                        ></span>
-                                                                </div>
-                                                            </li>
+                                                            <Card.Selector
+                                                                radius="s"
+                                                                name="files"
+                                                                padding="xxs"
+                                                                imageHeight={32}
+                                                                imageWidth={32}
+                                                                imageRadius="xs"
+                                                                bind:group={selectedFile}
+                                                                title={truncatedFilename(file, 14)}
+                                                                value={file.$id}
+                                                                src={getPreview(
+                                                                    currentBucket.$id,
+                                                                    file.$id,
+                                                                    360
+                                                                )}
+                                                                on:click={() => selectFile(file)} />
                                                         {/each}
-                                                    </ul>
-                                                {/if}
-                                                {#if view === 'list'}
-                                                    <Table noMargin noStyles transparent dense>
-                                                        <TableHeader>
-                                                            <TableCellHead
-                                                                ><span
-                                                                    class="u-margin-inline-start-8"
-                                                                    >Filename</span
-                                                                ></TableCellHead>
-                                                            <TableCellHead width={140} onlyDesktop>
-                                                                ID
-                                                            </TableCellHead>
-                                                            <TableCellHead width={100} onlyDesktop>
-                                                                Type
-                                                            </TableCellHead>
-                                                            <TableCellHead width={100} onlyDesktop>
-                                                                Size
-                                                            </TableCellHead>
-                                                            <TableCellHead width={120} onlyDesktop>
-                                                                Created
-                                                            </TableCellHead>
-                                                        </TableHeader>
-                                                        <TableBody>
-                                                            {#each response?.files as file}
-                                                                <TableRowButton
+                                                    </Layout.Stack>
+                                                {:else}
+                                                    <Layout.Grid
+                                                        columnsXXS={1}
+                                                        columnsXS={2}
+                                                        columnsS={3}
+                                                        columns={4}>
+                                                        {#each response?.files as file}
+                                                            <div class="image-selector">
+                                                                <Card.Selector
+                                                                    radius="s"
+                                                                    name="files"
+                                                                    padding="xxs"
+                                                                    imageWidth={gridImageDimensions.imageWidth}
+                                                                    imageHeight={gridImageDimensions.imageHeight}
+                                                                    imageRadius="xs"
+                                                                    bind:group={selectedFile}
+                                                                    title={truncatedFilename(
+                                                                        file,
+                                                                        14
+                                                                    )}
+                                                                    value={file.$id}
+                                                                    src={getPreview(
+                                                                        currentBucket.$id,
+                                                                        file.$id,
+                                                                        360
+                                                                    )}
                                                                     on:click={() =>
-                                                                        selectFile(file)}>
-                                                                    <TableCell title="Filename">
-                                                                        <div
-                                                                            class="u-inline-flex u-cross-center u-gap-12">
-                                                                            <input
-                                                                                type="radio"
-                                                                                class="is-small u-margin-inline-start-8"
-                                                                                name="file"
-                                                                                value={file.$id}
-                                                                                style:pointer-events="none"
-                                                                                checked={selectedFile ===
-                                                                                    file.$id} />
-                                                                            <span class="image">
-                                                                                <img
-                                                                                    class="avatar"
-                                                                                    style:border-radius="var(--border-radius-xsmall)"
-                                                                                    width="28"
-                                                                                    height="28"
-                                                                                    src={getPreview(
-                                                                                        currentBucket.$id,
-                                                                                        file.$id
-                                                                                    )}
-                                                                                    alt={file.name} />
-                                                                            </span>
-                                                                            <Trim alternativeTrim>
-                                                                                {file.name}
-                                                                            </Trim>
-                                                                        </div>
-                                                                    </TableCell>
-                                                                    <TableCellText
-                                                                        title="ID"
-                                                                        onlyDesktop>
-                                                                        <Id value={file.$id}
-                                                                            >{file.$id}</Id>
-                                                                    </TableCellText>
-                                                                    <TableCellText
-                                                                        title="Type"
-                                                                        onlyDesktop>
-                                                                        {file.mimeType}
-                                                                    </TableCellText>
-                                                                    <TableCellText
-                                                                        title="Size"
-                                                                        onlyDesktop>
-                                                                        {calculateSize(
-                                                                            file.sizeOriginal
-                                                                        )}
-                                                                    </TableCellText>
-                                                                    <TableCellText
-                                                                        title="Created"
-                                                                        onlyDesktop>
-                                                                        {toLocaleDate(
-                                                                            file.$createdAt
-                                                                        )}
-                                                                    </TableCellText>
-                                                                </TableRowButton>
-                                                            {/each}
-                                                        </TableBody>
-                                                    </Table>
+                                                                        selectFile(file)} />
+                                                            </div>
+                                                        {/each}
+                                                    </Layout.Grid>
                                                 {/if}
-                                            {:else if $search}
-                                                <article
-                                                    style:--card-bg-color="transparent"
-                                                    style:--shadow-small="none"
-                                                    style:--color-border="var(--color-neutral-15)"
-                                                    class="card u-grid u-cross-center u-width-full-line common-section is-border-dashed">
-                                                    <div
-                                                        class="u-flex u-flex-vertical u-cross-center u-gap-24 u-overflow-hidden">
-                                                        <div class="common-section">
-                                                            <div
-                                                                class="u-text-center common-section">
-                                                                <b class="body-text-2 u-bold"
-                                                                    >Sorry we couldn't find "{$search}"</b>
-                                                                <p>
-                                                                    There are no files that match
-                                                                    your search.
-                                                                </p>
-                                                            </div>
-                                                            <div
-                                                                class="u-flex u-gap-16 common-section u-main-center">
-                                                                <Button
-                                                                    secondary
-                                                                    on:click={() => ($search = '')}
-                                                                    >Clear search</Button>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </article>
-                                            {:else}
-                                                <Empty
-                                                    single
-                                                    noMedia
-                                                    --card-bg-color="transparent"
-                                                    --shadow-small="none"
-                                                    --color-border="var(--color-neutral-15)">
-                                                    <div class="common-section">
-                                                        <div class="u-text-center common-section">
-                                                            <Heading
-                                                                size="7"
-                                                                tag="h2"
-                                                                trimmed={false}>
-                                                                No files found within this bucket.
-                                                            </Heading>
-                                                            <p class="text u-line-height-1-5">
-                                                                Need a hand? Learn more in our <a
-                                                                    class="link"
-                                                                    href="https://appwrite.io/docs/products/storage"
-                                                                    target="_blank"
-                                                                    rel="noopener noreferrer">
-                                                                    documentation</a
-                                                                >.
-                                                            </p>
-                                                        </div>
-                                                    </div>
-                                                </Empty>
                                             {/if}
-                                        </div>
+                                            {#if view === 'list'}
+                                                <Table.Root
+                                                    let:root
+                                                    columns={[
+                                                        { id: 'filename', width: { min: 225 } },
+                                                        { id: 'id', width: { min: 200 } },
+                                                        { id: 'type', width: { min: 100 } },
+                                                        { id: 'size', width: { min: 120 } },
+                                                        { id: 'created', width: { min: 140 } }
+                                                    ]}>
+                                                    <svelte:fragment slot="header" let:root>
+                                                        <Table.Header.Cell column="filename" {root}>
+                                                            Filename
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="id" {root}>
+                                                            ID
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="type" {root}>
+                                                            Type
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="size" {root}>
+                                                            Size
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="created" {root}>
+                                                            Created
+                                                        </Table.Header.Cell>
+                                                    </svelte:fragment>
+                                                    {#each response?.files as file (file.$id)}
+                                                        <Table.Row.Button
+                                                            {root}
+                                                            on:click={() => selectFile(file)}>
+                                                            <Table.Cell column="filename" {root}>
+                                                                <div
+                                                                    class="u-inline-flex u-cross-center u-gap-12">
+                                                                    <Selector.Radio
+                                                                        size="s"
+                                                                        name="file"
+                                                                        value={file.$id}
+                                                                        bind:group={selectedFile} />
+
+                                                                    <div class="preview-block">
+                                                                        <img
+                                                                            alt={file.name}
+                                                                            src={getPreview(
+                                                                                currentBucket.$id,
+                                                                                file.$id
+                                                                            )} />
+                                                                    </div>
+
+                                                                    <Tooltip
+                                                                        disabled={file.name.length <
+                                                                            15}
+                                                                        maxWidth="fit-content">
+                                                                        <Typography.Text truncate>
+                                                                            {truncatedFilename(
+                                                                                file
+                                                                            )}
+                                                                        </Typography.Text>
+
+                                                                        <span slot="tooltip">
+                                                                            {file.name}
+                                                                        </span>
+                                                                    </Tooltip>
+                                                                </div>
+                                                            </Table.Cell>
+                                                            <Table.Cell column="id" {root}>
+                                                                <Id value={file.$id}>{file.$id}</Id>
+                                                            </Table.Cell>
+                                                            <Table.Cell column="type" {root}>
+                                                                {file.mimeType}
+                                                            </Table.Cell>
+                                                            <Table.Cell column="size" {root}>
+                                                                {calculateSize(file.sizeOriginal)}
+                                                            </Table.Cell>
+                                                            <Table.Cell column="created" {root}>
+                                                                <DualTimeView
+                                                                    time={file.$createdAt} />
+                                                            </Table.Cell>
+                                                        </Table.Row.Button>
+                                                    {/each}
+                                                </Table.Root>
+                                            {/if}
+                                        {:else if $search}
+                                            <EmptySearch
+                                                hidePages
+                                                hidePagination
+                                                bind:search={$search}
+                                                target="files">
+                                                <Button secondary on:click={() => ($search = '')}>
+                                                    Clear search
+                                                </Button>
+                                            </EmptySearch>
+                                        {:else}
+                                            <Card.Base padding="none">
+                                                <Empty
+                                                    title="No files found within this bucket."
+                                                    description="Need a hand? Learn more in our documentation.">
+                                                    <slot name="actions" slot="actions">
+                                                        <Button
+                                                            text
+                                                            external
+                                                            size="s"
+                                                            event="empty_documentation"
+                                                            href="https://appwrite.io/docs/products/storage/upload-download"
+                                                            ariaLabel="create document"
+                                                            >Documentation</Button>
+                                                        <Button
+                                                            secondary
+                                                            disabled={uploading}
+                                                            on:click={() => fileSelector.click()}
+                                                            >Upload file
+                                                        </Button>
+                                                    </slot>
+                                                </Empty>
+                                            </Card.Base>
+                                        {/if}
                                     {/await}
                                 {/if}
                             {/if}
                         {:else}
-                            <Empty
-                                single
-                                noMedia
-                                --card-bg-color="transparent"
-                                --shadow-small="none"
-                                --color-border="var(--color-neutral-15)">
-                                <div class="u-text-center u-flex-vertical u-cross-center u-gap-24">
-                                    <Heading size="7" tag="h2" trimmed={false}>
-                                        No buckets found
-                                    </Heading>
-                                    <Button
-                                        secondary
-                                        external
-                                        href={`${base}/project-${$page.params.region}-${$page.params.project}/storage`}>
-                                        Create bucket
-                                    </Button>
-                                </div>
-                            </Empty>
+                            <Card.Base padding="none">
+                                <Empty
+                                    title="No buckets found"
+                                    description="Need a hand? Learn more in our documentation.">
+                                    <slot name="actions" slot="actions">
+                                        <Button
+                                            text
+                                            external
+                                            size="s"
+                                            event="empty_documentation"
+                                            href="https://appwrite.io/docs/products/storage/buckets"
+                                            ariaLabel="create document">Documentation</Button>
+
+                                        <Button
+                                            secondary
+                                            on:click={async () => {
+                                                await goto(
+                                                    `${base}/project-${page.params.region}-${page.params.project}/storage`
+                                                );
+                                                $showCreateBucket = true;
+                                            }}>
+                                            Create bucket
+                                        </Button>
+                                    </slot>
+                                </Empty>
+                            </Card.Base>
                         {/if}
                     {/await}
-                </article>
-            </div>
-        </div>
-        <div class="modal-footer u-margin-block-start-0">
-            <div class="u-flex u-main-end u-gap-16">
+                </Layout.Stack>
+            </div></Layout.Stack>
+
+        <svelte:fragment slot="footer">
+            <Layout.Stack direction="row" justifyContent="flex-end">
                 <Button text on:click={closeModal}>Cancel</Button>
                 <Button submit disabled={selectedBucket === null || selectedFile === null}
-                    >Select</Button>
-            </div>
-        </div>
-    </Form>
-</ModalWrapper>
+                    >Select
+                </Button>
+            </Layout.Stack>
+        </svelte:fragment>
+    </Modal>
+</Form>
 
-<style lang="scss">
-    input[type='radio']:where(:indeterminate) {
-        --p-bg-color: var(--p-bg-color-default);
-        --p-border-color: var(--p-border-color-default);
+<style>
+    :global(.file-picker-modal-form dialog .content) {
+        overflow: hidden;
+        padding: unset !important;
+
+        /* multiple scroll bars from `.content` and `.files-section` look very odd */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    aside {
+        min-width: 200px;
+        padding: var(--space-7);
+
+        @media (max-width: 768px) {
+            padding-block: unset;
+            padding-inline: var(--space-7);
+        }
+    }
+
+    .files-section {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        padding: var(--space-8);
+        background: var(--bgcolor-neutral-default);
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .action-menu-holder :global(div:first-of-type) {
+        padding-inline: unset;
+    }
+
+    .action-button {
+        width: 100%;
+        margin-block: 0.125rem;
+
+        & :global(button) {
+            width: 100%;
+        }
+
+        &.active-item {
+            border-radius: var(--border-radius-s);
+            background-color: var(--bgcolor-neutral-secondary, #f4f4f7);
+        }
+    }
+
+    .preview-block {
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        border: var(--border-width-S, 1px) solid var(--border-neutral-strong, #d8d8db);
+
+        & img {
+            border-radius: 50%;
+            align-self: center;
+        }
+    }
+
+    .image-selector :global(img) {
+        border: 1px solid var(--border-neutral);
     }
 </style>
diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte
index b27ce3205..c9f77e498 100644
--- a/src/lib/components/filters/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -5,15 +5,16 @@
         InputSelect,
         InputText,
         InputTags,
-        FormList,
         InputSelectCheckbox,
         InputDateTime
     } from '$lib/elements/forms';
     import { createEventDispatcher, onMount } from 'svelte';
-    import { tags, operators, addFilter, queries } from './store';
+    import { operators, addFilter, queries, type TagValue } from './store';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
     import { TagList } from '.';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     // We cast to any to not cause type errors in the input components
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
@@ -41,6 +42,8 @@
 
     $: isDisabled = !operator;
 
+    let localTags: TagValue[] = [];
+
     onMount(() => {
         value = column?.array ? [] : null;
         if (column?.type === 'datetime') {
@@ -64,12 +67,12 @@
         clear: void;
         apply: { applied: number };
     }>();
-    dispatch('apply', { applied: $tags.length });
+    dispatch('apply', { applied: localTags.length });
 </script>
 
 <div>
     <form on:submit|preventDefault={addFilterAndReset}>
-        <ul class="selects u-flex u-gap-8 u-margin-block-start-16 u-flex-vertical-mobile">
+        <Layout.Stack gap="s" direction="row" alignItems="flex-start">
             <InputSelect
                 id="column"
                 options={$columns
@@ -86,30 +89,27 @@
                 options={operatorsForColumn}
                 placeholder="Select operator"
                 bind:value={operatorKey} />
-        </ul>
+        </Layout.Stack>
         {#if column && operator && !operator?.hideInput}
             {#if column?.array}
-                <FormList class="u-margin-block-start-8">
-                    {#if column.format === 'enum'}
-                        <InputSelectCheckbox
-                            name="value"
-                            bind:tags={arrayValues}
-                            placeholder="Select value"
-                            options={column?.elements?.map((e) => ({
-                                label: e?.label ?? e,
-                                value: e?.value ?? e,
-                                checked: arrayValues.includes(e?.value ?? e)
-                            }))}>
-                        </InputSelectCheckbox>
-                    {:else}
-                        <InputTags
-                            label="values"
-                            showLabel={false}
-                            id="value"
-                            bind:tags={arrayValues}
-                            placeholder="Enter values" />
-                    {/if}
-                </FormList>
+                {#if column.format === 'enum'}
+                    <InputSelectCheckbox
+                        name="value"
+                        bind:tags={arrayValues}
+                        placeholder="Select value"
+                        options={column?.elements?.map((e) => ({
+                            label: e?.label ?? e,
+                            value: e?.value ?? e,
+                            checked: arrayValues.includes(e?.value ?? e)
+                        }))}>
+                    </InputSelectCheckbox>
+                {:else}
+                    <InputTags
+                        label="values"
+                        id="value"
+                        bind:tags={arrayValues}
+                        placeholder="Enter values" />
+                {/if}
             {:else}
                 <ul class="u-margin-block-start-8">
                     {#if column.format === 'enum'}
@@ -120,9 +120,7 @@
                             options={column?.elements?.map((e) => ({
                                 label: e?.label ?? e,
                                 value: e?.value ?? e
-                            }))}
-                            label="Value"
-                            showLabel={false} />
+                            }))} />
                     {:else if column.type === 'integer' || column.type === 'double'}
                         <InputNumber id="value" bind:value placeholder="Enter value" />
                     {:else if column.type === 'boolean'}
@@ -137,12 +135,7 @@
                             bind:value />
                     {:else if column.type === 'datetime'}
                         {#key value}
-                            <InputDateTime
-                                id="value"
-                                bind:value
-                                label="value"
-                                showLabel={false}
-                                step={60} />
+                            <InputDateTime id="value" bind:value step={60} />
                         {/key}
                     {:else}
                         <InputText id="value" bind:value placeholder="Enter value" />
@@ -151,8 +144,8 @@
             {/if}
         {/if}
         {#if !singleCondition}
-            <Button text disabled={isDisabled} class="u-margin-block-start-4" noMargin submit>
-                <i class="icon-plus" />
+            <Button text disabled={isDisabled} class="u-margin-block-start-4" submit>
+                <Icon icon={IconPlus} slot="start" size="s" />
                 Add condition
             </Button>
         {/if}
@@ -160,21 +153,12 @@
 
     {#if !singleCondition}
         <ul class="u-flex u-flex-wrap u-cross-center u-gap-8 u-margin-block-start-16 tags">
-            <TagList />
+            <TagList
+                tags={localTags}
+                on:remove={(e) => {
+                    queries.removeFilter(e.detail);
+                    queries.apply();
+                }} />
         </ul>
     {/if}
 </div>
-
-<style lang="scss">
-    .selects {
-        :global(> *) {
-            flex: 1;
-        }
-    }
-
-    .tags {
-        :global(b) {
-            font-weight: bold;
-        }
-    }
-</style>
diff --git a/src/lib/components/filters/customFilters.svelte b/src/lib/components/filters/customFilters.svelte
new file mode 100644
index 000000000..8fd765f27
--- /dev/null
+++ b/src/lib/components/filters/customFilters.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { ActionMenu } from '@appwrite.io/pink-svelte';
+    import FiltersModal from './filtersModal.svelte';
+    import type { Writable } from 'svelte/store';
+    import type { Column } from '$lib/helpers/types';
+
+    export let columns: Writable<Column[]>;
+    let show = false;
+</script>
+
+<ActionMenu.Root>
+    <ActionMenu.Item.Button
+        on:click={() => {
+            show = true;
+        }}>
+        Custom filters
+    </ActionMenu.Item.Button>
+</ActionMenu.Root>
+
+{#if show}
+    <FiltersModal bind:show {columns} analyticsSource="custom-filters" />
+{/if}
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index af3920fff..f8c9a3e6e 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { beforeNavigate } from '$app/navigation';
-    import { Drop, Modal } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
@@ -14,6 +14,9 @@
         ValidOperators
     } from './store';
     import { createEventDispatcher } from 'svelte';
+    import { Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
+    import { IconFilter, IconFilterLine } from '@appwrite.io/pink-icons-svelte';
+    import { Click, Submit, trackEvent } from '$lib/actions/analytics';
 
     export let query = '[]';
     export let columns: Writable<Column[]>;
@@ -23,6 +26,7 @@
     export let clearOnClick = false; // When enabled the user doesn't have to click apply to clear the filters
     export let enableApply = false;
     export let quickFilters = false;
+    export let analyticsSource = '';
     let displayQuickFilters = quickFilters;
 
     const dispatch = createEventDispatcher();
@@ -51,12 +55,14 @@
         selectedColumn = null;
         queries.clearAll();
         if (clearOnClick) {
+            trackEvent(Submit.FilterClear, { source: analyticsSource });
             queries.apply();
         }
     }
 
     function apply() {
         if (quickFilters && displayQuickFilters) {
+            trackEvent(Submit.FilterApply, { source: analyticsSource });
             dispatch('apply');
         } else if (
             selectedColumn &&
@@ -115,67 +121,73 @@
 </script>
 
 <div class="is-not-mobile">
-    <Drop bind:show={showFiltersDesktop} noArrow>
-        <slot {disabled} toggle={toggleDropdown}>
-            <Button secondary on:click={toggleDropdown} {disabled}>
-                <i class="icon-filter u-opacity-50" />
-                Filters
-                {#if applied > 0}
-                    <span class="inline-tag">
-                        {applied}
-                    </span>
-                {/if}
-            </Button>
-        </slot>
-        <svelte:fragment slot="list">
-            <div class="dropped card">
-                {#if displayQuickFilters}
-                    <slot name="quick" />
-                {:else}
-                    <p>Apply filter rules to refine the table view</p>
-                    <Content
-                        bind:columnId={selectedColumn}
-                        bind:operatorKey
-                        bind:value
-                        bind:arrayValues
-                        {columns}
-                        {singleCondition}
-                        on:apply={afterApply}
-                        on:clear={() => (applied = 0)} />
-                {/if}
-                <hr />
-                <div
-                    class="u-flex u-cross-center u-margin-block-start-16"
-                    class:u-main-end={!quickFilters}
-                    class:u-main-space-between={quickFilters}>
-                    {#if quickFilters}
-                        <Button
-                            text
-                            on:click={() => (displayQuickFilters = !displayQuickFilters)}
-                            class="u-margin-block-end-auto">
-                            {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
-                        </Button>
+    <Popover let:toggle placement="bottom-start">
+        <Button
+            secondary
+            on:click={(event) => {
+                toggle(event);
+                trackEvent(Click.FilterApplyClick, { source: analyticsSource });
+            }}
+            {disabled}>
+            <Icon icon={IconFilterLine} slot="start" size="s" />
+            Filters
+            {#if applied > 0}
+                <span class="inline-tag">
+                    {applied}
+                </span>
+            {/if}
+        </Button>
+        <svelte:fragment slot="tooltip">
+            <div style:width="420px">
+                <Layout.Stack gap="s">
+                    {#if displayQuickFilters}
+                        <slot name="quick" />
+                    {:else}
+                        <p>Apply filter rules to refine the table view</p>
+                        <Content
+                            bind:columnId={selectedColumn}
+                            bind:operatorKey
+                            bind:value
+                            bind:arrayValues
+                            {columns}
+                            {singleCondition}
+                            on:apply={afterApply}
+                            on:clear={() => (applied = 0)} />
                     {/if}
-                    <div class="u-flex u-gap-8">
-                        {#if singleCondition}
-                            <Button text on:click={toggleDropdown}>Cancel</Button>
-                        {:else}
-                            <Button disabled={applied === 0} text on:click={clearAll}>
-                                Clear all
+                    <div
+                        class="u-flex u-cross-center u-margin-block-start-16"
+                        class:u-main-end={!quickFilters}
+                        class:u-main-space-between={quickFilters}>
+                        {#if quickFilters}
+                            <Button
+                                text
+                                on:click={() => (displayQuickFilters = !displayQuickFilters)}
+                                class="u-margin-block-end-auto">
+                                {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
                             </Button>
                         {/if}
-                        <Button on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                        <div class="u-flex u-gap-8">
+                            {#if singleCondition}
+                                <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
+                            {:else}
+                                <Button size="s" disabled={applied === 0} text on:click={clearAll}>
+                                    Clear all
+                                </Button>
+                            {/if}
+                            <Button size="s" on:click={apply} disabled={isButtonDisabled}
+                                >Apply</Button>
+                        </div>
                     </div>
-                </div>
+                </Layout.Stack>
             </div>
         </svelte:fragment>
-    </Drop>
+    </Popover>
 </div>
 
 <div class="is-only-mobile">
     <slot name="mobile" {disabled} toggle={toggleMobileModal}>
-        <Button secondary on:click={toggleMobileModal} {fullWidthMobile}>
-            <i class="icon-filter u-opacity-50" />
+        <Button size="s" secondary on:click={toggleMobileModal} {fullWidthMobile}>
+            <Icon icon={IconFilter} slot="start" size="s" />
             Filters
             {#if applied > 0}
                 <span class="inline-tag">
@@ -185,11 +197,8 @@
         </Button>
     </slot>
 
-    <Modal
-        title="Filters"
-        description="Apply filter rules to refine the table view"
-        bind:show={showFiltersMobile}
-        size="big">
+    <Modal title="Filters" bind:show={showFiltersMobile}>
+        <span slot="description"> Apply filter rules to refine the table view </span>
         {#if displayQuickFilters}
             <slot name="quick" />
         {:else}
@@ -211,7 +220,6 @@
                 {#if quickFilters}
                     <Button
                         text
-                        noMargin
                         on:click={() => (displayQuickFilters = !displayQuickFilters)}
                         class="u-margin-block-end-auto">
                         {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
@@ -219,34 +227,14 @@
                 {/if}
                 <div class="u-flex u-gap-8">
                     {#if singleCondition}
-                        <Button text on:click={() => (showFiltersMobile = false)}>Cancel</Button>
+                        <Button size="s" text on:click={() => (showFiltersMobile = false)}
+                            >Cancel</Button>
                     {:else}
-                        <Button text on:click={clearAll}>Clear all</Button>
+                        <Button size="s" text on:click={clearAll}>Clear all</Button>
                     {/if}
-                    <Button on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                    <Button size="s" on:click={apply} disabled={isButtonDisabled}>Apply</Button>
                 </div>
             </div>
         </svelte:fragment>
     </Modal>
 </div>
-
-<style lang="scss">
-    .dropped {
-        border-radius: 0.5rem;
-        box-shadow: 0px 16px 32px 0px rgba(55, 59, 77, 0.04);
-
-        padding: 1rem;
-        margin-top: 0.5rem;
-
-        width: 37.5rem;
-
-        hr {
-            height: 1px;
-            width: calc(100% + 2rem);
-            background-color: hsl(var(--color-border));
-
-            margin-block-start: 1rem;
-            margin-inline: -1rem;
-        }
-    }
-</style>
diff --git a/src/lib/components/filters/filtersBottomSheet.svelte b/src/lib/components/filters/filtersBottomSheet.svelte
new file mode 100644
index 000000000..5d7137c1a
--- /dev/null
+++ b/src/lib/components/filters/filtersBottomSheet.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { capitalize } from '$lib/helpers/string';
+    import { IconChevronLeft, IconChevronRight } from '@appwrite.io/pink-icons-svelte';
+    import { BottomSheet } from '..';
+    import { addFilterAndApply, type FilterData } from './quickFilters';
+    import type { Writable } from 'svelte/store';
+    import type { Column } from '$lib/helpers/types';
+
+    let {
+        openBottomSheet = $bindable(false),
+        columns,
+        filterCols = $bindable([]),
+        analyticsSource
+    }: {
+        openBottomSheet: boolean;
+        columns: Writable<Column[]>;
+        filterCols: FilterData[];
+        analyticsSource?: string;
+    } = $props();
+
+    let subSheets = $derived(
+        filterCols.map((col) => {
+            return {
+                title: col.title,
+                top: {
+                    title: col.title,
+                    trailingIcon: IconChevronRight,
+                    items: col.options.map((o) => {
+                        return {
+                            title: capitalize(o.label),
+                            name: capitalize(o.label),
+                            options: col.options,
+                            checked: o.checked,
+                            onClick: () => {
+                                addFilterAndApply(
+                                    col.id,
+                                    col.title,
+                                    col.operator,
+                                    o.value,
+                                    generateFilterArrayValue(col, o.value),
+                                    $columns,
+                                    analyticsSource ?? ''
+                                );
+                            }
+                        };
+                    })
+                },
+                bottom: {
+                    name: 'Back',
+                    items: [
+                        {
+                            name: 'Back',
+                            leadingIcon: IconChevronLeft,
+                            navigatePrevious: true
+                        }
+                    ]
+                }
+            };
+        })
+    );
+
+    let filtersBottomSheet = $derived({
+        top: {
+            title: 'Filters',
+            items: filterCols.map((col) => {
+                return {
+                    name: col.title,
+                    onClick: () =>
+                        console.log(subSheets.find((sheet) => sheet?.title === col?.title)),
+                    subMenu: subSheets.find((sheet) => sheet?.title === col?.title),
+                    trailingIcon: IconChevronRight
+                };
+            })
+        },
+        bottom: {
+            name: 'Clear All',
+            items: [
+                {
+                    name: 'Clear All',
+                    onClick: () => {
+                        filterCols.forEach((col) => {
+                            addFilterAndApply(
+                                col.id,
+                                col.title,
+                                col.operator,
+                                null,
+                                [],
+                                $columns,
+                                analyticsSource ?? ''
+                            );
+                        });
+                    }
+                }
+            ]
+        }
+    });
+
+    function generateFilterArrayValue(col: FilterData, value: string) {
+        if (!col?.array) return [];
+
+        if (col.options?.find((opt) => opt.value === value)?.checked) {
+            return col.options
+                ?.filter((opt) => opt?.checked)
+                .map((opt) => opt.value)
+                .filter((item) => item !== value);
+        } else {
+            let arrayValue =
+                col.options?.filter((opt) => opt?.checked)?.map((opt) => opt.value) ?? [];
+            arrayValue = [...arrayValue, value];
+
+            return arrayValue;
+        }
+    }
+</script>
+
+<BottomSheet.Menu bind:isOpen={openBottomSheet} menu={filtersBottomSheet} />
diff --git a/src/lib/components/filters/filtersModal.svelte b/src/lib/components/filters/filtersModal.svelte
new file mode 100644
index 000000000..07d410ad2
--- /dev/null
+++ b/src/lib/components/filters/filtersModal.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+    import { Submit, trackEvent } from '$lib/actions/analytics';
+    import {
+        Button,
+        InputDateTime,
+        InputNumber,
+        InputSelect,
+        InputSelectCheckbox,
+        InputTags,
+        InputText
+    } from '$lib/elements/forms';
+    import type { Writable } from 'svelte/store';
+    import Modal from '../modal.svelte';
+    import { generateTag, operators, ValidOperators, type TagValue } from './store';
+    import type { Column } from '$lib/helpers/types';
+    import { TagList } from '.';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { addFilterAndApply } from './quickFilters';
+
+    export let show = false;
+    export let columns: Writable<Column[]>;
+    export let analyticsSource = '';
+    /* eslint  @typescript-eslint/no-explicit-any: 'off' */
+    let value: any = null;
+    let selectedColumn: string | null = null;
+    let operatorKey: string | null = null;
+    let arrayValues: string[] = [];
+    let localTags: TagValue[] = [];
+    let localQueries: {
+        id: string;
+        operator: string;
+        value: any;
+        arrayValues: string[];
+    }[] = [];
+
+    function apply() {
+        localQueries.forEach((query) => {
+            addFilterAndApply(
+                query.id,
+                $columns.find((c) => c.id === query.id).title,
+                query.operator as ValidOperators,
+                query.value,
+                query.arrayValues,
+                $columns,
+                analyticsSource
+            );
+        });
+
+        localTags = [];
+        localQueries = [];
+        trackEvent(Submit.FilterApply, {
+            source: analyticsSource,
+            filters: localTags
+        });
+        show = false;
+    }
+
+    function addCondition() {
+        const newTag = generateTag(selectedColumn, operatorKey, value || arrayValues);
+        if (localTags.some((t) => t.tag === newTag.tag && t.value === newTag.value)) {
+            return;
+        } else {
+            localQueries = [
+                ...localQueries,
+                {
+                    id: selectedColumn,
+                    operator: operatorKey,
+                    value: value,
+                    arrayValues: arrayValues
+                }
+            ];
+            localTags = [...localTags, newTag];
+        }
+    }
+
+    function removeCondition(tag: TagValue) {
+        localTags = localTags.filter((t) => t !== tag);
+    }
+
+    function clearAll() {
+        localTags = [];
+        localQueries = [];
+    }
+
+    $: column = $columns.find((c) => c.id === selectedColumn) as Column;
+
+    $: operatorsForColumn = Object.entries(operators)
+        .filter(([, v]) => v.types.includes(column?.type))
+        .map(([k]) => ({
+            label: k,
+            value: k
+        }));
+</script>
+
+<Modal title="Filters" bind:show>
+    <span slot="description"> Apply filter rules to refine the table view </span>
+
+    <Layout.Stack>
+        <Layout.Stack gap="s" direction="row" alignItems="flex-start">
+            <InputSelect
+                id="column"
+                options={$columns
+                    .filter((c) => c.filter !== false)
+                    .map((c) => ({
+                        label: c.title,
+                        value: c.id
+                    }))}
+                placeholder="Select column"
+                bind:value={selectedColumn} />
+            <InputSelect
+                id="operator"
+                disabled={!column}
+                options={operatorsForColumn}
+                placeholder="Select operator"
+                bind:value={operatorKey} />
+        </Layout.Stack>
+        {#if column && operatorKey}
+            {#if column?.array}
+                {#if column.format === 'enum'}
+                    <InputSelectCheckbox
+                        name="value"
+                        bind:tags={arrayValues}
+                        placeholder="Select value"
+                        options={column?.elements?.map((e) => ({
+                            label: e?.label ?? e,
+                            value: e?.value ?? e,
+                            checked: arrayValues.includes(e?.value ?? e)
+                        }))}>
+                    </InputSelectCheckbox>
+                {:else}
+                    <InputTags
+                        label="values"
+                        id="value"
+                        bind:tags={arrayValues}
+                        placeholder="Enter values" />
+                {/if}
+            {:else if column.format === 'enum'}
+                <InputSelect
+                    id="value"
+                    bind:value
+                    placeholder="Select value"
+                    options={column?.elements?.map((e) => ({
+                        label: e?.label ?? e,
+                        value: e?.value ?? e
+                    }))} />
+            {:else if column.type === 'integer' || column.type === 'double'}
+                <InputNumber id="value" bind:value placeholder="Enter value" />
+            {:else if column.type === 'boolean'}
+                <InputSelect
+                    id="value"
+                    placeholder="Select a value"
+                    required={true}
+                    options={[
+                        { label: 'True', value: true },
+                        { label: 'False', value: false }
+                    ].filter(Boolean)}
+                    bind:value />
+            {:else if column.type === 'datetime'}
+                {#key value}
+                    <InputDateTime id="value" bind:value step={60} />
+                {/key}
+            {:else}
+                <InputText id="value" bind:value placeholder="Enter value" />
+            {/if}
+        {/if}
+        <div>
+            <Button text on:click={addCondition}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add condition
+            </Button>
+        </div>
+    </Layout.Stack>
+    {#if localTags?.length}
+        <Layout.Stack direction="row" gap="s" alignItems="center" wrap="wrap">
+            <TagList tags={localTags} on:remove={(e) => removeCondition(e.detail)} />
+        </Layout.Stack>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        {#if localTags?.length}
+            <Button size="s" text on:click={clearAll}>Clear all</Button>
+        {:else}
+            <Button size="s" text on:click={() => (show = false)}>Cancel</Button>
+        {/if}
+        <Button size="s" on:click={apply} disabled={!localTags?.length}>Apply</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/filters/index.ts b/src/lib/components/filters/index.ts
index 7d3b7f3d2..5eed4dc72 100644
--- a/src/lib/components/filters/index.ts
+++ b/src/lib/components/filters/index.ts
@@ -1,3 +1,7 @@
 export { default as Filters } from './filters.svelte';
 export { default as TagList } from './tagList.svelte';
+export { default as CustomFilters } from './customFilters.svelte';
+export { default as QuickFilters } from './quickFilters.svelte';
+export { default as ParsedTagList } from './parsedTagList.svelte';
 export { hasPageQueries, queryParamToMap, queries } from '$lib/components/filters/store';
+export { default as FiltersBottomSheet } from './filtersBottomSheet.svelte';
diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte
new file mode 100644
index 000000000..edbd5161e
--- /dev/null
+++ b/src/lib/components/filters/parsedTagList.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { Icon, Layout, Tag, Tooltip } from '@appwrite.io/pink-svelte';
+    import { queries, tagFormat, tags } from './store';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { parsedTags } from './setFilters';
+    import { Button } from '$lib/elements/forms';
+</script>
+
+{#if $parsedTags?.length}
+    <Layout.Stack direction="row" gap="s" wrap="wrap" alignItems="center" inline>
+        {#each $parsedTags as tag (tag.tag)}
+            <span>
+                <Tooltip
+                    disabled={Array.isArray(tag.value) ? tag.value?.length < 3 : true}
+                    maxWidth="600px">
+                    <Tag
+                        size="s"
+                        on:click={() => {
+                            const t = $tags.filter((t) => t.tag.includes(tag.tag.split(' ')[0]));
+                            t.forEach((t) => (t ? queries.removeFilter(t) : null));
+                            queries.apply();
+                            parsedTags.update((tags) => tags.filter((t) => t.tag !== tag.tag));
+                        }}>
+                        {#key tag.tag}
+                            <span use:tagFormat>{tag.tag}</span>
+                        {/key}
+                        <Icon icon={IconX} size="s" slot="end" />
+                    </Tag>
+                    <span slot="tooltip">{tag?.value?.toString()}</span>
+                </Tooltip>
+            </span>
+        {/each}
+        <Button
+            size="s"
+            text
+            on:click={() => {
+                queries.clearAll();
+                queries.apply();
+                parsedTags.set([]);
+            }}>Clear all</Button>
+    </Layout.Stack>
+{/if}
diff --git a/src/lib/components/filters/quickFilters.svelte b/src/lib/components/filters/quickFilters.svelte
new file mode 100644
index 000000000..76bbf90c5
--- /dev/null
+++ b/src/lib/components/filters/quickFilters.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import type { Column } from '$lib/helpers/types';
+    import { type Writable } from 'svelte/store';
+    import { CustomFilters } from '$lib/components/filters';
+    import { addFilterAndApply, type FilterData } from './quickFilters';
+    import { parsedTags } from './setFilters';
+    import Menu from '../menu/menu.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconFilterLine } from '@appwrite.io/pink-icons-svelte';
+    import QuickfiltersSubMenu from './quickfiltersSubMenu.svelte';
+
+    let {
+        columns,
+        filterCols,
+        analyticsSource
+    }: {
+        columns: Writable<Column[]>;
+        filterCols: FilterData[];
+        analyticsSource?: string;
+    } = $props();
+</script>
+
+<Menu>
+    <Button secondary badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
+        <Icon icon={IconFilterLine} slot="start" size="s" />
+        Filters
+    </Button>
+    <svelte:fragment slot="menu">
+        {#each filterCols.filter((f) => f?.options) as filter (filter.title + filter.id)}
+            {#if filter.options}
+                <QuickfiltersSubMenu
+                    {filter}
+                    variant={filter?.array ? 'checkbox' : 'radio'}
+                    on:add={(e) => {
+                        addFilterAndApply(
+                            filter.id,
+                            filter.title,
+                            filter.operator,
+                            e.detail.value,
+                            filter?.array
+                                ? (filter.options
+                                      .filter((opt) => opt.checked)
+                                      .map((opt) => opt.value) ?? [])
+                                : [],
+                            $columns,
+                            analyticsSource
+                        );
+                    }}
+                    on:clear={() => {
+                        addFilterAndApply(
+                            filter.id,
+                            filter.title,
+                            filter.operator,
+                            null,
+                            [],
+                            $columns,
+                            analyticsSource
+                        );
+                    }} />
+            {/if}
+        {/each}
+    </svelte:fragment>
+
+    <svelte:fragment slot="end">
+        <CustomFilters {columns} />
+    </svelte:fragment>
+</Menu>
diff --git a/src/lib/components/filters/quickFilters.ts b/src/lib/components/filters/quickFilters.ts
new file mode 100644
index 000000000..dce8e823d
--- /dev/null
+++ b/src/lib/components/filters/quickFilters.ts
@@ -0,0 +1,77 @@
+import type { Column } from '$lib/helpers/types';
+import { get } from 'svelte/store';
+import { addFilter, queries, tags, ValidOperators } from './store';
+import { Submit, trackEvent } from '$lib/actions/analytics';
+
+export type FilterData = {
+    title: string;
+    id: string;
+    array: boolean;
+    show: boolean;
+    tag: string;
+    operator: ValidOperators;
+    options: { value: string; label: string; checked: boolean }[];
+};
+
+export function buildFilterCol(col: Column, customOperator = null): FilterData {
+    return {
+        title: col.title,
+        id: col.id,
+        show: false,
+        array: col?.array,
+        tag: null,
+        operator: customOperator ?? ValidOperators.Equal,
+        options: col?.elements?.map((element) => {
+            return {
+                value: (element?.value ?? element) as string,
+                label: (element?.label ?? element) as string,
+                checked: undefined
+            };
+        })
+    };
+}
+
+export function addFilterAndApply(
+    colId: string,
+    colTitle: string,
+    operator: ValidOperators,
+    value: string,
+    arrayValues: string[] = [],
+    columns: Column[],
+    analyticsSource: string
+) {
+    const tagList = get(tags).filter((tag) => tag.tag.includes(colTitle));
+    tagList.forEach((tag) => queries.removeFilter(tag));
+    if (value || arrayValues?.length) {
+        if (colId === 'sourceSize' || colId === 'buildSize') {
+            addSizeFilter(value, colId, columns);
+        } else if (colId === 'statusCode') {
+            addStatusCodeFilter(value, colId, columns);
+        } else if (colId === '$createdAt' || colId === '$updatedAt' || colId === 'buildDuration') {
+            addDateFilter(value, colId, columns);
+        } else {
+            addFilter(columns, colId, operator, value, arrayValues);
+        }
+    }
+    queries.apply();
+    trackEvent(Submit.ApplyQuickFilter, {
+        source: analyticsSource,
+        column: colId,
+        value: value || arrayValues.join(', ')
+    });
+}
+
+export function addStatusCodeFilter(value: string, colId: string, columns: Column[]) {
+    addFilter(columns, colId, ValidOperators.LessThanOrEqual, parseInt(value));
+    addFilter(columns, colId, ValidOperators.GreaterThanOrEqual, parseInt(value) - 99);
+}
+export function addDateFilter(value: string, colId: string, columns: Column[]) {
+    const now = new Date();
+    const isoValue = new Date(now.getTime() - parseInt(value));
+    addFilter(columns, colId, ValidOperators.GreaterThanOrEqual, isoValue.toISOString());
+    addFilter(columns, colId, ValidOperators.LessThanOrEqual, now.toISOString());
+}
+
+export function addSizeFilter(value: string, colId: string, columns: Column[]) {
+    addFilter(columns, colId, ValidOperators.GreaterThanOrEqual, value);
+}
diff --git a/src/lib/components/filters/quickfiltersSubMenu.svelte b/src/lib/components/filters/quickfiltersSubMenu.svelte
new file mode 100644
index 000000000..9b4c3275c
--- /dev/null
+++ b/src/lib/components/filters/quickfiltersSubMenu.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { capitalize } from '$lib/helpers/string';
+    import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu, Card, Layout, Selector } from '@appwrite.io/pink-svelte';
+    import { createMenubar, melt } from '@melt-ui/svelte';
+    import { createEventDispatcher } from 'svelte';
+    import type { FilterData } from './quickFilters';
+
+    export let filter: FilterData;
+    export let variant: 'checkbox' | 'radio' = 'checkbox';
+
+    const {
+        builders: { createMenu }
+    } = createMenubar();
+
+    const {
+        elements: { item: item, separator: separator },
+        builders: { createSubmenu: createSubmenu, createMenuRadioGroup, createCheckboxItem }
+    } = createMenu();
+
+    const {
+        elements: { checkboxItem: checkboxItem }
+    } = createCheckboxItem();
+
+    const {
+        elements: { radioGroup: radioGroup }
+    } = createMenuRadioGroup({});
+
+    const {
+        elements: { subMenu: subMenu, subTrigger: subTrigger }
+    } = createSubmenu();
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<div use:melt={$subTrigger}>
+    <ActionMenu.Root>
+        <ActionMenu.Item.Button trailingIcon={IconChevronRight}>
+            {filter.title}
+        </ActionMenu.Item.Button>
+    </ActionMenu.Root>
+</div>
+
+<div class="menu subMenu" use:melt={$subMenu}>
+    <Card.Base padding="none">
+        <div use:melt={$radioGroup}>
+            {#each filter.options as option (filter.title + option.value + option.label + option.checked)}
+                {#if variant === 'radio'}
+                    <div use:melt={$item}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button
+                                on:click={() => {
+                                    option.checked = !option.checked;
+                                    dispatch('add', {
+                                        value: option.value
+                                    });
+                                }}>
+                                {capitalize(option.label)}
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </div>
+                {:else}
+                    <div use:melt={$checkboxItem}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button
+                                on:click={() => {
+                                    option.checked = !option.checked;
+                                    dispatch('add', {
+                                        value: option.checked
+                                    });
+                                }}>
+                                <Layout.Stack direction="row" gap="s">
+                                    <Selector.Checkbox
+                                        checked={option.checked}
+                                        on:click={() => {
+                                            option.checked = !option.checked;
+                                            dispatch('add', {
+                                                value: option.checked
+                                            });
+                                        }}
+                                        size="s" />
+                                    {capitalize(option.label)}
+                                </Layout.Stack>
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </div>
+                {/if}
+            {/each}
+            {#if filter.options.some((option) => option.checked)}
+                <div class="separator" use:melt={$separator}></div>
+                <div use:melt={$item}>
+                    <ActionMenu.Root>
+                        <ActionMenu.Item.Button
+                            on:click={() => {
+                                dispatch('clear');
+                            }}>
+                            Clear all
+                        </ActionMenu.Item.Button>
+                    </ActionMenu.Root>
+                </div>
+            {/if}
+        </div>
+    </Card.Base>
+</div>
+
+<style>
+    .menu {
+        min-width: 244px;
+        z-index: 20;
+    }
+</style>
diff --git a/src/lib/components/filters/setFilters.ts b/src/lib/components/filters/setFilters.ts
new file mode 100644
index 000000000..c59a2408c
--- /dev/null
+++ b/src/lib/components/filters/setFilters.ts
@@ -0,0 +1,190 @@
+import type { Column } from '$lib/helpers/types';
+import { get, writable } from 'svelte/store';
+import { type FilterData } from './quickFilters';
+import { tags, type TagValue } from './store';
+
+export const parsedTags = writable<TagValue[]>([]);
+
+export function setFilters(localTags: TagValue[], filterCols: FilterData[], $columns: Column[]) {
+    if (!localTags?.length) {
+        filterCols.forEach((filter) => {
+            resetOptions(filter);
+            cleanOldTags(filter?.title);
+        });
+    } else {
+        filterCols.forEach((filter) => {
+            const id = filter?.id?.toLowerCase();
+            if (id?.includes('duration')) {
+                setTimeFilter(filter, $columns);
+            } else if (id?.includes('size')) {
+                setSizeFilter(filter, $columns);
+            } else if (id?.includes('statuscode')) {
+                setStatusCodeFilter(filter, $columns);
+            } else if (id === '$createdat' || id === '$updatedat') {
+                setDateFilter(filter, $columns);
+            } else {
+                setFilterData(filter);
+            }
+        });
+
+        // Reassigning the filters to trigger reactivity
+        filterCols = [...filterCols];
+    }
+}
+
+export function setFilterData(filter: FilterData) {
+    const tagData = get(tags).find((tag) => tag.tag.includes(`**${filter.title}**`));
+    if (tagData) {
+        if (Array.isArray(tagData.value) && tagData.value?.length) {
+            const values = tagData.value as string[];
+            filter.options.forEach((option) => {
+                option.checked = values.includes(option.value);
+            });
+        }
+        cleanOldTags(filter?.title);
+        const newTag = {
+            tag: tagData.tag.replace(',', ' or '),
+            value: tagData.value
+        };
+
+        parsedTags.update((tags) => {
+            tags.push(newTag);
+            return tags;
+        });
+    } else {
+        resetOptions(filter);
+        cleanOldTags(filter?.title);
+    }
+}
+
+export function setTimeFilter(filter: FilterData, columns: Column[]) {
+    const col = columns.find((c) => c.id === filter.id);
+    const timeTag = get(tags).find((tag) => tag.tag.includes(`**${filter.title}**`));
+    if (timeTag) {
+        const now = new Date();
+
+        const diff = now.getTime() - new Date(timeTag.value as string).getTime();
+        const ranges = col.elements as { value: string; label: string }[];
+        const dateRange = ranges.reduce((prev, curr) => {
+            if (parseInt(curr.value) < diff && curr.value > prev.value) {
+                return curr;
+            }
+            return prev;
+        });
+        if (dateRange) {
+            const newTag = {
+                tag: `**${filter.title}** is **${dateRange.label}**`,
+                value: timeTag.value
+            };
+
+            cleanOldTags(filter?.title);
+
+            parsedTags.update((tags) => {
+                tags.push(newTag);
+                return tags;
+            });
+        }
+    } else {
+        cleanOldTags(filter?.title);
+    }
+}
+
+export function setSizeFilter(filter: FilterData, columns: Column[]) {
+    const sizeTag = get(tags).find((tag) => tag.tag.includes(`**${filter.title}**`));
+    const col = columns.find((c) => c.id === filter.id);
+    if (sizeTag) {
+        const size = sizeTag.value as string;
+        const ranges = col.elements as { value: string; label: string }[];
+        // find smallest range that is bigger than size
+        const sizeRange = ranges.reduce((prev, curr) => {
+            if (parseInt(size) >= parseInt(curr.value)) {
+                return curr;
+            }
+            return prev;
+        });
+        if (sizeRange) {
+            cleanOldTags(filter?.title);
+
+            const newTag = {
+                tag: `**${filter.title}** is **${sizeRange.label}**`,
+                value: sizeTag.value
+            };
+            parsedTags.update((tags) => {
+                tags.push(newTag);
+                return tags;
+            });
+        }
+    } else {
+        cleanOldTags(filter?.title);
+    }
+}
+
+export function setStatusCodeFilter(filter: FilterData, columns: Column[]) {
+    const statusCodeTag = get(tags).find((tag) => tag.tag.includes(`**${filter.title}**`));
+    const col = columns.find((c) => c.id === filter.id);
+
+    if (statusCodeTag) {
+        const ranges = col.elements as { value: number; label: string }[];
+
+        const codeRange = ranges.find((c) => c?.value && c.value === statusCodeTag.value);
+        if (codeRange) {
+            cleanOldTags(filter?.title);
+            const newTag = {
+                tag: `**${filter.title}** is **${codeRange.label}**`,
+                value: statusCodeTag.value
+            };
+            console.log(codeRange);
+            parsedTags.update((tags) => {
+                tags.push(newTag);
+                return tags;
+            });
+        }
+    } else {
+        cleanOldTags(filter?.title);
+    }
+}
+
+export function setDateFilter(filter: FilterData, columns: Column[]) {
+    const dateTag = get(tags).find((tag) => tag.tag.includes(`**${filter.title}**`));
+    const col = columns.find((c) => c.id === filter.id);
+    if (dateTag) {
+        const now = new Date();
+
+        const diff = now.getTime() - new Date(dateTag.value as string).getTime();
+        const ranges = col.elements as { value: string; label: string }[];
+        const dateRange = ranges.reduce((prev, curr) => {
+            if (parseInt(curr.value) < diff && curr.value > prev.value) {
+                return curr;
+            }
+            return prev;
+        });
+        if (dateRange) {
+            cleanOldTags(filter?.title);
+            const newTag = {
+                tag: `**${filter.title}** is **${dateRange.label}**`,
+                value: dateTag.value
+            };
+            parsedTags.update((tags) => {
+                tags.push(newTag);
+                return tags;
+            });
+        }
+    } else {
+        cleanOldTags(filter?.title);
+    }
+}
+
+function cleanOldTags(title: string) {
+    if (!title) return;
+    parsedTags.update((tags) => {
+        tags = tags.filter((tag) => !tag.tag.includes(`**${title}**`));
+        return tags;
+    });
+}
+
+export function resetOptions(filter: FilterData) {
+    if (!filter?.options) return;
+    filter.options.forEach((option) => {
+        option.checked = false;
+    });
+}
diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts
index 10cd6f183..6be45f6a0 100644
--- a/src/lib/components/filters/store.ts
+++ b/src/lib/components/filters/store.ts
@@ -1,5 +1,4 @@
 import { goto } from '$app/navigation';
-
 import { derived, get, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import deepEqual from 'deep-equal';
@@ -245,30 +244,13 @@ function formatArray(array: string[]) {
     }
 }
 
-function generateDefaultOperators() {
+export function generateDefaultOperators() {
     const operators: Record<string, Operator> = {};
     operatorsDefault.forEach((operator, operatorName) => {
         operators[operatorName] = {
             toQuery: operator.query,
             toTag: (attribute, input = null, type = null) => {
-                if (input === null) {
-                    return {
-                        value: '',
-                        tag: `**${attribute}** ${operatorName}`
-                    };
-                } else if (Array.isArray(input) && input.length > 2) {
-                    return {
-                        value: input,
-                        tag: `**${attribute}** ${operatorName} **${formatArray(input)}** `
-                    };
-                } else if (type === ValidTypes.Datetime) {
-                    return {
-                        value: input,
-                        tag: `**${attribute}** ${operatorName} **${toLocaleDateTime(input.toString())}**`
-                    };
-                } else {
-                    return { value: input, tag: `**${attribute}** ${operatorName} **${input}**` };
-                }
+                return generateTag(attribute, operatorName, input, type);
             },
             types: operator.types,
             hideInput: operator.hideInput
@@ -277,6 +259,27 @@ function generateDefaultOperators() {
     return operators;
 }
 
+export function generateTag(attribute: string, operatorName: string, input = null, type = null) {
+    if (input === null) {
+        return {
+            value: '',
+            tag: `**${attribute}** ${operatorName}`
+        };
+    } else if (Array.isArray(input) && input.length > 2) {
+        return {
+            value: input,
+            tag: `**${attribute}** ${operatorName} **${formatArray(input)}** `
+        };
+    } else if (type === ValidTypes.Datetime) {
+        return {
+            value: input,
+            tag: `**${attribute}** ${operatorName} **${toLocaleDateTime(input.toString())}**`
+        };
+    } else {
+        return { value: input, tag: `**${attribute}** ${operatorName} **${input}**` };
+    }
+}
+
 export const operators = generateDefaultOperators();
 
 export function tagFormat(node: HTMLElement) {
diff --git a/src/lib/components/filters/tagList.svelte b/src/lib/components/filters/tagList.svelte
index 7747e0b3c..33389514b 100644
--- a/src/lib/components/filters/tagList.svelte
+++ b/src/lib/components/filters/tagList.svelte
@@ -1,23 +1,29 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
-    import { queries, tagFormat, tags } from './store';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { tagFormat, type TagValue } from './store';
+    import { Icon, Tag, Tooltip } from '@appwrite.io/pink-svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    export let tags: TagValue[];
+    const dispatch = createEventDispatcher();
 </script>
 
-{#each $tags as tag (tag)}
-    <button
-        use:tooltip={{
-            content: tag?.value?.toString(),
-            disabled: Array.isArray(tag.value) ? tag.value?.length < 3 : true
-        }}
-        type="button"
-        class="tag"
-        on:click|preventDefault={() => {
-            queries.removeFilter(tag);
-            queries.apply();
-        }}>
-        <span class="text" use:tagFormat>
-            {tag.tag}
-        </span>
-        <i class="icon-x" />
-    </button>
+{#each tags as tag (tag)}
+    <span>
+        <Tooltip
+            disabled={Array.isArray(tag.value) ? tag.value?.length < 3 : true}
+            maxWidth="600px">
+            <Tag
+                size="s"
+                on:click={() => {
+                    dispatch('remove', tag);
+                }}>
+                {#key tag.tag}
+                    <span use:tagFormat>{tag.tag}</span>
+                {/key}
+                <Icon icon={IconX} size="s" slot="end" />
+            </Tag>
+            <span slot="tooltip">{tag?.value?.toString()}</span>
+        </Tooltip>
+    </span>
 {/each}
diff --git a/src/lib/components/floatingActionBar.svelte b/src/lib/components/floatingActionBar.svelte
deleted file mode 100644
index 9c1159b77..000000000
--- a/src/lib/components/floatingActionBar.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-    import { portal } from '$lib/actions/portal';
-    import { fly } from 'svelte/transition';
-
-    export let show = false;
-</script>
-
-{#if show}
-    <div class="floating-action-bar" transition:fly={{ y: '6rem' }} use:portal>
-        <slot />
-    </div>
-{/if}
-
-<style lang="scss">
-    .floating-action-bar {
-        position: fixed;
-        bottom: 2rem;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 100;
-
-        border-radius: 0.5rem;
-        padding: 0.75rem 1rem;
-
-        width: clamp(0px, calc(100vw - 4rem), 32.5rem);
-    }
-
-    :global(.theme-dark) .floating-action-bar {
-        border: 1px solid hsl(var(--color-neutral-85));
-        background: hsl(var(--color-neutral-90));
-        box-shadow: 0px 6px 16px 8px hsl(var(--color-neutral-105));
-    }
-
-    :global(.theme-light) .floating-action-bar {
-        border: 1px solid hsl(var(--color-neutral-15));
-        background: hsl(var(--color-neutral-0));
-        box-shadow: 0px 6px 16px 0px rgba(55, 59, 77, 0.14);
-    }
-</style>
diff --git a/src/lib/components/git/connectBehaviour.svelte b/src/lib/components/git/connectBehaviour.svelte
new file mode 100644
index 000000000..ae0da51eb
--- /dev/null
+++ b/src/lib/components/git/connectBehaviour.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { LabelCard } from '$lib/components';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { Layout } from '@appwrite.io/pink-svelte';
+
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
+    export let connectBehaviour: 'now' | 'later' = isVcsEnabled ? 'now' : 'later';
+</script>
+
+<Layout.Grid columns={2} columnsXS={1}>
+    <LabelCard
+        value="now"
+        bind:group={connectBehaviour}
+        disabled={!isVcsEnabled}
+        title="Connect your repository">
+        Clone this template into a new Git repository or link it to an existing one.
+    </LabelCard>
+    <LabelCard value="later" bind:group={connectBehaviour}>
+        <svelte:fragment slot="title">Connect later</svelte:fragment>
+        Deploy now and connect your version control later via CLI or Git integration in your settings.
+    </LabelCard>
+</Layout.Grid>
diff --git a/src/lib/components/git/connectGit.svelte b/src/lib/components/git/connectGit.svelte
new file mode 100644
index 000000000..9dbca0fc7
--- /dev/null
+++ b/src/lib/components/git/connectGit.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import Button from '$lib/elements/forms/button.svelte';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { isSelfHosted } from '$lib/system';
+    import { connectGitHub } from '$lib/stores/git';
+
+    export let callbackState: Record<string, string> = null;
+
+    let isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
+</script>
+
+<Layout.Stack>
+    {#if !isVcsEnabled && isSelfHosted}
+        <Alert.Inline status="info" title="Installing Git on a self-hosted instance ">
+            <Layout.Stack>
+                <p>
+                    Before installing Git in a locally hosted Appwrite project, ensure your
+                    environment variables are configured.
+                </p>
+                <div>
+                    <Button
+                        compact
+                        external
+                        href="https://appwrite.io/docs/advanced/self-hosting/functions#git"
+                        >Learn more</Button>
+                </div>
+            </Layout.Stack>
+        </Alert.Inline>
+    {/if}
+    <Card.Base padding="none" border="dashed">
+        <Empty
+            type="secondary"
+            title="No installation was added to the project yet"
+            description="Add an installation to connect repositories">
+            <svelte:fragment slot="actions">
+                <Button
+                    secondary
+                    href={connectGitHub(callbackState).toString()}
+                    disabled={!isVcsEnabled}>
+                    <Icon slot="start" icon={IconGithub} />
+                    Connect to GitHub
+                </Button>
+            </svelte:fragment>
+        </Empty>
+    </Card.Base>
+</Layout.Stack>
diff --git a/src/lib/components/git/connectRepoModal.svelte b/src/lib/components/git/connectRepoModal.svelte
new file mode 100644
index 000000000..bf2685c65
--- /dev/null
+++ b/src/lib/components/git/connectRepoModal.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
+    import { Link } from '$lib/elements';
+    import { NewRepository, Repositories } from '$lib/components/git';
+    import ConnectGit from '$lib/components/git/connectGit.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import RepositoryBehaviour from '$lib/components/git/repositoryBehaviour.svelte';
+    import { page } from '$app/state';
+
+    let {
+        show = $bindable(false),
+        product,
+        callbackState = null,
+        onlyExisting = false,
+        connect = async () => {}
+    }: {
+        show?: boolean;
+        product: 'functions' | 'sites';
+        callbackState?: Record<string, string>;
+        onlyExisting?: boolean;
+        connect?: (installationId: string, repositoryId: string) => Promise<void>;
+    } = $props();
+
+    let repositoryBehaviour: 'new' | 'existing' | undefined = $state(
+        onlyExisting ? 'existing' : undefined
+    );
+    let repositoryName = $state('');
+    let repositoryPrivate = $state(true);
+    let selectedInstallationId = $state('');
+    let selectedRepository = $state('');
+    let installations = $state({ installations: [], total: 0 });
+    let error = $state('');
+
+    onMount(async () => {
+        installations = await sdk
+            .forProject(page.params.region, page.params.project)
+            .vcs.listInstallations();
+        if (!$installation?.$id && installations?.total) {
+            $installation = installations.installations[0];
+        }
+        selectedInstallationId = installations.total ? installations.installations[0]?.$id : '';
+        if (installations?.total) {
+            repositoryBehaviour = 'existing';
+        }
+    });
+
+    async function connectRepo() {
+        try {
+            if (repositoryBehaviour === 'new') {
+                const repo = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.createRepository($installation.$id, repositoryName, repositoryPrivate);
+                repository.set(repo);
+                selectedRepository = repo.id;
+            }
+
+            await connect(selectedInstallationId, selectedRepository);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Repository connected successfully'
+            });
+        } catch (e) {
+            error = e.message;
+        }
+    }
+</script>
+
+<Modal
+    title="Connect repository"
+    bind:show
+    hideFooter={!repositoryBehaviour}
+    onSubmit={connectRepo}
+    bind:error>
+    <span slot="description">
+        Connect your {product === 'functions' ? 'function' : 'site'} to an existing repository or create
+        a new one.
+    </span>
+    {#if !!installations?.total}
+        <Layout.Stack gap="xl">
+            {#if !onlyExisting}
+                <RepositoryBehaviour bind:repositoryBehaviour />
+            {/if}
+            {#if repositoryBehaviour === 'new'}
+                <NewRepository
+                    bind:repositoryName
+                    bind:repositoryPrivate
+                    bind:selectedInstallationId
+                    {installations} />
+            {:else}
+                <Repositories
+                    bind:selectedRepository
+                    {product}
+                    action="button"
+                    {callbackState}
+                    connect={(e) => {
+                        trackEvent(Click.ConnectRepositoryClick, {
+                            from: product
+                        });
+                        repository.set(e);
+                        repositoryName = e.name;
+                        selectedRepository = e.id;
+                        connectRepo();
+                    }} />
+            {/if}
+        </Layout.Stack>
+    {:else}
+        <ConnectGit {callbackState} />
+    {/if}
+    <svelte:fragment slot="footer">
+        {#if repositoryBehaviour === 'existing'}
+            <Layout.Stack>
+                <Link variant="quiet" href="#/">
+                    <Layout.Stack direction="row" gap="xs">
+                        Missing a repository? check your permissions <Icon
+                            icon={IconArrowSmRight} />
+                    </Layout.Stack>
+                </Link>
+            </Layout.Stack>
+        {:else if repositoryBehaviour === 'new'}
+            <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
+            <Button size="s" submit disabled={!repositoryName || !$installation?.$id}>
+                Create
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/git/deploymentCreatedBy.svelte b/src/lib/components/git/deploymentCreatedBy.svelte
new file mode 100644
index 000000000..2a97c7470
--- /dev/null
+++ b/src/lib/components/git/deploymentCreatedBy.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Link from '$lib/elements/link.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+
+    export let deployment: Models.Deployment;
+</script>
+
+<p>
+    <DualTimeView time={deployment.$updatedAt} />
+    {#if deployment.providerCommitAuthor}
+        by
+        <Link href={deployment.providerCommitAuthorUrl} external>
+            {deployment.providerCommitAuthor}
+        </Link>
+    {/if}
+</p>
diff --git a/src/lib/components/git/deploymentDomains.svelte b/src/lib/components/git/deploymentDomains.svelte
new file mode 100644
index 000000000..f588cc57c
--- /dev/null
+++ b/src/lib/components/git/deploymentDomains.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { Trim } from '$lib/components';
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { protocol } from '$routes/(console)/store';
+    import type { Models } from '@appwrite.io/console';
+    import { IconExternalLink, IconQrcode } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu, Icon, Layout, Popover, Tag, Typography } from '@appwrite.io/pink-svelte';
+
+    let {
+        domains,
+        hideQRCode = true,
+        showQR = () => {}
+    }: {
+        domains: Models.ProxyRuleList;
+        hideQRCode?: boolean;
+        showQR?: (show: boolean) => void;
+    } = $props();
+
+    let sortedDomains = $derived(
+        domains?.rules?.sort((a, b) => {
+            if (a?.trigger === 'manual' && b?.trigger !== 'manual') {
+                return -1;
+            } else if (a?.trigger !== 'manual' && b?.trigger === 'manual') {
+                return 1;
+            }
+            return 0;
+        })
+    );
+</script>
+
+<Layout.Stack gap="xxs" direction="row" alignItems="center">
+    {#if domains?.total}
+        <Link external href={`${$protocol}${sortedDomains[0]?.domain}`} variant="muted">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Trim alternativeTrim>
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                        {sortedDomains[0]?.domain}
+                    </Typography.Text>
+                </Trim>
+            </Layout.Stack>
+        </Link>
+
+        {#if sortedDomains.length > 1}
+            <Popover padding="none" let:toggle placement="bottom-end">
+                <Tag size="xs" on:click={toggle}>
+                    +{sortedDomains.length - 1}
+                </Tag>
+                <svelte:fragment slot="tooltip">
+                    <ActionMenu.Root width="20px">
+                        {#each sortedDomains as rule, i}
+                            {#if i !== 0}
+                                <ActionMenu.Item.Anchor
+                                    href={`${$protocol}${rule.domain}`}
+                                    external
+                                    leadingIcon={IconExternalLink}>
+                                    <Trim alternativeTrim>
+                                        {rule.domain}
+                                    </Trim>
+                                </ActionMenu.Item.Anchor>
+                            {/if}
+                        {/each}
+                    </ActionMenu.Root>
+                </svelte:fragment>
+            </Popover>
+        {/if}
+        {#if !hideQRCode}
+            <Button icon secondary size="xs" on:click={() => showQR(true)}>
+                <Icon icon={IconQrcode} size="s" />
+            </Button>
+        {/if}
+    {:else}
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+            No domains available
+        </Typography.Text>
+    {/if}
+</Layout.Stack>
diff --git a/src/lib/components/git/deploymentSource.svelte b/src/lib/components/git/deploymentSource.svelte
new file mode 100644
index 000000000..99d7aebfc
--- /dev/null
+++ b/src/lib/components/git/deploymentSource.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { Trim } from '$lib/components';
+    import { Link } from '$lib/elements';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        IconCode,
+        IconGitBranch,
+        IconGitCommit,
+        IconGithub,
+        IconTerminal
+    } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu, Layout, Popover, Icon } from '@appwrite.io/pink-svelte';
+
+    let {
+        deployment
+    }: {
+        deployment: Models.Deployment;
+    } = $props();
+</script>
+
+{#if deployment.type === 'vcs'}
+    <Popover padding="none" let:toggle>
+        <div>
+            <Link
+                on:click={(e) => {
+                    e.preventDefault();
+                    toggle(e);
+                }}>
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
+                    <Icon icon={IconGithub} size="s" /> GitHub
+                </Layout.Stack>
+            </Link>
+        </div>
+        <svelte:fragment slot="tooltip">
+            <ActionMenu.Root>
+                <ActionMenu.Item.Anchor
+                    href={deployment.providerRepositoryUrl}
+                    external
+                    leadingIcon={IconGithub}>
+                    {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+                </ActionMenu.Item.Anchor>
+                <ActionMenu.Item.Anchor
+                    href={deployment.providerBranchUrl}
+                    external
+                    leadingIcon={IconGitBranch}>
+                    {deployment.providerBranch}
+                </ActionMenu.Item.Anchor>
+                {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
+                    <ActionMenu.Item.Anchor
+                        href={deployment.providerCommitUrl}
+                        external
+                        leadingIcon={IconGitCommit}>
+                        <Trim alternativeTrim>
+                            {deployment?.providerCommitHash?.substring(0, 7)}
+                            {deployment.providerCommitMessage.substring(0, 15)}...
+                        </Trim>
+                    </ActionMenu.Item.Anchor>
+                {/if}
+            </ActionMenu.Root>
+        </svelte:fragment>
+    </Popover>
+{:else if deployment.type === 'manual'}
+    <Layout.Stack gap="s" direction="row" alignItems="center">
+        <Icon icon={IconCode} size="s" /> <span>Manual</span>
+    </Layout.Stack>
+{:else if deployment.type === 'cli'}
+    <Layout.Stack gap="s" direction="row" alignItems="center">
+        <Icon icon={IconTerminal} size="s" /> <span>CLI</span>
+    </Layout.Stack>
+{:else}
+    <span>N/A</span>
+{/if}
diff --git a/src/lib/components/git/index.ts b/src/lib/components/git/index.ts
new file mode 100644
index 000000000..a5cab5eed
--- /dev/null
+++ b/src/lib/components/git/index.ts
@@ -0,0 +1,11 @@
+export { default as Repositories } from './repositories.svelte';
+export { default as ConnectGit } from './connectGit.svelte';
+export { default as NewRepository } from './newRepository.svelte';
+export { default as RepositoryBehaviour } from './repositoryBehaviour.svelte';
+export { default as DeploymentCreatedBy } from './deploymentCreatedBy.svelte';
+export { default as DeploymentSource } from './deploymentSource.svelte';
+export { default as DeploymentDomains } from './deploymentDomains.svelte';
+export { default as ConnectBehaviour } from './connectBehaviour.svelte';
+export { default as ProductionBranchFieldset } from './productionBranchFieldset.svelte';
+export { default as RepositoryCard } from './repositoryCard.svelte';
+export { default as ConnectRepoModal } from './connectRepoModal.svelte';
diff --git a/src/lib/components/git/newRepository.svelte b/src/lib/components/git/newRepository.svelte
new file mode 100644
index 000000000..ffbb7cf5c
--- /dev/null
+++ b/src/lib/components/git/newRepository.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { InputCheckbox, InputSelect, InputText } from '$lib/elements/forms';
+    import { installation } from '$lib/stores/vcs';
+    import type { Models } from '@appwrite.io/console';
+    import { Layout } from '@appwrite.io/pink-svelte';
+
+    export let selectedInstallationId: string;
+    export let installations: Models.InstallationList;
+    export let repositoryName: string;
+    export let repositoryPrivate = true;
+    export let disableFields = false;
+</script>
+
+<Layout.Stack gap="xl">
+    <Layout.Stack gap="l">
+        {#key selectedInstallationId}
+            <InputSelect
+                id="installation"
+                label="Git organization"
+                disabled={disableFields}
+                options={installations.installations.map((entry) => {
+                    return {
+                        label: entry.organization,
+                        value: entry.$id
+                    };
+                })}
+                on:change={() => {
+                    $installation = installations.installations.find(
+                        (entry) => entry.$id === selectedInstallationId
+                    );
+                }}
+                bind:value={selectedInstallationId} />
+        {/key}
+        <InputText
+            id="repositoryName"
+            label="Repository name"
+            placeholder="my-repository"
+            disabled={disableFields}
+            bind:value={repositoryName} />
+    </Layout.Stack>
+    <InputCheckbox
+        id="repositoryPrivate"
+        label="Keep repository private"
+        disabled={disableFields}
+        bind:checked={repositoryPrivate} />
+</Layout.Stack>
diff --git a/src/lib/components/git/productionBranchFieldset.svelte b/src/lib/components/git/productionBranchFieldset.svelte
new file mode 100644
index 000000000..2083ddcf7
--- /dev/null
+++ b/src/lib/components/git/productionBranchFieldset.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { Button, InputText } from '$lib/elements/forms';
+    import { Fieldset, Input, Layout, Selector, Skeleton } from '@appwrite.io/pink-svelte';
+    import SelectRootModal from './selectRootModal.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { sortBranches } from '$lib/stores/vcs';
+    import { page } from '$app/state';
+
+    export let branch = 'main';
+    export let rootDir: string;
+    export let silentMode: boolean;
+    export let installationId: string;
+    export let repositoryId: string;
+    export let product: 'sites' | 'functions';
+
+    let show = false;
+
+    async function loadBranches() {
+        const { branches } = await sdk
+            .forProject(page.params.region, page.params.project)
+            .vcs.listRepositoryBranches(installationId, repositoryId);
+        const sorted = sortBranches(branches);
+        branch = sorted[0]?.name ?? null;
+
+        if (!branch) {
+            branch = 'main';
+        }
+
+        return sorted;
+    }
+</script>
+
+<Fieldset legend="Branch">
+    {#await loadBranches()}
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="xs">
+                <Skeleton variant="line" width={100} height={20} />
+                <Skeleton variant="line" width="100%" height={32} />
+            </Layout.Stack>
+            <Layout.Stack gap="xs">
+                <Skeleton variant="line" width={100} height={20} />
+                <Skeleton variant="line" width="100%" height={32} />
+            </Layout.Stack>
+            <Layout.Stack gap="xs">
+                <Skeleton variant="line" width={100} height={20} />
+                <Skeleton variant="line" width={300} height={15} />
+                <Skeleton variant="line" width={300} height={15} />
+            </Layout.Stack>
+        </Layout.Stack>
+    {:then branches}
+        {@const options =
+            branches
+                ?.map((branch) => {
+                    return {
+                        value: branch.name,
+                        label: branch.name
+                    };
+                })
+                ?.sort((a, b) => {
+                    return a.label > b.label ? 1 : -1;
+                }) ?? []}
+        <Layout.Stack gap="xl">
+            <Input.ComboBox
+                required
+                id="branch"
+                label="Production branch"
+                placeholder="Select branch"
+                isSearchable
+                bind:value={branch}
+                on:select={(event) => {
+                    branch = event.detail.value;
+                }}
+                {options} />
+            <Layout.Stack direction="row" gap="s" alignItems="flex-end">
+                <InputText
+                    id="root"
+                    label="Root directory"
+                    placeholder="Select directory"
+                    bind:value={rootDir} />
+                <Button secondary size="s" on:click={() => (show = true)}>Select</Button>
+            </Layout.Stack>
+
+            <Selector.Checkbox
+                size="s"
+                id="silentMode"
+                label="Silent mode"
+                description="If selected, comments will not be created when pushing changes to this repository."
+                bind:checked={silentMode} />
+        </Layout.Stack>
+    {/await}
+</Fieldset>
+
+{#if show}
+    <SelectRootModal bind:show bind:rootDir {product} />
+{/if}
diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
new file mode 100644
index 000000000..c1c3eefca
--- /dev/null
+++ b/src/lib/components/git/repositories.svelte
@@ -0,0 +1,303 @@
+<script lang="ts">
+    import { EmptySearch, Paginator } from '$lib/components';
+    import { Button, InputSearch, InputSelect } from '$lib/elements/forms';
+    import { timeFromNow } from '$lib/helpers/date';
+    import { sdk } from '$lib/stores/sdk';
+    import { repositories } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
+    import { installation, installations, repository } from '$lib/stores/vcs';
+    import {
+        Layout,
+        Table,
+        Typography,
+        Icon,
+        Avatar,
+        Button as PinkButton
+    } from '@appwrite.io/pink-svelte';
+    import { IconLockClosed, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import ConnectGit from './connectGit.svelte';
+    import SvgIcon from '../svgIcon.svelte';
+    import { VCSDetectionType, type Models } from '@appwrite.io/console';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+    import { connectGitHub } from '$lib/stores/git';
+    import { page } from '$app/state';
+    import Card from '../card.svelte';
+    import SkeletonRepoList from './skeletonRepoList.svelte';
+    import { untrack } from 'svelte';
+
+    let {
+        action = $bindable('select'),
+        selectedRepository = $bindable(undefined),
+        installationList = $bindable($installations),
+        hasInstallations = $bindable($installations?.total > 0),
+        product = 'functions',
+        callbackState = null,
+        connect = () => {}
+    }: {
+        action?: 'button' | 'select';
+        selectedRepository?: string;
+        installationList?: Models.InstallationList;
+        hasInstallations?: boolean;
+        product?: 'functions' | 'sites';
+        callbackState?: Record<string, string> | null;
+        connect?: (repository: Models.ProviderRepository) => void;
+    } = $props();
+
+    let search = $state('');
+    let selectedInstallation = $state(null);
+    let isLoadingRepositories = $state(null);
+
+    async function loadInstallations() {
+        if (installationList) {
+            if (installationList.installations.length) {
+                untrack(() => (selectedInstallation = installationList.installations[0].$id));
+                installation.set(
+                    installationList.installations.find(
+                        (entry) => entry.$id === selectedInstallation
+                    )
+                );
+            }
+            return installationList.installations;
+        } else {
+            const { installations } = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.listInstallations();
+            if (installations.length) {
+                untrack(() => (selectedInstallation = installations[0].$id));
+                installation.set(installations.find((entry) => entry.$id === selectedInstallation));
+            }
+            return installations;
+        }
+    }
+
+    async function loadRepositories(installationId: string, search: string) {
+        if (
+            !$repositories ||
+            $repositories.installationId !== installationId ||
+            $repositories.search !== search
+        ) {
+            await fetchRepos(installationId, search);
+        }
+
+        if ($repositories.repositories.length && action === 'select') {
+            selectedRepository = $repositories.repositories[0].id;
+            $repository = $repositories.repositories[0];
+        }
+        return $repositories.repositories;
+    }
+
+    async function fetchRepos(installationId: string, search: string) {
+        if (product === 'functions') {
+            $repositories.repositories = (
+                (await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.listRepositories(
+                        installationId,
+                        VCSDetectionType.Runtime,
+                        search || undefined
+                    )) as unknown as Models.ProviderRepositoryRuntimeList
+            ).runtimeProviderRepositories; //TODO: remove forced cast after backend fixes
+        } else {
+            $repositories.repositories = (
+                (await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.listRepositories(
+                        installationId,
+                        VCSDetectionType.Framework,
+                        search || undefined
+                    )) as unknown as Models.ProviderRepositoryFrameworkList
+            ).frameworkProviderRepositories;
+        }
+
+        $repositories.search = search;
+        $repositories.installationId = installationId;
+    }
+
+    selectedRepository;
+</script>
+
+{#if hasInstallations}
+    <Layout.Stack>
+        <Layout.Stack gap="s">
+            {#await loadInstallations()}
+                <Layout.Stack direction="row">
+                    <InputSelect
+                        disabled
+                        id="installation"
+                        options={[
+                            {
+                                label: 'Loading...',
+                                value: null
+                            }
+                        ]}
+                        value={null} />
+                    <InputSearch placeholder="Search repositories" disabled />
+                </Layout.Stack>
+            {:then installations}
+                <Layout.Stack direction="row">
+                    <InputSelect
+                        id="installation"
+                        options={[
+                            ...installations.map((entry) => {
+                                return {
+                                    label: entry.organization,
+                                    value: entry.$id
+                                };
+                            }),
+                            {
+                                label: 'Add installation',
+                                leadingIcon: IconPlus,
+                                value: 'new'
+                            }
+                        ]}
+                        on:change={() => {
+                            if (selectedInstallation === 'new') {
+                                window.location.href = connectGitHub(callbackState).toString();
+                            }
+                            search = '';
+                            installation.set(
+                                installations.find((entry) => entry.$id === selectedInstallation)
+                            );
+
+                            isLoadingRepositories = true;
+                            loadRepositories(selectedInstallation, search).then(() => {
+                                isLoadingRepositories = false;
+                            });
+                        }}
+                        bind:value={selectedInstallation} />
+                    <InputSearch
+                        placeholder="Search repositories"
+                        bind:value={search}
+                        disabled={!search && !$repositories?.repositories?.length} />
+                </Layout.Stack>
+            {/await}
+        </Layout.Stack>
+        {#if selectedInstallation}
+            <!-- manual installation change -->
+            {#if isLoadingRepositories}
+                <SkeletonRepoList />
+            {:else}
+                {#await loadRepositories(selectedInstallation, search)}
+                    <SkeletonRepoList />
+                {:then response}
+                    {#if response?.length}
+                        <Paginator items={response} hideFooter={response?.length <= 6} limit={6}>
+                            {#snippet children(
+                                paginatedItems: Models.ProviderRepositoryRuntime[] &
+                                    Models.ProviderRepositoryFramework[]
+                            )}
+                                <Table.Root columns={1} let:root>
+                                    {#each paginatedItems as repo}
+                                        <Table.Row.Base {root}>
+                                            <Table.Cell {root}>
+                                                <Layout.Stack
+                                                    direction="row"
+                                                    alignItems="center"
+                                                    gap="s">
+                                                    {#if action === 'select'}
+                                                        <input
+                                                            class="is-small u-margin-inline-end-8"
+                                                            type="radio"
+                                                            name="repositories"
+                                                            bind:group={selectedRepository}
+                                                            onchange={() => repository.set(repo)}
+                                                            value={repo.id} />
+                                                    {/if}
+                                                    {#if product === 'sites'}
+                                                        {#if repo?.framework && repo.framework !== 'other'}
+                                                            <Avatar size="xs" alt={repo.name}>
+                                                                <SvgIcon
+                                                                    name={getFrameworkIcon(
+                                                                        repo.framework
+                                                                    )}
+                                                                    iconSize="small" />
+                                                            </Avatar>
+                                                        {:else}
+                                                            <Avatar
+                                                                size="xs"
+                                                                alt={repo.name}
+                                                                empty />
+                                                        {/if}
+                                                    {:else}
+                                                        {@const iconName = repo?.runtime
+                                                            ? repo.runtime.split('-')[0]
+                                                            : undefined}
+                                                        <Avatar
+                                                            size="xs"
+                                                            alt={repo.name}
+                                                            empty={!iconName}>
+                                                            <SvgIcon
+                                                                name={iconName}
+                                                                iconSize="small" />
+                                                        </Avatar>
+                                                    {/if}
+                                                    <Layout.Stack
+                                                        gap="s"
+                                                        direction="row"
+                                                        alignItems="center">
+                                                        <Typography.Text
+                                                            truncate
+                                                            color="--fgcolor-neutral-secondary">
+                                                            {repo.name}
+                                                        </Typography.Text>
+                                                        {#if repo.private}
+                                                            <Icon
+                                                                size="s"
+                                                                icon={IconLockClosed}
+                                                                color="--fgcolor-neutral-tertiary" />
+                                                        {/if}
+                                                        <time datetime={repo.pushedAt}>
+                                                            <Typography.Caption
+                                                                variant="400"
+                                                                truncate
+                                                                color="--fgcolor-neutral-tertiary">
+                                                                {timeFromNow(repo.pushedAt)}
+                                                            </Typography.Caption>
+                                                        </time>
+                                                    </Layout.Stack>
+                                                    {#if action === 'button'}
+                                                        <Layout.Stack
+                                                            direction="row"
+                                                            justifyContent="flex-end">
+                                                            <PinkButton.Button
+                                                                size="xs"
+                                                                variant="secondary"
+                                                                on:click={() => connect(repo)}>
+                                                                Connect
+                                                            </PinkButton.Button>
+                                                        </Layout.Stack>
+                                                    {/if}
+                                                </Layout.Stack>
+                                            </Table.Cell>
+                                        </Table.Row.Base>
+                                    {/each}
+                                </Table.Root>
+                            {/snippet}
+                        </Paginator>
+                    {:else if search}
+                        <EmptySearch hidePages hidePagination bind:search target="repositories">
+                            <svelte:fragment slot="actions">
+                                {#if search}
+                                    <Button secondary on:click={() => (search = '')}>
+                                        Clear search
+                                    </Button>
+                                {/if}
+                            </svelte:fragment>
+                        </EmptySearch>
+                    {:else}
+                        <Card>
+                            <Layout.Stack alignItems="center" justifyContent="center">
+                                <Typography.Text
+                                    variation="m-500"
+                                    color="--fgcolor-neutral-tertiary">
+                                    No repositories available
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Card>
+                    {/if}
+                {/await}
+            {/if}
+        {/if}
+    </Layout.Stack>
+{:else}
+    <ConnectGit {callbackState} />
+{/if}
diff --git a/src/lib/components/git/repositoryBehaviour.svelte b/src/lib/components/git/repositoryBehaviour.svelte
new file mode 100644
index 000000000..6ba087b5c
--- /dev/null
+++ b/src/lib/components/git/repositoryBehaviour.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { InputRadio } from '$lib/elements/forms';
+
+    import { Layout } from '@appwrite.io/pink-svelte';
+
+    export let repositoryBehaviour: 'new' | 'existing' | undefined = undefined;
+</script>
+
+<Layout.Stack direction="row" gap="xl">
+    <InputRadio
+        size="s"
+        label="Create new repository"
+        bind:group={repositoryBehaviour}
+        value="new"
+        id="new"
+        name="new" />
+    <InputRadio
+        size="s"
+        label="Connect existing repository"
+        bind:group={repositoryBehaviour}
+        value="existing"
+        id="existing"
+        name="existing" />
+</Layout.Stack>
diff --git a/src/lib/components/git/repositoryCard.svelte b/src/lib/components/git/repositoryCard.svelte
new file mode 100644
index 000000000..cfcc28df9
--- /dev/null
+++ b/src/lib/components/git/repositoryCard.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import Link from '$lib/elements/link.svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import type { Models } from '@appwrite.io/console';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    export let repository: Models.ProviderRepository;
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<Card.Base padding="xs" radius="s" variant="secondary">
+    <Layout.Stack direction="row" gap="s">
+        <Layout.Stack direction="row" gap="s">
+            <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
+            <Layout.Stack gap="xxxs">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                    {repository.name}
+                </Typography.Text>
+                <Layout.Stack direction="row" gap="s" alignItems="center">
+                    <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
+                        Last updated: {toLocaleDateTime(repository.pushedAt)}
+                    </Typography.Caption>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="2"
+                        height="3"
+                        viewBox="0 0 2 3"
+                        fill="none">
+                        <circle cx="1" cy="1.5" r="1" fill="currentColor" />
+                    </svg>
+                    <Link
+                        size="s"
+                        variant="muted"
+                        external
+                        href={`https://github.com/${repository.organization}`}
+                        >{repository.organization}</Link>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+        <Button secondary on:click={() => dispatch('disconnect')}>Disconnect</Button>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/lib/components/git/selectRootModal.svelte b/src/lib/components/git/selectRootModal.svelte
new file mode 100644
index 000000000..ce4ef53f9
--- /dev/null
+++ b/src/lib/components/git/selectRootModal.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { iconPath } from '$lib/stores/app';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { VCSDetectionType, type Models } from '@appwrite.io/console';
+    import { DirectoryPicker } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+
+    type Directory = {
+        title: string;
+        fullPath: string;
+        fileCount: number;
+        thumbnailUrl: string;
+        children?: Directory[];
+        loading?: boolean;
+    };
+
+    export let show = false;
+    export let rootDir: string;
+    export let product: 'sites' | 'functions' = 'functions';
+
+    let isLoading = true;
+    let directories: Directory[] = [
+        {
+            title: 'Root',
+            fullPath: './',
+            fileCount: 0,
+            thumbnailUrl: 'root',
+            children: [],
+            loading: false
+        }
+    ];
+    let currentPath: string = './';
+    let currentDir: Directory;
+    export let expanded = writable(['lib-0', 'tree-0']);
+
+    onMount(async () => {
+        try {
+            const content = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.getRepositoryContents($installation.$id, $repository.id, currentPath);
+            // console.log(content);
+            directories[0].fileCount = content.contents?.length ?? 0;
+            directories[0].children = content.contents
+                .filter((e) => e.isDirectory)
+                .map((dir) => ({
+                    title: dir.name,
+                    fullPath: currentPath + dir.name,
+                    fileCount: undefined,
+                    thumbnailUrl: dir.name,
+                    loading: false
+                }));
+            currentDir = directories[0];
+            // console.log(directories);
+            isLoading = false;
+        } catch (e) {
+            console.log(e);
+        }
+    });
+
+    async function fetchContents(e: CustomEvent) {
+        const path = e.detail.fullPath as string;
+        currentPath = path;
+
+        const pathSegments = path.split('/').filter((segment) => segment !== '.' && segment !== '');
+        let traversedDir = directories[0]; // Start at root
+
+        for (const segment of pathSegments) {
+            const nextDir = traversedDir.children?.find((dir) => dir.title === segment);
+            if (!nextDir) break;
+            traversedDir = nextDir;
+        }
+
+        currentDir = traversedDir;
+
+        if (!currentDir.fileCount) {
+            currentDir.loading = true;
+            directories = [...directories];
+
+            try {
+                const content = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.getRepositoryContents($installation.$id, $repository.id, path);
+                // console.log(content);
+                const fileCount = content.contents?.length ?? 0;
+                const contentDirectories = content.contents.filter((e) => e.isDirectory);
+
+                if (contentDirectories.length === 0) {
+                    return;
+                }
+
+                currentDir.fileCount = fileCount;
+                currentDir.children = contentDirectories.map((dir) => ({
+                    title: dir.name,
+                    fullPath: path + '/' + dir.name,
+                    fileCount: undefined,
+                    thumbnailUrl: undefined
+                }));
+                const runtime = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.createRepositoryDetection(
+                        $installation.$id,
+                        $repository.id,
+                        product === 'sites' ? VCSDetectionType.Framework : VCSDetectionType.Runtime,
+                        path
+                    );
+                if (product === 'sites') {
+                    currentDir.children.forEach((dir) => {
+                        dir.thumbnailUrl = $iconPath(runtime.framework, 'color');
+                    });
+                } else if (product === 'functions') {
+                    currentDir.children.forEach((dir) => {
+                        dir.thumbnailUrl = $iconPath(
+                            (runtime as unknown as Models.DetectionRuntime).runtime,
+                            'color'
+                        );
+                    });
+                }
+                directories = [...directories];
+                $expanded = [...$expanded, path];
+            } catch (error) {
+                console.error(error);
+            } finally {
+                currentDir.loading = false;
+            }
+        }
+    }
+
+    function handleSubmit() {
+        rootDir = currentPath;
+        show = false;
+    }
+</script>
+
+<Modal title="Root directory" bind:show onSubmit={handleSubmit}>
+    <span slot="description">
+        Select the directory where your site code is located using the menu below.
+    </span>
+    <DirectoryPicker {directories} {isLoading} on:select={fetchContents} bind:expanded />
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit disabled={isLoading}>Save</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/git/skeletonRepoList.svelte b/src/lib/components/git/skeletonRepoList.svelte
new file mode 100644
index 000000000..b052bb4a8
--- /dev/null
+++ b/src/lib/components/git/skeletonRepoList.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Layout, Table, Skeleton } from '@appwrite.io/pink-svelte';
+</script>
+
+<Table.Root columns={1} let:root>
+    {#each Array(4) as _}
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>
+                <Layout.Stack direction="row" alignItems="center">
+                    <Skeleton variant="circle" width={24} />
+
+                    <Layout.Stack gap="s" direction="row" alignItems="center">
+                        <Skeleton variant="line" width={200} height={20} />
+                    </Layout.Stack>
+                    <Skeleton variant="line" width={76} height={32} />
+                </Layout.Stack>
+            </Table.Cell>
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
diff --git a/src/lib/components/gridItem1.svelte b/src/lib/components/gridItem1.svelte
index 03c10ef87..5fe8012a8 100644
--- a/src/lib/components/gridItem1.svelte
+++ b/src/lib/components/gridItem1.svelte
@@ -1,36 +1,30 @@
-<script>
-    import { Heading } from '$lib/components';
-    export let href;
+<script lang="ts">
+    import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
+    export let href: string;
 </script>
 
-<a class="card" {href}>
-    <div class="grid-item-1">
-        <div class="grid-item-1-start-start">
-            <div class="eyebrow-heading-3"><slot name="eyebrow" /></div>
-            <Heading tag="h2" size="7"><slot name="title" /></Heading>
-            <div class="u-padding-block-start-4"><slot name="subtitle" /></div>
-        </div>
-
-        <div class="grid-item-1-start-end">
-            <slot name="status" />
-        </div>
-
-        <div class="grid-item-1-end-start">
-            <div class="u-flex u-gap-16 u-flex-wrap">
+<Card.Link class="card" {href}>
+    <Layout.Stack height="calc(182 / 16 * 1rem)" justifyContent="space-between">
+        <Layout.Stack direction="row">
+            <Layout.Stack gap="xs">
+                <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
+                    ><slot name="eyebrow" /></Typography.Caption>
+                <Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
+                <div>
+                    <slot name="subtitle" />
+                </div>
+            </Layout.Stack>
+            <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center">
+                <slot name="status" />
+            </Layout.Stack>
+        </Layout.Stack>
+        <Layout.Stack direction="row">
+            <Layout.Stack direction="row">
                 <slot />
-            </div>
-        </div>
-        <div class="grid-item-1-end-end">
-            <ul class="icons u-flex u-gap-8">
+            </Layout.Stack>
+            <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center">
                 <slot name="icons" />
-            </ul>
-        </div>
-    </div>
-</a>
-
-<style>
-    /* TODO: remove this when ui library is updated*/
-    .grid-item-1 {
-        min-block-size: calc(182 / 16 * 1rem);
-    }
-</style>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
+</Card.Link>
diff --git a/src/lib/components/heading.svelte b/src/lib/components/heading.svelte
deleted file mode 100644
index 79fc21315..000000000
--- a/src/lib/components/heading.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    type NumSize = 1 | 2 | 3 | 4 | 5 | 6 | 7;
-    type Size = NumSize | `${NumSize}`;
-
-    export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    export let size: Size;
-    export let trimmed = true;
-    export let trimmedSecondLine = false;
-    export let id: string = null;
-    let classes = '';
-    export { classes as class };
-    export let style = '';
-</script>
-
-<svelte:element
-    this={tag}
-    class:target={!!id}
-    class={`heading-level-${size} u-min-width-0 ${classes}`}
-    class:u-trim-1={trimmed}
-    class:u-trim-2={trimmedSecondLine}
-    {style}
-    {id}>
-    <slot />
-</svelte:element>
-
-<style>
-    .target:target {
-        padding-top: 120px;
-        margin-top: -120px;
-    }
-</style>
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index f5d2414b7..e447eb905 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -42,31 +42,23 @@
 </script>
 
 <script lang="ts">
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { Copy } from '.';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
 
     export let value: string;
     export let event: string = null;
-    export let centered = true;
 </script>
 
-<Copy {value} {event} appendTo="parent">
-    <div
-        class="interactive-text-output is-buttons-on-top"
-        class:u-text-center={centered}
-        style:min-inline-size="0"
-        style:display="inline-flex">
+<Copy {value} {event}>
+    <Tag size="xs" variant="code">
+        <Icon icon={IconDuplicate} size="s" slot="start" />
         <span
             style:white-space="nowrap"
-            class="text u-line-height-1-5"
             style:overflow="hidden"
             style:word-break="break-all"
             use:truncateText>
             <slot />
         </span>
-        <div class="interactive-text-output-buttons">
-            <button class="interactive-text-output-button is-hidden" aria-label="copy text">
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
-        </div>
-    </div>
+    </Tag>
 </Copy>
diff --git a/src/lib/components/imagePreview.svelte b/src/lib/components/imagePreview.svelte
index 5993df089..1c5f3cfdf 100644
--- a/src/lib/components/imagePreview.svelte
+++ b/src/lib/components/imagePreview.svelte
@@ -18,7 +18,7 @@
     </div>
     <div class="file-preview-content">
         <div class="avatar">
-            <span class="icon-external-link" aria-hidden="true" />
+            <span class="icon-external-link" aria-hidden="true"></span>
         </div>
     </div>
 </a>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index fe7c5c9a6..3f451a4bf 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -46,7 +46,6 @@ export { default as Tabs } from './tabs.svelte';
 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';
 export { default as Support } from './support.svelte';
 export { default as ViewSelector } from './viewSelector.svelte';
@@ -67,7 +66,6 @@ export { default as NumericListItem } from './numericListItem.svelte';
 export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
 export { default as MigrationBox } from './migrationBox.svelte';
-export { default as FloatingActionBar } from './floatingActionBar.svelte';
 export { default as LoadingDots } from './loadingDots.svelte';
 export { default as FakeModal } from './fakeModal.svelte';
 export { default as RadioBoxes } from './radioBoxes.svelte';
@@ -77,4 +75,12 @@ export { default as EmptyCardImageCloud } from './emptyCardImageCloud.svelte';
 export { default as ImagePreview } from './imagePreview.svelte';
 export { default as MfaChallengeFormList } from './mfaChallengeFormList.svelte';
 export { default as BottomModalAlert } from './bottomModalAlert.svelte';
+export { default as Navbar } from './navbar.svelte';
+export { default as Breadcrumbs } from './breadcrumbs.svelte';
+export { default as Sidebar } from './sidebar.svelte';
+export { default as BottomSheet } from './bottom-sheet/index';
+export { default as Confirm } from './confirm.svelte';
+export { default as UsageCard } from './usageCard.svelte';
+export { default as ViewToggle } from './viewToggle.svelte';
 export { default as RegionEndpoint } from './regionEndpoint.svelte';
+export { default as ExpirationInput } from './expirationInput.svelte';
diff --git a/src/lib/components/innerModal.svelte b/src/lib/components/innerModal.svelte
index 63fde968a..ad3f3ea6e 100644
--- a/src/lib/components/innerModal.svelte
+++ b/src/lib/components/innerModal.svelte
@@ -1,41 +1,37 @@
 <script>
-    import { FormItem } from '$lib/elements/forms';
-
     export let show = false;
     export let closable = true;
     export let fullWidth = false;
 </script>
 
 {#if show}
-    <FormItem>
-        <section class="modal is-inner-modal" class:u-width-full-line={fullWidth}>
-            <div class="modal-form">
-                <header class="modal-header">
-                    <div class="u-flex u-main-space-between u-cross-center u-gap-16">
-                        <h4 class="modal-title body-text-1 u-bold">
-                            <slot name="title" />
-                        </h4>
-                        {#if closable}
-                            <button
-                                type="button"
-                                class="button is-text is-only-icon"
-                                style="--button-size:1.5rem;"
-                                aria-label="Close"
-                                title="Close"
-                                on:click={() => (show = false)}>
-                                <span class="icon-x" aria-hidden="true" />
-                            </button>
-                        {/if}
-                    </div>
-                    <p class="u-flex-basis-100-percent text u-small">
-                        <slot name="subtitle" />
-                    </p>
-                </header>
-
-                <div class="modal-content">
-                    <slot name="content" />
+    <section class="modal is-inner-modal" class:u-width-full-line={fullWidth}>
+        <div class="modal-form">
+            <header class="modal-header">
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                    <h4 class="modal-title body-text-1 u-bold">
+                        <slot name="title" />
+                    </h4>
+                    {#if closable}
+                        <button
+                            type="button"
+                            class="button is-text is-only-icon"
+                            style="--button-size:1.5rem;"
+                            aria-label="Close"
+                            title="Close"
+                            on:click={() => (show = false)}>
+                            <span class="icon-x" aria-hidden="true"></span>
+                        </button>
+                    {/if}
                 </div>
+                <p class="u-flex-basis-100-percent text u-small">
+                    <slot name="subtitle" />
+                </p>
+            </header>
+
+            <div class="modal-content">
+                <slot name="content" />
             </div>
-        </section>
-    </FormItem>
+        </div>
+    </section>
 {/if}
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index f0d0020d9..366a3ccda 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -1,73 +1,69 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
-    import { app } from '$lib/stores/app';
-    import { base } from '$app/paths';
+    import { Card, Tooltip } from '@appwrite.io/pink-svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import type { BaseCardProps } from './card.svelte';
+    import type { ComponentType } from 'svelte';
+
+    type Props = BaseCardProps &
+        HTMLAttributes<HTMLInputElement> & {
+            name: string;
+            value: string;
+            group: string;
+            title: string;
+            info?: string | undefined;
+            icon?: ComponentType;
+            imageHeight?: number;
+            imageWidth?: number;
+            imageRadius?: 'xxs' | 'xs' | 's' | 'm' | 'l';
+            disabled?: boolean;
+            src?: string;
+            alt?: string | undefined;
+        };
 
-    export let name: string;
     export let group: string;
-    export let value: string | number | boolean;
-    export let disabled = false;
-    export let padding = 1;
-    export let icon: string = null;
-    export let imageIcon: string = null;
-    export let fullHeight = true;
-    export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
-    export let backgroundColor: string = null;
-    export let backgroundColorHover: string = null;
+    export let value: string;
     export let tooltipText: string = null;
     export let tooltipShow = false;
 
-    enum Radius {
-        xsmall = '--border-radius-xsmall',
-        small = '--border-radius-small',
-        medium = '--border-radius-medium',
-        large = '--border-radius-large'
-    }
+    // Pink v2
+    export let icon: Props['icon'] = undefined;
+    export let radius: Props['radius'] = 's';
+    export let imageRadius: Props['imageRadius'] = 'xxs';
+    export let padding: Props['padding'] = 's';
+    export let variant: Props['variant'] = 'primary';
+    export let name: Props['name'] = undefined;
+    //temporarily undefined
+    export let title: Props['title'] = undefined;
+    export let disabled = false;
+    export let src: string = null;
+    export let alt: string = null;
+
+    // TODO: remove after label card migration
+    let slotTitle: HTMLSpanElement;
 </script>
 
-<label
-    class="card u-cursor-pointer"
-    class:is-allow-focus={!disabled}
-    class:is-disabled={disabled}
-    class:u-height-100-percent={fullHeight}
-    style:--card-padding={`${padding}rem`}
-    style:--card-border-radius={`var(${Radius[borderRadius]})`}
-    style:--p-card-bg-color-default={backgroundColor}
-    style:--p-card-bg-color-hover={backgroundColorHover}
-    use:tooltip={{ content: tooltipText, disabled: !tooltipText || !tooltipShow }}>
-    <div class="u-flex u-gap-8">
-        <input
-            class="is-small u-margin-block-start-2"
-            type="radio"
-            {name}
-            {disabled}
-            {value}
-            bind:group
-            on:click />
-        {#if $$slots.custom}
-            <slot name="custom" {disabled} />
-        {:else}
-            <div class="u-flex u-flex-vertical u-gap-4" class:u-opacity-50={disabled}>
-                {#if $$slots.title}
-                    <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
-                {/if}
-                {#if $$slots.default}
-                    <p class="u-color-text-gray u-small">
-                        <slot />
-                    </p>
-                {/if}
-            </div>
-            {#if icon}
-                <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />
-            {/if}
-            {#if imageIcon}
-                <img
-                    class="u-margin-inline-start-auto"
-                    style:max-inline-size="1.25rem"
-                    style:max-block-size="1.25rem"
-                    src={`${base}/icons/${$app.themeInUse}/color/${imageIcon}.svg`}
-                    alt={imageIcon} />
-            {/if}
+<Tooltip disabled={!tooltipText || !tooltipShow}>
+    <Card.Selector
+        {name}
+        {src}
+        {alt}
+        {icon}
+        {padding}
+        {imageRadius}
+        {variant}
+        {value}
+        {radius}
+        {disabled}
+        title={title ?? slotTitle?.innerText}
+        bind:group>
+        {#if $$slots.default}
+            <slot />
         {/if}
-    </div>
-</label>
+        <slot name="action" slot="action" />
+    </Card.Selector>
+    <span slot="tooltip">{tooltipText}</span>
+</Tooltip>
+
+<span style="display: none" bind:this={slotTitle}>
+    <slot name="title" />
+</span>
diff --git a/src/lib/components/limit.svelte b/src/lib/components/limit.svelte
index 9e71cbabc..f42351900 100644
--- a/src/lib/components/limit.svelte
+++ b/src/lib/components/limit.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { page as pageStore } from '$app/stores';
+    import { page as pageStore } from '$app/state';
     import { InputSelect } from '$lib/elements/forms';
     import { preferences } from '$lib/stores/preferences';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let sum: number;
     export let limit: number;
@@ -17,10 +18,10 @@
     ];
 
     async function limitChange() {
-        const url = new URL($pageStore.url);
+        const url = new URL(pageStore.url);
         const previousLimit = Number(url.searchParams.get('limit'));
         url.searchParams.set('limit', limit.toString());
-        preferences.setLimit($pageStore.params.project, $pageStore.route, limit);
+        preferences.setLimit(limit);
 
         if (url.searchParams.has('page')) {
             const page = Number(url.searchParams.get('page'));
@@ -32,14 +33,9 @@
     }
 </script>
 
-<div class="u-flex u-gap-12 u-cross-center">
-    <InputSelect
-        wrapperTag="div"
-        id="rows"
-        label={`${name} per page`}
-        showLabel={false}
-        {options}
-        bind:value={limit}
-        on:change={limitChange} />
-    <p class="text">{name} per page. Total results: {sum >= 5000 ? `${sum}+` : sum}</p>
-</div>
+<Layout.Stack direction="row" alignItems="center" inline>
+    <InputSelect id="rows" {options} bind:value={limit} on:change={limitChange} />
+    <p class="text" style:white-space="nowrap">
+        {name} per page. Total: {sum >= 5000 ? `${sum}+` : sum}
+    </p>
+</Layout.Stack>
diff --git a/src/lib/components/listItem.svelte b/src/lib/components/listItem.svelte
index 26805f943..e9474a9e1 100644
--- a/src/lib/components/listItem.svelte
+++ b/src/lib/components/listItem.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <li class="list-item">
-    <span class={icon ? `icon-${icon}` : 'icon-check-circle'} aria-hidden="true" />
+    <span class={icon ? `icon-${icon}` : 'icon-check-circle'} aria-hidden="true"></span>
     <slot />
 </li>
diff --git a/src/lib/components/loadingDots.svelte b/src/lib/components/loadingDots.svelte
index 71df2f128..d4165e8de 100644
--- a/src/lib/components/loadingDots.svelte
+++ b/src/lib/components/loadingDots.svelte
@@ -5,9 +5,9 @@
 </script>
 
 <div class="loading-dots {className}">
-    <div class="dot" />
-    <div class="dot" />
-    <div class="dot" />
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
 </div>
 
 <style>
diff --git a/src/lib/components/logs/index.ts b/src/lib/components/logs/index.ts
new file mode 100644
index 000000000..588612d36
--- /dev/null
+++ b/src/lib/components/logs/index.ts
@@ -0,0 +1,2 @@
+export { default as LogsRequest } from './logsRequest.svelte';
+export { default as LogsResponse } from './logsResponse.svelte';
diff --git a/src/lib/components/logs/loggingAlert.svelte b/src/lib/components/logs/loggingAlert.svelte
new file mode 100644
index 000000000..7d1f798ee
--- /dev/null
+++ b/src/lib/components/logs/loggingAlert.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Link } from '$lib/elements';
+    import { Alert } from '@appwrite.io/pink-svelte';
+
+    export let product: 'site' | 'function';
+</script>
+
+{#if product === 'site'}
+    <Alert.Inline status="info" title="Your logs are disabled">
+        To view logs and errors, enable them in your
+        <Link
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/settings`}>
+            site settings</Link
+        >.
+    </Alert.Inline>
+{:else if product === 'function'}
+    <Alert.Inline status="info" title="Your execution logs are disabled">
+        To view execution logs and errors, enable them in your
+        <Link
+            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/settings`}>
+            function settings</Link
+        >.
+    </Alert.Inline>
+{/if}
diff --git a/src/lib/components/logs/logsRequest.svelte b/src/lib/components/logs/logsRequest.svelte
new file mode 100644
index 000000000..85bd2482a
--- /dev/null
+++ b/src/lib/components/logs/logsRequest.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { Card } from '$lib/components';
+    import { Link } from '$lib/elements';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Badge,
+        Divider,
+        Input,
+        Layout,
+        Table,
+        Tabs,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+
+    export let selectedLog: Models.Execution;
+
+    let requestTab: 'parameters' | 'headers' = 'parameters';
+
+    let parameters = [];
+
+    onMount(() => {
+        try {
+            // Add dummy base URL to parse relative paths
+            const url = new URL(selectedLog.requestPath, 'http://dummy.local');
+            if (url.search) {
+                parameters = Array.from(url.searchParams.entries()).map(([name, value]) => ({
+                    name,
+                    value: decodeURIComponent(value)
+                }));
+            }
+        } catch (error) {
+            parameters = [];
+        }
+    });
+
+    onMount(() => {
+        if (parameters?.length) {
+            requestTab = 'parameters';
+        } else if (selectedLog.requestHeaders?.length) {
+            requestTab = 'headers';
+        }
+    });
+</script>
+
+<Layout.Stack>
+    <Layout.Stack gap="none">
+        <Tabs.Root variant="secondary" let:root>
+            <Tabs.Item.Button
+                {root}
+                active={requestTab === 'parameters'}
+                on:click={() => (requestTab = 'parameters')}>
+                Parameters
+                <Badge variant="secondary" size="s" content={parameters?.length?.toString()} />
+            </Tabs.Item.Button>
+            <Tabs.Item.Button
+                {root}
+                active={requestTab === 'headers'}
+                on:click={() => (requestTab = 'headers')}>
+                Headers <Badge
+                    variant="secondary"
+                    size="s"
+                    content={selectedLog?.requestHeaders?.length?.toString()} />
+            </Tabs.Item.Button>
+        </Tabs.Root>
+        <Divider />
+    </Layout.Stack>
+    {#if requestTab === 'parameters'}
+        {#if parameters?.length}
+            <Table.Root
+                columns={[
+                    {
+                        id: 'key',
+                        width: 200
+                    },
+                    {
+                        id: 'value'
+                    }
+                ]}
+                let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell {root}>Key</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Value</Table.Header.Cell>
+                </svelte:fragment>
+                {#each parameters as parameter}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>{parameter.name}</Table.Cell>
+                        <Table.Cell {root}>{parameter.value}</Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+        {:else}
+            <Card padding="xs" radius="s">
+                <Typography.Code>No parameters found.</Typography.Code>
+            </Card>
+        {/if}
+    {:else if requestTab === 'headers'}
+        {#if selectedLog.requestHeaders?.length}
+            <Table.Root
+                columns={[
+                    {
+                        id: 'key',
+                        width: 200
+                    },
+                    {
+                        id: 'value'
+                    }
+                ]}
+                let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell {root}>Key</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Value</Table.Header.Cell>
+                </svelte:fragment>
+                {#each selectedLog.requestHeaders as request}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>{request.name}</Table.Cell>
+                        <Table.Cell {root}>{request.value}</Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+
+            <Input.Helper state="default">
+                <span>
+                    Missing headers? Check the <Link variant="muted" href="#" external>docs</Link> to
+                    see the supported data and how to log it.
+                </span>
+            </Input.Helper>
+        {:else}
+            <Card padding="xs" radius="s">
+                <Typography.Code>No headers found.</Typography.Code>
+            </Card>
+        {/if}
+    {/if}
+</Layout.Stack>
diff --git a/src/lib/components/logs/logsResponse.svelte b/src/lib/components/logs/logsResponse.svelte
new file mode 100644
index 000000000..7953ba33a
--- /dev/null
+++ b/src/lib/components/logs/logsResponse.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { Card } from '$lib/components';
+    import { Link } from '$lib/elements';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Badge,
+        Divider,
+        InlineCode,
+        Input,
+        Layout,
+        Logs,
+        Table,
+        Tabs,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import LoggingAlert from './loggingAlert.svelte';
+
+    // export let selectedLog: Models.Execution;
+    // export let product: 'site' | 'function';
+    // export let logging: boolean;
+
+    let {
+        selectedLog,
+        product,
+        logging
+    }: {
+        selectedLog: Models.Execution;
+        product: 'site' | 'function';
+        logging: boolean;
+    } = $props();
+
+    let responseTab: 'logs' | 'errors' | 'headers' | 'body' = $state('logs');
+
+    let href = $derived(
+        product === 'site'
+            ? 'https://appwrite.io/docs/products/sites/logs#log-details'
+            : 'https://appwrite.io/docs/products/functions/develop#logging'
+    );
+
+    onMount(() => {
+        if (selectedLog?.errors) {
+            responseTab = 'errors';
+        } else if (selectedLog?.logs) {
+            responseTab = 'logs';
+        } else if (selectedLog.requestHeaders?.length) {
+            responseTab = 'headers';
+        }
+    });
+</script>
+
+<Layout.Stack>
+    <Layout.Stack gap="none">
+        <Tabs.Root variant="secondary" let:root>
+            <Tabs.Item.Button
+                {root}
+                active={responseTab === 'logs'}
+                on:click={() => (responseTab = 'logs')}>
+                Logs
+            </Tabs.Item.Button>
+            {#if product !== 'site'}
+                <Tabs.Item.Button
+                    {root}
+                    active={responseTab === 'errors'}
+                    on:click={() => (responseTab = 'errors')}>
+                    Errors
+                </Tabs.Item.Button>
+            {/if}
+            <Tabs.Item.Button
+                {root}
+                active={responseTab === 'headers'}
+                on:click={() => (responseTab = 'headers')}>
+                Headers <Badge
+                    variant="secondary"
+                    size="s"
+                    content={selectedLog?.responseHeaders?.length?.toString()} />
+            </Tabs.Item.Button>
+            {#if product !== 'site'}
+                <Tabs.Item.Button
+                    {root}
+                    active={responseTab === 'body'}
+                    on:click={() => (responseTab = 'body')}>
+                    Body
+                </Tabs.Item.Button>
+            {/if}
+        </Tabs.Root>
+        <Divider />
+    </Layout.Stack>
+
+    {#if responseTab === 'logs'}
+        {#if selectedLog.logs}
+            <Logs logs={selectedLog.logs} />
+        {:else if !logging}
+            <LoggingAlert {product} />
+        {:else}
+            <Card padding="xs" radius="s">
+                <Typography.Code>No logs found.</Typography.Code>
+            </Card>
+        {/if}
+    {:else if responseTab === 'errors'}
+        {#if selectedLog.errors}
+            <Logs logs={selectedLog.errors} />
+        {:else if !logging}
+            <LoggingAlert {product} />
+        {:else}
+            <Card padding="xs" radius="s">
+                <Typography.Code>No errors found.</Typography.Code>
+            </Card>
+        {/if}
+    {:else if responseTab === 'headers'}
+        {#if selectedLog.responseHeaders?.length}
+            <Table.Root
+                columns={[
+                    {
+                        id: 'key',
+                        width: 200
+                    },
+                    {
+                        id: 'value'
+                    }
+                ]}
+                let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell {root}>Key</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Value</Table.Header.Cell>
+                </svelte:fragment>
+                {#each selectedLog.responseHeaders as request}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>{request.name}</Table.Cell>
+                        <Table.Cell {root}>{request.value}</Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+
+            <Input.Helper state="default">
+                <span>
+                    Missing headers? Check the <Link variant="muted" {href} external>docs</Link> to see
+                    the supported data and how to log it.
+                </span>
+            </Input.Helper>
+        {:else}
+            <Card padding="xs" radius="s">
+                <Typography.Code>No headers found.</Typography.Code>
+            </Card>
+        {/if}
+    {:else if responseTab === 'body'}
+        {#if selectedLog.responseBody}
+            <Logs logs={selectedLog.responseBody} />
+        {:else}
+            <Card padding="xs" radius="s">
+                <Typography.Text>
+                    Body data is not captured by Appwrite for your user's security and privacy. To
+                    display body data in the Logs tab, use <InlineCode
+                        code="context.log()"
+                        size="s" />. <Link external {href} variant="muted">Learn more</Link>.
+                </Typography.Text>
+            </Card>
+        {/if}
+    {/if}
+</Layout.Stack>
diff --git a/src/lib/components/menu/index.ts b/src/lib/components/menu/index.ts
new file mode 100644
index 000000000..1ba6002f9
--- /dev/null
+++ b/src/lib/components/menu/index.ts
@@ -0,0 +1,2 @@
+export { default as Menu } from './menu.svelte';
+export { default as SubMenu } from './subMenu.svelte';
diff --git a/src/lib/components/menu/menu.svelte b/src/lib/components/menu/menu.svelte
new file mode 100644
index 000000000..6e7e3a030
--- /dev/null
+++ b/src/lib/components/menu/menu.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { Card } from '@appwrite.io/pink-svelte';
+    import { createMenubar, melt } from '@melt-ui/svelte';
+    import { menuOpen } from '$lib/components/menu/store';
+
+    const {
+        elements: { menubar },
+        builders: { createMenu }
+    } = createMenubar();
+
+    const {
+        elements: { trigger: trigger, menu: menu, separator: separator },
+        states: { open }
+    } = createMenu();
+
+    function toggle() {
+        open.update((state) => !state);
+    }
+
+    $: menuOpen.set($open);
+</script>
+
+<div use:melt={$menubar}>
+    {#if $open}
+        <div style:display="none" id="actionmenuopen"></div>
+    {/if}
+    <div use:melt={$trigger}>
+        <slot />
+    </div>
+
+    <div class="menu" use:melt={$menu}>
+        <Card.Base padding="none">
+            {#if $$slots.start}
+                <slot name="start" />
+                <div class="separator" use:melt={$separator}></div>
+            {/if}
+            <slot name="menu" {toggle} />
+            {#if $$slots.end}
+                <div class="separator" use:melt={$separator}></div>
+                <slot name="end" {toggle} />
+            {/if}
+        </Card.Base>
+    </div>
+</div>
+
+<style>
+    .menu {
+        min-width: 244px;
+        width: max-content;
+        z-index: 20;
+    }
+
+    .separator {
+        height: 1px;
+        margin-block: 2px;
+        margin-inline-start: calc(var(--base-4) * -1);
+        width: calc(100% + var(--base-8));
+        background-color: var(--border-neutral);
+    }
+</style>
diff --git a/src/lib/components/menu/store.ts b/src/lib/components/menu/store.ts
new file mode 100644
index 000000000..571b30b82
--- /dev/null
+++ b/src/lib/components/menu/store.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const menuOpen = writable(false);
diff --git a/src/lib/components/menu/subMenu.svelte b/src/lib/components/menu/subMenu.svelte
new file mode 100644
index 000000000..66186bf2a
--- /dev/null
+++ b/src/lib/components/menu/subMenu.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { Card } from '@appwrite.io/pink-svelte';
+    import { createMenubar, melt } from '@melt-ui/svelte';
+
+    const {
+        builders: { createMenu }
+    } = createMenubar();
+
+    const {
+        elements: { separator: separator },
+        builders: { createSubmenu: createSubmenu }
+    } = createMenu();
+
+    const {
+        elements: { subMenu: subMenu, subTrigger: subTrigger }
+    } = createSubmenu();
+</script>
+
+<div use:melt={$subTrigger}>
+    <slot />
+</div>
+
+<div class="subMenu" use:melt={$subMenu}>
+    <Card.Base padding="none">
+        {#if $$slots.start}
+            <slot name="start" />
+            <div class="separator" use:melt={$separator}></div>
+        {/if}
+        <slot name="menu" />
+        {#if $$slots.end}
+            <div class="separator" use:melt={$separator}></div>
+            <slot name="end" />
+        {/if}
+    </Card.Base>
+</div>
+
+<style>
+    .subMenu {
+        min-width: 244px;
+        margin-block: -4px;
+    }
+</style>
diff --git a/src/lib/components/mfaChallengeFormList.svelte b/src/lib/components/mfaChallengeFormList.svelte
index 8cbb2bcc3..86e6c2dec 100644
--- a/src/lib/components/mfaChallengeFormList.svelte
+++ b/src/lib/components/mfaChallengeFormList.svelte
@@ -10,10 +10,10 @@
             }
             await sdk.forConsole.account.updateMfaChallenge(challenge.$id, code);
             await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountCreate);
+            trackEvent(Submit.AccountLogin, { mfa_used: true });
         } catch (error) {
             inputDigitFields?.clearInputsAndRefocus();
-            trackError(error, Submit.AccountCreate);
+            trackError(error, Submit.AccountLogin);
             throw error;
         }
     }
@@ -22,16 +22,17 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { invalidate } from '$app/navigation';
-    import { Button, FormItem, FormList, InputDigits, InputText } from '$lib/elements/forms';
+    import { Button, InputDigits, InputText } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { AuthenticationFactor, type Models } from '@appwrite.io/console';
     import { addNotification } from '$lib/stores/notifications';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
+    import { IconChatAlt, IconDeviceMobile, IconMail } from '@appwrite.io/pink-icons-svelte';
 
     export let factors: Models.MfaFactors & { recoveryCode: boolean };
     /** If true, the form will be submitted automatically when the code is entered. */
-    export let autoSubmit: boolean = true;
     export let showVerifyButton: boolean = true;
     export let disabled: boolean = false;
     export let challenge: Models.MfaChallenge;
@@ -70,82 +71,68 @@
     });
 </script>
 
-<FormList>
-    {#if challengeType == AuthenticationFactor.Recoverycode}
-        <p>
-            Enter below one of the recovery codes you received when enabling MFA for this account.
-        </p>
-        <InputText id="recovery-code" bind:value={code} required autofocus />
-    {:else}
-        {#if factors.totp && (challengeType == AuthenticationFactor.Totp || challengeType == null)}
-            <p>Enter below a 6-digit one-time code generated by your authentication app.</p>
-        {:else if challengeType == AuthenticationFactor.Email}
-            <p>A 6-digit verification code was sent to your email, enter it below.</p>
-        {:else if challengeType == AuthenticationFactor.Phone}
-            <p>A 6-digit verification code was sent to your phone, enter it below.</p>
+{#if challengeType === AuthenticationFactor.Recoverycode}
+    <Typography.Text align="center">
+        Enter below one of the recovery codes you received when enabling MFA for this account.
+    </Typography.Text>
+    <InputText id="recovery-code" bind:value={code} required autofocus />
+{:else}
+    {#if factors.totp && (challengeType == AuthenticationFactor.Totp || challengeType == null)}
+        <Typography.Text align="center"
+            >Enter below a 6-digit one-time code generated by your authentication app.</Typography.Text>
+    {:else if challengeType === AuthenticationFactor.Email}
+        <Typography.Text align="center"
+            >A 6-digit verification code was sent to your email, enter it below.</Typography.Text>
+    {:else if challengeType === AuthenticationFactor.Phone}
+        <Typography.Text align="center"
+            >A 6-digit verification code was sent to your phone, enter it below.</Typography.Text>
+    {/if}
+    <InputDigits bind:value={code} required autofocus />
+{/if}
+{#if showVerifyButton}
+    <Button fullWidth submit {disabled}>Verify</Button>
+{/if}
+{#if enabledFactors.length > 1}
+    <span class="with-separators eyebrow-heading-3">or</span>
+    <div class="u-flex-vertical u-gap-8">
+        {#if factors.totp && challengeType != null && challengeType != AuthenticationFactor.Totp}
+            <Button
+                secondary
+                fullWidth
+                {disabled}
+                on:click={() => createChallenge(AuthenticationFactor.Totp)}>
+                <Icon icon={IconDeviceMobile} slot="start" size="s" />
+                Authenticator app
+            </Button>
         {/if}
-        <InputDigits
-            bind:value={code}
-            required
-            autofocus
-            {autoSubmit}
-            bind:this={inputDigitFields} />
-    {/if}
-    {#if showVerifyButton}
-        <FormItem>
-            <Button fullWidth submit {disabled}>Verify</Button>
-        </FormItem>
-    {/if}
-    {#if enabledFactors.length > 1}
-        <span class="with-separators eyebrow-heading-3">or</span>
-        <div class="u-flex-vertical u-gap-8">
-            {#if factors.totp && challengeType != null && challengeType != AuthenticationFactor.Totp}
-                <FormItem>
-                    <Button
-                        secondary
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Totp)}>
-                        <span class="icon-device-mobile u-font-size-20" aria-hidden="true" />
-                        <span class="text">Authenticator app</span>
-                    </Button>
-                </FormItem>
-            {/if}
-            {#if factors.email && challengeType != AuthenticationFactor.Email}
-                <FormItem>
-                    <Button
-                        secondary
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Email)}>
-                        <span class="icon-mail u-font-size-20" aria-hidden="true" />
-                        <span class="text">Email verification</span>
-                    </Button>
-                </FormItem>
-            {/if}
-            {#if factors.phone && challengeType != AuthenticationFactor.Phone}
-                <FormItem>
-                    <Button
-                        secondary
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Phone)}>
-                        <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
-                        <span class="text">Phone verification</span>
-                    </Button>
-                </FormItem>
-            {/if}
-            {#if factors.recoveryCode && challengeType != AuthenticationFactor.Recoverycode}
-                <FormItem>
-                    <Button
-                        text
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Recoverycode)}>
-                        <span class="text">Use recovery code</span>
-                    </Button>
-                </FormItem>
-            {/if}
-        </div>
-    {/if}
-</FormList>
+        {#if factors.email && challengeType !== AuthenticationFactor.Email}
+            <Button
+                secondary
+                fullWidth
+                {disabled}
+                on:click={() => createChallenge(AuthenticationFactor.Email)}>
+                <Icon icon={IconMail} slot="start" size="s" />
+                Email verification
+            </Button>
+        {/if}
+        {#if factors.phone && challengeType !== AuthenticationFactor.Phone}
+            <Button
+                secondary
+                fullWidth
+                {disabled}
+                on:click={() => createChallenge(AuthenticationFactor.Phone)}>
+                <Icon icon={IconChatAlt} slot="start" size="s" />
+                Phone verification
+            </Button>
+        {/if}
+        {#if factors.recoveryCode && challengeType !== AuthenticationFactor.Recoverycode}
+            <Button
+                text
+                fullWidth
+                {disabled}
+                on:click={() => createChallenge(AuthenticationFactor.Recoverycode)}>
+                <span class="text">Use recovery code</span>
+            </Button>
+        {/if}
+    </div>
+{/if}
diff --git a/src/lib/components/migrationBox.svelte b/src/lib/components/migrationBox.svelte
index 73c5d9529..52155f0e2 100644
--- a/src/lib/components/migrationBox.svelte
+++ b/src/lib/components/migrationBox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { parseIfString } from '$lib/helpers/object';
     import { getProjectId } from '$lib/helpers/project';
     import { realtime } from '$lib/stores/sdk';
@@ -51,7 +51,7 @@
 
     onMount(() => {
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe<Models.Migration>(['console'], async (response) => {
                 if (!response.channels.includes(`projects.${getProjectId()}`)) return;
                 if (response.events.includes('migrations.*')) {
@@ -72,7 +72,7 @@
                 class="upload-box-button"
                 aria-label="close migration box"
                 on:click={() => ($showMigrationBox = false)}>
-                <span class="icon-x" aria-hidden="true" />
+                <span class="icon-x" aria-hidden="true"></span>
             </button>
         </header>
         <div class="upload-box-content is-open">
@@ -83,7 +83,8 @@
                 <div
                     class="progress-bar-container"
                     class:is-danger={migration.status === 'failed'}
-                    style="--graph-size:{percentage}%" />
+                    style="--graph-size:{percentage}%">
+                </div>
             </section>
         </div>
     </section>
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index d600a7e09..39f87fcea 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
-    import { Alert, ModalWrapper } from '$lib/components';
-    import { trackEvent } from '$lib/actions/analytics';
     import { Form } from '$lib/elements/forms';
     import { disableCommands } from '$lib/commandCenter';
     import { beforeNavigate } from '$app/navigation';
+    import { Alert, Layout, Modal } from '@appwrite.io/pink-svelte';
 
     export let show = false;
-    export let size: 'small' | 'big' | 'huge' = null;
-    export let icon: string = null;
-    export let iconNotMobile: boolean = false;
-    export let state: 'success' | 'warning' | 'error' | 'info' = null;
     export let error: string = null;
-    export let closable = true;
-    export let closeByEscape = true;
-    export let headerDivider = true;
+    export let dismissible = true;
+    export let size: 's' | 'm' | 'l' = 'm';
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
     export let title = '';
-    export let description = '';
+    export let hideFooter = false;
 
     let alert: HTMLElement;
 
@@ -33,77 +27,33 @@
     }
 </script>
 
-<ModalWrapper bind:show {size} {headerDivider} {closeByEscape} let:close>
-    <Form isModal {onSubmit}>
-        <header class="modal-header">
-            <div class="u-flex u-main-space-between u-cross-center u-gap-16">
-                <div class="u-flex u-cross-center u-gap-16">
-                    {#if icon}
-                        <div
-                            class="avatar is-medium"
-                            class:is-not-mobile={iconNotMobile}
-                            class:is-success={state === 'success'}
-                            class:is-warning={state === 'warning'}
-                            class:is-danger={state === 'error'}
-                            class:is-info={state === 'info'}>
-                            <span class={`icon-${icon}`} aria-hidden="true" />
-                        </div>
-                    {/if}
-
-                    <h4 class="modal-title heading-level-5">
-                        <slot name="title">
-                            {title}
-                        </slot>
-                    </h4>
-                </div>
-                {#if closable}
-                    <button
-                        type="button"
-                        class="button is-text is-only-icon"
-                        style="--button-size:1.5rem;"
-                        aria-label="Close Modal"
-                        title="Close Modal"
-                        on:click={() =>
-                            trackEvent('click_close_modal', {
-                                from: 'button'
-                            })}
-                        on:click={close}>
-                        <span class="icon-x" aria-hidden="true" />
-                    </button>
-                {/if}
-            </div>
-            {#if description.length > 0}
-                <p class="modal-description u-margin-block-start-4">
-                    <slot name="description">
-                        {description}
-                    </slot>
-                </p>
-            {/if}
-        </header>
-        <div class="modal-content">
-            <div class="modal-content-spacer u-flex-vertical u-gap-24 u-width-full-line">
-                {#if error}
-                    <div bind:this={alert}>
-                        <Alert
-                            dismissible
-                            type="warning"
-                            on:dismiss={() => {
-                                error = null;
-                            }}>
-                            {error}
-                        </Alert>
-                    </div>
-                {/if}
-                <slot />
-            </div>
-        </div>
-
-        {#if $$slots.footer}
-            <div class="modal-footer">
-                <div class="u-flex u-main-end u-gap-16">
-                    <slot name="footer" />
-                </div>
+<Form isModal {onSubmit}>
+    <Modal {size} {title} bind:open={show} {hideFooter} {dismissible}>
+        <slot slot="description" name="description" />
+        {#if error}
+            <div bind:this={alert}>
+                <Alert.Inline
+                    dismissible
+                    status="warning"
+                    on:dismiss={() => {
+                        error = null;
+                    }}>
+                    {error}
+                </Alert.Inline>
             </div>
         {/if}
-    </Form>
-</ModalWrapper>
+        <slot />
+        <svelte:fragment slot="footer">
+            <Layout.Stack direction="row" justifyContent="flex-end">
+                <slot name="footer" />
+            </Layout.Stack>
+        </svelte:fragment>
+    </Modal>
+</Form>
+
+<style>
+    /* temporary fix to modal width */
+    :global(dialog section) {
+        max-width: 100% !important;
+    }
+</style>
diff --git a/src/lib/components/modalSideCol.svelte b/src/lib/components/modalSideCol.svelte
index 22264001c..7e0b85b18 100644
--- a/src/lib/components/modalSideCol.svelte
+++ b/src/lib/components/modalSideCol.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { ModalWrapper } from '$lib/components';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export let show = false;
     export let title = '';
@@ -28,11 +28,11 @@
                         aria-label="Close Modal"
                         title="Close Modal"
                         on:click={() =>
-                            trackEvent('click_close_modal', {
+                            trackEvent(Click.ModalCloseClick, {
                                 from: 'button'
                             })}
                         on:click={close}>
-                        <span class="icon-x" aria-hidden="true" />
+                        <span class="icon-x" aria-hidden="true"></span>
                     </button>
                 </div>
                 <p class="u-margin-block-start-4">
@@ -51,7 +51,7 @@
 </ModalWrapper>
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/mixins/scroll';
+    @use '@appwrite.io/pink-legacy/src/abstract/mixins/scroll';
 
     .mk-grid {
         overflow: hidden;
diff --git a/src/lib/components/modalWrapper.svelte b/src/lib/components/modalWrapper.svelte
index 08d96f0eb..fcbcda6d0 100644
--- a/src/lib/components/modalWrapper.svelte
+++ b/src/lib/components/modalWrapper.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { disableCommands } from '$lib/commandCenter';
 
     export let show = false;
@@ -24,7 +24,7 @@
 
     function handleBLur(event: MouseEvent) {
         if (event.target === dialog) {
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'backdrop'
             });
             closeModal();
@@ -51,7 +51,7 @@
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape' && closeByEscape) {
             event.preventDefault();
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'escape'
             });
             closeModal();
@@ -87,7 +87,7 @@
 </dialog>
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
     .modal.is-huge {
         block-size: 100%;
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
new file mode 100644
index 000000000..02ac75d28
--- /dev/null
+++ b/src/lib/components/navbar.svelte
@@ -0,0 +1,433 @@
+<script lang="ts" context="module">
+    export type NavbarProject = {
+        name: string;
+        $id: string;
+        region: string;
+        isSelected: boolean;
+        platformCount: number;
+        pingCount: number;
+    };
+
+    export type BaseNavbarProps = HTMLAttributes<HTMLHeadElement> & {
+        logo: {
+            src: string;
+            alt: string;
+        };
+        avatar: string;
+        sideBarIsOpen: boolean;
+    };
+</script>
+
+<script lang="ts">
+    import {
+        Navbar,
+        Icon,
+        Layout,
+        Link,
+        Tooltip,
+        Card,
+        ActionMenu,
+        ToggleButton,
+        Button,
+        Avatar,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
+    import {
+        IconChevronRight,
+        IconLogoutRight,
+        IconMenuAlt4,
+        IconMode,
+        IconMoon,
+        IconSearch,
+        IconSun,
+        IconUser
+    } from '@appwrite.io/pink-icons-svelte';
+    import { DropList, Support, Breadcrumbs, BottomSheet } from '$lib/components';
+    import { Feedback } from '$lib/components/feedback';
+    import { feedback } from '$lib/stores/feedback';
+    import { isMac } from '$lib/helpers/platform';
+    import { base } from '$app/paths';
+    import { logout } from '$lib/helpers/logout';
+    import { app } from '$lib/stores/app';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isCloud } from '$lib/system.js';
+    import { user } from '$lib/stores/user';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let showSupport = false;
+
+    type $$Props = BaseNavbarProps & {
+        links?: Array<{ label: string; href: string }>;
+        organizations: Array<{
+            name: string;
+            $id: string;
+            isSelected: boolean;
+            showUpgrade: boolean;
+            tierName: string;
+            projects: Array<NavbarProject>;
+        }>;
+        showAccountMenu: boolean;
+    };
+
+    function updateTheme(theme: 'light' | 'dark' | 'auto') {
+        const themeInUse =
+            theme === 'auto'
+                ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? 'dark'
+                    : 'light'
+                : theme;
+
+        trackEvent('select_theme', {
+            value: theme === 'auto' ? 'system' : theme
+        });
+
+        app.update(() => ({
+            themeInUse: themeInUse,
+            theme: theme
+        }));
+    }
+
+    function toggleFeedback() {
+        trackEvent(Click.FeedbackSubmitClick);
+        feedback.toggleFeedback();
+        if ($feedback.notification) {
+            feedback.toggleNotification();
+            feedback.addVisualization();
+        }
+    }
+
+    export let logo: $$Props['logo'];
+    export let organizations: $$Props['organizations'];
+    export let avatar: $$Props['avatar'];
+    export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
+    export let showAccountMenu = false;
+
+    let activeTheme = $app.theme;
+    let shouldAnimateThemeToggle = false;
+
+    $: {
+        if (activeTheme) {
+            updateTheme(activeTheme);
+        }
+    }
+
+    $: currentOrg = organizations.find((org) => org.isSelected);
+    $: selectedProject = currentOrg?.projects.find((project) => project.isSelected);
+</script>
+
+<Navbar.Base {...$$props}>
+    <div slot="left" class="left">
+        <div class="only-mobile-tablet">
+            <button
+                class="sideNavToggle"
+                on:click={() => {
+                    sideBarIsOpen = !sideBarIsOpen;
+                }}>
+                <Icon icon={IconMenuAlt4} />
+            </button>
+        </div>
+        <a href={base} class="only-desktop">
+            <img src={logo.src} alt={logo.alt} />
+        </a>
+        <Breadcrumbs {organizations} />
+        {#if selectedProject && selectedProject.pingCount === 0}
+            <div class="only-desktop" style:margin-inline-start="-16px">
+                <Button.Anchor
+                    href={`${base}/project-${selectedProject.region}-${selectedProject.$id}/get-started`}
+                    variant="secondary"
+                    size="xs">Connect</Button.Anchor>
+            </div>
+        {/if}
+    </div>
+    <div slot="right" class="only-desktop">
+        <div class="right">
+            <Layout.Stack gap="l" direction="row" alignItems="center">
+                {#if isCloud && currentOrg?.showUpgrade}
+                    <Button.Anchor
+                        size="s"
+                        variant="primary"
+                        on:click={() => {
+                            trackEvent(Click.OrganizationClickUpgrade, {
+                                from: 'button',
+                                source: 'top_nav'
+                            });
+                        }}
+                        href={`${base}/organization-${currentOrg.$id}/change-plan`}
+                        >Upgrade</Button.Anchor>
+                {/if}
+
+                <DropList show={$feedback.show} class="extended-width">
+                    <Button.Button
+                        type="button"
+                        variant="compact"
+                        on:click={() => {
+                            toggleFeedback();
+                            trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
+                        }}
+                        >Feedback
+                    </Button.Button>
+                    <svelte:fragment slot="other">
+                        <Feedback />
+                    </svelte:fragment>
+                </DropList>
+                <DropList
+                    noArrow
+                    scrollable
+                    width="28.25"
+                    placement="bottom-end"
+                    class="extended-width"
+                    bind:show={showSupport}>
+                    <Button.Button
+                        variant="compact"
+                        type="button"
+                        on:click={() => {
+                            showSupport = !showSupport;
+                            trackEvent(Click.SupportOpenClick, { source: 'top_nav' });
+                        }}>
+                        Support
+                    </Button.Button>
+
+                    <svelte:fragment slot="other">
+                        <Support bind:show={showSupport} />
+                    </svelte:fragment>
+                </DropList>
+            </Layout.Stack>
+            <Layout.Stack direction="row">
+                <Tooltip>
+                    <Button.Button
+                        variant="text"
+                        aria-label="Toggle Command Center"
+                        on:click={toggleCommandCenter}
+                        icon>
+                        <Icon icon={IconSearch} />
+                    </Button.Button>
+                    <span slot="tooltip">{isMac() ? '⌘ + K' : 'Ctrl + K'}</span></Tooltip>
+            </Layout.Stack>
+            <Link.Button
+                on:click={() => {
+                    showAccountMenu = !showAccountMenu;
+                    shouldAnimateThemeToggle = false;
+                    if (showAccountMenu) {
+                        trackEvent(Click.MenuDropDownClick);
+                    }
+                }}>
+                <div style:user-select="none">
+                    <Avatar size="s" src={avatar} />
+                </div>
+            </Link.Button>
+            {#if showAccountMenu}
+                <div class="account-container">
+                    <Card.Base padding="xxxs" shadow={true}>
+                        <Layout.Stack gap="xxs">
+                            <ActionMenu.Root>
+                                <Layout.Stack gap="xxs">
+                                    <div
+                                        style:padding-inline-start="10px"
+                                        style:padding-inline-end="8px"
+                                        style:padding-block="4px">
+                                        <Typography.Text variant="m-500">
+                                            {$user.email}
+                                        </Typography.Text>
+                                    </div>
+                                    <ActionMenu.Item.Anchor
+                                        trailingIcon={IconUser}
+                                        size="l"
+                                        href={`${base}/account`}>
+                                        Account</ActionMenu.Item.Anchor>
+
+                                    <ActionMenu.Item.Button
+                                        trailingIcon={IconLogoutRight}
+                                        size="l"
+                                        on:click={() => logout()}>Sign out</ActionMenu.Item.Button>
+                                    <div
+                                        style:padding-inline-start="10px"
+                                        style:padding-inline-end="8px">
+                                        <Layout.Stack
+                                            justifyContent="space-between"
+                                            direction="row"
+                                            alignItems="center">
+                                            <Typography.Text>Theme</Typography.Text>
+                                            <div
+                                                class:keepTransformTransition={shouldAnimateThemeToggle}>
+                                                <ToggleButton
+                                                    bind:active={activeTheme}
+                                                    on:change={() => {
+                                                        setTimeout(() => {
+                                                            shouldAnimateThemeToggle = true;
+                                                        }, 150);
+                                                    }}
+                                                    buttons={[
+                                                        {
+                                                            id: 'light',
+                                                            label: 'Light',
+                                                            icon: IconSun
+                                                        },
+                                                        {
+                                                            id: 'dark',
+                                                            label: 'Dark',
+                                                            icon: IconMoon
+                                                        },
+                                                        {
+                                                            id: 'auto',
+                                                            label: 'System',
+                                                            icon: IconMode
+                                                        }
+                                                    ]}></ToggleButton>
+                                            </div>
+                                        </Layout.Stack>
+                                    </div>
+                                </Layout.Stack>
+                            </ActionMenu.Root>
+                        </Layout.Stack>
+                    </Card.Base>
+                </div>
+                <button
+                    class="account-backdrop"
+                    aria-label="Account menu"
+                    on:click={() => {
+                        showAccountMenu = false;
+                    }}></button>
+            {/if}
+        </div>
+    </div>
+</Navbar.Base>
+{#if showAccountMenu && $isTabletViewport}
+    <BottomSheet.Menu
+        bind:isOpen={showAccountMenu}
+        menu={{
+            top: {
+                items: [
+                    {
+                        name: 'Account',
+                        leadingIcon: IconUser,
+                        href: `${base}/account`
+                    },
+                    {
+                        name: 'Sign out',
+                        leadingIcon: IconLogoutRight,
+                        onClick: logout
+                    }
+                ]
+            },
+            bottom: {
+                items: [
+                    {
+                        name: 'Theme',
+                        leadingIcon: IconMode,
+                        trailingIcon: IconChevronRight,
+                        subMenu: {
+                            top: {
+                                title: 'Theme',
+                                items: [
+                                    {
+                                        name: 'Light',
+                                        leadingIcon: IconSun,
+                                        onClick: () => {
+                                            updateTheme('light');
+                                        }
+                                    },
+                                    {
+                                        name: 'Dark',
+                                        leadingIcon: IconMoon,
+                                        onClick: () => {
+                                            updateTheme('dark');
+                                        }
+                                    },
+                                    {
+                                        name: 'System',
+                                        leadingIcon: IconMode,
+                                        onClick: () => {
+                                            updateTheme('auto');
+                                        }
+                                    }
+                                ]
+                            },
+                            bottom: undefined
+                        }
+                    }
+                ]
+            }
+        }}></BottomSheet.Menu>
+{/if}
+
+<style lang="scss">
+    .left {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        flex-shrink: 0;
+        max-width: 100%;
+
+        @media (min-width: 1024px) {
+            gap: 17px;
+        }
+    }
+
+    .right {
+        display: flex;
+        gap: var(--space-9, 24px);
+    }
+
+    :global(.right button) {
+        flex-shrink: 0;
+    }
+
+    .sideNavToggle {
+        display: flex;
+        width: 28px;
+        height: 28px;
+        padding: var(--space-3, 6px);
+        justify-content: center;
+        align-items: center;
+        gap: var(--space-4, 8px);
+        border-radius: var(--border-radius-xs, 6px);
+        border: var(--border-width-s, 1px) solid var(--border-neutral-strong, #d8d8db);
+        background: var(--bgcolor-neutral-primary, #fff);
+        cursor: pointer;
+    }
+
+    .only-desktop {
+        display: none;
+    }
+
+    @media (min-width: 1024px) {
+        .only-mobile-tablet {
+            display: none;
+        }
+        .only-desktop {
+            display: flex;
+        }
+    }
+
+    .account-container {
+        position: absolute;
+        right: var(--space-7);
+        top: var(--base-44);
+        width: 244px;
+        display: flex;
+        z-index: 1;
+    }
+
+    .account-backdrop {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: transparent;
+    }
+
+    /* The default drop list has a max-inline width of 280px, which squeezes the support modal. */
+    :global(.extended-width) {
+        max-inline-size: none;
+
+        /* `desltop` is not a typo—it comes from the `pink2/legacy` module! */
+        inline-size: var(--p-drop-width-size-desltop);
+    }
+
+    :global(.keepTransformTransition span) {
+        transition: transform 0.2s ease-out !important;
+    }
+</style>
diff --git a/src/lib/components/output.svelte b/src/lib/components/output.svelte
index 8477967f0..ca83a8056 100644
--- a/src/lib/components/output.svelte
+++ b/src/lib/components/output.svelte
@@ -14,7 +14,7 @@
         {#if !hideCopyIcon}
             <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" />
+                    <span class="icon-duplicate" aria-hidden="true"></span>
                 </button>
             </div>
         {/if}
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 216455f72..ff338c213 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,35 +1,15 @@
 <script lang="ts">
-    import { page as pageStore } from '$app/stores';
-    import { Button } from '$lib/elements/forms';
+    import { page as pageStore } from '$app/state';
+    import { Pagination } from '@appwrite.io/pink-svelte';
 
     export let sum: number;
     export let limit: number;
     export let offset: number;
-    export let hidePages = false;
 
-    $: totalPages = Math.ceil(sum / limit);
     $: currentPage = Math.floor(offset / limit + 1);
-    $: pages = pagination(currentPage, totalPages);
-
-    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] : [])
-        ];
-    }
 
     function getLink(page: number): string {
-        const url = new URL($pageStore.url);
+        const url = new URL(pageStore.url);
         if (page === 1) {
             url.searchParams.delete('page');
         } else {
@@ -40,74 +20,4 @@
     }
 </script>
 
-{#if totalPages > 1}
-    {#key $pageStore.url}
-        <nav class="pagination">
-            {#if currentPage <= 1}
-                <Button disabled text ariaLabel="prev page">
-                    <span class="icon-cheveron-left" aria-hidden="true" />
-                    <span class="text">Prev</span>
-                </Button>
-            {:else}
-                <Button text ariaLabel="prev page" href={getLink(currentPage - 1)}>
-                    <span class="icon-cheveron-left" aria-hidden="true" />
-                    <span class="text">Prev</span>
-                </Button>
-            {/if}
-            {#if !hidePages}
-                <ol class="pagination-list is-only-desktop">
-                    {#each pages as page}
-                        {#if typeof page === 'number'}
-                            <li class="pagination-item">
-                                {#if currentPage === page}
-                                    <Button ariaLabel="page" disabled>
-                                        <span class="text">{page}</span>
-                                    </Button>
-                                {:else}
-                                    <Button text ariaLabel="page" href={getLink(page)}>
-                                        <span class="text">{page}</span>
-                                    </Button>
-                                {/if}
-                            </li>
-                        {:else}
-                            <li class="li is-text">
-                                <span class="icon">...</span>
-                            </li>
-                        {/if}
-                    {/each}
-                </ol>
-            {/if}
-            {#if currentPage >= totalPages}
-                <Button disabled text ariaLabel="next page">
-                    <span class="text">Next</span>
-                    <span class="icon-cheveron-right" aria-hidden="true" />
-                </Button>
-            {:else}
-                <Button text ariaLabel="next page" href={getLink(currentPage + 1)}>
-                    <span class="text">Next</span>
-                    <span class="icon-cheveron-right" aria-hidden="true" />
-                </Button>
-            {/if}
-        </nav>
-    {/key}
-{:else}
-    <nav class="pagination">
-        <Button text disabled ariaLabel="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 disabled ariaLabel="page">
-                        <span class="text">1</span>
-                    </Button>
-                </li>
-            </ol>
-        {/if}
-        <Button text disabled ariaLabel="next page">
-            <span class="text">Next</span>
-            <span class="icon-cheveron-right" aria-hidden="true" />
-        </Button>
-    </nav>
-{/if}
+<Pagination page={currentPage} total={sum} {limit} createLink={getLink} type="link" />
diff --git a/src/lib/components/paginationInline.svelte b/src/lib/components/paginationInline.svelte
index 12d48afb3..8ad8ab7f7 100644
--- a/src/lib/components/paginationInline.svelte
+++ b/src/lib/components/paginationInline.svelte
@@ -1,117 +1,84 @@
 <script lang="ts">
+    import { IconChevronLeft, IconChevronRight } from '@appwrite.io/pink-icons-svelte';
+    import { Button, Icon, Layout, Pagination } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
-    export let sum: number;
+    export let total: number;
     export let limit: number;
     export let offset: number;
     export let hidePages = false;
 
     const dispatch = createEventDispatcher();
 
-    $: totalPages = Math.ceil(sum / limit);
+    $: totalPages = Math.ceil(total / limit);
     $: currentPage = Math.floor(offset / limit + 1);
-    $: pages = pagination(currentPage, totalPages);
+    // $: pages = pagination(currentPage, totalPages);
 
-    function handleOptionClick(page: number) {
-        if (currentPage !== page) {
-            offset = limit * (page - 1);
-            currentPage = page;
+    function handleOptionClick(e: CustomEvent) {
+        if (currentPage !== e.detail) {
+            offset = limit * (e.detail - 1);
             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);
+    function next() {
+        if (currentPage < totalPages) {
+            offset = limit * currentPage;
             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] : [])
-        ];
+    function prev() {
+        if (currentPage > 1) {
+            offset = limit * (currentPage - 2);
+            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>
+{#if !hidePages}
+    <Pagination
+        {limit}
+        page={currentPage}
+        {total}
+        type="button"
+        on:page={handleOptionClick}
+        createLink={undefined as never} />
 {: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>
+    <Layout.Stack direction="row" inline>
+        <Button.Button
+            size="s"
+            variant="compact"
+            on:click={prev}
+            disabled={currentPage <= 1 || totalPages <= 1}>
+            <Icon icon={IconChevronLeft} slot="start" />
+            Prev
+        </Button.Button>
+
+        <Button.Button
+            size="s"
+            variant="compact"
+            on:click={next}
+            disabled={currentPage === totalPages || totalPages <= 1}>
+            <Icon icon={IconChevronRight} slot="end" />
+            Next
+        </Button.Button>
+    </Layout.Stack>
 {/if}
diff --git a/src/lib/components/paginationWithLimit.svelte b/src/lib/components/paginationWithLimit.svelte
index 18ef1ccf5..089019adc 100644
--- a/src/lib/components/paginationWithLimit.svelte
+++ b/src/lib/components/paginationWithLimit.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import Limit from './limit.svelte';
     import Pagination from './pagination.svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let limit: number;
     export let offset: number;
@@ -8,9 +9,7 @@
     export let name: string;
 </script>
 
-<div class="u-flex u-cross-baseline u-margin-block-start-32 u-flex-wrap">
+<Layout.Stack direction="row" alignItems="center" wrap="wrap" justifyContent="space-between">
     <Limit {limit} sum={total} {name} />
-    <div class="u-margin-inline-start-auto">
-        <Pagination {limit} {offset} sum={total} />
-    </div>
-</div>
+    <Pagination {limit} {offset} sum={total} />
+</Layout.Stack>
diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte
index e40e95103..ae8aaf9c4 100644
--- a/src/lib/components/paginator.svelte
+++ b/src/lib/components/paginator.svelte
@@ -1,21 +1,56 @@
-<script lang="ts">
+<script lang="ts" generics="T">
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import PaginationInline from './paginationInline.svelte';
+    import Limit from './limit.svelte';
+    import type { Snippet } from 'svelte';
 
-    export let items = [];
-    export let limit = 5;
-    export let hideFooter = false;
+    let {
+        items = [],
+        limit = $bindable(5),
+        hideFooter = false,
+        hidePages = true,
+        hasLimit = false,
+        name = 'items',
+        gap = 's',
+        offset = $bindable(0),
+        children
+    }: {
+        items: T[];
+        limit?: number;
+        hideFooter?: boolean;
+        hidePages?: boolean;
+        hasLimit?: boolean;
+        name?: string;
+        gap?:
+            | ('none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl')
+            | undefined;
+        offset?: number;
+        children: Snippet<[T[], number]>;
+    } = $props();
 
-    let offset = 0;
+    let total = $derived(items.length);
 
-    $: total = items?.length;
-    $: paginatedItems = items.slice(offset, offset + limit);
+    let paginatedItems = $derived(items.slice(offset, offset + limit));
 </script>
 
-<slot {paginatedItems} {limit} />
+<Layout.Stack {gap}>
+    {@render children(paginatedItems, limit)}
 
-{#if !hideFooter}
-    <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {total}</p>
-        <PaginationInline {limit} bind:offset sum={total} hidePages />
-    </div>
-{/if}
+    {#if !hideFooter}
+        <Layout.Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            wrap="wrap">
+            {#if hasLimit}
+                <Limit bind:limit sum={total} {name} />
+            {:else}
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                    Total results: {total}
+                </Typography.Text>
+            {/if}
+
+            <PaginationInline {limit} bind:offset {total} {hidePages} />
+        </Layout.Stack>
+    {/if}
+</Layout.Stack>
diff --git a/src/lib/components/permissions/actions.svelte b/src/lib/components/permissions/actions.svelte
index 3a5a04613..4bdbb7637 100644
--- a/src/lib/components/permissions/actions.svelte
+++ b/src/lib/components/permissions/actions.svelte
@@ -1,58 +1,91 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { DropList, DropListItem } from '..';
     import Label from './label.svelte';
     import Custom from './custom.svelte';
     import Team from './team.svelte';
     import User from './user.svelte';
     import type { Permission } from './permissions.svelte';
     import type { Writable } from 'svelte/store';
+    import { ActionMenu, Popover } from '@appwrite.io/pink-svelte';
 
-    export let showDropdown: boolean;
     export let showUser: boolean;
     export let showTeam: boolean;
     export let showLabel: boolean;
     export let showCustom: boolean;
+    export let hideOnClick: boolean = false;
     export let groups: Writable<Map<string, Permission>>;
 
     const dispatch = createEventDispatcher();
-
-    $: if (showUser || showTeam || showCustom) {
-        showDropdown = false;
-    }
 </script>
 
-<DropList bind:show={showDropdown} placement="bottom-end" fixed>
-    <slot />
-    <svelte:fragment slot="list">
-        <DropListItem disabled={$groups.has('any')} on:click={() => dispatch('create', ['any'])}>
-            Any
-        </DropListItem>
-        <DropListItem
-            disabled={$groups.has('guests')}
-            on:click={() => dispatch('create', ['guests'])}>
-            All guests
-        </DropListItem>
-        <DropListItem
-            disabled={$groups.has('users')}
-            on:click={() => dispatch('create', ['users'])}>
-            All users
-        </DropListItem>
-        <DropListItem on:click={() => (showUser = true)}>Select users</DropListItem>
-        <DropListItem on:click={() => (showTeam = true)}>Select teams</DropListItem>
-        <DropListItem on:click={() => (showLabel = true)}>Label</DropListItem>
-        <DropListItem on:click={() => (showCustom = true)}>Custom permission</DropListItem>
+<Popover let:toggle padding="none" placement="bottom-start">
+    <slot {toggle} />
+    <svelte:fragment slot="tooltip" let:hide>
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                disabled={$groups.has('any')}
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['any']);
+                }}>
+                Any
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                disabled={$groups.has('guests')}
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['guests']);
+                }}>
+                All guests
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                disabled={$groups.has('users')}
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['users']);
+                }}>
+                All users
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showUser = true;
+                    if (hideOnClick) hide(e);
+                }}>Select users</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showTeam = true;
+                    if (hideOnClick) hide(e);
+                }}>Select teams</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showLabel = true;
+                    if (hideOnClick) hide(e);
+                }}>Label</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCustom = true;
+                    if (hideOnClick) hide(e);
+                }}>Custom permission</ActionMenu.Item.Button>
+        </ActionMenu.Root>
     </svelte:fragment>
-</DropList>
+</Popover>
 
-<User bind:show={showUser} on:create {groups} />
-<Team
-    bind:show={showTeam}
-    on:create
-    on:custom={() => {
-        showTeam = false;
-        showCustom = true;
-    }}
-    {groups} />
-<Label bind:show={showLabel} on:create {groups} />
-<Custom bind:show={showCustom} on:create {groups} />
+{#if showUser}
+    <User bind:show={showUser} on:create {groups} />
+{/if}
+{#if showTeam}
+    <Team
+        bind:show={showTeam}
+        on:create
+        on:custom={() => {
+            showTeam = false;
+            showCustom = true;
+        }}
+        {groups} />
+{/if}
+{#if showLabel}
+    <Label bind:show={showLabel} on:create {groups} />
+{/if}
+{#if showCustom}
+    <Custom bind:show={showCustom} on:create {groups} />
+{/if}
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 35abd34db..64c08d9fc 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormItem, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -25,25 +25,18 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal
-    title="Custom permission"
-    description="Custom permissions allow you to grant access to specific users or teams using their ID and
-role."
-    bind:show
-    on:close={reset}
-    onSubmit={create}>
-    <FormList>
-        <FormItem>
-            <InputText
-                id="custom-permission"
-                label="Role"
-                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>
-        </FormItem>
-    </FormList>
+<Modal title="Custom permission" bind:show on:close={reset} onSubmit={create}>
+    <span slot="description">
+        Custom permissions allow you to grant access to specific users or teams using their ID and
+        role.
+    </span>
+    <InputText
+        required
+        id="custom-permission"
+        label="Role"
+        placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+        helper="A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸"
+        bind:value />
 
     <svelte:fragment slot="footer">
         <Button submit {disabled}>Add</Button>
diff --git a/src/lib/components/permissions/label.svelte b/src/lib/components/permissions/label.svelte
index 86a86b714..74ed9db0c 100644
--- a/src/lib/components/permissions/label.svelte
+++ b/src/lib/components/permissions/label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormItem, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -12,7 +12,6 @@
 
     const pattern = String.raw`^[a-zA-Z0-9]+$`;
     let value = '';
-    let isError = false;
 
     function reset() {
         value = '';
@@ -21,7 +20,6 @@
 
     function create() {
         if (!value || !value.match(pattern)) {
-            isError = true;
             return;
         }
 
@@ -32,19 +30,17 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal
-    title="Label"
-    description="Labels allow you to grant access to users with the specified label."
-    bind:show
-    on:close={reset}
-    onSubmit={create}>
-    <FormList>
-        <FormItem>
-            <InputText id="label" label="Label" placeholder="Enter label" bind:value />
-            <Helper type={isError ? 'warning' : 'neutral'}
-                >Only alphanumeric characters are allowed.</Helper>
-        </FormItem>
-    </FormList>
+<Modal title="Label" bind:show on:close={reset} onSubmit={create}>
+    <svelte:fragment slot="description">
+        Labels allow you to grant access to users with the specified label.
+    </svelte:fragment>
+    <InputText
+        required
+        id="label"
+        label="Label"
+        placeholder="Enter label"
+        bind:value
+        helper="Only alphanumeric characters are allowed." />
 
     <svelte:fragment slot="footer">
         <Button submit {disabled}>Add</Button>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index f4d969d73..efefa7f1a 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -11,28 +11,23 @@
 
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { symmetricDifference } from '$lib/helpers/array';
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
-    import Table from '$lib/elements/table/table.svelte';
+    import { Icon, Selector, Table } from '@appwrite.io/pink-svelte';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+    import type { PinkColumn } from '$lib/helpers/types';
 
     export let withCreate = false;
+    export let hideOnClick = false;
     export let permissions: string[] = [];
 
     let showUser = false;
     let showTeam = false;
     let showLabel = false;
     let showCustom = false;
-    let showDropdown = false;
 
     const groups = writable<Map<string, Permission>>(new Map());
 
@@ -69,8 +64,6 @@
 
             return n;
         });
-
-        showDropdown = false;
     }
 
     function fromPermissionString(permission: string): void {
@@ -133,93 +126,85 @@
 
         return a.localeCompare(b);
     }
+
+    const columns: PinkColumn[] = [
+        { id: 'role', width: { min: 80 } },
+        { id: 'create', width: { min: 80 }, hide: !withCreate },
+        { id: 'read', width: { min: 80 } },
+        { id: 'update', width: { min: 80 } },
+        { id: 'delete', width: { min: 80 } },
+        { id: 'action', width: 40 }
+    ];
 </script>
 
 {#if [...$groups]?.length}
     <div class="table-wrapper">
-        <Table noMargin noStyles>
-            <TableHeader>
-                <TableCellHead width={140}>Role</TableCellHead>
+        <Table.Root {columns} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="role" {root}>Role</Table.Header.Cell>
                 {#if withCreate}
-                    <TableCellHead width={60}>Create</TableCellHead>
+                    <Table.Header.Cell column="create" {root}>Create</Table.Header.Cell>
                 {/if}
-                <TableCellHead width={50}>Read</TableCellHead>
-                <TableCellHead width={60}>Update</TableCellHead>
-                <TableCellHead width={60}>Delete</TableCellHead>
-                <TableCellHead width={32} />
-            </TableHeader>
-            <TableBody>
-                {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
-                    <TableRow>
-                        <TableCell title="Role">
-                            <Row {role} />
-                        </TableCell>
+                <Table.Header.Cell column="read" {root}>Read</Table.Header.Cell>
+                <Table.Header.Cell column="update" {root}>Update</Table.Header.Cell>
+                <Table.Header.Cell column="delete" {root}>Delete</Table.Header.Cell>
+                <Table.Header.Cell column="action" {root} />
+            </svelte:fragment>
+            {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="role" {root}>
+                        <Row {role} />
+                    </Table.Cell>
+                    <Table.Cell column="create" {root}>
+                        <Selector.Checkbox
+                            checked={permission.create}
+                            on:change={() => togglePermission(role, 'create')} />
+                    </Table.Cell>
+                    <Table.Cell column="read" {root}>
+                        <Selector.Checkbox
+                            size="s"
+                            checked={permission.read}
+                            on:change={() => togglePermission(role, 'read')} />
+                    </Table.Cell>
+                    <Table.Cell column="update" {root}>
+                        <Selector.Checkbox
+                            size="s"
+                            checked={permission.update}
+                            on:change={() => togglePermission(role, 'update')} />
+                    </Table.Cell>
+                    <Table.Cell column="delete" {root}>
+                        <Selector.Checkbox
+                            size="s"
+                            checked={permission.delete}
+                            on:change={() => togglePermission(role, 'delete')} />
+                    </Table.Cell>
 
-                        {#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">
-                            <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">
-                                <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>
-                        </TableCell>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </Table>
+                    <Table.Cell column="action" {root}>
+                        <Button compact icon ariaLabel="delete" on:click={() => deleteRole(role)}>
+                            <Icon icon={IconX} size="s" />
+                        </Button>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
     </div>
 
-    <Actions
-        bind:showLabel
-        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>
+    <div>
+        <Actions
+            bind:showLabel
+            bind:showCustom
+            bind:showTeam
+            bind:showUser
+            {groups}
+            {hideOnClick}
+            on:create={create}
+            let:toggle>
+            <Button secondary on:click={toggle}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add role
+            </Button>
+        </Actions>
+    </div>
 {: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">
@@ -227,13 +212,14 @@
                 <Actions
                     bind:showLabel
                     bind:showCustom
-                    bind:showDropdown
                     bind:showTeam
                     bind:showUser
                     {groups}
-                    on:create={create}>
-                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
-                        <i class="icon-plus" />
+                    {hideOnClick}
+                    on:create={create}
+                    let:toggle>
+                    <Button compact icon on:click={toggle}>
+                        <Icon icon={IconPlus} size="s" />
                     </Button>
                 </Actions>
             </div>
diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte
index 8412f8eeb..23ea58dda 100644
--- a/src/lib/components/permissions/roles.svelte
+++ b/src/lib/components/permissions/roles.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
+
     import { symmetricDifference } from '$lib/helpers/array';
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
     import Actions from './actions.svelte';
     import type { Permission } from './permissions.svelte';
     import Row from './row.svelte';
+    import { Card, Icon, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
 
     export let roles: string[] = [];
 
@@ -22,7 +16,6 @@
     let showTeam = false;
     let showLabel = false;
     let showCustom = false;
-    let showDropdown = false;
 
     const groups = writable<Map<string, Permission>>(new Map());
 
@@ -54,8 +47,6 @@
 
             return n;
         });
-
-        showDropdown = false;
     }
 
     function deleteRole(role: string): void {
@@ -86,65 +77,59 @@
 </script>
 
 {#if [...$groups.keys()]?.length}
-    <Table noMargin noStyles>
-        <TableHeader>
-            <TableCellHead width={70}>Role</TableCellHead>
-            <TableCellHead width={40} />
-        </TableHeader>
-        <TableBody>
+    <Layout.Stack>
+        <Table.Root columns={[{ id: 'role' }, { id: 'action', width: 40 }]} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="role" {root}>Role</Table.Header.Cell>
+                <Table.Header.Cell column="action" {root} />
+            </svelte:fragment>
             {#each [...$groups.keys()].sort(sortRoles) as role}
-                <TableRow>
-                    <TableCell title="Role">
+                <Table.Row.Base {root}>
+                    <Table.Cell column="role" {root}>
                         <Row {role} />
-                    </TableCell>
-                    <TableCellText title="Remove">
-                        <div class="u-flex u-main-end">
-                            <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>
+                    </Table.Cell>
+                    <Table.Cell column="action" {root}>
+                        <Layout.Stack justifyContent="flex-end">
+                            <Button compact icon on:click={() => deleteRole(role)}>
+                                <Icon icon={IconX} size="s" />
+                            </Button>
+                        </Layout.Stack>
+                    </Table.Cell>
+                </Table.Row.Base>
             {/each}
-        </TableBody>
-    </Table>
-    <Actions
-        bind:showLabel
-        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>
+        </Table.Root>
+        <Actions
+            bind:showLabel
+            bind:showCustom
+            bind:showTeam
+            bind:showUser
+            {groups}
+            on:create={create}
+            let:toggle>
+            <div>
+                <Button compact on:click={toggle}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add role
+                </Button>
+            </div>
+        </Actions>
+    </Layout.Stack>
 {: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:showLabel
-                    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 </span>
-            </div>
-        </div>
-    </article>
+    <Card.Base>
+        <Layout.Stack justifyContent="center" alignItems="center" gap="m">
+            <Actions
+                bind:showLabel
+                bind:showCustom
+                bind:showTeam
+                bind:showUser
+                {groups}
+                on:create={create}
+                let:toggle>
+                <Button secondary icon on:click={toggle}>
+                    <Icon icon={IconPlus} size="s" />
+                </Button>
+            </Actions>
+            <span class="text">Add a role </span>
+        </Layout.Stack>
+    </Card.Base>
 {/if}
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index a567a0d2a..31a6fd4db 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import { tick } from 'svelte';
     import { AvatarInitials } from '../';
-    import Output from '../output.svelte';
-    import { page } from '$app/stores';
+    import {
+        Button,
+        Divider,
+        Icon,
+        Layout,
+        Link,
+        Popover,
+        Spinner,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import Avatar from '../avatar.svelte';
+    import { IconAnonymous, IconExternalLink, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
 
     export let role: string;
 
-    let content: HTMLDivElement;
-    let data = null;
-    let isFetching = false;
-
     async function getData(
         permission: string
     ): Promise<
@@ -22,142 +28,90 @@
         const id = permission.split(':')[1].split('/')[0];
         if (role === 'user') {
             const user = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.get(id);
             return user;
         }
         if (role === 'team') {
             const team = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .teams.get(id);
             return team;
         }
     }
 </script>
 
-<div class="u-flex u-cross-center u-gap-8 tippy-user">
-    <div>
-        {#if role === 'users'}
-            <div>Users</div>
-        {:else if role === 'guests'}
-            <div>Guests</div>
-        {:else if role === 'any'}
-            <div>Any</div>
-        {:else}
-            <div
-                class="u-trim-1"
-                use:tooltip={{
-                    interactive: true,
-                    allowHTML: true,
-                    onShow(instance) {
-                        if (isFetching || data) {
-                            return;
-                        }
-
-                        getData(role)
-                            .then((n) => {
-                                data = n;
-                            })
-                            .finally(() => {
-                                tick().then(() => {
-                                    instance.setContent(content);
-                                });
-                            });
-                    }
-                }}>
-                {role}
-            </div>
-            <div class="u-hide">
-                <div bind:this={content}>
-                    {#if data}
-                        {@const isUser = role.startsWith('user')}
-                        {@const isTeam = role.startsWith('team')}
-                        {@const isAnonymous = !data.email && !data.phone && isUser}
-                        <div class="user-profile">
+{#if role === 'users'}
+    <div>Users</div>
+{:else if role === 'guests'}
+    <div>Guests</div>
+{:else if role === 'any'}
+    <div>Any</div>
+{:else}
+    <Popover let:toggle placement="bottom-start">
+        <Link.Button on:click={toggle}>{role}</Link.Button>
+        <div let:showing slot="tooltip" style:width="200px">
+            {#key showing}
+                {#await getData(role)}
+                    <Layout.Stack alignItems="center">
+                        <Spinner />
+                    </Layout.Stack>
+                {:then data}
+                    {@const isUser = role.startsWith('user')}
+                    {@const isTeam = role.startsWith('team')}
+                    {@const isAnonymous = !data.email && !data.phone && !data.name && isUser}
+                    <Layout.Stack>
+                        <Layout.Stack direction="row" gap="s" alignItems="center">
                             {#if isAnonymous}
-                                <div class="avatar is-size-small">
-                                    <span class="icon-anonymous" aria-hidden="true" />
-                                </div>
+                                <Avatar alt="avatar" size="xs">
+                                    <Icon icon={IconAnonymous} size="s" />
+                                </Avatar>
                             {:else if data.name}
-                                <AvatarInitials name={data.name} size={40} />
+                                <AvatarInitials name={data.name} size="xs" />
                             {:else}
-                                <div class="avatar is-size-small">
-                                    <span class="icon-minus-sm" aria-hidden="true" />
-                                </div>
+                                <Avatar alt="avatar" size="xs">
+                                    <Icon icon={IconMinusSm} size="s" />
+                                </Avatar>
                             {/if}
-                            <span class="user-profile-info is-only-desktop">
-                                <span class="name">
-                                    {data.name ?? data?.email ?? data?.phone ?? '-'}
-                                </span>
-                                <Output value={data.$id}>{role}</Output>
-                            </span>
-                            {#if (isUser && (data?.email || data?.phone)) || isTeam}
-                                <span class="user-profile-sep" />
+                            <Typography.Text truncate color="--fgcolor-neutral-primary">
+                                {data.name ?? data?.email ?? data?.phone ?? '-'}
+                            </Typography.Text>
+                        </Layout.Stack>
 
-                                <span class="user-profile-empty-column" />
-                                <span class="user-profile-info is-only-desktop">
-                                    {#if isUser}
-                                        <div class="u-grid u-gap-4">
-                                            {#if data?.email}
-                                                <p class="text u-x-small">Email: {data?.email}</p>
-                                            {/if}
-                                            {#if data?.phone}
-                                                <p class="text u-x-small">Phone: {data?.phone}</p>
-                                            {/if}
-                                        </div>
-                                    {:else if isTeam}
-                                        <p class="text u-x-small">Members: {data?.total}</p>
-                                    {/if}
-                                </span>
+                        <Divider />
+                        {#if isUser}
+                            {#if data?.email}
+                                <Typography.Text truncate>Email: {data?.email}</Typography.Text>
                             {/if}
-                        </div>
-                    {:else}
-                        Not found.
-                    {/if}
-                </div>
-            </div>
-        {/if}
-    </div>
-</div>
-
-<!-- svelte-ignore css-unused-selector -->
-<style lang="scss" global>
-    .tippy-user .tippy-box {
-        --p-drop-bg-color: var(--color-neutral-105);
-        --p-drop-border-color: var(--color-neutral-85);
-
-        inset-inline-start: -0.625rem;
-        inset-block-end: calc(100% + 0.625rem);
-        background-color: hsl(var(--p-drop-bg-color));
-        border: solid 0.0625rem hsl(var(--p-drop-border-color));
-        border-radius: var(--border-radius-small);
-        box-shadow: var(--shadow-small);
-        font-size: var(--font-size-0);
-        color: hsl(var(--p-body-text-color));
-        max-inline-size: 32.5rem;
-        margin-inline: auto;
-        line-height: 1.5;
-
-        body.theme-light & {
-            --p-drop-bg-color: var(--color-neutral-0);
-            --p-drop-border-color: var(--color-neutral-10);
-        }
-
-        .tippy-content {
-            padding: 1rem;
-        }
-
-        &[data-placement^='top'] > .tippy-arrow::before {
-            border-top-color: hsl(var(--p-drop-bg-color));
-        }
-        &[data-placement^='bottom'] > .tippy-arrow::before {
-            border-bottom-color: hsl(var(--p-drop-bg-color));
-        }
-        &[data-placement^='left'] > .tippy-arrow::before {
-            border-left-color: hsl(var(--p-drop-bg-color));
-        }
-        &[data-placement^='right'] > .tippy-arrow::before {
-            border-right-color: hsl(var(--p-drop-bg-color));
-        }
-    }
-</style>
+                            {#if data?.phone}
+                                <Typography.Text truncate>Phone: {data?.phone}</Typography.Text>
+                            {/if}
+                            <div>
+                                <Button.Anchor
+                                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/user-${data?.$id}`}
+                                    size="xs"
+                                    target="_blank"
+                                    variant="secondary">
+                                    View user
+                                    <Icon slot="end" icon={IconExternalLink} size="s" />
+                                </Button.Anchor>
+                            </div>
+                        {:else if isTeam}
+                            <Typography.Text>Members: {data?.total}</Typography.Text>
+                            <div>
+                                <Button.Anchor
+                                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${data?.$id}`}
+                                    size="s"
+                                    target="_blank"
+                                    variant="secondary">
+                                    View team
+                                    <Icon slot="end" icon={IconExternalLink} size="s" />
+                                </Button.Anchor>
+                            </div>
+                        {/if}
+                    </Layout.Stack>
+                {/await}
+            {/key}
+        </div>
+    </Popover>
+{/if}
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 3908e0885..46d55e2b5 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -6,9 +6,16 @@
     import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
-    import Table from '$lib/elements/table/table.svelte';
-    import { TableBody, TableCell, TableRow } from '$lib/elements/table';
-    import { page } from '$app/stores';
+    import {
+        Card,
+        Empty,
+        Layout,
+        Link,
+        Selector,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     export let show: boolean;
     export let groups: Writable<Map<string, Permission>>;
@@ -35,18 +42,18 @@
     async function request() {
         if (!show) return;
         results = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .teams.list([Query.limit(5), Query.offset(offset)], search || undefined);
     }
 
-    function onSelection(event: Event, role: string) {
-        const { checked } = event.currentTarget as HTMLInputElement;
-
+    function onSelection(role: string) {
+        const checked = selected.has(role);
         if (checked) {
-            selected.add(role);
-        } else {
             selected.delete(role);
+        } else {
+            selected.add(role);
         }
+        selected = selected;
 
         hasSelection = selected.size > 0;
     }
@@ -63,88 +70,68 @@
     }
 </script>
 
-<Modal title="Select teams" bind:show onSubmit={create} on:close={reset} size="big">
-    <p class="text">
-        Grant access to any member of a specific team. To grant access to team members with specific
-        roles, you will need to set a <button
-            type="button"
-            class="link"
-            on:click={() => dispatch('custom')}>custom permission</button
-        >.
-    </p>
-    <InputSearch
-        autofocus
-        disabled={!results?.teams?.length && !search}
-        placeholder="Search by name or ID"
-        bind:value={search} />
+<Modal title="Select teams" bind:show onSubmit={create} on:close={reset}>
+    <Typography.Text
+        >Grant access to any member of a specific team. To grant access to team members with
+        specific roles, you will need to set a <Link.Button on:click={() => dispatch('custom')}
+            >custom permission</Link.Button
+        >.</Typography.Text>
+    <InputSearch autofocus placeholder="Search by name or ID" bind:value={search} />
     {#if results?.teams?.length}
-        <div class="table-wrapper">
-            <Table noStyles isAutoLayout tag="table">
-                <TableBody>
-                    {#each results.teams as team (team.$id)}
-                        {@const role = `team:${team.$id}`}
-                        {@const exists = $groups.has(role)}
-                        <TableRow>
-                            <TableCell title="Enabled" 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)} />
-                            </TableCell>
-                            <TableCell 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 u-bold">{team.name}</div>
-                                        <div class="u-x-small">{team.$id}</div>
-                                    </div>
-                                </label>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        </div>
+        <Table.Root columns={[{ id: 'checkbox', width: 40 }, { id: 'team' }]} let:root>
+            {#each results.teams as team (team.$id)}
+                {@const role = `team:${team.$id}`}
+                {@const exists = $groups.has(role)}
+                <Table.Row.Button {root} on:click={() => onSelection(role)} disabled={exists}>
+                    <Table.Cell column="checkbox" {root}>
+                        <Selector.Checkbox
+                            id={team.$id}
+                            checked={exists || selected.has(role)}
+                            disabled={exists} />
+                    </Table.Cell>
+                    <Table.Cell column="team" {root}>
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            <AvatarInitials size="xs" name={team.name} />
+                            <Layout.Stack gap="none">
+                                <Typography.Caption variant="400">{team.name}</Typography.Caption>
+                                <Typography.Caption
+                                    variant="400"
+                                    color="--fgcolor-neutral-tertiary">
+                                    {team.$id}
+                                </Typography.Caption>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Table.Cell>
+                </Table.Row.Button>
+            {/each}
+        </Table.Root>
         <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 />
+            <PaginationInline limit={5} bind:offset total={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 u-bold">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/products/auth/teams" text
-                        >Documentation</Button>
-                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
-                </div>
-            </div>
+        <EmptySearch bind:search target="teams" hidePages>
+            <Button
+                external
+                href="https://appwrite.io/docs/products/auth/teams"
+                text
+                event="empty_documentation"
+                size="s">Documentation</Button>
+            <Button secondary on:click={() => (search = '')}>Clear search</Button>
         </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? Learn more in our <a
-                            href="https://appwrite.io/docs/products/auth/teams"
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            documentation</a
-                        >.
-                    </p>
-                </div>
-            </div>
-        </EmptySearch>
+        <Card.Base padding="none">
+            <Empty title="You have no teams. Create a team to see them here." type="secondary">
+                <Typography.Text slot="description">
+                    Need a hand? Learn more in our <Link.Anchor
+                        href="https://appwrite.io/docs/products/auth/teams"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        documentation</Link.Anchor
+                    >.
+                </Typography.Text>
+            </Empty>
+        </Card.Base>
     {/if}
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index b9b471caa..2c4022b7c 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -6,7 +6,19 @@
     import { Query, type Models } from '@appwrite.io/console';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
-    import { page } from '$app/stores';
+    import {
+        Avatar,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Link,
+        Selector,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconAnonymous, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     export let show: boolean;
     export let groups: Writable<Map<string, Permission>>;
@@ -33,18 +45,18 @@
     async function request() {
         if (!show) return;
         results = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .users.list([Query.limit(5), Query.offset(offset)], search || undefined);
     }
 
-    function onSelection(event: Event, role: string) {
-        const { checked } = event.currentTarget as HTMLInputElement;
-
+    function onSelection(role: string) {
+        const checked = selected.has(role);
         if (checked) {
-            selected.add(role);
-        } else {
             selected.delete(role);
+        } else {
+            selected.add(role);
         }
+        selected = selected;
 
         hasSelection = selected.size > 0;
     }
@@ -61,107 +73,99 @@
     }
 </script>
 
-<Modal title="Select users" bind:show onSubmit={create} on:close={reset} size="big">
-    <p class="text">Grant access to any authenticated or anonymous user.</p>
-    <InputSearch
-        autofocus
-        disabled={!results?.users?.length && !search}
-        placeholder="Search by name, email, phone or ID"
-        bind:value={search} />
+<Modal title="Select users" bind:show onSubmit={create} on:close={reset}>
+    <Typography.Text>Grant access to any authenticated or anonymous user.</Typography.Text>
+    <InputSearch autofocus placeholder="Search by name, email, phone or ID" 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 u-bold">
-                                                    {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 u-bold">
-                                                    {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 u-bold">
-                                                {user.name ? user.name : '-'}
-                                            </div>
-                                            <div class="u-x-small">{user.$id}</div>
-                                        </div>
-                                    {/if}
-                                </label>
-                            </td>
-                        </tr>
-                    {/each}
-                </tbody>
-            </table>
-        </div>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <Table.Root columns={[{ id: 'checkbox', width: 40 }, { id: 'user' }]} let:root>
+            {#each results.users as user (user.$id)}
+                {@const role = `user:${user.$id}`}
+                {@const exists = $groups.has(role)}
+                <Table.Row.Button {root} on:click={() => onSelection(role)} disabled={exists}>
+                    <Table.Cell column="checkbox" {root}>
+                        <Selector.Checkbox
+                            size="s"
+                            id={user.$id}
+                            checked={exists || selected.has(role)}
+                            disabled={exists} />
+                    </Table.Cell>
+                    <Table.Cell column="user" {root}>
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            {#if user.email || user.phone}
+                                {#if user.name}
+                                    <AvatarInitials size="xs" name={user.name} />
+                                    <Layout.Stack gap="none">
+                                        <Typography.Caption variant="400"
+                                            >{user.name}</Typography.Caption>
+                                        <Typography.Caption
+                                            variant="400"
+                                            color="--fgcolor-neutral-tertiary">
+                                            {user.$id}
+                                        </Typography.Caption>
+                                    </Layout.Stack>
+                                {:else}
+                                    <Avatar size="xs">
+                                        <Icon icon={IconMinusSm} size="s" />
+                                    </Avatar>
+                                    <Layout.Stack gap="none">
+                                        <Typography.Caption variant="400"
+                                            >{user.email
+                                                ? user.email
+                                                : user.phone}</Typography.Caption>
+                                        <Typography.Caption
+                                            variant="400"
+                                            color="--fgcolor-neutral-tertiary">
+                                            {user.$id}
+                                        </Typography.Caption>
+                                    </Layout.Stack>
+                                {/if}
+                            {:else}
+                                <Avatar size="xs">
+                                    <Icon icon={IconAnonymous} size="s" />
+                                </Avatar>
+                                <Layout.Stack gap="none">
+                                    <Typography.Caption variant="400"
+                                        >{user.name ? user.name : '-'}</Typography.Caption>
+                                    <Typography.Caption
+                                        variant="400"
+                                        color="--fgcolor-neutral-tertiary">
+                                        {user.$id}
+                                    </Typography.Caption>
+                                </Layout.Stack>
+                            {/if}
+                        </Layout.Stack>
+                    </Table.Cell>
+                </Table.Row.Button>
+            {/each}
+        </Table.Root>
+
+        <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
             <p class="text">Total results: {results?.total}</p>
-            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
-        </div>
+            <PaginationInline limit={5} bind:offset total={results?.total} hidePages />
+        </Layout.Stack>
     {:else if search}
-        <EmptySearch hidePages>
-            <div class="common-section">
-                <div class="u-text-center common-section">
-                    <b class="body-text-2 u-bold">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/products/auth/accounts" text
-                        >Documentation</Button>
-                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
-                </div>
-            </div>
+        <EmptySearch bind:search target="users" hidePages>
+            <Button
+                external
+                href="https://appwrite.io/docs/products/auth/users"
+                text
+                event="empty_documentation"
+                size="s">Documentation</Button>
+            <Button secondary on:click={() => (search = '')}>Clear search</Button>
         </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? Learn more in our <a
-                            href="https://appwrite.io/docs/products/auth/quick-start"
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            documentation</a
-                        >.
-                    </p>
-                </div>
-            </div>
-        </EmptySearch>
+        <Card.Base padding="none">
+            <Empty title="You have no users. Create a user to see them here." type="secondary">
+                <Typography.Text slot="description">
+                    Need a hand? Learn more in our <Link.Anchor
+                        href="https://appwrite.io/docs/products/auth/quick-start"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        documentation</Link.Anchor
+                    >.
+                </Typography.Text>
+            </Empty>
+        </Card.Base>
     {/if}
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte
index c5ba00a0b..c521e7f95 100644
--- a/src/lib/components/progressBarBig.svelte
+++ b/src/lib/components/progressBarBig.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { ProgressBar, type ProgressbarData } from '$lib/components/progressbar';
+    import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let currentValue: string | undefined = undefined;
     export let currentUnit: string | undefined = undefined;
@@ -16,22 +17,25 @@
 <section class="progress-bar">
     {#if currentValue !== undefined && currentUnit !== undefined && progress !== undefined}
         <div class="u-flex u-flex-vertical">
-            <div class="u-flex u-main-space-between">
-                <p>
-                    <span class="heading-level-4">{currentValue}</span>
-                    <span class="body-text-1 u-bold">{currentUnit}</span>
-                </p>
+            <Layout.Stack direction="row" alignItems="center">
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {currentValue}
+                    </Typography.Title>
+                    <Typography.Text>{currentUnit}</Typography.Text>
+                    {#if maxValue !== undefined}
+                        <Typography.Text color="--fgcolor-neutral-tertiary">
+                            {maxValue}
+                            {maxUnit ? maxUnit : ''}
+                        </Typography.Text>
+                    {/if}
+                </Layout.Stack>
                 {#if progressMax !== undefined}
-                    <p class="heading-level-4">{progress}%</p>
+                    <div>
+                        <Badge variant="secondary" size="xs" content={`${progress}%`} />
+                    </div>
                 {/if}
-            </div>
-
-            {#if maxValue !== undefined}
-                <p class="body-text-2">
-                    {maxValue}
-                    {maxUnit ? maxUnit : ''}
-                </p>
-            {/if}
+            </Layout.Stack>
         </div>
     {/if}
     {#if showBar && progressBarData.length > 0}
diff --git a/src/lib/components/progressBarDeprecated.svelte b/src/lib/components/progressBarDeprecated.svelte
index 406f69c02..987b5c73d 100644
--- a/src/lib/components/progressBarDeprecated.svelte
+++ b/src/lib/components/progressBarDeprecated.svelte
@@ -15,7 +15,7 @@
     <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
         <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
             {#if icon}
-                <span class={`icon-${icon}`} aria-hidden="true" />
+                <span class={`icon-${icon}`} aria-hidden="true"></span>
             {/if}
             <span class="text">{name}</span>
         </h3>
@@ -30,7 +30,8 @@
         class="progress-bar-container"
         class:is-warning={status === 'warning'}
         class:is-danger={status === 'error'}
-        style:--graph-size={progress + '%'} />
+        style:--graph-size={progress + '%'}>
+    </div>
     <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
         <span class="progress-bar-text-used">{used}{unit}</span>
         <span class="progress-bar-text-max">{max}{unit}</span>
diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index 4c03e2883..a97142d27 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
     import type { ProgressbarData, ProgressbarProps } from '$lib/components';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     type $$Props = ProgressbarProps;
 
@@ -22,19 +22,19 @@
 
 <section class="progressbar__container">
     {#each $$props.data as item}
-        <div
-            class="progressbar__content"
-            style:background-color={item.color}
-            style:width={`${(item.size / maxSize) * 100}%`}
-            use:tooltip={{
-                disabled: !item.tooltip,
-                allowHTML: true,
-                content: `<span class="u-bold">${item.tooltip.title}</span> ${item.tooltip.label}`
-            }}>
-        </div>
+        <Tooltip disabled={!item.tooltip}>
+            <div
+                class="progressbar__content"
+                style:background-color={item.color}
+                style:width={`${(item.size / maxSize) * 100}%`}>
+            </div>
+            <div slot="tooltip">
+                <span class="u-bold">{item.tooltip.title}</span> ${item.tooltip.label}
+            </div>
+        </Tooltip>
     {/each}
     {#if remainder > 0}
-        <div class="progressbar__content" style:width={`${(remainder / maxSize) * 100}%`} />
+        <div class="progressbar__content" style:width={`${(remainder / maxSize) * 100}%`}></div>
     {/if}
 </section>
 
diff --git a/src/lib/components/regionEndpoint.svelte b/src/lib/components/regionEndpoint.svelte
index 35c6b4962..ed643e9fa 100644
--- a/src/lib/components/regionEndpoint.svelte
+++ b/src/lib/components/regionEndpoint.svelte
@@ -14,7 +14,7 @@
 </script>
 
 {#if $projectRegion}
-    <Copy value={getProjectEndpoint()} appendTo="parent" copyText="Copy endpoint">
+    <Copy value={getProjectEndpoint()} copyText="Copy endpoint">
         <div
             class="flex u-gap-8 u-cross-center interactive-text-output is-buttons-on-top u-text-center"
             style:min-inline-size="0"
diff --git a/src/lib/components/roles/base.svelte b/src/lib/components/roles/base.svelte
index 9e37e47b5..6733ad202 100644
--- a/src/lib/components/roles/base.svelte
+++ b/src/lib/components/roles/base.svelte
@@ -1,21 +1,10 @@
-<div class="u-flex-vertical u-gap-16">
+<div>
     <slot />
 </div>
 
 <style>
     div {
-        color: hsl(var(--color-neutral-50));
-        line-height: 1.25rem;
-        &:first-child {
-            color: hsl(var(--color-neutral-70));
-        }
-    }
-
-    :global(.theme-dark) div {
-        color: hsl(var(--color-neutral-20));
-
-        &:first-child {
-            color: hsl(var(--color-neutral-10));
-        }
+        max-width: 360px;
+        text-wrap: auto;
     }
 </style>
diff --git a/src/lib/components/roles/upgrade.svelte b/src/lib/components/roles/upgrade.svelte
index 9e5487476..b3f15e85b 100644
--- a/src/lib/components/roles/upgrade.svelte
+++ b/src/lib/components/roles/upgrade.svelte
@@ -5,58 +5,62 @@
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
     import Button from '$lib/elements/forms/button.svelte';
+    import { Badge, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Base>
-    {#if isCloud}
-        {#if $organization?.billingPlan !== BillingPlan.FREE}
-            <div class="u-flex-vertical u-gap-8">
-                <p>
-                    <span class="u-bold">Roles</span>
-                    {#if $organization?.billingPlan === BillingPlan.FREE}
-                        <span class="inline-tag u-normal u-x-small">Pro plan</span>
-                    {/if}
-                </p>
-                <p>Owner, Developer, Editor, Analyst and Billing.</p>
-            </div>
-            <p>
-                <Button link external href="https://appwrite.io/docs/advanced/platform/roles"
-                    >Learn more</Button> about roles.
-            </p>
-        {:else}
-            <div class="u-flex-vertical u-gap-8">
-                <p>
-                    <span class="u-bold">Roles</span>
-                    {#if $organization?.billingPlan === BillingPlan.FREE}
-                        <span class="inline-tag u-normal u-x-small">Pro plan</span>
-                    {/if}
-                </p>
-                <p>
+    <Layout.Stack gap="s">
+        {#if isCloud}
+            {#if $organization?.billingPlan !== BillingPlan.FREE}
+                <Typography.Text variant="m-600">Roles</Typography.Text>
+                <Typography.Text>Owner, Developer, Editor, Analyst and Billing.</Typography.Text>
+                <Typography.Text>
+                    <Link.Anchor
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href="https://appwrite.io/docs/advanced/platform/roles"
+                        >Learn more</Link.Anchor>
+                </Typography.Text>
+            {:else}
+                <Layout.Stack direction="row" gap="s">
+                    <Typography.Text variant="m-600">
+                        <span class="u-bold">Roles</span>
+                    </Typography.Text>
+                    <Badge variant="secondary" size="xs" content="Pro plan" />
+                </Layout.Stack>
+                <Typography.Text>
                     Upgrade to Pro to assign new roles to members such as Owner, Developer, Editor
                     or Analyst.
+                </Typography.Text>
+
+                <p class="u-flex u-main-end u-cross-center u-gap-4">
+                    <Button
+                        size="s"
+                        text
+                        external
+                        href="https://appwrite.io/docs/advanced/platform/roles">Learn more</Button>
+                    <Button size="s" secondary external href={$upgradeURL}>Upgrade plan</Button>
                 </p>
-            </div>
+            {/if}
+        {:else}
+            <Layout.Stack direction="row" gap="s">
+                <Typography.Text variant="m-600">
+                    <span class="u-bold">Roles</span>
+                </Typography.Text>
+                <Badge variant="secondary" size="xs" content="Cloud" />
+            </Layout.Stack>
+            <Typography.Text>
+                Upgrade to Cloud to assign new roles to members or ask us about our enterprise self
+                hosted offering.
+            </Typography.Text>
             <p class="u-flex u-main-end u-cross-center u-gap-4">
-                <Button text external href="https://appwrite.io/docs/advanced/platform/roles"
-                    >Learn more</Button>
-                <Button secondary external href={$upgradeURL}>Upgrade plan</Button>
+                <Button
+                    size="s"
+                    text
+                    external
+                    href="https://appwrite.io/docs/advanced/platform/roles">Learn more</Button>
+                <Button size="s" secondary external href={$upgradeURL}>Upgrade to Cloud</Button>
             </p>
         {/if}
-    {:else}
-        <div class="u-flex-vertical u-gap-8">
-            <p>
-                <span class="u-bold">Roles</span>
-                <span class="inline-tag u-normal u-x-small">Appwrite Cloud</span>
-            </p>
-            <p>
-                Upgrade to Cloud to assign new roles to members or ask us about our entriprise self
-                hosted offering.
-            </p>
-        </div>
-        <p class="u-flex u-main-end u-cross-center u-gap-4">
-            <Button text external href="https://appwrite.io/docs/advanced/platform/roles"
-                >Learn more</Button>
-            <Button secondary external href={$upgradeURL}>Upgrade to Cloud</Button>
-        </p>
-    {/if}
+    </Layout.Stack>
 </Base>
diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
index 8ac920104..2246d2a57 100644
--- a/src/lib/components/searchQuery.svelte
+++ b/src/lib/components/searchQuery.svelte
@@ -1,37 +1,28 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { onDestroy } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { goto } from '$app/navigation';
+    import { onDestroy } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Icon, Input } from '@appwrite.io/pink-svelte';
+    import { IconSearch, IconX } from '@appwrite.io/pink-icons-svelte';
     import { debounce as createDebounce } from '$lib/helpers/debounce.js';
 
-    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;
-    export let fullWidth = false;
 
-    let element: HTMLInputElement;
-    let inputValue = $page.url.searchParams.get('search') ?? '';
-
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
+    let inputValue = page.url.searchParams.get('search') ?? '';
 
     const runSearch = createDebounce((value: string) => {
         const trimmed = value.trim();
-        const url = new URL($page.url);
+        const url = new URL(page.url);
         const previous = url.searchParams.get('search') ?? '';
 
         if (previous === trimmed) return;
 
-        if ($page.data.page > 1) {
+        if (page.data.page > 1) {
             url.searchParams.delete('page');
         }
 
@@ -56,28 +47,21 @@
     });
 </script>
 
-<div class="u-flex u-gap-12 common-section u-main-space-between">
-    <div class={fullWidth ? 'u-width-full-line' : '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:this={element}
-                bind:value={inputValue} />
-            <span class="icon-search" aria-hidden="true"></span>
-            {#if isWithEndButton && search}
-                <button
-                    class="button is-text is-only-icon"
-                    style="--button-size:1.5rem;"
-                    aria-label="Clear search"
-                    on:click={clearInput}>
-                    <span class="icon-x" aria-hidden="true"></span>
-                </button>
+<div style:max-width="360px" style:width="100%">
+    <Input.Text
+        {placeholder}
+        {disabled}
+        {required}
+        {autofocus}
+        bind:value={inputValue}
+        --bgcolor-neutral-default="var(--bgcolor-neutral-primary)">
+        <svelte:fragment slot="start">
+            <Icon icon={IconSearch} />
+        </svelte:fragment>
+        <svelte:fragment slot="end">
+            {#if inputValue}
+                <Input.Action icon={IconX} on:click={clearInput} />
             {/if}
-        </div>
-    </div>
-    <slot />
+        </svelte:fragment>
+    </Input.Text>
 </div>
diff --git a/src/lib/components/secret.svelte b/src/lib/components/secret.svelte
index 1fed84fb1..2e49854ce 100644
--- a/src/lib/components/secret.svelte
+++ b/src/lib/components/secret.svelte
@@ -1,35 +1,17 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
     import { Copy } from '.';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let show = false;
     export let value: string;
     export let copyEvent: string = null;
+    export let label: string = undefined;
 </script>
 
-<div class="interactive-text-output" class:is-textarea={show} data-private>
-    {#if show}
-        <span class="text u-line-height-1-5 u-break-all">{value}</span>
-    {:else}
-        <span class="text">••••••••••••</span>
-    {/if}
-    <div class="u-flex u-cross-child-start u-gap-8">
-        <button
-            class="interactive-text-output-button"
-            aria-label="show hidden text"
-            type="button"
-            on:click={() => {
-                show = !show;
-                trackEvent(`click_secret_${show ? 'show' : 'hide'}`);
-            }}
-            use:tooltip={{ content: show ? 'Hide secret' : 'Show secret', hideOnClick: false }}>
-            <span class:icon-eye-off={show} class:icon-eye={!show} aria-hidden="true" />
-        </button>
+<Input.Password {value} {label} required>
+    <svelte:fragment slot="end">
         <Copy {value} event={copyEvent} eventContext="click_secret_copy">
-            <button class="interactive-text-output-button" aria-label="copy text" type="button">
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
+            <Input.Action icon={IconDuplicate} />
         </Copy>
-    </div>
-</div>
+    </svelte:fragment>
+</Input.Password>
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
new file mode 100644
index 000000000..7fd0bc37f
--- /dev/null
+++ b/src/lib/components/sidebar.svelte
@@ -0,0 +1,617 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import { page } from '$app/state';
+    import { app } from '$lib/stores/app';
+    import {
+        Icon,
+        Sidebar,
+        ProgressCircle,
+        Tooltip,
+        Divider,
+        Link,
+        Button,
+        Layout,
+        Avatar,
+        Typography,
+        Badge
+    } from '@appwrite.io/pink-svelte';
+
+    import {
+        IconChartBar,
+        IconChatBubble,
+        IconCog,
+        IconDatabase,
+        IconFolder,
+        IconGlobeAlt,
+        IconLightningBolt,
+        IconSearch,
+        IconUserGroup
+    } from '@appwrite.io/pink-icons-svelte';
+    import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
+    import { feedback } from '$lib/stores/feedback';
+    import { DropList } from '$lib/components/index';
+    import type { ComponentType } from 'svelte';
+    import { showSupportModal } from '$routes/(console)/wizard/support/store';
+    import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
+    import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
+    import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+
+    import type { HTMLAttributes } from 'svelte/elements';
+    import type { NavbarProject } from '$lib/components/navbar.svelte';
+    import { SHOW_INIT_FEATURES } from '$lib/system';
+
+    type $$Props = HTMLAttributes<HTMLElement> & {
+        state?: 'closed' | 'open' | 'icons';
+        project: NavbarProject | undefined;
+        avatar: string;
+        progressCard?: {
+            title: string;
+            percentage: number;
+        };
+        sideBarIsOpen: boolean;
+        showAccountMenu: boolean;
+        subNavigation?: ComponentType;
+    };
+
+    export let state: $$Props['state'] = 'icons';
+    export let project: $$Props['project'];
+    export let avatar: $$Props['avatar'];
+    export let progressCard: $$Props['progressCard'] = undefined;
+    export let sideBarIsOpen: boolean;
+    export let showAccountMenu: boolean;
+    export let subNavigation = undefined;
+
+    function toggleFeedback() {
+        trackEvent(Click.FeedbackSubmitClick);
+        feedback.toggleFeedback();
+        if ($feedback.notification) {
+            feedback.toggleNotification();
+            feedback.addVisualization();
+        }
+    }
+
+    $: state = $isTabletViewport ? 'closed' : getSidebarState();
+
+    const projectOptions = [
+        { name: 'Auth', icon: IconUserGroup, slug: 'auth', category: 'build' },
+        { name: 'Databases', icon: IconDatabase, slug: 'databases', category: 'build' },
+        { name: 'Functions', icon: IconLightningBolt, slug: 'functions', category: 'build' },
+        { name: 'Messaging', icon: IconChatBubble, slug: 'messaging', category: 'build' },
+        { name: 'Storage', icon: IconFolder, slug: 'storage', category: 'build' },
+        { name: 'Sites', icon: IconGlobeAlt, slug: 'sites', category: 'deploy', badge: 'New' }
+    ];
+</script>
+
+<div
+    class:only-mobile-tablet={project === undefined}
+    style:--overlay-on-neutral={$app.themeInUse === 'dark'
+        ? 'var(--neutral-750)'
+        : 'var(--neutral-100)'}>
+    <Sidebar.Base
+        {...$$props}
+        bind:state
+        on:resize={(event) => updateSidebarState(event.detail)}
+        resizable>
+        <div slot="top">
+            <div class="only-mobile-tablet top">
+                <div class="icons search-icon">
+                    <Button.Button
+                        variant="text"
+                        on:click={() => {
+                            toggleCommandCenter();
+                            state = 'closed';
+                            sideBarIsOpen = false;
+                        }}>
+                        <Icon icon={IconSearch} color="--fgcolor-neutral-tertiary" />
+                    </Button.Button>
+                </div>
+                <Link.Button
+                    on:click={() => {
+                        showAccountMenu = !showAccountMenu;
+                    }}>
+                    <Avatar size="s" src={avatar} />
+                </Link.Button>
+            </div>
+        </div>
+        <div slot="middle" class:icons={state === 'icons'}>
+            {#if progressCard}
+                <Tooltip placement="right" disabled={state !== 'icons'}>
+                    <a
+                        class="progress-card"
+                        href={`/console/project-${project.region}-${project.$id}/get-started`}
+                        on:click={() => {
+                            trackEvent('click_menu_get_started');
+                            sideBarIsOpen = false;
+                        }}>
+                        <div class="progressCircle">
+                            <ProgressCircle size="s" progress={progressCard.percentage} />
+                        </div>
+                        {#if state !== 'icons'}
+                            <div class="info" in:fade={{ delay: 200, duration: 200 }}>
+                                <Typography.Text variant="m-500" color="--fgcolor-neutral-secondary"
+                                    >{progressCard.title}</Typography.Text>
+                                <Typography.Text color="--fgcolor-neutral-secondary"
+                                    >{progressCard.percentage}% complete</Typography.Text>
+                            </div>
+                        {/if}
+                    </a>
+                    <span slot="tooltip">Getting started</span>
+                </Tooltip>
+            {/if}
+            {#if project}
+                <Layout.Stack direction="column" gap="s">
+                    <Tooltip placement="right" disabled={state !== 'icons'}>
+                        <a
+                            href={`/console/project-${project.region}-${project.$id}/overview`}
+                            class="link"
+                            class:active={page.url.pathname.includes('overview')}
+                            on:click={() => {
+                                trackEvent(Click.MenuOverviewClick);
+                                sideBarIsOpen = false;
+                            }}
+                            ><span class="link-icon"
+                                ><Icon icon={IconChartBar} size="s" />
+                            </span><span
+                                class:no-text={state === 'icons'}
+                                class:has-text={state === 'open'}
+                                class="link-text">Overview</span
+                            ></a>
+                        <span slot="tooltip">Overview</span>
+                    </Tooltip>
+                    <div class="only-mobile divider">
+                        <Divider />
+                    </div>
+                    <div class="products-label-container">
+                        <span class="products-label" class:hidden={state === 'icons'}>Build</span>
+                        <span class="products-label-indicator" class:hidden={state !== 'icons'}
+                        ></span>
+                    </div>
+                    {@const buildProjectOptions = projectOptions.filter(
+                        (projectOption) => projectOption.category === 'build'
+                    )}
+                    {#each buildProjectOptions as projectOption}
+                        <Tooltip placement="right" disabled={state !== 'icons'}>
+                            <a
+                                href={`/console/project-${project.region}-${project.$id}/${projectOption.slug}`}
+                                class="link"
+                                class:active={page.url.pathname.includes(projectOption.slug)}
+                                on:click={() => {
+                                    trackEvent(`click_menu_${projectOption.slug}`);
+                                    sideBarIsOpen = false;
+                                }}
+                                ><span class="link-icon"
+                                    ><Icon icon={projectOption.icon} size="s" />
+                                </span><span
+                                    class:no-text={state === 'icons'}
+                                    class:has-text={state === 'open'}
+                                    class="link-text">{projectOption.name}</span
+                                ></a>
+                            <span slot="tooltip">{projectOption.name}</span>
+                        </Tooltip>
+                    {/each}
+                    {#if SHOW_INIT_FEATURES}
+                        <div class="only-mobile divider">
+                            <Divider />
+                        </div>
+                        <div class="products-label-container">
+                            <span class="products-label" class:hidden={state === 'icons'}
+                                >Deploy</span>
+                            <span class="products-label-indicator" class:hidden={state !== 'icons'}
+                            ></span>
+                        </div>
+                        {@const deployProjectOptions = projectOptions.filter(
+                            (projectOption) => projectOption.category === 'deploy'
+                        )}
+                        {#each deployProjectOptions as projectOption}
+                            <Tooltip placement="right" disabled={state !== 'icons'}>
+                                <a
+                                    href={`/console/project-${project.region}-${project.$id}/${projectOption.slug}`}
+                                    class="link"
+                                    class:active={page.url.pathname.includes(projectOption.slug)}
+                                    on:click={() => {
+                                        trackEvent(`click_menu_${projectOption.slug}`);
+                                        sideBarIsOpen = false;
+                                    }}>
+                                    <span class="link-icon">
+                                        <Icon icon={projectOption.icon} size="s" />
+                                    </span>
+                                    <span
+                                        class:no-text={state === 'icons'}
+                                        class:has-text={state === 'open'}
+                                        class="link-text">
+                                        {projectOption.name}
+                                        {#if projectOption?.badge}
+                                            <Badge
+                                                variant="secondary"
+                                                content={projectOption.badge}
+                                                size="xs" />
+                                        {/if}
+                                    </span>
+                                </a>
+                                <span slot="tooltip">{projectOption.name}</span>
+                            </Tooltip>
+                        {/each}
+                    {/if}
+                    <div class="only-mobile divider">
+                        <Divider />
+                    </div>
+                    <div class="only-mobile">
+                        <Tooltip placement="right" disabled={state !== 'icons'}>
+                            <a
+                                href={`/console/project-${project.region}-${project.$id}/settings`}
+                                on:click={() => {
+                                    trackEvent('click_menu_settings');
+                                }}
+                                class="link"
+                                ><span class="link-icon"><Icon icon={IconCog} size="s" /></span
+                                ><span
+                                    class:no-text={state === 'icons'}
+                                    class:has-text={state === 'open'}
+                                    class="link-text">Settings</span
+                                ></a>
+                            <span slot="tooltip">Settings</span>
+                        </Tooltip>
+                    </div>
+                </Layout.Stack>
+            {:else}
+                <div class="action-buttons">
+                    <Layout.Stack direction="column" gap="s">
+                        <DropList show={$feedback.show} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => {
+                                    toggleFeedback();
+                                    trackEvent(Click.FeedbackSubmitClick, { source: 'side_nav' });
+                                }}
+                                >Feedback
+                            </Button.Button>
+                            <svelte:fragment slot="other">
+                                <MobileFeedbackModal />
+                            </svelte:fragment>
+                        </DropList>
+
+                        <DropList show={$showSupportModal} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => {
+                                    $showSupportModal = true;
+                                    trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
+                                }}>
+                                <span>Support</span>
+
+                                <svelte:fragment slot="other">
+                                    <MobileSupportModal bind:show={$showSupportModal}
+                                    ></MobileSupportModal>
+                                </svelte:fragment>
+                            </Button.Button>
+                        </DropList>
+                    </Layout.Stack>
+                </div>
+            {/if}
+        </div>
+        <div slot="bottom" class="bottom" class:icons={state === 'icons'}>
+            {#if project}
+                <div class="only-desktop">
+                    <Tooltip placement="right" disabled={state !== 'icons'}>
+                        <a
+                            href={`/console/project-${project.region}-${project.$id}/settings`}
+                            class="link"
+                            on:click={() => {
+                                trackEvent('click_menu_settings');
+                            }}
+                            class:active={page.url.pathname.includes('/settings') &&
+                                !page.url.pathname.includes('sites')}
+                            ><span class="link-icon"><Icon icon={IconCog} size="s" /></span><span
+                                class:no-text={state === 'icons'}
+                                class:has-text={state === 'open'}
+                                class="link-text">Settings</span
+                            ></a>
+                        <span slot="tooltip">Settings</span>
+                    </Tooltip>
+                </div>
+            {/if}
+
+            {#if project}
+                <div class="only-mobile">
+                    <div class="action-buttons">
+                        <Layout.Stack direction="column" gap="s">
+                            <DropList show={$feedback.show} scrollable>
+                                <Button.Button
+                                    variant="secondary"
+                                    size="s"
+                                    on:click={() => {
+                                        toggleFeedback();
+                                        trackEvent('click_menu_feedback', { source: 'side_nav' });
+                                    }}
+                                    ><span>Feedback</span>
+                                </Button.Button>
+                                <svelte:fragment slot="other">
+                                    <MobileFeedbackModal />
+                                </svelte:fragment>
+                            </DropList>
+
+                            <DropList show={$showSupportModal} scrollable>
+                                <Button.Button
+                                    variant="secondary"
+                                    size="s"
+                                    on:click={() => {
+                                        $showSupportModal = true;
+                                        trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
+                                    }}>
+                                    <span>Support</span>
+
+                                    <svelte:fragment slot="other">
+                                        <MobileSupportModal bind:show={$showSupportModal}
+                                        ></MobileSupportModal>
+                                    </svelte:fragment>
+                                </Button.Button>
+                            </DropList>
+                        </Layout.Stack>
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </Sidebar.Base>
+</div>
+
+{#if subNavigation}
+    <div class="sub-navigation" class:icons={state === 'icons'}>
+        <svelte:component this={subNavigation} />
+    </div>
+{/if}
+
+<style lang="scss">
+    .link {
+        display: flex;
+        height: 32px;
+        padding: var(--space-4, 8px);
+        align-items: center;
+        gap: var(--gap-s, 8px);
+        flex-shrink: 0;
+        border-radius: var(--border-radius-s, 8px);
+        transition: all 0.2s ease-in-out;
+        text-decoration: none;
+
+        .link-icon {
+            height: 16px;
+            color: var(--fgcolor-neutral-weak);
+            transition: color 0.2s ease-in-out;
+        }
+
+        &:hover {
+            background: var(--bgcolor-neutral-secondary);
+
+            .link-icon {
+                color: var(--fgcolor-neutral-tertiary);
+            }
+        }
+
+        &:focus-visible {
+            background: var(--bgcolor-neutral-secondary);
+
+            /* box-shadow/state/focus */
+            box-shadow:
+                var(--shadow-offsetx-0, 0px) var(--shadow-offsety-0, 0px) 0 2px
+                    var(--bgcolor-neutral-default, #fafafb),
+                0px 0px 0px 4px var(--border-focus, #818186);
+        }
+
+        &:active {
+            background: var(--bgcolor-neutral-secondary, #f4f4f7);
+
+            .link-text {
+                color: var(--fgcolor-neutral-primary);
+            }
+
+            .link-icon {
+                color: var(--fgcolor-neutral-tertiary);
+            }
+        }
+    }
+    .active {
+        background: var(--bgcolor-neutral-secondary, #f4f4f7);
+        .link-text {
+            color: var(--fgcolor-neutral-primary);
+        }
+        .link-icon {
+            color: var(--fgcolor-neutral-tertiary);
+        }
+    }
+
+    .icons .link {
+        gap: 0;
+        width: 32px;
+    }
+
+    .search-icon {
+        display: flex;
+    }
+
+    .link-text {
+        width: 128px;
+        transition: all 0.2s ease-in-out;
+        transition-behavior: allow-discrete;
+        opacity: 1;
+        visibility: visible;
+        color: var(--fgcolor-neutral-secondary, #56565c);
+        filter: blur(0);
+
+        &.has-text {
+            transition-delay: 0.1s;
+        }
+
+        &.no-text {
+            visibility: hidden;
+            opacity: 0;
+            width: 0;
+            filter: blur(2px);
+            transition-delay: 0s;
+        }
+    }
+
+    .action-buttons {
+        margin-top: var(--gap-s);
+
+        span {
+            width: 144px;
+            text-align: center;
+        }
+
+        :global(div),
+        :global(button) {
+            width: 100%;
+        }
+    }
+
+    .top {
+        display: flex;
+        width: 199px;
+        max-height: 48px;
+        padding: var(--space-4, 8px) var(--space-7, 16px);
+        margin-left: calc(-1 * var(--space-7, 16px));
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--gap-s, 8px);
+
+        border-bottom: var(--border-width-s, 1px) solid var(--border-neutral, #ededf0);
+        background: var(--bgcolor-neutral-primary, #fff);
+    }
+
+    .products-label-container {
+        height: 20px;
+        display: flex;
+        @media (min-width: 1024px) {
+            margin-block-end: var(--space-2, 4px);
+            margin-block-start: var(--space-9, 24px);
+        }
+    }
+
+    .icons .products-label-container {
+        margin-block-start: var(--base-20, 20px);
+        margin-block-end: var(--base-8, 8px);
+    }
+
+    .products-label {
+        font-size: var(--font-size-xs);
+        color: var(--fgcolor-neutral-tertiary);
+    }
+
+    .products-label-indicator {
+        border-bottom: 1px solid var(--border-neutral);
+        height: 1px;
+        width: 18px;
+        align-self: center;
+        margin-inline: 8px;
+        @media (min-width: 1024px) {
+            margin-block-end: var(--space-2, 4px);
+            margin-block-start: var(--space-9, 24px);
+        }
+    }
+
+    .hidden,
+    .only-desktop {
+        display: none;
+    }
+
+    .only-mobile {
+        display: flex;
+    }
+
+    @media (min-width: 768px) {
+        .only-mobile {
+            display: none;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .only-mobile,
+        .only-mobile-tablet {
+            display: none;
+        }
+        .only-desktop {
+            display: inline;
+        }
+    }
+
+    .progress-card {
+        height: 60px;
+        width: 168px;
+        padding: var(--base-8, 8px);
+        display: flex;
+        gap: var(--space-5, 10px);
+        margin-block-end: var(--space-6, 12px);
+        align-self: stretch;
+        border-radius: var(--border-radius-s, 8px);
+        border: 1px solid var(--border-neutral, #ededf0);
+        background: var(--bgcolor-neutral-default, #fafafb);
+        transition: all 0.2s ease-in-out;
+
+        @media (min-width: 1024px) {
+            width: 166px;
+        }
+        .info {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            max-height: 40px;
+            overflow: hidden;
+            opacity: 1;
+            transition: opacity 0.2s ease-in-out 0.2s;
+            margin-left: var(--base-36, 36px);
+        }
+
+        .progressCircle {
+            display: flex;
+            height: 100%;
+            align-items: center;
+        }
+    }
+
+    .icons .progress-card {
+        width: var(--base-32, 32px);
+        border-color: transparent;
+        background: transparent;
+        padding-left: var(--base-4, 4px);
+    }
+
+    .divider {
+        margin-block-start: var(--space-2, 4px);
+        margin-block-end: var(--space-6, 12px);
+        width: 100%;
+    }
+
+    .bottom {
+        @media (min-width: 1024px) {
+            height: var(--base-32, 32px);
+        }
+    }
+
+    :global(button.collapse) {
+        transform: translateX(-10px);
+    }
+
+    .sub-navigation {
+        margin-top: 48px;
+        @media (min-width: 1024px) {
+            margin-top: 0;
+            width: 400px;
+            height: calc(100vh - 48px);
+            display: flex;
+            justify-content: flex-end;
+            background-color: var(--bgcolor-neutral-primary, #fff);
+            z-index: 14;
+            position: fixed;
+            top: 48px;
+            transition: width 0.2s linear;
+
+            &.icons {
+                width: 266px;
+                transition: width 0.3s linear;
+            }
+        }
+    }
+</style>
diff --git a/src/lib/components/status.svelte b/src/lib/components/status.svelte
index 7dc78c84e..19d4695ac 100644
--- a/src/lib/components/status.svelte
+++ b/src/lib/components/status.svelte
@@ -19,7 +19,7 @@
     class:is-complete={status === 'completed' || status === 'ready'}
     class:is-processing={status === 'processing' || status === 'building'}>
     {#if status}
-        <span class="status-icon" style={statusIconStyle} />
+        <span class="status-icon" style={statusIconStyle}></span>
     {/if}
     <span class="text" data-private><slot /></span>
 </div>
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index a229f65ba..94f91920c 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -23,10 +23,10 @@
             <div class="steps-item-wrapper">
                 {#if completed}
                     <div class="bullet is-done">
-                        <span class="icon-check" aria-hidden="true" />
+                        <span class="icon-check" aria-hidden="true"></span>
                     </div>
                 {:else}
-                    <div class="bullet" class:is-current={current} />
+                    <div class="bullet" class:is-current={current}></div>
                 {/if}
                 <div class="steps-item-content">
                     <span class="text">{step.text}</span>
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index cad7a08bf..2520ef032 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -3,13 +3,14 @@
     import { wizard } from '$lib/stores/wizard';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { isSupportOnline, showSupportModal } from '$routes/(console)/wizard/support/store';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { localeShortTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { plansInfo } from '$lib/stores/billing';
     import { Card } from '$lib/components/index';
     import { app } from '$lib/stores/app';
     import { currentPlan, type Organization, organizationList } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { base } from '$app/paths';
 
     export let show = false;
@@ -73,21 +74,17 @@
 
 <section class="drop-section support-section">
     {#if showHeader}
-        <h4 class="heading-level-6">Support</h4>
+        <Typography.Title size="s">Support</Typography.Title>
     {/if}
 
     {#each supportOptions as option, index}
         {#if showCloudSupport(index)}
             <Card
-                isTile
-                class="support-option-card u-flex u-flex-vertical u-gap-16"
-                style="border-radius: var(--border-radius-small, 8px); padding: 0.65rem;">
+                class="support-option-card "
+                style="border-radius: var(--border-radius-small, 8px); --gap-xl: 16px">
                 <div class="u-flex u-flex-vertical u-gap-4">
-                    <h4 class="body-text-2 u-bold">{option.label}</h4>
-
-                    <p class="u-line-height-1-5">
-                        {option.description}
-                    </p>
+                    <Typography.Text variant="m-500">{option.label}</Typography.Text>
+                    <Typography.Text variant="m-400">{option.description}</Typography.Text>
                 </div>
 
                 {#if option.showSupport}
@@ -96,7 +93,7 @@
                             <Button
                                 href={upgradeURL}
                                 on:click={() => {
-                                    trackEvent('click_organization_upgrade', {
+                                    trackEvent(Click.OrganizationClickUpgrade, {
                                         from: 'button',
                                         source: 'support_menu'
                                     });
@@ -121,7 +118,7 @@
                                 aria-hidden="true"
                                 class="{isSupportOnline()
                                     ? 'icon-check-circle u-color-text-success'
-                                    : 'icon-x-circle'} u-padding-block-end-1" />
+                                    : 'icon-x-circle'} u-padding-block-end-1"></span>
 
                             {supportTimings}
                         </div>
@@ -133,12 +130,12 @@
                         secondary
                         class="secondary-button u-flex u-cross-center u-gap-6"
                         on:click={() => {
-                            trackEvent('click_organization_upgrade', {
+                            trackEvent(Click.OrganizationClickUpgrade, {
                                 from: 'button',
                                 source: 'support_menu'
                             });
                         }}>
-                        <span class={`icon-${option.icon}`} />
+                        <span class={`icon-${option.icon}`}></span>
                         <span>{option.cta}</span>
                     </Button>
                 {/if}
@@ -168,13 +165,14 @@
 <style lang="scss">
     .support-section {
         gap: 1rem;
+        width: 100%;
         padding: 1rem;
         display: flex;
         flex-direction: column;
 
         @media (max-width: 768px) {
+            padding: 0;
             gap: 1.25rem;
-            padding: 0.5rem;
         }
     }
 
@@ -187,19 +185,13 @@
     }
 
     :global(.theme-dark .support-option-card) {
-        background: var(--color-bgColor-neutral-default, #19191c);
-    }
-
-    :global(.theme-dark .support-option-card .secondary-button) {
-        background: var(--color-bgColor-neutral-primary, #131315);
+        /* override required due to the card's background color */
+        background: var(--bgcolor-neutral-default, #19191c) !important;
     }
 
     :global(.theme-light .support-option-card) {
-        border: 1px solid var(--color-border-neutral, #ededf0);
-        background: var(--color-bgColor-neutral-default, #fafafb);
-    }
-
-    :global(.theme-light .support-option-card .secondary-button) {
-        background: var(--color-bgColor-neutral-primary, #fff);
+        border: 1px solid var(--border-neutral, #ededf0);
+        /* override required due to the card's background color */
+        background: var(--bgcolor-neutral-default, #fafafb) !important;
     }
 </style>
diff --git a/src/lib/components/svgIcon.svelte b/src/lib/components/svgIcon.svelte
index 6b3dbb70c..8f3b78d0a 100644
--- a/src/lib/components/svgIcon.svelte
+++ b/src/lib/components/svgIcon.svelte
@@ -9,10 +9,11 @@
     export { className as class };
 
     enum iconSizes {
-        small = '--icon-size-small',
-        medium = '--icon-size-medium',
-        large = '--icon-size-large',
-        xlarge = '--icon-size-extra-large'
+        xs = '--icon-size-xs',
+        small = '--icon-size-s',
+        medium = '--icon-size-m',
+        large = '--icon-size-l',
+        xlarge = '--icon-size-xl'
     }
 </script>
 
diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index 36d17f7e9..8c8d2041e 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -4,10 +4,16 @@
     import { last } from '$lib/helpers/array';
     import { getElementDir } from '$lib/helpers/style';
     import { waitUntil } from '$lib/helpers/waitUntil';
+    import { Tabs } from '@appwrite.io/pink-svelte';
 
     export let selected = false;
     export let href: string = null;
     export let event: string = null;
+    export let noscroll = false;
+    export let root: { variant: 'primary' | 'secondary'; stretch: boolean } = {
+        variant: 'primary',
+        stretch: false
+    };
 
     async function handleClick(e: Event) {
         if (event) {
@@ -79,27 +85,23 @@
     }
 </script>
 
-<li class="tabs-item" role="tab">
-    {#if href}
-        <a
-            class="tabs-button"
-            {href}
-            class:is-selected={selected}
-            on:click={handleClick}
-            tabindex={selected ? 0 : -1}
-            on:keydown={handleKeyDown}>
-            <span class="text"><slot /></span>
-        </a>
-    {:else}
-        <button
-            type="button"
-            class="tabs-button"
-            class:is-selected={selected}
-            on:click|preventDefault
-            on:click={handleClick}
-            tabindex={selected ? 0 : -1}
-            on:keydown={handleKeyDown}>
-            <span class="text"><slot /></span>
-        </button>
-    {/if}
-</li>
+{#if href}
+    <Tabs.Item.Link
+        {noscroll}
+        {root}
+        {href}
+        bind:active={selected}
+        on:click={handleClick}
+        on:keydown={handleKeyDown}>
+        <slot />
+    </Tabs.Item.Link>
+{:else}
+    <Tabs.Item.Button
+        {root}
+        bind:active={selected}
+        on:click
+        on:click={handleClick}
+        on:keydown={handleKeyDown}>
+        <slot />
+    </Tabs.Item.Button>
+{/if}
diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte
index 8ab734776..f2f61d7e1 100644
--- a/src/lib/components/tabs.svelte
+++ b/src/lib/components/tabs.svelte
@@ -1,59 +1,10 @@
 <script lang="ts">
-    import { throttle } from '$lib/helpers/functions';
+    import { Tabs } from '@appwrite.io/pink-svelte';
 
-    let showLeft = false;
-    let showRight = false;
-    let tabsList: HTMLUListElement;
-
-    function slide(direction: 'left' | 'right') {
-        let scrollCompleted = 0;
-        let slideVar = setInterval(() => {
-            if (direction == 'left') {
-                tabsList.scrollLeft -= 10;
-            } else {
-                tabsList.scrollLeft += 10;
-            }
-            scrollCompleted += 10;
-            if (scrollCompleted >= 100) {
-                clearInterval(slideVar);
-            }
-        }, 10);
-    }
-
-    function onScroll() {
-        if (!tabsList) {
-            return;
-        }
-        const { offsetWidth, scrollLeft, scrollWidth } = tabsList;
-        showLeft = scrollLeft > 10;
-        showRight = scrollLeft < scrollWidth - offsetWidth - 10;
-    }
+    export let variant: 'primary' | 'secondary' = 'primary';
+    export let stretch: boolean | undefined = undefined;
 </script>
 
-<svelte:window on:resize={throttle(onScroll, 25)} />
-
-<div class="tabs">
-    {#if showLeft}
-        <button
-            class="tabs-button-scroll is-start"
-            aria-label="Show items in start side"
-            on:click={() => slide('left')}>
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </button>
-    {/if}
-    {#if showRight}
-        <button
-            class="tabs-button-scroll is-end"
-            aria-label="Show items in end side"
-            on:click={() => slide('right')}>
-            <span class="icon-cheveron-right" aria-hidden="true" />
-        </button>
-    {/if}
-    <ul
-        class="tabs-list scroll-shadow-horizontal"
-        role="tablist"
-        bind:this={tabsList}
-        on:scroll={throttle(onScroll, 25)}>
-        <slot />
-    </ul>
-</div>
+<Tabs.Root {variant} {stretch} let:root>
+    <slot {root} />
+</Tabs.Root>
diff --git a/src/lib/components/tile.svelte b/src/lib/components/tile.svelte
index bfe222162..cddc2a73b 100644
--- a/src/lib/components/tile.svelte
+++ b/src/lib/components/tile.svelte
@@ -6,6 +6,6 @@
 <li class="tile">
     <a class="card" {href}>
         <h2 class="tiles-title">{title}</h2>
-        <span class="icon-right-open" aria-hidden="true" />
+        <span class="icon-right-open" aria-hidden="true"></span>
     </a>
 </li>
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index eb0bb99f9..9d5ace255 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -1,29 +1,7 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
-    import { throttle } from '$lib/helpers/functions';
-    import { onMount } from 'svelte';
-
-    let showTooltip = false;
     export let alternativeTrim = false;
-    let container: HTMLSpanElement | null;
-
-    onMount(onResize);
-
-    function onResize() {
-        showTooltip = container.offsetWidth < container.scrollWidth;
-    }
 </script>
 
-<svelte:window on:resize={throttle(onResize, 250)} />
-
-<span
-    class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`}
-    bind:this={container}
-    use:tooltip={{
-        disabled: !showTooltip,
-        appendTo: 'parent',
-        content: container?.innerText ?? undefined,
-        maxWidth: '30rem'
-    }}>
-    <span><slot /></span>
+<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`}>
+    <slot />
 </span>
diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index 09906ced6..721917ca1 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -1,130 +1,16 @@
 <script lang="ts">
     import { uploader } from '$lib/stores/uploader';
-    import { Pill } from '$lib/elements';
-    import { sdk } from '$lib/stores/sdk';
-    import { Avatar } from '$lib/components';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-
-    let hovering = false;
-
-    function getPreview(fileId: string, bucketId: string) {
-        return (
-            sdk
-                .forProject($page.params.region, $page.params.project)
-                .storage.getFilePreview(bucketId, fileId, 32, 32)
-                .toString() + '&mode=admin'
-        );
-    }
+    import { Upload } from '@appwrite.io/pink-svelte';
 </script>
 
 {#if $uploader?.isOpen}
-    <section class="upload-box">
-        <header class="upload-box-header">
-            <h4 class="upload-box-title">
-                <span class="text">Uploading files</span>
-                <span class="amount">{$uploader.files.length}</span>
-            </h4>
-            <button
-                class="upload-box-button"
-                class:is-open={!$uploader.isCollapsed}
-                aria-label="toggle upload box"
-                on:click={() => uploader.toggle()}>
-                <span class="icon-cheveron-up" aria-hidden="true" />
-            </button>
-            <button
-                on:click={() => uploader.reset()}
-                class="upload-box-button"
-                aria-label="close upload box">
-                <span class="icon-x" aria-hidden="true" />
-            </button>
-        </header>
-        <div class="upload-box-content" class:is-open={!$uploader.isCollapsed}>
-            <ul class="upload-box-list">
-                {#each $uploader.files as file}
-                    {@const progress = Math.round(file.progress)}
-
-                    {#if file.completed || file.progress === 100}
-                        <a
-                            class="upload-box-item"
-                            href={`${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$page.params.bucket}/file-${file.$id}`}>
-                            <div class="u-margin-inline-end-16">
-                                <Avatar
-                                    size={32}
-                                    src={getPreview(file.$id, file.bucketId)}
-                                    name={file.name} />
-                            </div>
-
-                            <label for={file.name} class="file-name u-trim">{file.name}</label>
-
-                            <button
-                                class="upload-box-button"
-                                aria-label="Failed"
-                                on:mouseenter={() => (hovering = true)}
-                                on:mouseleave={() => (hovering = false)}
-                                on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
-                                <span class:icon-check={!hovering} class:icon-x={hovering} />
-                            </button>
-                        </a>
-                    {:else if file.failed}
-                        <li class="upload-box-item">
-                            <div class="upload-image u-margin-inline-end-16">
-                                <div
-                                    class="progress"
-                                    role="progressbar"
-                                    aria-valuenow={progress}
-                                    aria-valuemin={0}
-                                    aria-valuemax={100} />
-                                <span class="icon">{progress}%</span>
-                            </div>
-                            <label for={file.name} class="file-name u-trim">{file.name}</label>
-                            <Pill danger>Failed</Pill>
-                            <button
-                                class="upload-box-button"
-                                aria-label="Failed"
-                                on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
-                                <span class="icon-x" />
-                            </button>
-                        </li>
-                    {:else}
-                        <li class="upload-box-item">
-                            <div class="upload-image u-margin-inline-end-16">
-                                <div
-                                    class="progress"
-                                    role="progressbar"
-                                    style={`--progress-value:${progress}`}
-                                    aria-valuenow={progress}
-                                    aria-valuemin={0}
-                                    aria-valuemax={100} />
-                                <span class="icon">{progress}%</span>
-                            </div>
-                            <label for={file.name} class="file-name u-trim">{file.name}</label>
-                            <Pill warning>Pending</Pill>
-                        </li>
-                    {/if}
-                {/each}
-            </ul>
-        </div>
-    </section>
+    <Upload.Box
+        files={$uploader.files.map((file) => {
+            return {
+                name: file.name,
+                size: file.size,
+                status: file.status
+            };
+        })}
+        on:close={() => uploader.close()} />
 {/if}
-
-<style>
-    .upload-box-title {
-        font-size: 11px;
-    }
-
-    .upload-box-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .upload-box-content {
-        min-width: 400px;
-        max-width: 100vw;
-    }
-
-    .file-name {
-        max-width: 24ch;
-    }
-</style>
diff --git a/src/lib/components/usageCard.svelte b/src/lib/components/usageCard.svelte
new file mode 100644
index 000000000..bebb1e131
--- /dev/null
+++ b/src/lib/components/usageCard.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Card } from '$lib/components';
+    import { Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+
+    export let description: string;
+    export let value: string | number = null;
+</script>
+
+<Card radius="s" padding="xs">
+    <Layout.Stack gap="xxxs">
+        <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
+            {description}
+        </Typography.Caption>
+        <slot>
+            {#if value !== null && value !== undefined}
+                <Typography.Text size="s" truncate color="--fgcolor-neutral-primary"
+                    >{value}</Typography.Text>
+            {:else}
+                <Skeleton variant="line" width="100%" height={19.5} />
+            {/if}
+        </slot>
+    </Layout.Stack>
+</Card>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 13331cee8..02f4dcbf2 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { Button, InputChoice } from '$lib/elements/forms';
-    import { DropList } from '.';
-    import { page } from '$app/stores';
     import type { Writable } from 'svelte/store';
-    import { preferences } from '$lib/stores/preferences';
-    import { onMount } from 'svelte';
     import { View } from '$lib/helpers/load';
-    import { tooltip } from '$lib/actions/tooltip';
     import type { Column } from '$lib/helpers/types';
+    import { Icon, Button } from '@appwrite.io/pink-svelte';
+    import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
+    import ViewToggle from './viewToggle.svelte';
+    import ColumnSelector from './columnSelector.svelte';
 
     export let columns: Writable<Column[]>;
     export let view: View;
@@ -15,134 +13,22 @@
     export let hideView = false;
     export let hideColumns = false;
     export let allowNoColumns = false;
-    export let showColsTextMobile = false;
-    export let fullWidthMobile = false;
-    export let hideText = false;
-
-    let showSelectColumns = false;
-
-    onMount(async () => {
-        if (isCustomCollection) {
-            const prefs = preferences.getCustomCollectionColumns(
-                $page.params.project,
-                $page.params.collection
-            );
-            columns.set(
-                $columns.map((column) => {
-                    column.show = prefs?.includes(column.id) ?? true;
-                    return column;
-                })
-            );
-        } else {
-            const prefs = preferences.get($page.params.project, $page.route);
-
-            // Override the shown columns only if a preference was set
-            if (prefs?.columns) {
-                columns.set(
-                    $columns.map((column) => {
-                        column.show = prefs.columns?.includes(column.id) ?? true;
-                        return column;
-                    })
-                );
-            }
-        }
-
-        columns.subscribe((ctx) => {
-            const columns = ctx.filter((n) => n.show).map((n) => n.id);
-
-            if (isCustomCollection) {
-                preferences.setCustomCollectionColumns($page.params.project, $page.route, columns);
-            } else {
-                preferences.setColumns($page.params.project, $page.route, columns);
-            }
-        });
-    });
-
-    function getViewLink(view: View): string {
-        const url = new URL($page.url);
-        url.searchParams.set('view', view);
-        return url.toString();
-    }
-
-    function updateViewPreferences(view: View) {
-        preferences.setView($page.params.project, $page.route, view);
-    }
-
-    $: selectedColumnsNumber = $columns.reduce((acc, column) => {
-        if (column.show) {
-            acc++;
-        }
-        return acc;
-    }, 0);
 </script>
 
-<div class="grid-header-col-4">
-    {#if !hideColumns && view === View.Table}
-        {#if $columns?.length}
-            <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
-                <Button
-                    secondary
-                    on:click={() => (showSelectColumns = !showSelectColumns)}
-                    {fullWidthMobile}>
-                    <span
-                        class="icon-view-boards u-opacity-50"
-                        aria-hidden="true"
-                        aria-label="columns" />
-                    {#if !hideText}
-                        <span class="text {showColsTextMobile ? '' : 'is-only-desktop'}"
-                            >Columns</span>
-                    {/if}
-                    <span class="inline-tag">{selectedColumnsNumber}</span>
-                </Button>
-                <svelte:fragment slot="list">
-                    {#each $columns as column}
-                        <InputChoice
-                            id={column.id}
-                            label={column.title}
-                            bind:value={column.show}
-                            disabled={allowNoColumns
-                                ? false
-                                : selectedColumnsNumber <= 1 && column.show} />
-                    {/each}
-                </svelte:fragment>
-            </DropList>
-        {/if}
-    {/if}
-</div>
+{#if !hideColumns && view === View.Table}
+    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns}>
+        {#snippet children(toggle, selectedColumnsNumber)}
+            <Button.Button
+                size="s"
+                variant="secondary"
+                badge={selectedColumnsNumber.toString()}
+                on:click={toggle}>
+                <Icon slot="start" icon={IconViewBoards} />
+            </Button.Button>
+        {/snippet}
+    </ColumnSelector>
+{/if}
 
 {#if !hideView}
-    <div class="grid-header-col-3 toggle-button">
-        <ul class="toggle-button-list">
-            {#key $page.url}
-                <li class="toggle-button-item">
-                    <a
-                        href={getViewLink(View.Table)}
-                        on:click={() => updateViewPreferences(View.Table)}
-                        class="toggle-button-element"
-                        aria-label="List View"
-                        type="button"
-                        class:is-selected={view === View.Table}
-                        use:tooltip={{
-                            content: 'List View'
-                        }}>
-                        <span class="icon-view-list" aria-hidden="true" />
-                    </a>
-                </li>
-                <li class="toggle-button-item">
-                    <a
-                        href={getViewLink(View.Grid)}
-                        on:click={() => updateViewPreferences(View.Grid)}
-                        class="toggle-button-element"
-                        aria-label="Grid View"
-                        type="button"
-                        class:is-selected={view === View.Grid}
-                        use:tooltip={{
-                            content: 'Grid View'
-                        }}>
-                        <span class="icon-view-grid" aria-hidden="true" />
-                    </a>
-                </li>
-            {/key}
-        </ul>
-    </div>
+    <ViewToggle bind:view />
 {/if}
diff --git a/src/lib/components/viewToggle.svelte b/src/lib/components/viewToggle.svelte
new file mode 100644
index 000000000..350c18d21
--- /dev/null
+++ b/src/lib/components/viewToggle.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/state';
+    import type { View } from '$lib/helpers/load';
+    import { preferences } from '$lib/stores/preferences';
+    import { IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
+    import { ToggleButton } from '@appwrite.io/pink-svelte';
+
+    let {
+        view = $bindable()
+    }: {
+        view: View;
+    } = $props();
+
+    function onViewChange(event: CustomEvent<View>) {
+        updateViewPreferences(event.detail);
+        goto(getViewLink(event.detail), {
+            replaceState: true
+        });
+    }
+
+    function getViewLink(view: View): string {
+        const url = new URL(page.url);
+        url.searchParams.set('view', view);
+        return url.toString();
+    }
+
+    function updateViewPreferences(view: View) {
+        preferences.setView(view);
+    }
+</script>
+
+<ToggleButton
+    --bgcolor-neutral-default="var(--bgcolor-neutral-primary)"
+    on:change={onViewChange}
+    active={view}
+    buttons={[
+        {
+            id: 'table',
+            label: 'table view',
+            icon: IconViewList
+        },
+        {
+            id: 'grid',
+            label: 'grid view',
+            icon: IconViewGrid
+        }
+    ]} />
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index aa3508e21..58ae2e443 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -17,6 +17,7 @@ export enum Dependencies {
     CREDIT = 'dependency:credit',
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
+    UPGRADE_PLAN = 'dependency:upgrade_plan',
     PAYMENT_METHODS = 'dependency:paymentMethods',
     ORGANIZATION = 'dependency:organization',
     MEMBERS = 'dependency:members',
@@ -41,6 +42,7 @@ export enum Dependencies {
     DOCUMENTS = 'dependency:documents',
     BUCKET = 'dependency:bucket',
     FILE = 'dependency:file',
+    FILE_TOKENS = 'dependency:file_tokens',
     FILES = 'dependency:files',
     FUNCTION = 'dependency:function',
     FUNCTION_DOMAINS = 'dependency:function_domains',
@@ -54,7 +56,10 @@ export enum Dependencies {
     PLATFORMS = 'dependency:platforms',
     KEY = 'dependency:key',
     KEYS = 'dependency:keys',
+    DEV_KEY = 'dependency:dev_key',
+    DEV_KEYS = 'dependency:dev_keys',
     DOMAINS = 'dependency:domains',
+    DOMAIN = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',
     WEBHOOKS = 'dependency:webhooks',
     MIGRATIONS = 'dependency:migrations',
@@ -68,7 +73,10 @@ export enum Dependencies {
     MESSAGING_MESSAGE = 'dependency:messaging_message',
     MESSAGING_TOPICS = 'dependency:messaging_topics',
     MESSAGING_TOPIC = 'dependency:messaging_topic',
-    MESSAGING_TOPIC_SUBSCRIBERS = 'dependency:messaging_topic_subscribers'
+    MESSAGING_TOPIC_SUBSCRIBERS = 'dependency:messaging_topic_subscribers',
+    SITE = 'dependency:site',
+    SITES = 'dependency:sites',
+    SITES_DOMAINS = 'dependency:sites_domains'
 }
 
 export const defaultScopes: string[] = [
@@ -125,7 +133,9 @@ export const defaultScopes: string[] = [
     'topics.read',
     'topics.write',
     'billing.read',
-    'billing.write'
+    'billing.write',
+    'sites.read',
+    'sites.write'
 ];
 
 export const defaultRoles: string[] = ['owner'];
@@ -367,6 +377,42 @@ export const scopes: {
         description: 'Access to create migrations',
         category: 'Other',
         icon: 'globe'
+    },
+    {
+        scope: 'tokens.read',
+        description: "Access to read your project's file tokens",
+        category: 'Other',
+        icon: 'globe'
+    },
+    {
+        scope: 'tokens.write',
+        description: 'Access to create file tokens',
+        category: 'Other',
+        icon: 'globe'
+    },
+    {
+        scope: 'sites.read',
+        description: "Access to read your project's sites and deployments",
+        category: 'Sites',
+        icon: 'globe'
+    },
+    {
+        scope: 'sites.write',
+        description: "Access to create, update, and delete your project's sites and deployments",
+        category: 'Sites',
+        icon: 'globe'
+    },
+    {
+        scope: 'log.read',
+        description: "Access to read your sites's logs",
+        category: 'Sites',
+        icon: 'globe'
+    },
+    {
+        scope: 'log.write',
+        description: "Access to delete your site's logs",
+        category: 'Sites',
+        icon: 'globe'
     }
 ];
 
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index fc643e0af..5f11e8478 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -3,28 +3,33 @@
     import { getContext, hasContext } from 'svelte';
     import { readable } from 'svelte/store';
     import type { FormContext } from './form.svelte';
-    import { multiAction, type MultiActionArray } from '$lib/actions/multi-actions';
+    import { Button } from '@appwrite.io/pink-svelte';
+    import type { ComponentProps } from 'svelte';
+
+    type Props = ComponentProps<Button.Button | Button.Anchor>;
 
     export let submit = false;
     export let secondary = false;
-    export let github = false;
     export let text = false;
+    export let icon = false;
     export let danger = false;
-    export let round = false;
-    export let link = false;
+    export let size: Props['size'] = 's';
     export let disabled = false;
     export let external = false;
     export let href: string = null;
     export let download: string = undefined;
+    export let badge: string = undefined;
     export let fullWidth = false;
     export let fullWidthMobile = false;
     export let ariaLabel: string = null;
-    export let noMargin = false;
     export let event: string = null;
+    export let eventData: Record<string, unknown> = {};
     let classes: string = '';
     export { classes as class };
-    export let actions: MultiActionArray = [];
     export let submissionLoader = false;
+    export let forceShowLoader = false;
+    export let compact = false;
+    export let extraCompact = false;
 
     const isSubmitting = hasContext('form')
         ? getContext<FormContext>('form').isSubmitting
@@ -38,21 +43,38 @@
         }
 
         trackEvent(`click_${event}`, {
-            from: 'button'
+            from: 'button',
+            ...eventData
         });
     }
 
+    function getVariant():
+        | 'primary'
+        | 'secondary'
+        | 'text'
+        | 'compact'
+        | 'danger'
+        | 'extra-compact' {
+        switch (true) {
+            case secondary:
+                return 'secondary';
+            case text:
+                return 'text';
+            case compact:
+                return 'compact';
+            case extraCompact:
+                return 'extra-compact';
+            case danger:
+                return 'danger';
+            default:
+                return 'primary';
+        }
+    }
+
+    $: variant = getVariant();
     $: resolvedClasses = [
-        link ? 'link' : 'button',
-        disabled && 'is-disabled',
-        round && 'is-only-icon',
-        secondary && 'is-secondary',
-        github && 'is-github',
-        text && 'is-text',
-        danger && 'is-danger',
         fullWidth && 'is-full-width',
         fullWidthMobile && 'is-full-width-mobile',
-        noMargin && 'u-padding-inline-0',
         classes
     ]
         .filter(Boolean)
@@ -60,34 +82,45 @@
 </script>
 
 {#if href}
-    <a
+    <Button.Anchor
         on:click
+        on:mousedown
         on:click={track}
         {href}
         {download}
+        {size}
+        {icon}
+        disabled={internalDisabled}
+        {variant}
         target={external ? '_blank' : ''}
         rel={external ? 'noopener noreferrer' : ''}
         class={resolvedClasses}
-        style="pointer-events: {internalDisabled ? 'none' : 'auto'};"
-        aria-label={ariaLabel}
-        use:multiAction={actions}>
+        aria-label={ariaLabel}>
+        <slot name="start" slot="start" />
         <slot />
-    </a>
+        <slot slot="end" name="end" />
+    </Button.Anchor>
 {:else}
-    <button
+    <Button.Button
         on:click
+        on:mousedown
         on:click={track}
+        {size}
+        {icon}
+        {badge}
         disabled={internalDisabled}
+        {variant}
         class={resolvedClasses}
         aria-label={ariaLabel}
-        type={submit ? 'submit' : 'button'}
-        use:multiAction={actions}>
-        {#if $isSubmitting && submissionLoader}
+        type={submit ? 'submit' : 'button'}>
+        <slot name="start" slot="start" />
+        {#if ($isSubmitting && submissionLoader) || (forceShowLoader && submissionLoader)}
             <span
                 class="loader is-small"
                 style:--p-loader-base-full-color="transparent"
-                aria-hidden="true" />
+                aria-hidden="true"></span>
         {/if}
         <slot isSubmitting={$isSubmitting} />
-    </button>
+        <slot slot="end" name="end" />
+    </Button.Button>
 {/if}
diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index 958254a88..e178793e0 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -10,10 +10,9 @@
     import { setContext } from 'svelte';
     import { writable } from 'svelte/store';
 
-    export let noMargin = false;
     export let noStyle = false;
     export let isModal = false;
-    export let onSubmit: (e: SubmitEvent) => Promise<void> | void;
+    export let onSubmit: (e: SubmitEvent) => Promise<unknown> | unknown;
     let classes = '';
     export { classes as class };
 
@@ -26,6 +25,7 @@
     export function checkValidity() {
         return form.checkValidity();
     }
+
     export function triggerSubmit() {
         form.requestSubmit();
     }
@@ -41,8 +41,13 @@
     bind:this={form}
     class={classes}
     class:form={!noStyle}
-    class:common-section={!noMargin}
     class:modal-form={isModal}
     on:submit|preventDefault={submit}>
     <slot />
 </form>
+
+<style>
+    .modal-form {
+        position: absolute;
+    }
+</style>
diff --git a/src/lib/elements/forms/formItem.svelte b/src/lib/elements/forms/formItem.svelte
deleted file mode 100644
index 52e7fb69e..000000000
--- a/src/lib/elements/forms/formItem.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script context="module" lang="ts">
-    export type FormItemTag = 'li' | 'div';
-</script>
-
-<script lang="ts">
-    export let tag: FormItemTag = 'li';
-    export let fullWidth = false;
-    export let isMultiple = false;
-    export let stackOnMobile = false;
-    export let style: string = '';
-    let classes: string = '';
-    export { classes as class };
-</script>
-
-<svelte:element
-    this={tag}
-    class="form-item {classes}"
-    {style}
-    class:is-multiple={isMultiple}
-    class:u-width-full-line={fullWidth}
-    class:u-flex-vertical-mobile={stackOnMobile}>
-    <slot />
-</svelte:element>
diff --git a/src/lib/elements/forms/formItemPart.svelte b/src/lib/elements/forms/formItemPart.svelte
deleted file mode 100644
index f43b94d4a..000000000
--- a/src/lib/elements/forms/formItemPart.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    export let fullWidth = false;
-    export let alignEnd = false;
-</script>
-
-<div class="form-item-part" class:u-cross-child-end={alignEnd} class:u-stretch={fullWidth}>
-    <slot />
-</div>
diff --git a/src/lib/elements/forms/formList.svelte b/src/lib/elements/forms/formList.svelte
deleted file mode 100644
index e4af5058b..000000000
--- a/src/lib/elements/forms/formList.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    export let isCommonSection = false;
-    export let gap = 24;
-    let classes = '';
-    export { classes as class };
-</script>
-
-<ul
-    class="form-list {classes}"
-    class:common-section={isCommonSection}
-    style={`--form-list-gap: ${gap / 16}rem;`}>
-    <slot />
-</ul>
diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index b6b0f86b9..99e580c8d 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -16,7 +16,7 @@
             class:icon-exclamation-circle={type === 'error'}
             class:icon-check-circle={type === 'success'}
             class:icon-exclamation={type === 'warning'}
-            aria-hidden="true" />
+            aria-hidden="true"></span>
     {/if}
     <span class="text u-line-height-1-5">
         <slot />
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index a3e0393bb..938532339 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -1,7 +1,4 @@
 export { default as Form } from './form.svelte';
-export { default as FormItem } from './formItem.svelte';
-export { default as FormItemPart } from './formItemPart.svelte';
-export { default as FormList } from './formList.svelte';
 export { default as Button } from './button.svelte';
 export { default as InputDomain } from './inputDomain.svelte';
 export { default as InputEmail } from './inputEmail.svelte';
@@ -16,7 +13,6 @@ export { default as InputDateTime } from './inputDateTime.svelte';
 export { default as InputSearch } from './inputSearch.svelte';
 export { default as InputRadio } from './inputRadio.svelte';
 export { default as InputSelect } from './inputSelect.svelte';
-export { default as InputSelectSearch } from './inputSelectSearch.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputChoice } from './inputChoice.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index ba4d1037f..9ccb04f53 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { FormItem, Helper } from '.';
-    import type { FormItemTag } from './formItem.svelte';
+    import { Selector } from '@appwrite.io/pink-svelte';
+    import { Helper } from '.';
 
     interface $$Props extends Partial<HTMLLabelElement> {
         id: string;
@@ -10,18 +10,18 @@
         disabled?: boolean;
         element?: HTMLInputElement | undefined;
         indeterminate?: boolean;
-        wrapperTag?: FormItemTag;
-        size?: 'small' | 'medium';
+        size?: 's' | 'm';
+        description?: string;
     }
 
-    export let id: string;
+    export let id: string = '';
     export let label: string | undefined = undefined;
     export let checked = false;
     export let required = false;
     export let disabled = false;
     export let element: HTMLInputElement | undefined = undefined;
-    export let wrapperTag: FormItemTag = 'li';
-    export let size: $$Props['size'] = 'medium';
+    export let size: $$Props['size'] = 's';
+    export let description = '';
     let error: string;
 
     const handleInvalid = (event: Event) => {
@@ -38,30 +38,27 @@
     }
 </script>
 
-<FormItem tag={wrapperTag}>
-    <label class="choice-item" for={id}>
+<div>
+    <div class="choice-item">
         <div class="input-text-wrapper">
-            <input
+            <Selector.Checkbox
+                bind:checked
+                {...$$restProps}
                 {id}
                 {disabled}
+                {size}
+                {label}
                 {required}
-                {...$$restProps}
-                class:is-small={size === 'small'}
-                type="checkbox"
-                bind:this={element}
-                bind:checked
+                {description}
                 on:invalid={handleInvalid}
                 on:click
                 on:change />
         </div>
         <div class="choice-item-content">
-            {#if label}
-                <div class="choice-item-title">{label}</div>
-            {/if}
             <slot name="description" />
         </div>
-    </label>
+    </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}
-</FormItem>
+</div>
diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
index aba49d2ec..552341e01 100644
--- a/src/lib/elements/forms/inputChoice.svelte
+++ b/src/lib/elements/forms/inputChoice.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { tooltip as tooltipAction } from '$lib/actions/tooltip';
-    import { FormItem, Helper } from '.';
+    import { Layout, Selector, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Helper } from '.';
 
     export let type: 'checkbox' | 'switchbox' = 'checkbox';
     export let label: string;
@@ -11,6 +11,7 @@
     export let disabled = false;
     export let tooltip: string = null;
     export let fullWidth = false;
+    export let description = '';
 
     let element: HTMLInputElement;
     let error: string;
@@ -29,19 +30,28 @@
     }
 </script>
 
-<FormItem>
-    <label class="choice-item" for={id}>
-        <input
-            {id}
-            {disabled}
-            {required}
-            type="checkbox"
-            class:switch={type === 'switchbox'}
-            aria-checked={value}
-            bind:this={element}
-            bind:checked={value}
-            on:change
-            on:invalid={handleInvalid} />
+<div class="choice-item">
+    <Layout.Stack direction="row" alignItems="flex-start">
+        {#if type === 'switchbox'}
+            <Selector.Switch
+                {id}
+                {disabled}
+                {required}
+                {description}
+                bind:checked={value}
+                on:change
+                on:invalid={handleInvalid} />
+        {:else}
+            <Selector.Checkbox
+                {id}
+                {disabled}
+                {description}
+                size="s"
+                {required}
+                bind:checked={value}
+                on:invalid={handleInvalid}
+                on:change />
+        {/if}
 
         <div class="choice-item-content" class:u-width-full-line={fullWidth}>
             {#if (label && showLabel) || tooltip}
@@ -52,16 +62,15 @@
                         </span>
                     {/if}
                     {#if tooltip}
-                        <button
-                            type="button"
-                            class="tooltip"
-                            aria-label="variables info"
-                            use:tooltipAction={{ content: tooltip }}>
-                            <span
-                                class="icon-info"
-                                aria-hidden="true"
-                                style="font-size: var(--icon-size-small)" />
-                        </button>
+                        <Tooltip>
+                            <button type="button" class="tooltip" aria-label="variables info">
+                                <span
+                                    class="icon-info"
+                                    aria-hidden="true"
+                                    style="font-size: var(--icon-size-small)"></span>
+                            </button>
+                            <p slot="tooltip">{tooltip}</p>
+                        </Tooltip>
                     {/if}
                 </div>
             {/if}
@@ -69,8 +78,8 @@
                 <p class="choice-item-paragraph"><slot /></p>
             {/if}
         </div>
-    </label>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+    </Layout.Stack>
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}
diff --git a/src/lib/elements/forms/inputCron.svelte b/src/lib/elements/forms/inputCron.svelte
index 48d71b7d5..7e2a2ef53 100644
--- a/src/lib/elements/forms/inputCron.svelte
+++ b/src/lib/elements/forms/inputCron.svelte
@@ -1,45 +1,35 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
+    export let name = id;
     export let value: string = null;
     export let placeholder = '* * * * *';
     export let required = false;
     export let disabled = false;
     export let readonly = false;
+    export let nullable = false;
     export let autofocus = false;
-    export let maxlength: number = null;
-    export let minlength: number = null;
-    export let step: number | 'any' = 1;
 
-    let element: HTMLInputElement;
     let error: string;
 
     const pattern = String.raw`^.*\s+.*\s+.*\s+.*\s+.*`;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        if (element.validity.patternMismatch) {
+        if (event.currentTarget.validity.patternMismatch) {
             error = 'Please enter a valid Cron expression';
             return;
         }
 
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
@@ -47,29 +37,20 @@
     }
 </script>
 
-<FormItem>
-    <Label {required} hide={!showLabel} for={id}>
-        {label}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            {minlength}
-            {maxlength}
-            {readonly}
-            {step}
-            {pattern}
-            type="text"
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {readonly}
+    {required}
+    {label}
+    {nullable}
+    {pattern}
+    on:input
+    on:invalid={handleInvalid}
+    type="email"
+    helper={error}
+    state={error ? 'error' : 'default'}
+    autofocus={autofocus || undefined}
+    bind:value />
diff --git a/src/lib/elements/forms/inputDate.svelte b/src/lib/elements/forms/inputDate.svelte
index a108130fc..84c31a45b 100644
--- a/src/lib/elements/forms/inputDate.svelte
+++ b/src/lib/elements/forms/inputDate.svelte
@@ -1,99 +1,63 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
-    export let optionalText: string | undefined = undefined;
+    export let label: string = undefined;
     export let id: string;
+    export let name: string = id;
+    export let helper: string = undefined;
     export let value = '';
+    export let placeholder = '';
     export let required = false;
     export let nullable = false;
-    export let min: string | number | undefined = undefined;
-    export let max: string | number | undefined = undefined;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let fullWidth = false;
-    export let isMultiple = false;
+    export let step: number | 'any' = 0.001;
+    export let min: string = undefined;
+    export let max: string = undefined;
 
-    let element: HTMLInputElement;
     let error: string;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
     function handleInvalid(event: Event) {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        const inputNode = event.currentTarget as HTMLInputElement;
+
+        if (inputNode.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        error = element.validationMessage;
-    }
-
-    let prevValue = '';
-    function handleNullChange(e: CustomEvent<boolean>) {
-        const isNull = e.detail;
-        if (isNull) {
-            prevValue = value;
-            value = null;
-        } else {
-            value = prevValue;
-        }
+        error = inputNode.validationMessage;
     }
 
     $: if (value) {
         error = null;
     }
-
-    $: isNullable = nullable && !required;
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {disabled}
-            {readonly}
-            {required}
-            step=".001"
-            {min}
-            {max}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="date"
-            style={disabled ? '' : 'cursor: pointer;'}
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid}
-            on:click={function () {
-                this.showPicker();
-            }}
-            style:--amount-of-buttons={isNullable ? 2.75 : 1}
-            style:--button-size={isNullable ? '2rem' : '1rem'} />
-        {#if isNullable}
-            <ul
-                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            </ul>
-        {/if}
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</svelte:component>
+<Input.DateTime
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {required}
+    {label}
+    {step}
+    {nullable}
+    {readonly}
+    {min}
+    {max}
+    type="date"
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    helper={error || helper}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.DateTime>
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index b63bd628f..360b0f4c7 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
+    import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
-    export let optionalText: string | undefined = undefined;
     export let id: string;
+    export let label: string = '';
     export let value: string;
     export let required = false;
     export let nullable = false;
@@ -16,8 +13,8 @@
     export let autocomplete = false;
     export let step: number | 'any' = 0.001;
 
-    let element: HTMLInputElement;
     let error: string;
+    let element: HTMLInputElement;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,22 +22,6 @@
         }
     });
 
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        if (element.validity.valueMissing) {
-            error = 'This field is required';
-            return;
-        }
-
-        error = element.validationMessage;
-    }
-
-    function handleInput(event: Event) {
-        const { value: currentValue } = event.currentTarget as HTMLInputElement;
-        value = currentValue || null;
-    }
-
     let prevValue = '';
     function handleNullChange(e: CustomEvent<boolean>) {
         const isNull = e.detail;
@@ -55,41 +36,27 @@
     $: if (value) {
         error = null;
     }
-
-    $: isNullable = nullable && !required;
 </script>
 
-<FormItem>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
+<Layout.Stack gap="s" direction="row">
+    <Input.DateTime
+        {id}
         {label}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {disabled}
-            {readonly}
-            {required}
-            {value}
-            {step}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="datetime-local"
-            class="input-text"
-            bind:this={element}
-            on:input={handleInput}
-            on:invalid={handleInvalid}
-            style:--amount-of-buttons={isNullable ? 2.75 : 1}
-            style:--button-size={isNullable ? '2rem' : '1rem'} />
-        {#if isNullable}
-            <ul
-                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            </ul>
+        {disabled}
+        {readonly}
+        {required}
+        {value}
+        {step}
+        helper={error}
+        on:change={(event) => (value = (event.target as HTMLInputElement).value)}
+        autocomplete={autocomplete ? 'on' : 'off'}>
+        {#if nullable}
+            <Selector.Checkbox
+                size="s"
+                slot="end"
+                label="NULL"
+                checked={value === null}
+                on:change={handleNullChange} />
         {/if}
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+    </Input.DateTime>
+</Layout.Stack>
diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index 07d7f755e..c72144a80 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem } from '.';
-    import { createPinInput, melt } from '@melt-ui/svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let length: number = 6;
     export let value: string = '';
@@ -9,104 +7,6 @@
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
-    export let fullWidth = false;
-    export let autoSubmit = true;
-
-    let element: HTMLOListElement;
-
-    let autoSubmitted = false;
-
-    const {
-        elements: { root, input }
-    } = createPinInput({
-        placeholder: '',
-        defaultValue: value.split(''),
-        onValueChange: ({ next }) => {
-            value = next.join('');
-
-            if (value.length < length) {
-                autoSubmitted = false;
-            }
-
-            if (element && autoSubmit && value.length === length && !autoSubmitted) {
-                autoSubmitted = true;
-                const firstInputElement = element.querySelector('input');
-                firstInputElement?.form.requestSubmit();
-            }
-
-            return next;
-        }
-    });
-
-    /**
-     * Clears the input fields and moves the focus to the first input.
-     * Usually used when resetting fields on auth fails, etc.
-     */
-    export function clearInputsAndRefocus() {
-        value = '';
-        autoSubmitted = false;
-
-        if (element) {
-            const inputs = element.querySelectorAll('input');
-            inputs.forEach((input) => (input.value = ''));
-            if (autofocus) inputs[0].focus();
-        }
-    }
-
-    onMount(() => {
-        const interval = setInterval(() => {
-            const input = element.querySelector('input');
-            if (element) {
-                if (input && autofocus) {
-                    input.focus();
-                }
-                clearInterval(interval);
-            }
-        }, 10);
-    });
 </script>
 
-<FormItem {fullWidth}>
-    <ol class="u-flex u-main-center" use:melt={$root} bind:this={element}>
-        {#each Array.from({ length }) as _}
-            <li>
-                <input
-                    type="number"
-                    class="verification-code-input u-bold u-remove-input-number-buttons"
-                    inputmode="numeric"
-                    maxlength="1"
-                    style:border-radius="var(--border-radius-small)"
-                    use:melt={$input()}
-                    {required}
-                    {readonly}
-                    {disabled} />
-            </li>
-        {/each}
-    </ol>
-</FormItem>
-
-<style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
-
-    /* Default (including mobile) */
-    ol {
-        gap: 0.5rem;
-
-        input {
-            --p-input-size: 2.5rem;
-            font-size: 1rem;
-        }
-    }
-
-    /* for smaller screens */
-    @media #{devices.$break2open} {
-        ol {
-            gap: 1rem;
-
-            input {
-                --p-input-size: 3.75rem;
-                font-size: 2rem;
-            }
-        }
-    }
-</style>
+<Input.OTP {length} bind:value {required} {disabled} {readonly} {autofocus} size="s" />
diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index c429f8ae3..5bdefd51e 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -1,49 +1,37 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import { Drop } from '$lib/components';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
+    export let name = id;
     export let value = '';
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let nullable = false;
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let maxlength: number = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
+    export let maxlength: number | undefined = undefined;
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
 
-    let element: HTMLInputElement;
     let error: string;
-    let show = false;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.patternMismatch) {
+        if (event.currentTarget.validity.patternMismatch) {
             error = 'Must be a valid domain';
             return;
         }
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
@@ -51,50 +39,26 @@
     }
 </script>
 
-<FormItem {fullWidth}>
-    <Label {required} hide={!showLabel} for={id}>
-        {label}{#if popover}
-            <Drop isPopover bind:show display="inline-block">
-                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                &nbsp;<button
-                    type="button"
-                    on:click={() => (show = !show)}
-                    class="tooltip"
-                    aria-label="input tooltip">
-                    <span
-                        class="icon-info"
-                        aria-hidden="true"
-                        style="font-size: var(--icon-size-small)" />
-                </button>
-                <svelte:fragment slot="list">
-                    <div
-                        class="dropped card u-max-width-250"
-                        style:--card-border-radius="var(--border-radius-small)"
-                        style:--p-card-padding=".75rem"
-                        style:box-shadow="var(--shadow-large)">
-                        <svelte:component this={popover} {...popoverProps} />
-                    </div>
-                </svelte:fragment>
-            </Drop>
-        {/if}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            {maxlength}
-            {pattern}
-            {readonly}
-            type="text"
-            autocomplete={autocomplete ? 'on' : 'off'}
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {readonly}
+    {required}
+    {label}
+    {nullable}
+    {pattern}
+    {maxlength}
+    on:input
+    on:invalid={handleInvalid}
+    type="text"
+    helper={error}
+    state={error ? 'error' : 'default'}
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.Text>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 6fa48dd68..387af34ac 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,121 +1,57 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
-    import { Drop } from '$lib/components';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
     export let value = '';
     export let placeholder = '';
+    export let name: string | undefined = undefined;
     export let required = false;
     export let nullable = false;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let tooltip: string = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
 
-    let element: HTMLInputElement;
     let error: string;
-    let show = false;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
-        if (element.validity.typeMismatch) {
+
+        if (event.currentTarget.validity.typeMismatch) {
             error = 'Emails should be formatted as: name@example.com';
             return;
         }
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
         error = null;
     }
-
-    let prevValue = '';
-    function handleNullChange(e: CustomEvent<boolean>) {
-        const isNull = e.detail;
-        if (isNull) {
-            prevValue = value;
-            value = null;
-        } else {
-            value = prevValue;
-        }
-    }
 </script>
 
-<FormItem {fullWidth}>
-    <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
-        {label}{#if popover}
-            <Drop isPopover bind:show display="inline-block">
-                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                &nbsp;<button
-                    type="button"
-                    on:click={() => (show = !show)}
-                    class="tooltip"
-                    aria-label="input tooltip">
-                    <span
-                        class="icon-info"
-                        aria-hidden="true"
-                        style="font-size: var(--icon-size-small)" />
-                </button>
-                <svelte:fragment slot="list">
-                    <div
-                        class="dropped card u-max-width-250"
-                        style:--card-border-radius="var(--border-radius-small)"
-                        style:--p-card-padding=".75rem"
-                        style:box-shadow="var(--shadow-large)">
-                        <svelte:component this={popover} {...popoverProps} />
-                    </div>
-                </svelte:fragment>
-            </Drop>
-        {/if}
-    </Label>
-
-    <div
-        class:input-text-wrapper={!$$slots.default}
-        class:u-flex={$$slots.default}
-        class:u-gap-16={$$slots.default}
-        class:u-cross-center={$$slots.default}>
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            {readonly}
-            type="email"
-            class="input-text"
-            autocomplete={autocomplete ? 'on' : 'off'}
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        {#if nullable && !required}
-            <ul
-                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            </ul>
-        {/if}
-        <slot />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {required}
+    {readonly}
+    {label}
+    {nullable}
+    on:input
+    on:invalid={handleInvalid}
+    type="email"
+    helper={error}
+    state={error ? 'error' : 'default'}
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.Text>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 21bb1e283..4fe88327a 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import { Drop, Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { SvelteComponent, onMount } from 'svelte';
+    import { type Component, onMount } from 'svelte';
     import { Helper, Label } from '.';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let label: string = null;
     export let files: FileList;
@@ -13,7 +14,7 @@
     export let optionalText: string = null;
     export let tooltip: string = null;
     export let error: string = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popover: Component = null;
     export let popoverProps: Record<string, unknown> = {};
 
     let input: HTMLInputElement;
@@ -132,12 +133,11 @@
                     &nbsp;<button
                         type="button"
                         on:click={() => (show = !show)}
-                        class="tooltip"
                         aria-label="input tooltip">
                         <span
                             class="icon-info"
                             aria-hidden="true"
-                            style="font-size: var(--icon-size-small)" />
+                            style="font-size: var(--icon-size-small)"></span>
                     </button>
                     <svelte:fragment slot="list">
                         <div
@@ -165,7 +165,7 @@
         on:dragleave|preventDefault={() => (hovering = false)}>
         <div class="upload-file-box">
             <div class="upload-file-box-image">
-                <span class="icon-upload" aria-hidden="true" />
+                <span class="icon-upload" aria-hidden="true"></span>
             </div>
             <div class="u-min-width-0 u-text-center">
                 <h5 class="upload-file-box-title heading-level-7 u-inline">
@@ -173,13 +173,14 @@
                     <span class="is-not-desktop">Upload a File</span>
                 </h5>
                 {#if allowedFileExtensions?.length}
-                    <button
-                        class="tooltip u-inline u-margin-inline-start-4"
-                        aria-label="variables info">
-                        <span class="icon-info" aria-hidden="true" />
-                        <span class="tooltip-popup" role="tooltip"
-                            >Only {allowedFileExtensions.join(', ')} accepted.</span>
-                    </button>
+                    <Tooltip>
+                        <button
+                            class="u-inline u-margin-inline-start-4"
+                            aria-label="variables info">
+                            <span class="icon-info" aria-hidden="true"></span>
+                        </button>
+                        <p slot="tooltip">Only {allowedFileExtensions.join(', ')} accepted.</p>
+                    </Tooltip>
                 {/if}
             </div>
             <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
@@ -204,7 +205,7 @@
                         {@const extension = file.name.split('.').pop()}
                         {@const fileSize = humanFileSize(file.size)}
                         <li class="u-flex u-cross-center u-min-width-0">
-                            <span class="icon-document" aria-hidden="true" />
+                            <span class="icon-document" aria-hidden="true"></span>
                             <span class="upload-file-box-name u-trim u-min-width-0">
                                 <Trim>{fileName}</Trim>
                             </span>
@@ -221,7 +222,7 @@
                                 class="button is-text is-only-icon u-margin-inline-start-auto"
                                 aria-label="remove file"
                                 style="--button-size:1.5rem;">
-                                <span class="icon-x" aria-hidden="true" />
+                                <span class="icon-x" aria-hidden="true"></span>
                             </button>
                         </li>
                     {/each}
diff --git a/src/lib/elements/forms/inputFilePicker.svelte b/src/lib/elements/forms/inputFilePicker.svelte
index 96e4ed104..c029b459a 100644
--- a/src/lib/elements/forms/inputFilePicker.svelte
+++ b/src/lib/elements/forms/inputFilePicker.svelte
@@ -3,7 +3,7 @@
     import FilePicker from '$lib/components/filePicker.svelte';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import type { Models } from '@appwrite.io/console';
-    import { Label } from '.';
+    import { Button, Label } from '.';
 
     export let label: string = null;
     export let value: Models.File = null;
@@ -25,16 +25,15 @@
         <Label {optionalText} {tooltip} hide={!label}>
             {label}{#if $$slots.popover && isPopoverDefined}
                 <Drop bind:show display="inline-block">
-                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    <!-- TODO: make un-clicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
                         type="button"
                         on:click={() => (show = !show)}
-                        class="tooltip"
                         aria-label="input tooltip">
                         <span
                             class="icon-info"
                             aria-hidden="true"
-                            style="font-size: var(--icon-size-small)" />
+                            style="font-size: var(--icon-size-small)"></span>
                     </button>
                     <svelte:fragment slot="list">
                         <div
@@ -53,7 +52,7 @@
         style:--box-border-radius="var(--border-radius-xsmall)">
         <div class="upload-file-box">
             <div class="upload-file-box-image">
-                <span class="icon-upload" aria-hidden="true" />
+                <span class="icon-upload" aria-hidden="true"></span>
             </div>
             <div class="u-min-width-0 u-text-center">
                 <h5 class="upload-file-box-title heading-level-7 u-inline">
@@ -63,20 +62,14 @@
             </div>
             <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
                 Max file size: 1MB
-                <button
-                    class="button is-secondary is-full-width-mobile"
-                    type="button"
-                    {disabled}
-                    on:click={() => (show = true)}>
-                    <span class="text">Browse</span>
-                </button>
+                <Button secondary {disabled} on:click={() => (show = true)}>Browse</Button>
             </div>
 
             {#if value}
                 {@const fileSize = humanFileSize(value.sizeOriginal)}
                 <ul class="upload-file-box-list u-min-width-0">
                     <li class="u-flex u-cross-center u-min-width-0">
-                        <span class="icon-document" aria-hidden="true" />
+                        <span class="icon-document" aria-hidden="true"></span>
                         <span class="upload-file-box-name u-min-width-0">
                             <Trim alternativeTrim>{value.name}</Trim>
                         </span>
@@ -90,7 +83,7 @@
                             class="button is-text is-only-icon u-margin-inline-start-auto"
                             aria-label="remove file"
                             style="--button-size:1.5rem;">
-                            <span class="icon-x" aria-hidden="true" />
+                            <span class="icon-x" aria-hidden="true"></span>
                         </button>
                     </li>
                 </ul>
diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index 6100210b4..5c8511b28 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -1,60 +1,36 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem } from '.';
-    import TextCounter from './textCounter.svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let value = '';
     export let autofocus = true;
+    export let required = false;
 
-    let element: HTMLInputElement;
-    let icon = 'info';
+    let error = false;
     const pattern = String.raw`^[a-zA-Z0-9][a-zA-Z0-9._\-]*$`;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.patternMismatch) {
-            icon = 'exclamation';
+        if (event.currentTarget.validity.patternMismatch) {
+            error = true;
             return;
         }
     };
 
     $: if (value) {
-        icon = 'info';
+        error = false;
     }
 </script>
 
-<FormItem>
-    <div class="input-text-wrapper">
-        <input
-            id="id"
-            placeholder="Enter ID"
-            maxlength={36}
-            {pattern}
-            autocomplete="off"
-            type="text"
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        <TextCounter count={value?.length ?? 0} max={36} />
-    </div>
-</FormItem>
-<div
-    class="u-flex u-gap-4 u-margin-block-start-8 u-small"
-    class:u-color-text-warning={icon === 'exclamation'}>
-    <span
-        class:icon-info={icon === 'info'}
-        class:icon-exclamation={icon === 'exclamation'}
-        class="u-cross-center u-line-height-1 u-color-text-gray"
-        aria-hidden="true" />
-    <span class="text u-line-height-1-5">
-        Allowed characters: alphanumeric, non-leading hyphen, underscore, period
-    </span>
-</div>
+<Input.Text
+    {pattern}
+    {autofocus}
+    {required}
+    id="id"
+    placeholder="Enter ID"
+    maxlength={36}
+    autocomplete="off"
+    bind:value
+    on:invalid={handleInvalid}
+    state={error ? 'error' : 'default'}
+    helper="Allowed characters: alphanumeric, non-leading hyphen, underscore, period" />
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index dc3613644..71d08161f 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string | undefined = undefined;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
+    export let name = id;
     export let value: number = null;
     export let placeholder = '';
     export let required = false;
@@ -17,96 +14,55 @@
     export let min: number = null;
     export let max: number = null;
     export let step: number | 'any' = 1;
-    export let isMultiple = false;
-    export let fullWidth = false;
+    export let helper: string = undefined;
 
-    let element: HTMLInputElement;
     let error: string;
 
-    onMount(() => {
-        if (autofocus) {
-            addInputFocus();
-        }
-    });
-
-    export function addInputFocus() {
-        if (element) {
-            element.focus();
-        }
-    }
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        if (element.validity.rangeOverflow) {
+        if (event.currentTarget.validity.rangeOverflow) {
             error = `The value must be less than or equal to ${max}`;
             return;
         }
 
-        if (element.validity.rangeUnderflow) {
+        if (event.currentTarget.validity.rangeUnderflow) {
             error = `The value must be greater than or equal to ${min}`;
             return;
         }
 
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
         error = null;
     }
-
-    let prevValue = 0;
-    function handleNullChange(e: CustomEvent<boolean>) {
-        const isNull = e.detail;
-        if (isNull) {
-            prevValue = value;
-            value = null;
-        } else {
-            value = prevValue;
-        }
-    }
-
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    {#if label}
-        <Label {required} {optionalText} hide={!showLabel} for={id}>
-            {label}
-        </Label>
-    {/if}
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            {min}
-            {max}
-            {readonly}
-            {step}
-            type="number"
-            class="input-text u-remove-input-number-buttons"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid}
-            style:--amount-of-buttons={nullable && !required ? 1.75 : 0} />
-        <ul
-            class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-            {#if nullable && !required}
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            {/if}
-        </ul>
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</svelte:component>
+<Input.Number
+    {id}
+    {name}
+    {placeholder}
+    {readonly}
+    {disabled}
+    {required}
+    {min}
+    {max}
+    {label}
+    {step}
+    {nullable}
+    bind:value
+    autofocus={autofocus || undefined}
+    helper={error || helper}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input>
+    <svelte:fragment slot="info">
+        <slot name="info" slot="info" />
+    </svelte:fragment>
+</Input.Number>
diff --git a/src/lib/elements/forms/inputOTP.svelte b/src/lib/elements/forms/inputOTP.svelte
index 5636a01b5..f7789b582 100644
--- a/src/lib/elements/forms/inputOTP.svelte
+++ b/src/lib/elements/forms/inputOTP.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
-    import { Drop } from '$lib/components';
+    import { onMount } from 'svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let label: string = undefined;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let id: string;
     export let name: string = id;
     export let value = '';
@@ -13,21 +10,14 @@
     export let patternError: string = '';
     export let placeholder = '';
     export let required = false;
-    export let hideRequired = false;
     export let disabled = false;
     export let readonly = false;
     export let maxlength: number = null;
     export let autofocus = false;
     export let autocomplete = false;
-    export let fullWidth = false;
-    export let tooltip: string = null;
-    export let isMultiple = false;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
-    let show = false;
 
     onMount(() => {
         if (element && autofocus) {
@@ -58,64 +48,26 @@
     type $$Events = {
         input: Event & { target: HTMLInputElement };
     };
-
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    {#if label}
-        <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if popover}
-                <Drop isPopover bind:show display="inline-block">
-                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                    &nbsp;<button
-                        type="button"
-                        on:click={() => (show = !show)}
-                        class="tooltip"
-                        aria-label="input tooltip">
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style:font-size="var(--icon-size-small)" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <div
-                            class="dropped card u-max-width-250"
-                            style:--p-card-padding=".75rem"
-                            style:--card-border-radius="var(--border-radius-small)"
-                            style:box-shadow="var(--shadow-large)">
-                            <svelte:component this={popover} {...popoverProps} />
-                        </div>
-                    </svelte:fragment>
-                </Drop>
-            {/if}
-        </Label>
-    {/if}
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {name}
-            {placeholder}
-            {disabled}
-            {readonly}
-            {required}
-            {maxlength}
-            {pattern}
-            type="text"
-            autocomplete={autocomplete ? 'on' : 'off'}
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        {#if $$slots.options}
-            <div class="options-list">
-                <slot name="options" />
-            </div>
-        {/if}
-        <slot />
-    </div>
-    {#if error}
-        <Helper type="warning" class="u-line-height-1">{error}</Helper>
-    {/if}
-</svelte:component>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {required}
+    {maxlength}
+    {label}
+    {pattern}
+    {readonly}
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    helper={error}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.Text>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index a51744cce..076c0f31b 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,140 +1,54 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import { Drop } from '$lib/components';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let id: string;
     export let label: string;
-    export let showLabel = true;
     export let value = '';
+    export let helper = '';
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let meter = false;
     export let autocomplete = false;
-    export let showPasswordButton = false;
     export let minlength = 8;
     export let maxlength: number = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
 
-    let element: HTMLInputElement;
     let error: string;
-    let showInPlainText = false;
-    let showPopover = false;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
-        if (element.validity.tooShort) {
+        if (event.currentTarget.validity.tooShort) {
             error = 'Password should contain at least 8 characters';
             return;
         }
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
-    $: strength = value ? value.length * 10 : 0;
     $: if (value) {
         error = null;
     }
 </script>
 
-<FormItem {fullWidth}>
-    <Label {required} hide={!showLabel} for={id}>
-        {label}{#if popover}
-            <Drop isPopover bind:show={showPopover} display="inline-block">
-                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                &nbsp;<button
-                    type="button"
-                    on:click={() => (showPopover = !showPopover)}
-                    class="tooltip"
-                    aria-label="input tooltip">
-                    <span
-                        class="icon-info"
-                        aria-hidden="true"
-                        style="font-size: var(--icon-size-small)" />
-                </button>
-                <svelte:fragment slot="list">
-                    <div
-                        class="dropped card u-max-width-250"
-                        style:--card-border-radius="var(--border-radius-small)"
-                        style:--p-card-padding=".75rem"
-                        style:box-shadow="var(--shadow-large)">
-                        <svelte:component this={popover} {...popoverProps} />
-                    </div>
-                </svelte:fragment>
-            </Drop>
-        {/if}
-    </Label>
-
-    <div class="input-text-wrapper" style={showPasswordButton ? '--amount-of-buttons: 1' : ''}>
-        {#if showInPlainText}
-            <input
-                {id}
-                {placeholder}
-                {disabled}
-                {minlength}
-                {maxlength}
-                name={id}
-                type="text"
-                class="input-text"
-                autocomplete={autocomplete ? 'on' : 'off'}
-                bind:value
-                bind:this={element}
-                on:invalid={handleInvalid} />
-        {:else}
-            <input
-                {id}
-                {placeholder}
-                {disabled}
-                {required}
-                {minlength}
-                {maxlength}
-                type="password"
-                class="input-text"
-                autocomplete={autocomplete ? 'on' : 'off'}
-                bind:value
-                bind:this={element}
-                on:invalid={handleInvalid} />
-        {/if}
-
-        {#if meter}
-            <meter
-                value={strength > 100 ? 100 : strength}
-                min="0"
-                max="100"
-                class="password-meter"
-                class:is-weak={strength !== 0 && strength <= 33}
-                class:is-medium={strength > 33 && strength <= 66}
-                class:is-strong={strength > 66 && strength <= 100}
-                aria-label="Password strength weak" />
-        {/if}
-        {#if showPasswordButton}
-            <button
-                type="button"
-                on:click={() => (showInPlainText = !showInPlainText)}
-                class="show-password-button"
-                aria-label="show password">
-                <span
-                    class:icon-eye={!showInPlainText}
-                    class:icon-eye-off={showInPlainText}
-                    aria-hidden="true" />
-            </button>
-        {/if}
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Password
+    {id}
+    {label}
+    {required}
+    {disabled}
+    {minlength}
+    {maxlength}
+    {placeholder}
+    state={error ? 'error' : 'default'}
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    helper={helper || error}
+    on:invalid={handleInvalid}
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.Password>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 63fad127d..17ce78b92 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import { Drop } from '$lib/components';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
+    export let name: string = id;
     export let value = '';
     export let placeholder = '';
     export let required = false;
@@ -14,42 +12,32 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let minlength: number = null;
-    export let maxlength: number = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
+    export let maxlength: number = 15;
+    export let nullable = false;
 
     const pattern = String.raw`^\+[1-9]\d{1,14}$`;
 
-    let element: HTMLInputElement;
     let error: string;
-    let show = false;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        if (element.validity.patternMismatch) {
+        if (event.currentTarget.validity.patternMismatch) {
             error = `Allowed characters: leading '+' and maximum of ${maxlength - 1} digits`;
             return;
         }
 
-        if (element.validity.tooShort) {
+        if (event.currentTarget.validity.tooShort) {
             error = `The value must contain leading ‘+’ and at least ${minlength - 1} digits `;
             return;
         }
 
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
@@ -57,56 +45,25 @@
     }
 </script>
 
-<FormItem {fullWidth}>
-    <Label {required} hide={!showLabel} for={id}>
-        {label}{#if popover}
-            <Drop isPopover bind:show display="inline-block">
-                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                &nbsp;<button
-                    type="button"
-                    on:click={() => (show = !show)}
-                    class="tooltip"
-                    aria-label="input tooltip">
-                    <span
-                        class="icon-info"
-                        aria-hidden="true"
-                        style="font-size: var(--icon-size-small)" />
-                </button>
-                <svelte:fragment slot="list">
-                    <div
-                        class="dropped card u-max-width-250"
-                        style:--card-border-radius="var(--border-radius-small)"
-                        style:--p-card-padding=".75rem"
-                        style:box-shadow="var(--shadow-large)">
-                        <svelte:component this={popover} {...popoverProps} />
-                    </div>
-                </svelte:fragment>
-            </Drop>
-        {/if}
-    </Label>
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            {minlength}
-            {maxlength}
-            {pattern}
-            {readonly}
-            type="text"
-            autocomplete={autocomplete ? 'on' : 'off'}
-            bind:value
-            bind:this={element}
-            style:--amount-of-buttons={$$slots.options ? 1 : 0}
-            on:invalid={handleInvalid} />
-        {#if $$slots.options}
-            <div class="options-list">
-                <slot name="options" />
-            </div>
-        {/if}
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {required}
+    {readonly}
+    {label}
+    {nullable}
+    {pattern}
+    on:input
+    on:invalid={handleInvalid}
+    type="text"
+    helper={error}
+    state={error ? 'error' : 'default'}
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.Text>
diff --git a/src/lib/elements/forms/inputProjectId.svelte b/src/lib/elements/forms/inputProjectId.svelte
index 80c35e8cb..0fa91b895 100644
--- a/src/lib/elements/forms/inputProjectId.svelte
+++ b/src/lib/elements/forms/inputProjectId.svelte
@@ -1,59 +1,35 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem } from '.';
-    import TextCounter from './textCounter.svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let value = '';
     export let autofocus = true;
 
-    let element: HTMLInputElement;
-    let icon = 'info';
-    const pattern = String.raw`^[a-z0-9][a-z0-9\-]*$`;
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
+    let error = false;
 
-    const handleInvalid = (event: Event) => {
+    const pattern = String.raw`^[a-z0-9][a-z0-9\-]*$`;
+
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.patternMismatch) {
-            icon = 'exclamation';
+        if (event.currentTarget.validity.patternMismatch) {
+            error = true;
             return;
         }
     };
 
     $: if (value) {
-        icon = 'info';
+        error = false;
     }
 </script>
 
-<FormItem>
-    <div class="input-text-wrapper">
-        <input
-            id="id"
-            placeholder="Enter ID"
-            maxlength={36}
-            {pattern}
-            autocomplete="off"
-            type="text"
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        <TextCounter count={value?.length ?? 0} max={36} />
-    </div>
-</FormItem>
-<div
-    class="u-flex u-gap-4 u-margin-block-start-8 u-small"
-    class:u-color-text-warning={icon === 'exclamation'}>
-    <span
-        class:icon-info={icon === 'info'}
-        class:icon-exclamation={icon === 'exclamation'}
-        class="u-cross-center u-line-height-1 u-color-text-gray"
-        aria-hidden="true" />
-    <span class="text u-line-height-1-5">
-        Allowed characters: lowercase alphanumeric and non-leading hyphen
-    </span>
-</div>
+<Input.Text
+    {pattern}
+    {autofocus}
+    id="id"
+    placeholder="Enter ID"
+    maxlength={36}
+    autocomplete="off"
+    bind:value
+    on:invalid={handleInvalid}
+    state={error ? 'error' : 'default'}
+    helper="Allowed characters: lowercase alphanumeric and non-leading hyphen" />
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 1355b1cb6..4f5f85623 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -1,72 +1,24 @@
 <script lang="ts">
-    import { FormItem, Helper, Label } from '.';
+    import { Selector } from '@appwrite.io/pink-svelte';
 
     export let label: string = null;
-    export let showLabel = true;
     export let id: string;
     export let group: string;
     export let value: string;
     export let name: string;
     export let required = false;
     export let disabled = false;
-
-    let element: HTMLInputElement;
-    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;
-    }
+    export let size: 's' | 'm' = 'm';
 </script>
 
-<FormItem>
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {name}
-            {disabled}
-            {required}
-            {value}
-            type="radio"
-            bind:group
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        <Label {required} hide={!showLabel} for={id}>
-            {#if label}
-                {label}
-            {:else}
-                <slot />
-            {/if}
-        </Label>
-        <!-- <label class="choice-item" for={id}>
-            <input
-                {id}
-                {name}
-                {disabled}
-                {required}
-                {value}
-                type="radio"
-                bind:group
-                bind:this={element}
-                on:invalid={handleInvalid} />
-            <div
-                class="choice-item-content u-cross-child-center"
-                class:u-width-full-line={fullWidth}>
-                <div class="choice-item-title">{label}</div>
-                <slot name="description" />
-            </div>
-        </label> -->
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Selector.Radio
+    {id}
+    {name}
+    {disabled}
+    {required}
+    {value}
+    {label}
+    {size}
+    bind:group
+    on:invalid
+    on:change />
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index b4edb489a..636bec750 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from 'svelte';
+    import { IconX, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import { Input, Icon } from '@appwrite.io/pink-svelte';
+    import { createEventDispatcher } from 'svelte';
     import { onDestroy } from 'svelte';
 
     export let value = '';
@@ -8,19 +10,12 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let isWithEndButton = true;
-    export let style: string = '';
+    export let label: string = '';
 
     const dispatch = createEventDispatcher();
     let element: HTMLInputElement;
     let timer: ReturnType<typeof setTimeout>;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
     onDestroy(() => {
         value = '';
         if (timer) {
@@ -28,14 +23,12 @@
         }
     });
 
-    function valueChange(event: Event) {
+    const valueChange = () => {
         clearTimeout(timer);
         timer = setTimeout(() => {
-            const target = event.target as HTMLInputElement;
-            value = target.value;
             dispatch('change', value);
         }, debounce);
-    }
+    };
 
     function clearSearch() {
         value = '';
@@ -49,25 +42,20 @@
     }
 </script>
 
-<div class="input-text-wrapper" class:is-with-end-button={isWithEndButton}>
-    <input
-        {placeholder}
-        {disabled}
-        {required}
-        {style}
-        type="search"
-        class="input-text"
-        bind:this={element}
-        on:input={valueChange} />
-    <span class="icon-search" aria-hidden="true" />
-    {#if isWithEndButton && value}
-        <button
-            class="button is-text is-only-icon"
-            style="--button-size:1.5rem;"
-            aria-label="Clear search"
-            type="button"
-            on:click={clearSearch}>
-            <span class="icon-x" aria-hidden="true" />
-        </button>
-    {/if}
-</div>
+<Input.Text
+    {placeholder}
+    {disabled}
+    {required}
+    {autofocus}
+    {label}
+    bind:value
+    on:input={valueChange}>
+    <svelte:fragment slot="start">
+        <Icon icon={IconSearch} />
+    </svelte:fragment>
+    <svelte:fragment slot="end">
+        {#if value}
+            <Input.Action icon={IconX} on:click={clearSearch} />
+        {/if}
+    </svelte:fragment>
+</Input.Text>
diff --git a/src/lib/elements/forms/inputSecret.svelte b/src/lib/elements/forms/inputSecret.svelte
index d9e011890..059b1f098 100644
--- a/src/lib/elements/forms/inputSecret.svelte
+++ b/src/lib/elements/forms/inputSecret.svelte
@@ -1,48 +1,10 @@
 <script lang="ts">
-    import { FormItem, Label } from '.';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let id: string;
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = '';
     export let value = '';
     export let placeholder = '';
-
-    let showInPlainText = false;
 </script>
 
-<FormItem>
-    <Label hide={!showLabel} for={id}>
-        {label}
-    </Label>
-
-    <div class="input-text-wrapper" style=" --amount-of-buttons: 1;">
-        {#if showInPlainText}
-            <div
-                contenteditable="true"
-                role="textbox"
-                {id}
-                aria-placeholder={placeholder}
-                class="input-text is-resizable"
-                bind:textContent={value} />
-        {:else}
-            <input
-                {id}
-                {placeholder}
-                name={id}
-                type="password"
-                class="input-text"
-                autocomplete="off"
-                bind:value />
-        {/if}
-        <button
-            type="button"
-            on:click={() => (showInPlainText = !showInPlainText)}
-            class="show-password-button"
-            aria-label="show / hide password">
-            <span
-                class:icon-eye={!showInPlainText}
-                class:icon-eye-off={showInPlainText}
-                aria-hidden="true" />
-        </button>
-    </div>
-</FormItem>
+<Input.Password {id} {label} {value} {placeholder} readonly />
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index f8a9290ee..1939d5ac3 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,35 +1,27 @@
 <script lang="ts">
-    import { FormItem, FormItemPart, Helper, Label } from '.';
-    import type { FormItemTag } from './formItem.svelte';
-    import { Drop } from '$lib/components';
-    import type { SvelteComponent } from 'svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
+    import type { ComponentType } from 'svelte';
 
     export let id: string;
     export let label: string | undefined = undefined;
-    export let ariaLabel = label;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let value: string | number | boolean | null;
+    export let helper: string | undefined = undefined;
+    export let optionalText: string | number | boolean | null | undefined = undefined;
     export let placeholder = '';
     export let required = false;
-    export let hideRequired = false;
     export let disabled = false;
-    export let wrapperTag: FormItemTag = 'li';
     export let options: {
         value: string | boolean | number | null;
         label: string;
         disabled?: boolean;
+        leadingIcon?: ComponentType;
+        leadingHtml?: string;
     }[];
-    export let isMultiple = false;
-    export let fullWidth = false;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
+    export let isSearchable = false;
 
     let element: HTMLSelectElement;
     let error: string;
 
-    let show: boolean = false;
-
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
@@ -53,67 +45,22 @@
     $: if (isNotEmpty(value)) {
         error = null;
     }
-
-    $: hasNullOption = options.some((option) => option.value === null);
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth} tag={wrapperTag}>
-    {#if label}
-        <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if popover}
-                <Drop isPopover bind:show display="inline-block">
-                    &nbsp;<button
-                        type="button"
-                        on:click={() => (show = !show)}
-                        class="tooltip"
-                        aria-label="input tooltip">
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style="font-size: var(--icon-size-small)" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <div
-                            class="dropped card u-max-width-250"
-                            style:--card-border-radius="var(--border-radius-small)"
-                            style:--p-card-padding=".75rem"
-                            style:box-shadow="var(--shadow-large)">
-                            <svelte:component this={popover} {...popoverProps} />
-                        </div>
-                    </svelte:fragment>
-                </Drop>
-            {/if}
-        </Label>
-    {/if}
-
-    <div class="select">
-        <select
-            {id}
-            {required}
-            {disabled}
-            aria-label={ariaLabel}
-            bind:this={element}
-            bind:value
-            on:invalid={handleInvalid}
-            on:change>
-            {#if placeholder && !hasNullOption}
-                <option value={null} disabled selected hidden>{placeholder}</option>
-            {/if}
-            {#each options as option}
-                <option
-                    value={option.value}
-                    selected={option.value === value}
-                    disabled={option.disabled}>
-                    {option.label}
-                </option>
-            {/each}
-        </select>
-        <span class="icon-cheveron-down" aria-hidden="true" />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {:else}
-        <slot name="helper" />
-    {/if}
-</svelte:component>
+<Input.Select
+    {id}
+    {label}
+    {options}
+    {optionalText}
+    {placeholder}
+    {disabled}
+    {isSearchable}
+    helper={error ?? helper}
+    {required}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input
+    on:change
+    bind:value>
+    <slot name="info" slot="info" />
+</Input.Select>
diff --git a/src/lib/elements/forms/inputSelectCheckbox.svelte b/src/lib/elements/forms/inputSelectCheckbox.svelte
index 57c0fd440..fb0963db7 100644
--- a/src/lib/elements/forms/inputSelectCheckbox.svelte
+++ b/src/lib/elements/forms/inputSelectCheckbox.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { DropList } from '$lib/components';
     import { SelectSearchCheckbox } from '..';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
+    import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
 
     type Option = {
         value: string;
@@ -48,28 +50,21 @@
         class="tags-input u-position-relative u-cursor-pointer"
         type="button"
         on:click={() => (show = !show)}>
-        <div class="tags">
-            <ul class="tags-list">
+        <div class="input">
+            <div class="tags-container">
                 {#each tags as tag}
-                    <li class="tags-item">
-                        <div class="input-tag">
-                            <span class="tag-text">{tag}</span>
-                        </div>
-                    </li>
+                    <Tag size="xs">
+                        {tag}
+                    </Tag>
                 {/each}
-            </ul>
-        </div>
+            </div>
 
-        <input
-            class="tags-input-text u-cursor-text"
-            {placeholder}
-            bind:value={search}
-            bind:this={input} />
-        <span
-            class:icon-cheveron-up={show}
-            class:icon-cheveron-down={!show}
-            class="chevron-icon u-position-absolute u-inset-inline-end-12"
-            aria-hidden="true"></span>
+            {#if !tags.length}
+                <input {placeholder} bind:value={search} bind:this={input} />
+            {/if}
+
+            <Icon size="m" icon={show ? IconChevronUp : IconChevronDown} />
+        </div>
     </button>
 
     <svelte:fragment slot="list">
@@ -87,14 +82,54 @@
     </svelte:fragment>
 </DropList>
 
-<style>
-    @media (max-width: 768px) {
-        .chevron-icon {
-            inset-block-start: 0.25rem !important;
-        }
+<style lang="scss">
+    .tags-input {
+        width: 100%;
 
-        .tags-input {
+        @media (max-width: 768px) {
             padding-right: 2rem;
         }
     }
+
+    .input {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        transition: all 0.15s ease-in-out;
+        padding-inline: var(--space-6);
+        border-radius: var(--border-radius-s);
+        background-color: var(--p-input-background-color);
+        outline-offset: calc(var(--border-width-s) * -1);
+        border: var(--border-width-s) solid var(--border-neutral);
+        --p-input-background-color: var(--input-background-color, var(--bgcolor-neutral-default));
+
+        & input {
+            inline-size: 100%;
+            padding-block: var(--space-3);
+            padding-inline: 0;
+            border: none;
+            display: block;
+            line-height: 140%;
+            background: none;
+        }
+
+        & input::placeholder {
+            color: var(--fgcolor-neutral-tertiary);
+        }
+
+        &:focus-within {
+            outline: var(--border-width-l) solid var(--border-focus);
+        }
+    }
+    .tags-container {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        max-height: 14rem;
+        gap: var(--space-2);
+        align-items: center;
+        align-content: space-between;
+        padding-block: var(--space-2);
+    }
 </style>
diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
deleted file mode 100644
index 0e3b4a68c..000000000
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-    import { DropList } from '$lib/components';
-    import { clickOnEnter } from '$lib/helpers/a11y';
-    import { createEventDispatcher, onMount } from 'svelte';
-    import { Helper, Label } from '.';
-
-    /* eslint no-undef: "off" */
-    type Option = $$Generic<{
-        value: string | boolean | number;
-        label: string;
-        data?: unknown[];
-    }>;
-    type OptionArray = Option[];
-
-    export let options: OptionArray;
-    export let id: string;
-    export let label: string;
-    export let name = 'elements';
-    export let optionalText: string | undefined = undefined;
-    export let tooltip: string | undefined = undefined;
-    export let showLabel = true;
-    export let placeholder = '';
-    export let required = false;
-    export let hideRequired = false;
-    export let disabled = false;
-    export let fullWidth = false;
-    export let autofocus = false;
-    export let interactiveOutput = false;
-    export let interactiveEmpty = false;
-    export let hideEmpty = false;
-    // stretch is used inside of a flex container to give the element flex:1
-    export let stretch = true;
-    export let search = '';
-    // The actual selected value
-    export let value: Option['value'];
-    $: selectedOption = options.find((option) => option.value === value);
-
-    let element: HTMLInputElement;
-    let hasFocus = false;
-    let selected: number = null;
-    let error: string;
-
-    $: if (!hasFocus) {
-        selected = null;
-    }
-
-    const dispatch = createEventDispatcher();
-
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    function handleInput() {
-        if (hideEmpty && !options?.length) hasFocus = false;
-        else hasFocus = true;
-    }
-
-    function handleKeydown(event: KeyboardEvent) {
-        event.stopImmediatePropagation();
-
-        switch (event.key) {
-            case 'Escape':
-                hasFocus = false;
-                break;
-            case 'ArrowDown':
-                if (selected === null) {
-                    selected = 0;
-                } else {
-                    selected = (selected + 1) % options.length;
-                }
-                break;
-            case 'ArrowUp':
-                if (selected === null) {
-                    selected = options.length - 1;
-                } else {
-                    selected = (selected - 1 + options.length) % options.length;
-                }
-                break;
-            case 'Enter':
-                if (selected !== null) {
-                    event.preventDefault();
-                    selectOption(options[selected]);
-                }
-                break;
-        }
-    }
-
-    function selectOption(option: Option) {
-        value = option.value;
-        search = option.label;
-        // It's not working without this line.
-        if (!$$slots.output) {
-            element.value = search;
-        } else {
-            search = '';
-        }
-
-        hasFocus = false;
-        dispatch('select', option);
-    }
-
-    function clearOption() {
-        search = '';
-        value = null;
-        !$$slots.output && (element.value = search);
-        hasFocus = false;
-        dispatch('reset');
-    }
-
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        if (element.validity.valueMissing) {
-            error = 'This field is required';
-            return;
-        }
-        error = element.validationMessage;
-    }
-
-    $: showClearBtn = (hasFocus && search) || value;
-    $: if (value || search) error = null;
-</script>
-
-<li
-    class="u-position-relative form-item"
-    class:u-width-full-line={fullWidth}
-    class:u-stretch={stretch}>
-    <DropList
-        bind:show={hasFocus}
-        noStyle
-        noArrow
-        scrollable
-        placement="bottom-end"
-        position="static"
-        fixed>
-        <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id} {tooltip}>
-            {label}
-        </Label>
-
-        <div class="custom-select">
-            <div class="input-text-wrapper" style="--amount-of-buttons:2">
-                {#if $$slots.output && selectedOption}
-                    <div
-                        role="button"
-                        tabindex="0"
-                        on:keyup={clickOnEnter}
-                        on:click={() => {
-                            if (interactiveOutput) hasFocus = !hasFocus;
-                        }}>
-                        <slot name="output" option={selectedOption} />
-                    </div>
-                {:else}
-                    <input
-                        type="text"
-                        class="input-text"
-                        {placeholder}
-                        {disabled}
-                        {required}
-                        bind:value={search}
-                        bind:this={element}
-                        on:focus={() => (hasFocus = true)}
-                        on:click={() => (hasFocus = true)}
-                        on:invalid={handleInvalid}
-                        on:input={handleInput}
-                        on:keydown={handleKeydown} />
-                {/if}
-
-                <div class="options-list">
-                    {#if showClearBtn}
-                        <button
-                            class="options-list-button"
-                            aria-label="clear field"
-                            type="button"
-                            disabled={!interactiveOutput}
-                            on:click|preventDefault={clearOption}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    {/if}
-                    <button
-                        class="options-list-button"
-                        type="button"
-                        disabled={!interactiveOutput}
-                        on:click={() => (hasFocus = !hasFocus)}>
-                        <span class="icon-cheveron-down" aria-hidden="true" />
-                    </button>
-                </div>
-            </div>
-        </div>
-        <svelte:fragment slot="list">
-            {#each options as option, i}
-                <li class="drop-list-item">
-                    <button
-                        class="drop-button"
-                        class:is-selected={selected === i}
-                        type="button"
-                        on:click|preventDefault={() => {
-                            selectOption(option);
-                        }}>
-                        <slot {option}>
-                            <span class="text" data-private>{option.label}</span>
-                        </slot>
-                    </button>
-                </li>
-            {:else}
-                <li class="drop-list-item">
-                    <button
-                        class:drop-button={interactiveEmpty}
-                        type="button"
-                        on:click={() => {
-                            if (interactiveOutput && interactiveEmpty) hasFocus = !hasFocus;
-                        }}>
-                        <slot name="empty">
-                            <span class="text">
-                                There are no {name} that match your search
-                            </span>
-                        </slot>
-                    </button>
-                </li>
-            {/each}
-        </svelte:fragment>
-        <svelte:fragment slot="other">
-            {#if $$slots.listEnd}
-                <section class="drop-section">
-                    <ul class="drop-list">
-                        <li class="drop-list-item">
-                            <slot name="listEnd" />
-                        </li>
-                    </ul>
-                </section>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-    {#if error}
-        <Helper class="u-position-relative" type="warning">{error}</Helper>
-    {/if}
-</li>
-
-<style>
-    .form-item :global(.drop) {
-        translate: 0 4px;
-    }
-
-    .form-item :global(.drop-section) {
-        width: 100%;
-        margin-inline: initial;
-        max-inline-size: initial;
-    }
-</style>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 1b2be3058..1f463df0c 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -1,46 +1,13 @@
 <script lang="ts">
-    import { FormItem, Helper } from '.';
+    import { Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
     export let id: string;
+    export let label: string;
     export let value = false;
     export let disabled = false;
-
-    let element: HTMLInputElement;
-    let error: string;
-
-    const handleInvalid = (event: Event) => {
-        event.preventDefault();
-
-        error = element.validationMessage;
-    };
-
-    $: if (value) {
-        error = null;
-    }
+    export let description: string = undefined;
 </script>
 
-<FormItem>
-    <label class="choice-item" for={id}>
-        <div class="input-text-wrapper">
-            <input
-                {id}
-                {disabled}
-                type="checkbox"
-                class="switch"
-                role="switch"
-                aria-checked={value}
-                bind:this={element}
-                bind:checked={value}
-                on:change
-                on:invalid={handleInvalid} />
-        </div>
-        <div class="choice-item-content">
-            <div class="choice-item-title">{label}</div>
-            <slot name="description" />
-        </div>
-    </label>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Selector.Switch {id} {description} {label} {disabled} bind:checked={value} on:invalid on:change>
+    <slot name="description" slot="description" />
+</Selector.Switch>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 28fbf8ce9..b17254d21 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -1,84 +1,28 @@
 <script lang="ts">
-    import { last } from '$lib/helpers/array';
-    import { onMount, SvelteComponent } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import { Drop } from '$lib/components';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let id: string;
     export let label: string;
-    export let showLabel = true;
     export let tags: string[] = [];
     export let placeholder = '';
-    export let autofocus = false;
-    export let disabled = false;
-    export let readonly = false;
     export let required = false;
-    export let tooltip: string = null;
-    export let validityRegex: RegExp = null;
-    export let validityMessage: string = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
+    export let disabled = false;
+    export let helper: string | undefined = undefined;
+    export let pattern: string | undefined = undefined;
 
     let value = '';
-    let element: HTMLInputElement;
-    let hiddenEl: HTMLInputElement;
     let error: string;
-    let show: boolean = false;
-
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInput = (e: KeyboardEvent) => {
-        /**
-         * Allow form submit and tab input switch
-         */
-        if (value === '' && ['Enter', 'Tab', ','].includes(e.key)) {
-            return;
-        }
-
-        if (['Enter', 'Tab', ' ', ','].includes(e.key)) {
-            e.preventDefault();
-            if (validityRegex && !validityRegex.test(value)) {
-                error = validityMessage ? validityMessage : 'Invalid value';
-                return;
-            }
-            addValue();
-        }
-        if (['Backspace', 'Delete'].includes(e.key)) {
-            if (value.length === 0) {
-                removeValue(last(tags));
-            }
-        }
-    };
-
-    const addValue = () => {
-        if (validityRegex && !validityRegex.test(value) && !!value) {
-            error = validityMessage ? validityMessage : 'Invalid value';
-            return;
-        }
-        let tag = value.trim();
-        if (tag.length === 0 || tags.includes(tag)) return;
-
-        tags = [...tags, tag];
-        value = '';
-    };
-
-    const removeValue = (value: string) => {
-        if (readonly) return;
-        tags = tags.filter((tag) => tag !== value);
-    };
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
-        if (hiddenEl.validity.valueMissing) {
+        const inputNode = event.currentTarget as HTMLInputElement;
+
+        if (inputNode.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
-        error = hiddenEl.validationMessage;
+        error = inputNode.validationMessage;
     };
 
     $: if (value) {
@@ -86,73 +30,14 @@
     }
 </script>
 
-<FormItem>
-    <input
-        class="u-hide"
-        bind:this={hiddenEl}
-        value={tags.join(',')}
-        {required}
-        on:invalid={handleInvalid} />
-    <Label {required} {tooltip} hide={!showLabel} for={id}>
-        {label}{#if popover}
-            <Drop isPopover bind:show display="inline-block">
-                &nbsp;<button
-                    type="button"
-                    on:click={() => (show = !show)}
-                    class="tooltip"
-                    aria-label="input tooltip">
-                    <span
-                        class="icon-info"
-                        aria-hidden="true"
-                        style="font-size: var(--icon-size-small)" />
-                </button>
-                <svelte:fragment slot="list">
-                    <div
-                        class="dropped card u-max-width-250"
-                        style:--card-border-radius="var(--border-radius-small)"
-                        style:--p-card-padding=".75rem"
-                        style:box-shadow="var(--shadow-large)">
-                        <svelte:component this={popover} {...popoverProps} />
-                    </div>
-                </svelte:fragment>
-            </Drop>
-        {/if}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <div class="tags-input">
-            <div class="tags">
-                <ul class="tags-list">
-                    {#each tags as tag}
-                        <li class="tags-item">
-                            <div class="input-tag">
-                                <span class="tag-text">{tag}</span>
-                                <button
-                                    type="button"
-                                    class="input-tag-delete-button"
-                                    aria-label={`delete ${tag} tag`}
-                                    on:click={() => removeValue(tag)}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </button>
-                            </div>
-                        </li>
-                    {/each}
-                </ul>
-            </div>
-            <input
-                {id}
-                {placeholder}
-                {disabled}
-                {readonly}
-                type="text"
-                class="tags-input-text"
-                bind:value
-                bind:this={element}
-                on:keydown={handleInput}
-                on:blur={addValue} />
-        </div>
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Tags
+    {label}
+    {id}
+    {placeholder}
+    {disabled}
+    {pattern}
+    {required}
+    bind:value={tags}
+    helper={error || helper}
+    on:invalid={handleInvalid}
+    state={error ? 'error' : 'default'}><slot name="info" slot="info" /></Input.Tags>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 8ca3ef587..800c661dc 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,158 +1,67 @@
 <script lang="ts">
-    import { SvelteComponent, onMount, tick } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
-    import TextCounter from './textCounter.svelte';
-    import { Drop } from '$lib/components';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let label: string = undefined;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let id: string;
     export let name: string = id;
+    export let helper: string = undefined;
     export let value = '';
-    export let pattern: string = null;
+    export let pattern: string = undefined; //TODO: implement pattern check
     export let patternError: string = '';
     export let placeholder = '';
     export let required = false;
-    export let hideRequired = false;
     export let nullable = false;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let fullWidth = false;
     export let maxlength: number = null;
-    export let tooltip: string = null;
-    export let isMultiple = false;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
 
-    let element: HTMLInputElement;
-    let error: string;
-    let show = false;
-
-    onMount(async () => {
-        if (element && autofocus) {
-            await tick();
-            element.focus();
-        }
-    });
+    export let error: string = null;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        const inputNode = event.currentTarget as HTMLInputElement;
+
+        if (inputNode.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        if (patternError && element.validity.patternMismatch) {
+        error = inputNode.validationMessage;
+        if (patternError && inputNode.validity.patternMismatch) {
             error = patternError;
             return;
         }
 
-        error = element.validationMessage;
+        error = inputNode.validationMessage;
     };
 
-    $: {
-        value;
-        if (element?.validity?.valid) {
-            error = null;
-        }
+    $: if (value) {
+        error = null;
     }
-
-    let prevValue = '';
-    function handleNullChange(e: CustomEvent<boolean>) {
-        const isNull = e.detail;
-        if (isNull) {
-            prevValue = value;
-            value = null;
-        } else {
-            value = prevValue;
-        }
-    }
-
-    $: showTextCounter = !!maxlength;
-    $: showNullCheckbox = nullable && !required;
-
-    type $$Events = {
-        input: Event & { target: HTMLInputElement };
-    };
-
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    {#if label}
-        <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if popover}
-                <Drop isPopover bind:show display="inline-block">
-                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                    &nbsp;<button
-                        type="button"
-                        on:click={() => (show = !show)}
-                        class="tooltip"
-                        aria-label="input tooltip">
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style:font-size="var(--icon-size-small)" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <div
-                            class="dropped card u-max-width-250"
-                            style:--p-card-padding=".75rem"
-                            style:--card-border-radius="var(--border-radius-small)"
-                            style:box-shadow="var(--shadow-large)">
-                            <svelte:component this={popover} {...popoverProps} />
-                        </div>
-                    </svelte:fragment>
-                </Drop>
-            {/if}
-        </Label>
-    {/if}
-
-    <div
-        class:input-text-wrapper={!$$slots.default}
-        class:u-flex={$$slots.default}
-        class:u-gap-8={$$slots.default}
-        class:u-cross-center={$$slots.default}>
-        <input
-            {id}
-            {name}
-            {placeholder}
-            {disabled}
-            {readonly}
-            {required}
-            {pattern}
-            {maxlength}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="text"
-            class="input-text"
-            bind:value
-            class:u-padding-inline-end-56={typeof maxlength === 'number'}
-            bind:this={element}
-            on:invalid={handleInvalid}
-            on:input />
-        {#if showTextCounter || showNullCheckbox}
-            <ul
-                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-                {#if showTextCounter}
-                    <li class="buttons-list-item">
-                        <TextCounter max={maxlength} count={value?.length ?? 0} />
-                    </li>
-                {/if}
-                {#if showNullCheckbox}
-                    <li class="buttons-list-item">
-                        <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                    </li>
-                {/if}
-            </ul>
-        {/if}
-        <slot />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</svelte:component>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {required}
+    {maxlength}
+    {label}
+    {nullable}
+    {readonly}
+    {pattern}
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    helper={error || helper}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.Text>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7d0dfe294..d6fc25d18 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
-    import TextCounter from './textCounter.svelte';
-    import { clickOnEnter } from '$lib/helpers/a11y';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label = '';
     export let id: string;
     export let name: string = id;
     export let value = '';
@@ -16,86 +11,44 @@
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
+    export let spellcheck: boolean = undefined;
     export let maxlength: number = null;
-    export let optionalText: string | undefined = undefined;
-    export let tooltip: string = null;
+    export let rows = 3;
+    export let helper: string = '';
 
-    let element: HTMLTextAreaElement;
     let error: string;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => {
         event.preventDefault();
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
         error = null;
     }
-
-    let prevValue = null;
-    function handleNullChange(e: CustomEvent<boolean>) {
-        const isNull = e.detail;
-        if (isNull) {
-            prevValue = value;
-            value = null;
-        } else {
-            value = prevValue;
-        }
-    }
-
-    $: showTextCounter = !!maxlength;
-    $: showNullCheckbox = nullable && !required;
 </script>
 
-<FormItem>
-    <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
-
-    <div class="input-text-wrapper" on:click on:keyup={clickOnEnter} role="textbox" tabindex="-1">
-        <textarea
-            {id}
-            {name}
-            {placeholder}
-            {disabled}
-            {readonly}
-            {required}
-            {maxlength}
-            class="input-text"
-            class:u-padding-block-end-32={maxlength}
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid}
-            style:--amount-of-buttons={maxlength ? 0.25 : required ? undefined : 0.25} />
-        {#if showTextCounter || showNullCheckbox}
-            <ul
-                class="buttons-list u-gap-8 u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12"
-                style="border-end-end-radius:0.0625rem;">
-                {#if showTextCounter}
-                    <li class="buttons-list-item">
-                        <TextCounter max={maxlength} count={value?.length ?? 0} />
-                    </li>
-                {/if}
-                {#if showNullCheckbox}
-                    <li class="buttons-list-item">
-                        <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                    </li>
-                {/if}
-            </ul>
-        {/if}
-    </div>
-
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Textarea
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {readonly}
+    {required}
+    {maxlength}
+    {label}
+    {nullable}
+    {rows}
+    autofocus={autofocus || undefined}
+    helper={error || helper}
+    state={error ? 'error' : 'default'}
+    {spellcheck}
+    on:invalid={handleInvalid}
+    on:input
+    bind:value>
+    <slot name="info" slot="info" />
+</Input.Textarea>
diff --git a/src/lib/elements/forms/inputTime.svelte b/src/lib/elements/forms/inputTime.svelte
index e32df0a07..fb0e8857d 100644
--- a/src/lib/elements/forms/inputTime.svelte
+++ b/src/lib/elements/forms/inputTime.svelte
@@ -1,75 +1,63 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
+    import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
-    export let optionalText: string | undefined = undefined;
+    export let label: string = undefined;
     export let id: string;
+    export let name: string = id;
+    export let helper: string = undefined;
     export let value = '';
+    export let placeholder = '';
     export let required = false;
-    export let min: string | number | undefined = undefined;
-    export let max: string | number | undefined = undefined;
+    export let nullable = false;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let fullWidth = false;
-    export let isMultiple = false;
-    export let step: number | 'any' = 60;
+    export let step: number | 'any' = 0.001;
+    export let min: string = undefined;
+    export let max: string = undefined;
 
-    let element: HTMLInputElement;
     let error: string;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
     function handleInvalid(event: Event) {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
+        const inputNode = event.currentTarget as HTMLInputElement;
+
+        if (inputNode.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        error = element.validationMessage;
+        error = inputNode.validationMessage;
     }
 
     $: if (value) {
         error = null;
     }
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
-
-    <div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
-        <input
-            {id}
-            {disabled}
-            {readonly}
-            {required}
-            {min}
-            {max}
-            {step}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="time"
-            class="input-text"
-            style={disabled ? '' : 'cursor: pointer;'}
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid}
-            on:click={function () {
-                this.showPicker();
-            }} />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</svelte:component>
+<Input.DateTime
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {required}
+    {label}
+    {step}
+    {nullable}
+    {readonly}
+    {min}
+    {max}
+    type="time"
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    helper={error || helper}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input
+    bind:value>
+    <slot name="start" slot="start" />
+    <slot name="info" slot="info" />
+    <slot name="end" slot="end" />
+</Input.DateTime>
diff --git a/src/lib/elements/forms/inputURL.svelte b/src/lib/elements/forms/inputURL.svelte
index 5c7a1178a..fdfd32d22 100644
--- a/src/lib/elements/forms/inputURL.svelte
+++ b/src/lib/elements/forms/inputURL.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
-    import TextCounter from './textCounter.svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
 
     export let label: string;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let id: string;
+    export let name = id;
     export let value = '';
     export let placeholder = '';
     export let required = false;
@@ -18,79 +14,43 @@
     export let autocomplete = false;
     export let maxlength: number = null;
 
-    let element: HTMLInputElement;
     let error: string;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
-    const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         event.preventDefault();
 
-        if (element.validity.patternMismatch) {
+        if (event.currentTarget.validity.patternMismatch) {
             error = 'Must be a valid URL';
             return;
         }
-        if (element.validity.valueMissing) {
+        if (event.currentTarget.validity.valueMissing) {
             error = 'This field is required';
             return;
         }
 
-        error = element.validationMessage;
+        error = event.currentTarget.validationMessage;
     };
 
     $: if (value) {
         error = null;
     }
-
-    let prevValue = '';
-    function handleNullChange(e: CustomEvent<boolean>) {
-        const isNull = e.detail;
-        if (isNull) {
-            prevValue = value;
-            value = null;
-        } else {
-            value = prevValue;
-        }
-    }
 </script>
 
-<FormItem>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            {maxlength}
-            {readonly}
-            type="url"
-            autocomplete={autocomplete ? 'on' : 'off'}
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        <ul
-            class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-            {#if maxlength}
-                <li class="buttons-list-item">
-                    <TextCounter max={maxlength} count={value?.length ?? 0} />
-                </li>
-            {/if}
-            {#if nullable && !required}
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            {/if}
-        </ul>
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</FormItem>
+<Input.Text
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {readonly}
+    {required}
+    {maxlength}
+    {label}
+    {nullable}
+    type="url"
+    autofocus={autofocus || undefined}
+    autocomplete={autocomplete ? 'on' : 'off'}
+    helper={error}
+    state={error ? 'error' : 'default'}
+    on:invalid={handleInvalid}
+    on:input
+    bind:value />
diff --git a/src/lib/elements/forms/label.svelte b/src/lib/elements/forms/label.svelte
index a4d628d7a..f5188fa53 100644
--- a/src/lib/elements/forms/label.svelte
+++ b/src/lib/elements/forms/label.svelte
@@ -1,21 +1,11 @@
 <script lang="ts">
-    import { tooltip as tooltipAction } from '$lib/actions/tooltip';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
-    interface $$Props extends Partial<HTMLLabelElement> {
-        required?: boolean;
-        hideRequired?: boolean;
-        optionalText?: string | undefined;
-        hide?: boolean;
-        tooltip?: string;
-        for?: string;
-        class?: string;
-    }
-
-    export let required: $$Props['required'] = false;
-    export let hideRequired: $$Props['hideRequired'] = false;
-    export let optionalText: $$Props['optionalText'] = undefined;
-    export let hide: $$Props['hide'] = false;
-    export let tooltip: $$Props['tooltip'] = null;
+    export let required = false;
+    export let hideRequired = false;
+    export let optionalText: string | undefined = undefined;
+    export let hide = false;
+    export let tooltip: string = null;
 </script>
 
 <label
@@ -31,12 +21,8 @@
 {/if}
 
 {#if tooltip}
-    <button
-        type="button"
-        on:click|preventDefault
-        class="tooltip"
-        aria-label="input tooltip"
-        use:tooltipAction={{ content: tooltip, appendTo: 'parent' }}>
-        <span class="icon-info" aria-hidden="true" style="font-size: var(--icon-size-small)" />
-    </button>
+    <Tooltip placement="top">
+        <span class="icon-info" aria-hidden="true" style="font-size: var(--icon-size-small)"></span>
+        <div slot="tooltip">{tooltip}</div>
+    </Tooltip>
 {/if}
diff --git a/src/lib/elements/forms/textCounter.svelte b/src/lib/elements/forms/textCounter.svelte
index 14e707720..bccca64e6 100644
--- a/src/lib/elements/forms/textCounter.svelte
+++ b/src/lib/elements/forms/textCounter.svelte
@@ -5,7 +5,7 @@
 
 <span class="text-counter" class:active={count > 0}>
     <span class="text-counter-count">{count}</span>
-    <span class="text-counter-separator" />
+    <span class="text-counter-separator"></span>
     <span class="text-counter-max">{max}</span>
 </span>
 
diff --git a/src/lib/elements/index.ts b/src/lib/elements/index.ts
index 41569ee74..d534f5b4e 100644
--- a/src/lib/elements/index.ts
+++ b/src/lib/elements/index.ts
@@ -3,3 +3,4 @@ export { default as SelectSearchItem } from './selectSearchItem.svelte';
 export { default as Flag } from './flag.svelte';
 export { default as SelectSearchCheckbox } from './selectSearchCheckbox.svelte';
 export { default as SelectSearchRadio } from './selectSearchRadio.svelte';
+export { default as Link } from './link.svelte';
diff --git a/src/lib/elements/link.svelte b/src/lib/elements/link.svelte
new file mode 100644
index 000000000..6e75e98a5
--- /dev/null
+++ b/src/lib/elements/link.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Link } from '@appwrite.io/pink-svelte';
+    import type { ComponentProps } from 'svelte';
+
+    type Props = ComponentProps<Link.Anchor> & ComponentProps<Link.Button>;
+
+    export let event: string = null;
+    export let eventData: Record<string, unknown> = {};
+    export let href: string = null;
+    export let disabled: Props['disabled'] = false;
+    export let type: Props['type'] = 'button';
+    export let variant: Props['variant'] = 'default';
+    export let size: Props['size'] = 'm';
+    export let external = false;
+    export let icon = false;
+
+    function track() {
+        if (!event) {
+            return;
+        }
+
+        trackEvent(`click_${event}`, {
+            from: 'link',
+            ...eventData
+        });
+    }
+</script>
+
+{#if href}
+    <Link.Anchor
+        on:click
+        on:mousedown
+        on:click={track}
+        {href}
+        {disabled}
+        {icon}
+        {variant}
+        {size}
+        target={external ? '_blank' : ''}
+        rel={external ? 'noopener noreferrer' : ''}>
+        <slot />
+    </Link.Anchor>
+{:else}
+    <Link.Button on:click on:mousedown on:click={track} {type} {disabled} {variant} {size} {icon}>
+        <slot />
+    </Link.Button>
+{/if}
diff --git a/src/lib/elements/selectSearchCheckbox.svelte b/src/lib/elements/selectSearchCheckbox.svelte
index aa3354096..b7d854c88 100644
--- a/src/lib/elements/selectSearchCheckbox.svelte
+++ b/src/lib/elements/selectSearchCheckbox.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
+    import { ActionMenu, Layout } from '@appwrite.io/pink-svelte';
+    import InputCheckbox from './forms/inputCheckbox.svelte';
+
     export let value = false;
-    export let padding: number | null = null;
 </script>
 
-<li class="drop-list-item">
-    <button
-        class="drop-button u-flex u-cross-center u-gap-12"
-        style:--button-padding-horizontal={padding ? `${padding / 16}rem` : ''}
-        style:--button-padding-vertical={padding ? `${padding / 16}rem` : ''}
-        on:click|preventDefault
-        type="button">
-        <input type="checkbox" class="is-small" bind:checked={value} />
+<ActionMenu.Item.Button on:click>
+    <Layout.Stack direction="row" gap="xs" alignItems="center">
+        <InputCheckbox bind:checked={value} id="filter" size="s" />
+
         <slot />
-    </button>
-</li>
+    </Layout.Stack>
+</ActionMenu.Item.Button>
diff --git a/src/lib/elements/selectSearchItem.svelte b/src/lib/elements/selectSearchItem.svelte
index 1317a4f15..0de9eed6a 100644
--- a/src/lib/elements/selectSearchItem.svelte
+++ b/src/lib/elements/selectSearchItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let data: string[] = [];
 </script>
@@ -11,17 +11,16 @@
         <slot />
     </span>
     {#if data?.length}
-        <span
-            class="u-flex u-flex-1 u-trim-1 u-gap-4"
-            use:tooltip={{
-                content: data.map((e) => e ?? 'null').join(' | ')
-            }}>
-            {#each data as item, i}
-                {#if i}
-                    <span class="u-text-color-gray">|</span>
-                {/if}
-                <span class="text" style="white-space: nowrap" data-private>{item}</span>
-            {/each}
-        </span>
+        <Tooltip>
+            <span class="u-flex u-flex-1 u-trim-1 u-gap-4">
+                {#each data as item, i}
+                    {#if i}
+                        <span class="u-text-color-gray">|</span>
+                    {/if}
+                    <span class="text" style="white-space: nowrap" data-private>{item}</span>
+                {/each}
+            </span>
+            <div slot="tooltip">{data.map((e) => e ?? 'null').join(' | ')}</div>
+        </Tooltip>
     {/if}
 </div>
diff --git a/src/lib/elements/table/body.svelte b/src/lib/elements/table/body.svelte
index eaca43a10..a3ac5fe78 100644
--- a/src/lib/elements/table/body.svelte
+++ b/src/lib/elements/table/body.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { getServiceLimit, upgradeURL, type PlanServices } from '$lib/stores/billing';
     import { isCloud } from '$lib/system';
     import { Button } from '../forms';
@@ -41,7 +41,7 @@
                         secondary
                         href={$upgradeURL}
                         on:click={() =>
-                            trackEvent('click_organization_upgrade', {
+                            trackEvent(Click.OrganizationClickUpgrade, {
                                 from: 'button',
                                 source: event ?? 'table_row_limit_reached'
                             })}>Upgrade plan</Button>
diff --git a/src/lib/elements/table/cellCheck.svelte b/src/lib/elements/table/cellCheck.svelte
index 1fb4f7dac..db1c8ab9c 100644
--- a/src/lib/elements/table/cellCheck.svelte
+++ b/src/lib/elements/table/cellCheck.svelte
@@ -29,7 +29,6 @@
     <InputCheckbox
         bind:element={el}
         id="select-{id}"
-        wrapperTag="div"
         checked={selectedIds.includes(id)}
         {disabled}
         on:click={handleClick} />
diff --git a/src/lib/elements/table/cellHeadCheck.svelte b/src/lib/elements/table/cellHeadCheck.svelte
index d8da40a74..abff61e0f 100644
--- a/src/lib/elements/table/cellHeadCheck.svelte
+++ b/src/lib/elements/table/cellHeadCheck.svelte
@@ -6,7 +6,7 @@
     export let selected: string[] = [];
     export let pageItemsIds: string[] = [];
 
-    function handleClick(e: MouseEvent) {
+    function handleClick(e: CustomEvent) {
         if (!isHTMLInputElement(e.target)) return;
         if (e.target.checked) {
             const set = new Set(selected);
@@ -26,7 +26,6 @@
 <TableCellHead width={10}>
     <InputCheckbox
         id="select-all"
-        wrapperTag="div"
         indeterminate={someSelected && !allSelected}
         checked={allSelected}
         on:click={handleClick} />
diff --git a/tests/unit/helpers/array.test.ts b/src/lib/helpers/array.test.ts
similarity index 100%
rename from tests/unit/helpers/array.test.ts
rename to src/lib/helpers/array.test.ts
diff --git a/tests/unit/helpers/date.test.ts b/src/lib/helpers/date.test.ts
similarity index 100%
rename from tests/unit/helpers/date.test.ts
rename to src/lib/helpers/date.test.ts
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index f7d7f3a4b..2d56c1cb6 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -15,13 +15,17 @@ if (browser) {
     dayjs.extend(relativeTime);
 }
 
-export const toLocaleDate = (datetime: string) => {
+export const toLocaleDate = (datetime: string, format: 'dd mm yyyy' | 'default' = 'default') => {
     const date = new Date(datetime);
 
     if (isNaN(date.getTime())) {
         return 'n/a';
     }
 
+    if (format === 'dd mm yyyy') {
+        return `${date.getDate().toString().padStart(2, '0')} ${date.toLocaleString('en', { month: 'short' })} ${date.getFullYear()}`;
+    }
+
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: 'short',
@@ -31,7 +35,11 @@ export const toLocaleDate = (datetime: string) => {
     return date.toLocaleDateString('en', options);
 };
 
-export const toLocaleDateTime = (datetime: string | number) => {
+export const toLocaleDateTime = (
+    datetime: string | number,
+    is12HourFormat: boolean = false,
+    timeZone: string | undefined = undefined
+) => {
     const date = new Date(datetime);
 
     if (isNaN(date.getTime())) {
@@ -39,12 +47,14 @@ export const toLocaleDateTime = (datetime: string | number) => {
     }
 
     const options: Intl.DateTimeFormatOptions = {
+        timeZone,
         year: 'numeric',
         month: 'short',
         day: 'numeric',
         hour: 'numeric',
         minute: 'numeric',
-        hourCycle: 'h23'
+        hourCycle: is12HourFormat ? 'h12' : 'h23',
+        ...(is12HourFormat && { hour12: true })
     };
 
     return date.toLocaleDateString('en', options);
@@ -82,6 +92,29 @@ export const toLocaleTimeISO = (datetime: string | number) => {
     return date.toLocaleTimeString('sv');
 };
 
+/**
+ * Returns a local datetime string in ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sss),
+ * matching local time, without the 'Z' suffix.
+ *
+ * @returns Local ISO string (with ms) or 'n/a' if invalid
+ */
+export const toLocalDateTimeISO = (datetime: string | number): string => {
+    const date = new Date(datetime);
+
+    if (isNaN(date.getTime())) {
+        return 'n/a';
+    }
+
+    // Get timezone offset in minutes, convert to ms
+    const tzOffsetMs = date.getTimezoneOffset() * 60 * 1000;
+
+    // Shift date to local time
+    const local = new Date(date.getTime() - tzOffsetMs);
+
+    // Drop the trailing 'Z' to keep it as local
+    return local.toISOString().replace('Z', '');
+};
+
 export const utcHourToLocaleHour = (utcTimeString: string) => {
     const now = new Date();
     const [hours, minutes] = utcTimeString.split(':').map(Number);
@@ -163,6 +196,13 @@ export const diffDays = (date1: Date, date2: Date) => {
 };
 
 export function timeFromNow(datetime: string): string {
+    if (!datetime) {
+        return 'unknown time';
+    }
+    if (!isValidDate(datetime)) {
+        return 'invalid date';
+    }
+
     return dayjs().to(dayjs(datetime));
 }
 
@@ -181,3 +221,20 @@ export function getTomorrow(date: Date) {
 
     return tomorrow;
 }
+
+export function getUTCOffset(): string {
+    const offsetMinutes = -new Date().getTimezoneOffset();
+    const hours = Math.floor(offsetMinutes / 60);
+    const minutes = Math.abs(offsetMinutes % 60);
+
+    return `${hours >= 0 ? '+' : ''}${hours}${minutes ? `:${minutes.toString().padStart(2, '0')}` : ''}`;
+}
+
+export function toISOString(date: string): string {
+    const d = new Date(date);
+
+    if (isNaN(d.getTime())) {
+        return 'n/a';
+    }
+    return d.toISOString();
+}
diff --git a/src/lib/helpers/domains.ts b/src/lib/helpers/domains.ts
new file mode 100644
index 000000000..cb5283e35
--- /dev/null
+++ b/src/lib/helpers/domains.ts
@@ -0,0 +1,106 @@
+import type { DnsRecord } from '$lib/sdk/domains';
+import { sdk } from '$lib/stores/sdk';
+
+export async function createRecord(record: Partial<DnsRecord>, domainId: string) {
+    switch (record.type) {
+        case 'A':
+            return await sdk.forConsole.domains.createRecordA(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'AAAA':
+            return await sdk.forConsole.domains.createRecordAAAA(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'CNAME':
+            return await sdk.forConsole.domains.createRecordCNAME(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'MX':
+            return await sdk.forConsole.domains.createRecordMX(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record.priority || 10,
+                record?.comment || undefined
+            );
+        case 'TXT':
+            return await sdk.forConsole.domains.createRecordTXT(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'NS':
+            return await sdk.forConsole.domains.createRecordNS(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'SRV':
+            return await sdk.forConsole.domains.createRecordSRV(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record.priority,
+                record.weight,
+                record.port,
+                record?.comment || undefined
+            );
+        case 'CAA':
+            return await sdk.forConsole.domains.createRecordCAA(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'HTTPS':
+            return await sdk.forConsole.domains.createRecordHTTPS(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+        case 'ALIAS':
+            return await sdk.forConsole.domains.createRecordAlias(
+                domainId,
+                record.name,
+                record.value,
+                record.ttl,
+                record?.comment || undefined
+            );
+    }
+}
+
+export type ParsedRecords = {
+    A: Partial<DnsRecord>[];
+    AAAA: Partial<DnsRecord>[];
+    CNAME: Partial<DnsRecord>[];
+    MX: Partial<DnsRecord>[];
+    TXT: Partial<DnsRecord>[];
+    NS: Partial<DnsRecord>[];
+    SRV: Partial<DnsRecord>[];
+    CAA: Partial<DnsRecord>[];
+    PTR: Partial<DnsRecord>[];
+    HTTPS: Partial<DnsRecord>[];
+    ALIAS: Partial<DnsRecord>[];
+    [key: string]: Partial<DnsRecord>[];
+};
diff --git a/src/lib/helpers/envfile.ts b/src/lib/helpers/envfile.ts
new file mode 100644
index 000000000..637e85273
--- /dev/null
+++ b/src/lib/helpers/envfile.ts
@@ -0,0 +1,17 @@
+// Original code from: https://github.com/bevry/envfile
+
+export type Data = Record<string, string>;
+
+export function parse(src: string): Data {
+    const result: Data = {};
+    const lines = src.toString().split('\n');
+    for (const line of lines) {
+        const match = line.match(/^([^=:#]+?)[=:](.*)/);
+        if (match) {
+            const key = match[1].trim();
+            const value = match[2].trim().replace(/['"]+/g, '');
+            result[key] = value;
+        }
+    }
+    return result;
+}
diff --git a/src/lib/helpers/files.ts b/src/lib/helpers/files.ts
new file mode 100644
index 000000000..f85f4e7bd
--- /dev/null
+++ b/src/lib/helpers/files.ts
@@ -0,0 +1,241 @@
+import { addNotification } from '$lib/stores/notifications';
+import ignore from 'ignore';
+import { createTarGzip } from 'nanotar';
+
+export interface FileData {
+    path: string;
+    buffer: ArrayBuffer;
+}
+
+export async function processFileList(files: FileList): Promise<FileData[]> {
+    const fileArray = Array.from(files);
+    const ignorer = ignore();
+
+    // Check for .gitignore file
+    const gitignoreFile = fileArray.find(
+        (file) => file.webkitRelativePath.endsWith('.gitignore') || file.name === '.gitignore'
+    );
+
+    if (gitignoreFile) {
+        const gitignoreContent = await gitignoreFile.text();
+        ignorer.add(gitignoreContent);
+    } else {
+        ignorer.add(defaultIgnore);
+    }
+
+    // Filter files using ignorer
+    const filteredFiles = fileArray.filter((file) => {
+        const path = file.webkitRelativePath || file.name;
+        return !ignorer.ignores(path);
+    });
+    const filePromises = filteredFiles.map(async (file) => {
+        try {
+            const buffer = await file.arrayBuffer();
+            return {
+                path: file?.webkitRelativePath || file.name,
+                buffer: buffer
+            };
+        } catch (e) {
+            // console.log(file);
+            return null;
+        }
+    });
+
+    return Promise.all(filePromises);
+}
+
+export async function gzipUpload(files: FileList) {
+    let uploadFile: File;
+    const tick = performance.now();
+    if (!files?.length) return;
+
+    // If the file is a tar.gz file, then return it as is
+    if (
+        files?.length === 1 &&
+        files.item(0).type === 'application/gzip' &&
+        files.item(0).name.split('.').pop() === 'tar'
+    ) {
+        uploadFile = files.item(0);
+    }
+    // Else process the file to mantain the folder structure and create a .tar.gz file
+    else {
+        try {
+            const processedFiles = await processFileList(files);
+            const tar = await createTarGzip(
+                processedFiles.map((f) => ({
+                    name: f.path,
+                    data: f.buffer
+                }))
+            );
+            const blob = new Blob([tar], { type: 'application/gzip' });
+            const file = new File([blob], 'deployment.tar.gz', {
+                type: 'application/gzip'
+            });
+            uploadFile = file;
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e
+            });
+        }
+    }
+    console.log(uploadFile);
+    const tock = performance.now();
+    console.log('Time taken to process files:', tock - tick);
+
+    return uploadFile;
+}
+
+export function removeFile(file: File, files: FileList) {
+    const filteredFiles = Array.from(files).filter((f) => f.name !== file.name);
+    const dataTransfer = new DataTransfer();
+
+    filteredFiles.forEach((file) => {
+        dataTransfer.items.add(file);
+    });
+
+    return dataTransfer.files;
+}
+
+export const defaultIgnore = `
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+`;
diff --git a/src/lib/helpers/flag.ts b/src/lib/helpers/flag.ts
new file mode 100644
index 000000000..0fb3254a6
--- /dev/null
+++ b/src/lib/helpers/flag.ts
@@ -0,0 +1,8 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { Flag } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+
+export function getFlagUrl(countryCode: string) {
+    if (!isValueOfStringEnum(Flag, countryCode)) return '';
+    return sdk.forConsole.avatars.getFlag(countryCode, 22, 15, 100)?.toString();
+}
diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
index 82176ad34..3dd28f126 100644
--- a/src/lib/helpers/load.ts
+++ b/src/lib/helpers/load.ts
@@ -9,15 +9,8 @@ export function getPage(url: URL): number {
     return Number(url.searchParams.get('page'));
 }
 
-export function getLimit(
-    projectId: string,
-    url: URL,
-    route: Page['route'],
-    fallback: number
-): number {
-    return Number(
-        url.searchParams.get('limit') ?? preferences.get(projectId, route).limit ?? fallback
-    );
+export function getLimit(url: URL, route: Page['route'], fallback: number): number {
+    return Number(url.searchParams.get('limit') ?? preferences.get(route).limit ?? fallback);
 }
 
 export enum View {
@@ -25,14 +18,18 @@ export enum View {
     Grid = 'grid'
 }
 
-export function getView(projectId: string, url: URL, route: Page['route'], fallback: View): View {
-    return (url.searchParams.get('view') ?? preferences.get(projectId, route).view) === View.Grid
+export function getView(url: URL, route: Page['route'], fallback: View, overwrite?: View): View {
+    const view = url.searchParams.get('view') ?? preferences.get(route).view;
+
+    return view === View.Grid
         ? View.Grid
-        : (View.Table ?? fallback);
+        : view === View.Table
+          ? View.Table
+          : (overwrite ?? View.Table ?? fallback);
 }
 
-export function getColumns(projectId: string, route: Page['route'], fallback: string[]): string[] {
-    return preferences.get(projectId, route).columns ?? fallback;
+export function getColumns(route: Page['route'], fallback: string[]): string[] {
+    return preferences.get(route).columns ?? fallback;
 }
 
 export function getSearch(url: URL): string | undefined {
diff --git a/src/lib/helpers/logout.ts b/src/lib/helpers/logout.ts
index 8549ef383..0e5e9507f 100644
--- a/src/lib/helpers/logout.ts
+++ b/src/lib/helpers/logout.ts
@@ -5,10 +5,10 @@ import { Submit, trackEvent } from '$lib/actions/analytics';
 import { base } from '$app/paths';
 import { uploader } from '$lib/stores/uploader';
 
-export async function logout() {
+export async function logout(redirect: boolean = true) {
     await sdk.forConsole.account.deleteSession('current');
     await invalidate(Dependencies.ACCOUNT);
     uploader.reset();
     trackEvent(Submit.AccountLogout);
-    await goto(`${base}/login`);
+    if (redirect) await goto(`${base}/login`);
 }
diff --git a/src/lib/helpers/notifications.ts b/src/lib/helpers/notifications.ts
index 706f67ecd..65b40d932 100644
--- a/src/lib/helpers/notifications.ts
+++ b/src/lib/helpers/notifications.ts
@@ -19,7 +19,7 @@ const userPreferences = () => get(user)?.prefs;
 const notificationPrefs = (): Record<string, NotificationPrefItem> => {
     const prefs = userPreferences();
 
-    // due to php backend, empty object can be returnd as an empty array
+    // due to php backend, empty object can be returned as an empty array.
     if (!prefs?.notificationPrefs || Array.isArray(prefs.notificationPrefs)) {
         return {};
     }
diff --git a/tests/unit/helpers/numbers.test.ts b/src/lib/helpers/numbers.test.ts
similarity index 100%
rename from tests/unit/helpers/numbers.test.ts
rename to src/lib/helpers/numbers.test.ts
diff --git a/tests/unit/helpers/object.test.ts b/src/lib/helpers/object.test.ts
similarity index 100%
rename from tests/unit/helpers/object.test.ts
rename to src/lib/helpers/object.test.ts
diff --git a/src/lib/helpers/onboarding.ts b/src/lib/helpers/onboarding.ts
new file mode 100644
index 000000000..c7f41c59a
--- /dev/null
+++ b/src/lib/helpers/onboarding.ts
@@ -0,0 +1,33 @@
+import { get } from 'svelte/store';
+import { user } from '$lib/stores/user';
+import { sdk } from '$lib/stores/sdk';
+
+const userPreferences = () => get(user)?.prefs;
+
+export function hasOnboardingDismissed(projectId: string) {
+    const currentPrefs = userPreferences();
+    const onboardingDismissed = currentPrefs?.onboardingDismissed;
+    return (
+        onboardingDismissed &&
+        Array.isArray(onboardingDismissed) &&
+        onboardingDismissed.includes(projectId)
+    );
+}
+
+export async function setHasOnboardingDismissed(projectId: string) {
+    const currentPrefs = userPreferences();
+    const onboardingDismissed = Array.isArray(currentPrefs?.onboardingDismissed)
+        ? currentPrefs.onboardingDismissed
+        : [];
+
+    if (!onboardingDismissed.includes(projectId)) {
+        onboardingDismissed.push(projectId);
+    }
+
+    const newPrefs = {
+        ...currentPrefs,
+        onboardingDismissed: onboardingDismissed
+    };
+
+    await sdk.forConsole.account.updatePrefs(newPrefs);
+}
diff --git a/src/lib/helpers/platform.ts b/src/lib/helpers/platform.ts
index 98920c7c6..33662adb7 100644
--- a/src/lib/helpers/platform.ts
+++ b/src/lib/helpers/platform.ts
@@ -1,3 +1,30 @@
 export function isMac(): boolean {
     return window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }
+
+export const getPlatformInfo = (platform: string) => {
+    let name: string, icon: string;
+    if (platform.includes('flutter')) {
+        name = 'Flutter';
+        icon = 'flutter';
+    } else if (platform.includes('react-native')) {
+        name = 'React Native';
+        icon = 'react-native';
+    } else if (platform.includes('apple')) {
+        name = 'Apple';
+        icon = 'apple';
+    } else if (platform.includes('android')) {
+        name = 'Android';
+        icon = 'android';
+    } else if (platform.includes('unity')) {
+        name = 'Unity';
+        icon = 'unity';
+    } else if (platform.includes('web')) {
+        name = 'Web';
+        icon = 'code';
+    } else {
+        name = 'Unknown';
+        icon = 'unknown';
+    }
+    return { name, icon };
+};
diff --git a/src/lib/helpers/project.ts b/src/lib/helpers/project.ts
index 5d9c8890f..58cfe7bcc 100644
--- a/src/lib/helpers/project.ts
+++ b/src/lib/helpers/project.ts
@@ -1,4 +1,4 @@
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { get } from 'svelte/store';
 import { sdk } from '$lib/stores/sdk';
 import { projectRegion } from '$routes/(console)/project-[region]-[project]/store';
@@ -6,7 +6,7 @@ import { projectRegion } from '$routes/(console)/project-[region]-[project]/stor
 /**
  * Returns the current project ID.
  *
- * The function first checks for a `project` parameter in the Svelte `$page` store.
+ * The function first checks for a `project` parameter in the Svelte `page` store.
  * If not found, it extracts the project ID from the pathname.
  *
  * Supports:
@@ -20,7 +20,7 @@ import { projectRegion } from '$routes/(console)/project-[region]-[project]/stor
  */
 export function getProjectId(): string | null {
     // safety check!
-    const projectFromParams = get(page)?.params?.project;
+    const projectFromParams = page?.params?.project;
     if (projectFromParams) {
         return projectFromParams;
     }
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
new file mode 100644
index 000000000..b563f5b33
--- /dev/null
+++ b/src/lib/helpers/sidebar.ts
@@ -0,0 +1,29 @@
+import { get } from 'svelte/store';
+import { user } from '$lib/stores/user';
+import { sdk } from '$lib/stores/sdk';
+
+const userPreferences = () => get(user)?.prefs;
+
+export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
+    if (state === 'open' || state === 'icons') {
+        const currentPrefs = userPreferences();
+
+        const newPrefs = {
+            ...currentPrefs,
+            sidebarState: state
+        };
+
+        sdk.forConsole.account.updatePrefs(newPrefs);
+    }
+}
+
+export function getSidebarState(): 'open' | 'icons' {
+    const currentPrefs = userPreferences();
+    if (currentPrefs && currentPrefs.sidebarState) {
+        if (currentPrefs.sidebarState === 'open' || currentPrefs.sidebarState === 'icons') {
+            return currentPrefs.sidebarState;
+        }
+    }
+
+    return 'open';
+}
diff --git a/tests/unit/helpers/string.test.ts b/src/lib/helpers/string.test.ts
similarity index 100%
rename from tests/unit/helpers/string.test.ts
rename to src/lib/helpers/string.test.ts
diff --git a/tests/unit/helpers/timeConversion.test.ts b/src/lib/helpers/timeConversion.test.ts
similarity index 100%
rename from tests/unit/helpers/timeConversion.test.ts
rename to src/lib/helpers/timeConversion.test.ts
diff --git a/src/lib/helpers/timeConversion.ts b/src/lib/helpers/timeConversion.ts
index 0ae6387ed..7cf8de166 100644
--- a/src/lib/helpers/timeConversion.ts
+++ b/src/lib/helpers/timeConversion.ts
@@ -94,3 +94,55 @@ export function secsToUnit(time: number, unit: Unit) {
             return time;
     }
 }
+
+/**
+ * Formats time in seconds to a detailed string showing days, hours, minutes, and seconds
+ * @param time Time in seconds
+ * @returns Formatted string like "3d 4h 30m 23s"
+ */
+export function formatTimeDetailed(time: number): string {
+    if (typeof time !== 'number' || time === undefined || time === null) {
+        return '-';
+    }
+    if (time <= 0) {
+        return '0s';
+    }
+    const seconds = Math.floor(time % 60);
+    const minutes = Math.floor((time / 60) % 60);
+    const hours = Math.floor((time / (60 * 60)) % 24);
+    const days = Math.floor(time / (60 * 60 * 24));
+
+    const parts: string[] = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    if (seconds > 0 || parts.length === 0) parts.push(`${seconds}s`);
+
+    return parts.join(' ');
+}
+
+/**
+ * Calculates the time difference between a starting date/time and the current time.
+ * Returns the difference formatted in seconds, minutes, or hours depending on the magnitude.
+ *
+ * @export
+ * @param {Date | number | string} startTime - The starting date/time, timestamp in milliseconds, or ISO date string (e.g., '2025-03-20T15:50:43.495+00:00')
+ * @returns {string} The formatted time difference
+ */
+export function timer(startTime: Date | number | string): string {
+    let start: number;
+
+    if (startTime instanceof Date) {
+        start = startTime.getTime();
+    } else if (typeof startTime === 'number') {
+        start = startTime;
+    } else {
+        // Handle ISO date string format
+        start = new Date(startTime).getTime();
+    }
+
+    const now = new Date().getTime();
+    const diffInSeconds = (now - start) / 1000;
+
+    return calculateTime(diffInSeconds);
+}
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 55b47a500..543fa39ba 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -1,5 +1,19 @@
 import type { Writable } from 'svelte/store';
 
+export type PinkColumn = {
+    id: string;
+    width?:
+        | {
+              min: number;
+              max: number;
+          }
+        | {
+              min: number;
+          }
+        | number;
+    hide?: boolean;
+};
+
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
 
 export function isHTMLElement(el: unknown): el is HTMLElement {
@@ -10,7 +24,6 @@ export function isHTMLInputElement(el: unknown): el is HTMLInputElement {
     return el instanceof HTMLInputElement;
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export type Prettify<T> = T & {};
 
 const columnTypes = [
@@ -23,21 +36,13 @@ const columnTypes = [
     'enum'
 ] as const;
 export type ColumnType = (typeof columnTypes)[number];
-export type Column = {
-    id: string;
+export type Column = PinkColumn & {
     title: string;
     type: ColumnType;
-    /**
-     * Set to false to hide by default
-     */
-    show: boolean;
-    width?: number;
-    /**
-     * Set to false to disable filtering for this column
-     */
     filter?: boolean;
     array?: boolean;
     format?: string;
+    exclude?: boolean;
     elements?: string[] | { value: string | number; label: string }[];
 };
 
@@ -47,3 +52,16 @@ export function isValueOfStringEnum<T extends Record<string, string>>(
 ): value is T[keyof T] {
     return Object.values<string>(enumType).includes(value);
 }
+
+export type TableRootProp = {
+    allowSelection: boolean;
+    selectedRows: string[];
+    selectedAll: boolean;
+    selectedNone: boolean;
+    selectedSome: boolean;
+    columns: Record<PinkColumn['id'], PinkColumn>;
+    toggle: (id: string) => void;
+    toggleAll: () => void;
+    addAvailableId: (id: string) => void;
+    removeAvailableId: (id: string) => void;
+};
diff --git a/tests/unit/helpers/unit.test.ts b/src/lib/helpers/unit.test.ts
similarity index 100%
rename from tests/unit/helpers/unit.test.ts
rename to src/lib/helpers/unit.test.ts
diff --git a/tests/unit/helpers/withPrevious.test.ts b/src/lib/helpers/withPrevious.test.ts
similarity index 100%
rename from tests/unit/helpers/withPrevious.test.ts
rename to src/lib/helpers/withPrevious.test.ts
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index e1d691863..f78f3bbe1 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -1,110 +1,88 @@
 <script lang="ts">
-    import {
-        AvatarInitials,
-        EmptySearch,
-        Heading,
-        PaginationWithLimit,
-        Trim
-    } from '$lib/components';
-    import {
-        TableBody,
-        TableHeader,
-        TableRow,
-        TableCellHead,
-        TableCell,
-        TableCellText,
-        TableScroll
-    } from '$lib/elements/table';
-    import { Container, ContainerHeader } from '$lib/layout';
-    import { hoursToDays, toLocaleDateTime } from '$lib/helpers/date';
+    import { AvatarInitials, PaginationWithLimit, Trim } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
-    import { tierToPlan, type PlanServices } from '$lib/stores/billing';
-    import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import { Button } from '$lib/elements/forms';
-    import { BillingPlan } from '$lib/constants';
+    import { Layout, Table, Card, Empty } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import type { PinkColumn } from '$lib/helpers/types';
 
     export let logs: Models.LogList;
     export let offset = 0;
     export let limit = 0;
 
-    export let service: PlanServices = null;
+    const columns: PinkColumn[] = [
+        { id: 'user' },
+        { id: 'event' },
+        { id: 'location' },
+        { id: 'ip' },
+        { id: 'date' }
+    ];
 </script>
 
 <Container>
-    {#if service}
-        <ContainerHeader title="Activity" />
-    {:else}
-        <Heading tag="h2" size="5">Activity</Heading>
-    {/if}
     {#if logs.total}
-        <TableScroll>
-            <TableHeader>
-                <TableCellHead width={100}>User</TableCellHead>
-                <TableCellHead width={100}>Event</TableCellHead>
-                <TableCellHead width={80}>Location</TableCellHead>
-                <TableCellHead width={90}>IP</TableCellHead>
-                <TableCellHead width={140}>Date</TableCellHead>
-            </TableHeader>
-            <TableBody service="logs" total={isCloud ? Infinity : 0}>
-                <svelte:fragment slot="limit" let:limit let:upgradeMethod>
-                    <p class="text">
-                        Logs are retained in rolling {hoursToDays(limit)} intervals with the
-                        {tierToPlan($organization.billingPlan).name}
-                        plan.
-                        {#if $organization?.billingPlan === BillingPlan.FREE}
-                            <Button link on:click={upgradeMethod}>Upgrade</Button> to increase your log
-                            retention for a longer period.
-                        {/if}
-                    </p>
-                </svelte:fragment>
-                {#each logs.logs as log}
-                    <TableRow>
-                        <TableCell title="Client">
-                            <div class="u-flex u-cross-center u-gap-12">
-                                {#if log.userEmail}
-                                    {#if log.userName}
-                                        <AvatarInitials size={32} name={log.userName} />
-                                        <Trim>{log.userName}</Trim>
-                                    {:else}
-                                        <AvatarInitials size={32} name={log.userEmail} />
-                                        <Trim>{log.userEmail}</Trim>
-                                    {/if}
+        <Table.Root {columns} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
+                <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
+                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
+            </svelte:fragment>
+            {#each logs.logs as log}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="user" {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if log.userEmail}
+                                {#if log.userName}
+                                    <AvatarInitials size="xs" name={log.userName} />
+                                    <Trim>{log.userName}</Trim>
                                 {:else}
-                                    <div class="avatar is-size-small">
-                                        <span class="icon-anonymous" aria-hidden="true" />
-                                    </div>
-                                    <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
+                                    <AvatarInitials size="xs" name={log.userEmail} />
+                                    <Trim>{log.userEmail}</Trim>
                                 {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText title="Event">{log.event}</TableCellText>
-
-                        <TableCellText title="Location">
-                            {#if log.countryCode !== '--'}
-                                {log.countryName}
                             {:else}
-                                Unknown
+                                <div class="avatar is-size-small">
+                                    <span class="icon-anonymous" aria-hidden="true"></span>
+                                </div>
+                                <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
                             {/if}
-                        </TableCellText>
-                        <TableCellText title="IP">{log.ip}</TableCellText>
-                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </TableScroll>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="event" {root}>
+                        {log.event}
+                    </Table.Cell>
+                    <Table.Cell column="location" {root}>
+                        {#if log.countryCode !== '--'}
+                            {log.countryName}
+                        {:else}
+                            Unknown
+                        {/if}
+                    </Table.Cell>
+                    <Table.Cell column="ip" {root}>
+                        {log.ip}
+                    </Table.Cell>
+                    <Table.Cell column="date" {root}>
+                        {toLocaleDateTime(log.time)}
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit name="Logs" {limit} {offset} total={logs.total} />
     {:else}
-        <EmptySearch>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <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>
-        </EmptySearch>
+        <Card.Base padding="none">
+            <Empty
+                title="No activities available"
+                description="Need a hand? Learn more in our documentation."
+                type="secondary">
+                <svelte:fragment slot="actions">
+                    <Button external secondary href="https://appwrite.io/docs">
+                        Documentation
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
     {/if}
 </Container>
diff --git a/src/lib/layout/breadcrumbs.svelte b/src/lib/layout/breadcrumbs.svelte
index d700654e2..0c214b7e4 100644
--- a/src/lib/layout/breadcrumbs.svelte
+++ b/src/lib/layout/breadcrumbs.svelte
@@ -6,12 +6,12 @@
 </script>
 
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export let breadcrumbs: Breadcrumb[];
 
     function track() {
-        trackEvent('click_breadcrumb');
+        trackEvent(Click.BreadcrumbClick);
     }
 </script>
 
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 0e7c262e8..abe25a4a9 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Layout } from '@appwrite.io/pink-svelte';
     export let overlapCover = false;
     export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
 
@@ -7,10 +8,45 @@
         : '';
 </script>
 
-<div
-    class="container"
-    {style}
-    class:u-margin-block-start-24={!overlapCover}
-    class:u-margin-block-start-negative-56={overlapCover}>
-    <slot />
+<div style:container-type="inline-size" class:overlap-cover={overlapCover}>
+    <div class="console-container" {style}>
+        <Layout.Stack gap="l">
+            <slot />
+        </Layout.Stack>
+    </div>
 </div>
+
+<style>
+    .overlap-cover {
+        margin-block-start: -3.5rem;
+    }
+    :global(.console-container) {
+        margin-block: var(--base-32);
+
+        @media (min-width: 360px) {
+            margin-inline: 1rem;
+        }
+        @media (min-width: 1024px) {
+            margin-inline: auto;
+            max-width: calc(944px - 11rem);
+        }
+        @media (min-width: 1280px) {
+            margin-inline: auto;
+            max-width: 1000px;
+        }
+        @media (min-width: 1440px) {
+            margin-inline: auto;
+            max-width: 1144px;
+        }
+        @media (min-width: 1728px) {
+            margin-inline: auto;
+            max-width: 1200px;
+        }
+    }
+
+    :global(main:has(.sub-navigation) .console-container) {
+        @media (min-width: 1024px) {
+            padding-inline-end: var(--base-32, 32px);
+        }
+    }
+</style>
diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte
index e0b0512d3..53cfc35bf 100644
--- a/src/lib/layout/containerButton.svelte
+++ b/src/lib/layout/containerButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { tierToPlan } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let title: string;
     export let tooltipContent =
@@ -14,29 +14,29 @@
               } plan`;
     export let disabled: boolean;
     export let buttonText: string;
-    export let buttonMethod: () => void | Promise<void>;
+    export let buttonMethod: () => void | Promise<void> = () => {};
     export let buttonHref: string = null;
     export let buttonEvent: string = buttonText?.toLocaleLowerCase();
+    export let buttonEventData: Record<string, unknown> = {};
     export let icon = 'plus';
     export let showIcon = true;
     export let buttonType: 'primary' | 'secondary' | 'text' = 'primary';
 </script>
 
-<div
-    use:tooltip={{
-        content: tooltipContent,
-        disabled: !disabled
-    }}>
+<Tooltip disabled={!disabled}>
     <Button
+        size="s"
         text={buttonType === 'text'}
         secondary={buttonType === 'secondary'}
         on:click={buttonMethod}
         event={buttonEvent}
+        eventData={buttonEventData}
         {disabled}
         href={buttonHref}>
         {#if showIcon}
-            <span class={`icon-${icon}`} aria-hidden="true" />
+            <span class={`icon-${icon}`} aria-hidden="true"></span>
         {/if}
         <span class="text">{buttonText}</span>
     </Button>
-</div>
+    <div slot="tooltip">{tooltipContent}</div>
+</Tooltip>
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 527dca1cf..83654a708 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-    import { Alert, DropList, Heading } from '$lib/components';
+    import { Alert, DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
+    import { Link, Pill } from '$lib/elements';
     import {
         checkForProjectLimitation,
         checkForUsageFees,
@@ -17,25 +16,20 @@
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
     import { createEventDispatcher, onMount } from 'svelte';
     import { ContainerButton } from '.';
-    import { trackEvent } from '$lib/actions/analytics';
     import { goto } from '$app/navigation';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
-    export let isFlex = true;
     export let title: string;
-    export let titleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';
-    export let titleSize: '1' | '2' | '3' | '4' | '5' | '6' | '7' = '5';
     export let serviceId = title.toLocaleLowerCase() as PlanServices;
     export let total: number = null;
     export let alertType: 'info' | 'success' | 'warning' | 'error' | 'default' = 'warning';
     export let showAlert = true;
-    export let level: 'organization' | 'project' = 'project';
-    export let customPillText: string | undefined = undefined;
-    export let showPillMessage: boolean = true;
 
     export let buttonText: string = null;
     export let buttonMethod: () => void = null;
     export let buttonHref: string = null;
     export let buttonEvent: string = buttonText?.toLocaleLowerCase();
+    export let buttonEventData: Record<string, unknown> = {};
     export let buttonDisabled = false;
 
     let showDropdown = false;
@@ -104,22 +98,19 @@
                 <Alert type="info" isStandalone>
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan.
-                        <Button link on:click={() => ($showUsageRatesModal = true)}
-                            >Excess usage fees will apply</Button
+                        <Link on:mousedown={() => ($showUsageRatesModal = true)}
+                            >Excess usage fees will apply</Link
                         >.
                     </span>
                 </Alert>
             {:else}
                 <Alert type={alertType} isStandalone>
                     <span class="text">
-                        You've reached the {services} limit for the {tier} plan. <Button
-                            link
+                        You've reached the {services} limit for the {tier} plan. <Link
                             href={$upgradeURL}
-                            on:click={() =>
-                                trackEvent('click_organization_upgrade', {
-                                    from: 'button',
-                                    source: 'inline_alert'
-                                })}>Upgrade</Button> your organization for additional resources.
+                            event="organization_upgrade"
+                            eventData={{ from: 'event', source: 'inline_alert' }}>Upgrade</Link> your
+                        organization for additional resources.
                     </span>
                 </Alert>
             {/if}
@@ -127,40 +118,31 @@
     {/if}
 {/if}
 
-<header class:u-flex={isFlex} class="u-gap-12 common-section u-main-space-between u-flex-wrap">
-    <div class="u-flex u-cross-child-center u-cross-center u-gap-16 u-flex-wrap">
-        <Heading tag={titleTag} size={titleSize}>{title}</Heading>
-        {#if isCloud && isLimited && showPillMessage}
+<Layout.Stack direction="row" alignContent="center">
+    <Layout.Stack direction="row">
+        <Typography.Title size="m">{title}</Typography.Title>
+        {#if isCloud && isLimited}
             <DropList bind:show={showDropdown} width="16">
                 {#if hasProjectLimitation}
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                        <span class="icon-info" />
-                        {#if customPillText}
-                            {customPillText}
-                        {:else}
-                            {total}/{limit} created
-                        {/if}
+                        <span class="icon-info"></span>{total}/{limit} created
                     </Pill>
                 {:else if $organization?.billingPlan !== BillingPlan.SCALE}
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                        <span class="icon-info" />Limits applied
+                        <span class="icon-info"></span>Limits applied
                     </Pill>
                 {/if}
                 <svelte:fragment slot="list">
                     <slot name="tooltip" {limit} {tier} {title} {upgradeMethod} {hasUsageFees}>
                         {#if hasProjectLimitation}
-                            {@const count = limit > 1 ? serviceId : serviceId.replace('s', '')}
                             <p class="text">
                                 You are limited to {limit}
-                                {count} per {level} on the {tier} plan.
-                                {#if $organization?.billingPlan === BillingPlan.FREE}<Button
-                                        link
+                                {title.toLocaleLowerCase()} per project on the {tier} plan.
+                                {#if $organization?.billingPlan === BillingPlan.FREE}<Link
                                         href={$upgradeURL}
-                                        on:click={() =>
-                                            trackEvent('click_organization_upgrade', {
-                                                from: 'button',
-                                                source: 'resource_limit_tag'
-                                            })}>Upgrade</Button>
+                                        event="organization_upgrade"
+                                        eventData={{ from: 'button', source: 'resource_limit_tag' }}
+                                        >Upgrade</Link>
                                     for additional {title.toLocaleLowerCase()}.
                                 {/if}
                             </p>
@@ -168,8 +150,8 @@
                             <p class="text">
                                 You are limited to {limit}
                                 {title.toLocaleLowerCase()} per organization on the {tier} plan.
-                                <Button link on:click={() => ($showUsageRatesModal = true)}
-                                    >Excess usage fees will apply</Button
+                                <Link on:mousedown={() => ($showUsageRatesModal = true)}
+                                    >Excess usage fees will apply</Link
                                 >.
                             </p>
                         {:else}
@@ -177,7 +159,7 @@
                                 You are limited to {limit}
                                 {title.toLocaleLowerCase()} per organization on the {tier} plan.
                                 {#if $organization?.billingPlan === BillingPlan.FREE}
-                                    <Button link href={$upgradeURL}>Upgrade</Button>
+                                    <Link href={$upgradeURL}>Upgrade</Link>
                                     for additional {title.toLocaleLowerCase()}.
                                 {/if}
                             </p>
@@ -186,7 +168,7 @@
                 </svelte:fragment>
             </DropList>
         {/if}
-    </div>
+    </Layout.Stack>
 
     <slot {isButtonDisabled}>
         {#if buttonText}
@@ -195,8 +177,9 @@
                 disabled={isButtonDisabled}
                 {buttonText}
                 {buttonEvent}
+                {buttonEventData}
                 {buttonMethod}
                 {buttonHref} />
         {/if}
     </slot>
-</header>
+</Layout.Stack>
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 2d7970bce..fff0765ea 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -1,18 +1,59 @@
 <script lang="ts">
-    export let adjustContentToCover = false;
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
+    export let blocksize = '152px';
 
     $: 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" {style}>
-        <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20 u-flex-wrap">
+<div class="top-cover-console" style:block-size={blocksize}>
+    <div class="cover-container" {style}>
+        <Layout.Stack direction="row" alignItems="center">
             <slot name="header" />
-        </div>
+        </Layout.Stack>
         <slot />
     </div>
 </div>
+
+<style>
+    .top-cover-console {
+        container-type: inline-size;
+        padding-block-start: var(--base-32);
+        padding-block-end: var(--base-16);
+        border-bottom: 1px solid var(--border-neutral, #2d2d31);
+        background: var(--bgcolor-neutral-primary, #1d1d21);
+        margin-left: -190px;
+        padding-left: 190px;
+    }
+    .cover-container {
+        position: relative;
+        margin: 0 1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        block-size: 100%;
+
+        @media (min-width: 360px) {
+            margin-inline: 1rem;
+        }
+        @media (min-width: 1024px) {
+            margin-inline: auto;
+            max-width: calc(944px - 11rem);
+        }
+        @media (min-width: 1280px) {
+            margin-inline: auto;
+            max-width: 1000px;
+        }
+        @media (min-width: 1440px) {
+            margin-inline: auto;
+            max-width: 1144px;
+        }
+        @media (min-width: 1728px) {
+            margin-inline: auto;
+            max-width: 1200px;
+        }
+    }
+</style>
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
index 6b0b582fa..eb3a43fa1 100644
--- a/src/lib/layout/coverTitle.svelte
+++ b/src/lib/layout/coverTitle.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
+    import { Typography, Button, Icon } from '@appwrite.io/pink-svelte';
 
     export let href: string = null;
 </script>
 
-<Heading size="4" tag="h1" trimmed={false}>
-    <div class="u-flex u-cross-center">
-        {#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" data-private>
-            <slot />
-        </span>
-    </div>
-</Heading>
+{#if href}
+    <span style:position="absolute" style:left="-2.75rem">
+        <Button.Anchor size="s" icon variant="text" {href} aria-label="page back">
+            <Icon icon={IconChevronLeft} />
+        </Button.Anchor>
+    </span>
+{/if}
+<Typography.Title truncate color="--fgcolor-neutral-primary" size={$isSmallViewport ? 'm' : 'l'}>
+    <slot />
+</Typography.Title>
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
new file mode 100644
index 000000000..945a4e5c3
--- /dev/null
+++ b/src/lib/layout/createProject.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { Layout, Typography, Input, Tag, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { CustomId } from '$lib/components/index.js';
+    import { getFlagUrl } from '$lib/helpers/flag';
+    import { isCloud } from '$lib/system.js';
+    import type { Models } from '@appwrite.io/console';
+
+    export let projectName: string;
+    export let id: string;
+    export let regions: Array<Models.ConsoleRegion> = [];
+    export let region: string;
+    export let showTitle = true;
+
+    let showCustomId = false;
+
+    function getRegions() {
+        return regions
+            .filter((region) => region.$id !== 'default')
+            .sort((regionA, regionB) => {
+                if (regionA.disabled && !regionB.disabled) {
+                    return 1;
+                }
+                return regionA.name > regionB.name ? 1 : -1;
+            })
+            .map((region) => {
+                return {
+                    label: region.name,
+                    value: region.$id,
+                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
+                    disabled: region.disabled
+                };
+            });
+    }
+</script>
+
+<svelte:head>
+    {#each regions as region}
+        <link rel="preload" as="image" href={getFlagUrl(region.flag)} />
+    {/each}
+</svelte:head>
+<form on:submit|preventDefault>
+    <Layout.Stack direction="column" gap="xxl">
+        {#if showTitle}
+            <Typography.Title size="l">Create your project</Typography.Title>
+        {/if}
+        <Layout.Stack direction="column" gap="xxl">
+            <Layout.Stack direction="column" gap="xxl">
+                <Layout.Stack direction="column" gap="s">
+                    <Input.Text
+                        label="Name"
+                        placeholder="Project name"
+                        required
+                        bind:value={projectName} />
+                    {#if !showCustomId}
+                        <div>
+                            <Tag
+                                size="s"
+                                on:click={() => {
+                                    showCustomId = true;
+                                }}><Icon slot="start" icon={IconPencil} size="s" /> Project ID</Tag>
+                        </div>
+                    {/if}
+                    <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
+                </Layout.Stack>
+                {#if isCloud && regions.length > 0}
+                    <Layout.Stack gap="xs">
+                        <Input.Select
+                            bind:value={region}
+                            placeholder="Select a region"
+                            options={getRegions()}
+                            label="Region" />
+                        <Typography.Text>Region cannot be changed after creation</Typography.Text>
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
+        <slot name="submit"></slot>
+    </Layout.Stack>
+</form>
diff --git a/src/lib/layout/displaySettingsModal.svelte b/src/lib/layout/displaySettingsModal.svelte
new file mode 100644
index 000000000..7d6004deb
--- /dev/null
+++ b/src/lib/layout/displaySettingsModal.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Confirm, ViewToggle } from '$lib/components';
+    import ColumnSelector from '$lib/components/columnSelector.svelte';
+    import type { View } from '$lib/helpers/load';
+    import type { Column } from '$lib/helpers/types';
+    import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
+    import { Button, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import type { Writable } from 'svelte/store';
+
+    let {
+        show = $bindable(false),
+        hideView = false,
+        view = $bindable(),
+        columns,
+        hideColumns = false,
+        isCustomCollection = false
+    }: {
+        show?: boolean;
+        hideView?: boolean;
+        view?: View;
+        columns?: Writable<Column[]>;
+        hideColumns?: boolean;
+        isCustomCollection?: boolean;
+    } = $props();
+</script>
+
+<Confirm title="Adjustments" bind:open={show} canDelete={false}>
+    <Layout.Stack>
+        {#if !hideView}
+            <Layout.Stack gap="xs">
+                <Typography.Text>Layout</Typography.Text>
+                <ViewToggle bind:view />
+            </Layout.Stack>
+        {/if}
+        {#if !hideColumns && $columns?.length}
+            <Layout.Stack gap="xs">
+                <Typography.Text>Columns</Typography.Text>
+                <ColumnSelector {columns} {isCustomCollection}>
+                    {#snippet children(toggle, selectedColumnsNumber)}
+                        <Button.Button
+                            size="s"
+                            variant="secondary"
+                            badge={selectedColumnsNumber.toString()}
+                            on:click={toggle}>
+                            Columns
+                            <Icon slot="start" icon={IconViewBoards} />
+                        </Button.Button>
+                    {/snippet}
+                </ColumnSelector>
+            </Layout.Stack>
+        {/if}
+    </Layout.Stack>
+</Confirm>
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 17a7fe890..c6552477f 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -1,96 +1,175 @@
 <script>
     import { isCloud } from '$lib/system';
     import { version } from '$routes/(console)/store';
+    import { IconCloud, IconDiscord, IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Layout,
+        Typography,
+        Link,
+        Icon,
+        Divider,
+        Button,
+        Badge
+    } from '@appwrite.io/pink-svelte';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     const currentYear = new Date().getFullYear();
 </script>
 
-<footer class="main-footer u-cross-center">
-    <div class="main-footer-start">
-        <ul class="inline-links is-no-padding-first-and-last u-x-small u-flex-wrap u-gap-16">
-            <li class="inline-links-item" style="line-height: 1.02;">
-                <div class="u-flex u-cross-center u-gap-8">
-                    {#if isCloud}
-                        <span class="icon-cloud" />
-                    {/if}
+<footer>
+    <Divider />
+    <Layout.Stack direction={$isSmallViewport ? 'column-reverse' : 'row'}>
+        <Layout.Stack
+            direction="row"
+            alignItems="center"
+            gap={$isSmallViewport ? 'm' : 'l'}
+            inline={$isTabletViewport}
+            justifyContent="flex-start">
+            <Typography.Caption variant="400">
+                ⓒ {currentYear} Appwrite. All rights reserved.
+            </Typography.Caption>
+            <span class="divider-wrapper">
+                <Divider vertical />
+            </span>
+            <Layout.Stack direction="row" gap="xxs" inline>
+                <Button.Anchor
+                    icon
+                    size="xs"
+                    variant="ghost"
+                    href="https://github.com/appwrite/appwrite"
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label="Appwrite on Github">
+                    <Icon size="s" icon={IconGithub} />
+                </Button.Anchor>
+                <Button.Anchor
+                    icon
+                    size="xs"
+                    variant="ghost"
+                    href="https://appwrite.io/discord"
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label="Appwrite on Discord">
+                    <Icon size="s" icon={IconDiscord} />
+                </Button.Anchor>
+            </Layout.Stack>
+        </Layout.Stack>
+        {#if isCloud && $isSmallViewport}
+            <div class="extra-margin">
+                <Layout.Stack direction="row" justifyContent={'flex-start'} alignItems="center">
                     {#if $version}
-                        <a
-                            class="text"
+                        {#if isCloud}
+                            <Icon size="s" icon={IconCloud} />
+                        {/if}
+                        <Link.Anchor
+                            size="s"
+                            variant="quiet"
                             href="https://github.com/appwrite/appwrite/releases"
                             aria-label="Appwrite releases on Github"
                             target="_blank"
                             rel="noreferrer">
                             Version {$version}
-                        </a>
+                        </Link.Anchor>
+                        <span class="divider-wrapper">
+                            <Divider vertical />
+                        </span>
                     {/if}
-                </div>
-            </li>
-            <li class="inline-links-item">
-                <a href="https://appwrite.io/docs" target="_blank" rel="noreferrer">
-                    <span class="text">Docs</span>
-                </a>
-            </li>
-            <li class="inline-links-item">
-                <a href="https://appwrite.io/terms" target="_blank" rel="noreferrer">
-                    <span class="text">Terms</span>
-                </a>
-            </li>
-            <li class="inline-links-item">
-                <a href="https://appwrite.io/privacy" target="_blank" rel="noreferrer">
-                    <span class="text">Privacy</span>
-                </a>
-            </li>
+                    <Badge size="xs" variant="secondary" content="BETA" />
+                </Layout.Stack>
+            </div>
+        {/if}
+        <Layout.Stack
+            direction="row"
+            justifyContent={$isSmallViewport ? 'flex-start' : 'flex-end'}
+            alignItems="center">
             {#if isCloud}
-                <li class="inline-links-item">
-                    <a href="https://appwrite.io/cookies" target="_blank" rel="noreferrer">
-                        <span class="text">Cookies</span>
-                    </a>
-                </li>
+                {#if !$isSmallViewport}<Badge size="xs" variant="secondary" content="BETA" /><Icon
+                        size="s"
+                        icon={IconCloud} />
+                    {#if $version}
+                        <Link.Anchor
+                            size="s"
+                            variant="quiet"
+                            href="https://github.com/appwrite/appwrite/releases"
+                            aria-label="Appwrite releases on Github"
+                            target="_blank"
+                            rel="noreferrer">
+                            Version {$version}
+                        </Link.Anchor>
+                        <span class="divider-wrapper">
+                            <Divider vertical />
+                        </span>
+                    {/if}
+                {/if}
             {/if}
-        </ul>
-    </div>
-    <div class="main-footer-end">
-        <ul class="inline-links is-no-padding-first-and-last u-x-small">
-            <li class="inline-links-item">
-                <span class="text">ⓒ {currentYear} Appwrite. All rights reserved.</span>
-            </li>
-            <li class="inline-links-item u-flex u-gap-8">
-                <a
-                    href="https://github.com/appwrite/appwrite"
+
+            <Link.Anchor
+                size="s"
+                variant="quiet"
+                href="https://appwrite.io/docs"
+                target="_blank"
+                rel="noreferrer">
+                Docs
+            </Link.Anchor>
+            <span class="divider-wrapper">
+                <Divider vertical />
+            </span>
+            <Link.Anchor
+                size="s"
+                variant="quiet"
+                href="https://appwrite.io/terms"
+                target="_blank"
+                rel="noreferrer">
+                Terms
+            </Link.Anchor>
+            <span class="divider-wrapper">
+                <Divider vertical />
+            </span>
+            <Link.Anchor
+                size="s"
+                variant="quiet"
+                href="https://appwrite.io/privacy"
+                target="_blank"
+                rel="noreferrer">
+                Privacy
+            </Link.Anchor>
+            {#if isCloud}
+                <span class="divider-wrapper">
+                    <Divider vertical />
+                </span>
+                <Link.Anchor
+                    size="s"
+                    variant="quiet"
+                    href="https://appwrite.io/cookies"
                     target="_blank"
-                    rel="noreferrer"
-                    aria-label="Appwrite on Github">
-                    <span class="icon-github" aria-hidden="true" />
-                </a>
-                <a
-                    href="https://appwrite.io/discord"
-                    target="_blank"
-                    rel="noreferrer"
-                    aria-label="Appwrite on Discord">
-                    <span class="icon-discord" aria-hidden="true" />
-                </a>
-            </li>
-        </ul>
-    </div>
+                    rel="noreferrer">
+                    Cookies
+                </Link.Anchor>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
 </footer>
 
 <style lang="scss">
-    .main-footer {
+    .divider-wrapper {
+        height: 18px;
+    }
+    footer {
         margin-block-start: auto;
+        padding-block: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-l);
+        margin-inline: 2rem;
     }
 
-    .main-footer-start .inline-links-item {
-        padding-inline-end: 1rem;
-        padding-inline-start: unset;
-    }
-
-    [class^='icon-']:not(.icon-cloud):not(:hover) {
-        color: hsl(var(--color-neutral-50));
-    }
-
-    @media (max-width: 1200px) {
-        .main-footer {
-            gap: 2rem;
+    :global(main:has(.sub-navigation)) footer {
+        @media (min-width: 1024px) {
+            margin-inline-start: -1.5rem;
+            margin-inline-end: 2rem;
         }
     }
+    .extra-margin {
+        margin-block-start: var(--space-2, 4px);
+    }
 </style>
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index 27b478ac8..9b66018bb 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Heading, ViewSelector } from '$lib/components';
+    import { ViewSelector } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import type { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
@@ -14,7 +15,7 @@
 </script>
 
 <header class="grid-header">
-    <Heading tag="h2" size="5">{title}</Heading>
+    <Typography.Title size="m">{title}</Typography.Title>
     <div class="u-flex u-gap-16 u-contents-mobile">
         <ViewSelector
             {view}
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
deleted file mode 100644
index 88524bd31..000000000
--- a/src/lib/layout/header.svelte
+++ /dev/null
@@ -1,276 +0,0 @@
-<script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { AvatarInitials, DropList, DropListItem, DropListLink, Support } from '$lib/components';
-    import { app } from '$lib/stores/app';
-    import { user } from '$lib/stores/user';
-    import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
-    import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import { isMac } from '$lib/helpers/platform';
-    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
-    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
-    import DarkMode from '$lib/images/mode/dark-mode.svg';
-    import LightMode from '$lib/images/mode/light-mode.svg';
-    import SystemMode from '$lib/images/mode/system-mode.svg';
-    import { feedback } from '$lib/stores/feedback';
-    import { slide } from 'svelte/transition';
-    import { isCloud } from '$lib/system';
-    import { Feedback } from '$lib/components/feedback';
-    import { BillingPlan } from '$lib/constants';
-    import { logout } from '$lib/helpers/logout';
-    import { upgradeURL } from '$lib/stores/billing';
-
-    let showDropdown = false;
-    let showSupport = false;
-    let droplistElement: HTMLDivElement;
-
-    function toggleFeedback() {
-        feedback.toggleFeedback();
-        if ($feedback.notification) {
-            feedback.toggleNotification();
-            feedback.addVisualization();
-        }
-    }
-
-    function onBlur(event: MouseEvent) {
-        if (
-            showDropdown &&
-            !(event.target === droplistElement || droplistElement.contains(event.target as Node))
-        ) {
-            showDropdown = false;
-        }
-    }
-
-    function createOrg() {
-        showDropdown = false;
-        if (isCloud) {
-            goto(`${base}/create-organization`);
-        } else newOrgModal.set(true);
-    }
-
-    $: if (showDropdown) {
-        trackEvent('click_menu_dropdown');
-    }
-
-    const slideFade: typeof slide = (node, options) => {
-        const slideTrans = slide(node, options);
-        return {
-            ...slideTrans,
-            css: (t, u) => `
-            ${slideTrans.css(t, u)};
-            opacity: ${t};
-			`
-        };
-    };
-</script>
-
-<svelte:window on:click={onBlur} />
-
-<div class="logo u-inline-flex u-gap-16 u-cross-center">
-    <a href={$organization ? `${base}/organization-${$organization.$id}` : base}>
-        <img
-            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
-            width="120"
-            height="22"
-            alt="Appwrite" />
-    </a>
-    {#if isCloud}
-        <div
-            class="tag eyebrow-heading-3 u-padding-block-4"
-            style="--p-tag-height: 1.785rem; --p-tag-content-height: 1.2rem;">
-            <span class="text u-x-small" style="font-weight: 500">Beta</span>
-        </div>
-    {/if}
-</div>
-
-{#if $page.data.breadcrumbs}
-    <svelte:component this={$page.data.breadcrumbs} />
-{/if}
-
-<div class="main-header-end">
-    <nav class="u-flex is-only-desktop u-cross-center">
-        {#if isCloud && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.startsWith('/console/account')}
-            <Button
-                disabled={$organization?.markedForDeletion}
-                href={$upgradeURL}
-                on:click={() => {
-                    trackEvent('click_organization_upgrade', {
-                        from: 'button',
-                        source: 'top_nav'
-                    });
-                }}>
-                Upgrade
-            </Button>
-        {/if}
-
-        {#if $feedback.notification}
-            <div class="u-flex u-cross-center">
-                <div class="pulse-notification" />
-            </div>
-        {/if}
-        <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
-            <button class="button is-small is-text" on:click={toggleFeedback}>
-                {#if $feedback.notification}
-                    <span
-                        class="notification u-position-absolute u-inset-block-start-8 u-inset-inline-end-8"
-                    ></span>
-                {/if}
-                <span class="text">Feedback</span>
-            </button>
-            <svelte:fragment slot="other">
-                <Feedback />
-            </svelte:fragment>
-        </DropList>
-        <DropList
-            class="support-drop-section"
-            bind:show={showSupport}
-            scrollable={true}
-            noArrow
-            placement="bottom-end">
-            <Button text on:click={() => (showSupport = !showSupport)}>
-                <span class="text">Support</span>
-            </Button>
-            <svelte:fragment slot="other">
-                <Support bind:show={showSupport} />
-            </svelte:fragment>
-        </DropList>
-        <Button
-            actions={[
-                (node) => {
-                    return tooltip(node, {
-                        content: isMac() ? '⌘ + K' : 'Ctrl + K',
-                        placement: 'bottom'
-                    });
-                }
-            ]}
-            text
-            class="is-small"
-            ariaLabel="Toggle Command Center"
-            on:click={toggleCommandCenter}>
-            <i class="icon-search" />
-        </Button>
-    </nav>
-    <nav class="u-flex u-height-100-percent 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)}>
-                    <AvatarInitials size={40} name={$user.name || $user.email} />
-                    <span class="user-profile-info is-only-desktop">
-                        <span class="name" data-private>{$user.name || $user.email}</span>
-                        {#if $organization}
-                            <span class="title" data-private>{$organization.name}</span>
-                        {/if}
-                    </span>
-                    <span
-                        class="is-only-desktop"
-                        aria-hidden="true"
-                        class:icon-cheveron-up={showDropdown}
-                        class:icon-cheveron-down={!showDropdown} />
-                </button>
-                {#if showDropdown}
-                    <div
-                        class="drop is-no-arrow is-block-end is-inline-end"
-                        transition:slideFade|global={{ duration: 150 }}>
-                        {#if $organizationList?.total}
-                            <section class="drop-section u-overflow-y-auto u-max-height-200">
-                                <ul
-                                    class="drop-list"
-                                    data-sveltekit-preload-data={$page.params.organization
-                                        ? false
-                                        : 'hover'}>
-                                    {#each $organizationList.teams as org}
-                                        <DropListLink
-                                            href={`${base}/organization-${org.$id}`}
-                                            on:click={() => {
-                                                showDropdown = false;
-                                            }}>{org.name}</DropListLink>
-                                    {/each}
-                                </ul>
-                            </section>
-                        {/if}
-                        <section class="drop-section">
-                            <ul class="drop-list">
-                                <DropListItem icon="plus" on:click={createOrg}>
-                                    New organization
-                                </DropListItem>
-                                <DropListLink
-                                    href={`${base}/account`}
-                                    on:click={() => (showDropdown = false)}>
-                                    Your account
-                                </DropListLink>
-                                <DropListItem
-                                    icon="logout-right"
-                                    on:click={() => {
-                                        showDropdown = false;
-                                        logout();
-                                    }}>
-                                    Sign out
-                                </DropListItem>
-                            </ul>
-                        </section>
-                        <section class="drop-section">
-                            <ul class="u-flex u-gap-12">
-                                <li class="u-stretch">
-                                    <label class="image-radio">
-                                        <img src={LightMode} alt="light mode" />
-                                        <input
-                                            type="radio"
-                                            class="is-small"
-                                            name="mode"
-                                            on:click={() =>
-                                                trackEvent('select_theme', {
-                                                    value: 'light'
-                                                })}
-                                            bind:group={$app.theme}
-                                            value="light" />
-                                    </label>
-                                </li>
-                                <li class="u-stretch">
-                                    <label class="image-radio">
-                                        <img src={DarkMode} alt="dark mode" />
-                                        <input
-                                            type="radio"
-                                            class="is-small"
-                                            name="mode"
-                                            on:click={() =>
-                                                trackEvent('select_theme', {
-                                                    value: 'dark'
-                                                })}
-                                            bind:group={$app.theme}
-                                            value="dark" />
-                                    </label>
-                                </li>
-                                <li class="u-stretch">
-                                    <label class="image-radio">
-                                        <img src={SystemMode} alt="system mode" />
-                                        <input
-                                            type="radio"
-                                            class="is-small"
-                                            name="mode"
-                                            on:click={() =>
-                                                trackEvent('select_theme', {
-                                                    value: 'system'
-                                                })}
-                                            bind:group={$app.theme}
-                                            value="auto" />
-                                    </label>
-                                </li>
-                            </ul>
-                        </section>
-                    </div>
-                {/if}
-            </div>
-        {/if}
-    </nav>
-</div>
-
-<style>
-    :global(.support-drop-section) {
-        width: 28.375rem;
-        margin-block-start: 0.15rem;
-    }
-</style>
diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index 7ab5a58af..c6a783836 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -1,9 +1,44 @@
 <script lang="ts">
+    import { onDestroy, onMount } from 'svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+
     export let title: string;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
+
+    let container: HTMLElement | null = null;
+
+    function setNavigationHeight() {
+        const alertHeight = container ? container.getBoundingClientRect().height : 0;
+        const header: HTMLHeadingElement = document.querySelector('main > header');
+        const sidebar: HTMLElement = document.querySelector('main > div > nav');
+        const contentSection: HTMLElement = document.querySelector('main > div > section');
+
+        if (header) {
+            header.style.top = `${alertHeight}px`;
+        }
+        if (sidebar) {
+            sidebar.style.top = `${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px`;
+            sidebar.style.height = `calc(100vh - (${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px))`;
+        }
+        if (contentSection) {
+            contentSection.style.paddingBlockStart = `${alertHeight}px`;
+        }
+    }
+
+    onMount(() => {
+        setNavigationHeight();
+    });
+
+    onDestroy(() => {
+        container = null;
+        setNavigationHeight();
+    });
 </script>
 
+<svelte:window on:resize={setNavigationHeight} />
+
 <section
+    bind:this={container}
     class="alert is-action is-action-and-top-sticky u-sep-block-end"
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
@@ -15,7 +50,7 @@
             class:icon-check-circle={type === 'success'}
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
-            class:icon-info={type === 'info' || type === 'default'} />
+            class:icon-info={type === 'info' || type === 'default'}></span>
 
         <div class="alert-content">
             {#if title || $$slots.title}
@@ -39,7 +74,11 @@
 
 <style>
     .alert {
-        padding: 1rem 1rem 0.75rem 1rem;
+        padding: 1rem 1rem 0.75rem 1.5rem;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 100;
     }
 
     .alert-content {
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index fa8289f73..98acd4b51 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -2,13 +2,10 @@ 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';
-export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
-export { default as Logs } from './logs.svelte';
-export { default as Wizard } from './wizard.svelte';
+export { default as WizardWithSteps } from './wizardWithSteps.svelte';
 export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Unauthenticated } from './unauthenticated.svelte';
@@ -23,3 +20,5 @@ export { default as ContainerButton } from './containerButton.svelte';
 export { default as WizardSecondaryContainer } from './wizardSecondaryContainer.svelte';
 export { default as WizardSecondaryContent } from './wizardSecondaryContent.svelte';
 export { default as WizardSecondaryFooter } from './wizardSecondaryFooter.svelte';
+export { default as Wizard } from './wizard.svelte';
+export { default as ResponsiveContainerHeader } from './responsiveContainerHeader.svelte';
diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
deleted file mode 100644
index 074e8260a..000000000
--- a/src/lib/layout/logs.svelte
+++ /dev/null
@@ -1,469 +0,0 @@
-<script lang="ts">
-    import { hoursToDays, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
-    import { log } from '$lib/stores/logs';
-    import { Alert, Card, Code, Copy, Heading, Id, SvgIcon, Tab, Tabs } from '../components';
-    import { calculateTime } from '$lib/helpers/timeConversion';
-    import {
-        TableBody,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { beforeNavigate } from '$app/navigation';
-    import { Pill } from '$lib/elements';
-    import { isCloud } from '$lib/system';
-    import { getServiceLimit, tierToPlan, upgradeURL } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
-    import { Button } from '$lib/elements/forms';
-    import { BillingPlan } from '$lib/constants';
-    import { tooltip } from '$lib/actions/tooltip';
-
-    let selectedRequest = 'parameters';
-    let selectedResponse = 'logs';
-
-    const limit = getServiceLimit('logs');
-    const tier = tierToPlan($organization?.billingPlan)?.name;
-
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            $log.show = false;
-        }
-    }
-
-    function parseUrl(url: string) {
-        if (!url) return;
-        const queryString = url.includes('?') ? url.split('?')[1] : '';
-        const queries: Record<string, string>[] = [];
-        for (const param of queryString.split('&')) {
-            let [key, ...valueArr] = param.split('=');
-            const value = valueArr.join('=');
-
-            if (key) {
-                queries.push({ key, value: value ?? '' });
-            }
-        }
-        return queries;
-    }
-
-    function unescapeNewLines(logs: string) {
-        return logs.replace(/\\n/g, '\n');
-    }
-
-    beforeNavigate((n) => {
-        if (!$log.show) return;
-        if (n.type === 'popstate') {
-            n.cancel();
-        }
-        $log.show = false;
-    });
-
-    $: parameters = parseUrl(execution?.requestPath);
-    $: execution = $log.data;
-    $: func = $log.func;
-    $: if (execution?.errors) {
-        selectedResponse = 'errors';
-    }
-    $: host = execution?.requestHeaders?.find((header) => header.name === 'host')?.value;
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-{#if execution}
-    <section class="cover-frame" data-private>
-        <header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
-            <div class="u-flex u-gap-8 u-cross-center">
-                <h1 class="body-text-1 u-bold">Function ID:</h1>
-                <Id value={func.$id}>{func.$id}</Id>
-            </div>
-            <button
-                on:click={() => ($log.show = false)}
-                class="button is-text is-only-icon"
-                style="--button-size:1.5rem;"
-                aria-label="close popup">
-                <span class="icon-x" aria-hidden="true" />
-            </button>
-        </header>
-
-        <div class="cover-frame-content u-flex u-flex-vertical">
-            <div class="grid-1-2">
-                <div class="grid-1-2-col-1">
-                    <div class="u-flex u-gap-16">
-                        <div class="avatar is-size-large">
-                            <SvgIcon
-                                size={56}
-                                type="color"
-                                name={func.runtime.split('-')[0]}
-                                iconSize="large" />
-                        </div>
-                        <div class="u-grid-equal-row-size u-gap-4 u-line-height-1">
-                            <h2 class="body-text-2 u-bold">Execution ID:</h2>
-                            <Id value={execution.$id}>{execution.$id}</Id>
-                        </div>
-                    </div>
-                </div>
-                <div class="grid-1-2-col-2 u-flex u-main-space-between">
-                    <ul class="u-grid-equal-row-size u-gap-4 u-line-height-1">
-                        <li class="text">
-                            <b>Duration: </b>
-                            <time>
-                                {calculateTime(execution.duration)}
-                            </time>
-                        </li>
-
-                        <li class="text">
-                            <b>Created at:</b>
-                            <time>
-                                {toLocaleDateTime(execution.$createdAt)}
-                            </time>
-                        </li>
-                        {#if host}
-                            <li class="text">
-                                <b>Host:</b>
-                                <span>
-                                    {host}
-                                </span>
-                            </li>
-                        {/if}
-                    </ul>
-                    <div class="status u-margin-inline-start-auto">
-                        <div
-                            use:tooltip={{
-                                content: `Scheduled to execute on ${toLocaleDateTime(execution.scheduledAt)}`,
-                                disabled:
-                                    !execution?.scheduledAt || execution.status !== 'scheduled',
-                                maxWidth: 180
-                            }}>
-                            <Pill
-                                warning={execution.status === 'waiting' ||
-                                    execution.status === 'building'}
-                                danger={execution.status === 'failed'}
-                                info={execution.status === 'completed' ||
-                                    execution.status === 'ready'}>
-                                {#if execution.status === 'scheduled'}
-                                    <span class="icon-clock" aria-hidden="true" />
-                                    {timeFromNow(execution.scheduledAt)}
-                                {:else}
-                                    {execution.status}
-                                {/if}
-                            </Pill>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="u-stretch u-margin-block-start-32 u-overflow-hidden">
-                <section class="code-panel">
-                    <header
-                        class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
-                        <div class="u-flex">
-                            <div class="u-flex u-gap-16">
-                                <h4 class="text u-bold">Method:</h4>
-                                <span class="u-text-color-gray">{execution.requestMethod}</span>
-                            </div>
-                            <div class="u-flex u-gap-16">
-                                <h4 class="text u-bold">Path:</h4>
-
-                                <Copy value={execution.requestPath}>
-                                    <div
-                                        class="interactive-text-output is-textarea"
-                                        style:min-inline-size="0">
-                                        <span class="text u-line-height-1-5 u-break-all">
-                                            {execution.requestPath}
-                                        </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>
-                            </div>
-                        </div>
-
-                        <div class="u-flex u-gap-24">
-                            <div class="u-flex u-gap-16">
-                                <h4 class="text u-bold">Triggered by:</h4>
-                                <span class="u-text-color-gray">{execution.trigger}</span>
-                            </div>
-                            <div class="u-flex u-gap-16">
-                                <h4 class="text u-bold">Status Code:</h4>
-                                <span class="u-text-color-gray">
-                                    {execution.responseStatusCode}
-                                </span>
-                            </div>
-                        </div>
-                    </header>
-                    <div class="code-panel-content grid-1-2">
-                        <div
-                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding">
-                            <Heading tag="h3" size="6">Request</Heading>
-                            <div class="u-sep-block-end">
-                                <Tabs>
-                                    <Tab
-                                        selected={selectedRequest === 'parameters'}
-                                        on:click={() => (selectedRequest = 'parameters')}>
-                                        Parameters
-                                    </Tab>
-                                    <Tab
-                                        selected={selectedRequest === 'headers'}
-                                        on:click={() => (selectedRequest = 'headers')}>
-                                        Headers
-                                    </Tab>
-                                    <Tab
-                                        selected={selectedRequest === 'body'}
-                                        on:click={() => (selectedRequest = 'body')}>
-                                        Body
-                                    </Tab>
-                                </Tabs>
-                            </div>
-                            {#if selectedRequest === 'parameters'}
-                                {#if parameters?.length}
-                                    <div class="u-margin-block-start-24">
-                                        <TableScroll noMargin>
-                                            <TableHeader>
-                                                <TableCellHead>Name</TableCellHead>
-                                                <TableCellHead>Value</TableCellHead>
-                                            </TableHeader>
-                                            <TableBody>
-                                                {#each parameters as param}
-                                                    <TableRow>
-                                                        <TableCellText title="Key">
-                                                            {param.key}
-                                                        </TableCellText>
-                                                        <TableCellText title="Value">
-                                                            {param.value}
-                                                        </TableCellText>
-                                                    </TableRow>
-                                                {/each}
-                                            </TableBody>
-                                        </TableScroll>
-                                    </div>
-                                {/if}
-
-                                <p class="text u-text-center u-padding-24">
-                                    {parameters?.length
-                                        ? 'Not all parameters data is'
-                                        : 'Parameters data is not'} captured by Appwrite for your user's
-                                    security and privacy. To display parameters data in the Logs tab,
-                                    use
-                                    <b>context.log()</b>.
-                                    <a
-                                        href="https://appwrite.io/docs/products/functions/development#logging"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="link">Learn more</a
-                                    >.
-                                </p>
-                            {:else if selectedRequest === 'headers'}
-                                {#if execution.requestHeaders.length}
-                                    <div class="u-margin-block-start-24">
-                                        <TableScroll noMargin>
-                                            <TableHeader>
-                                                <TableCellHead>Name</TableCellHead>
-                                                <TableCellHead>Value</TableCellHead>
-                                            </TableHeader>
-                                            <TableBody>
-                                                {#each execution.requestHeaders as header}
-                                                    <TableRow>
-                                                        <TableCellText title="Name">
-                                                            {header.name}
-                                                        </TableCellText>
-                                                        <TableCellText title="Value">
-                                                            {header.value}
-                                                        </TableCellText>
-                                                    </TableRow>
-                                                {/each}
-                                            </TableBody>
-                                        </TableScroll>
-                                    </div>
-                                {/if}
-
-                                <p class="text u-text-center u-padding-16">
-                                    {execution.requestHeaders?.length
-                                        ? 'Not all header data is'
-                                        : 'Header data is not'}
-                                    captured by Appwrite for your user's security and privacy. To display
-                                    header data in the Logs tab, use
-                                    <b>context.log()</b>.
-                                    <a
-                                        href="https://appwrite.io/docs/products/functions/development#logging"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="link">Learn more</a
-                                    >.
-                                </p>
-                            {:else if selectedRequest === 'body'}
-                                <p class="text u-text-center u-padding-16">
-                                    Body data is not captured by Appwrite for your user's security
-                                    and privacy. To display body data in the Logs tab, use
-                                    <b>context.log()</b>.
-                                    <a
-                                        href="https://appwrite.io/docs/products/functions/development#logging"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="link">Learn more</a
-                                    >.
-                                </p>
-                            {/if}
-                        </div>
-                        <div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
-                        <div
-                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding">
-                            <Heading tag="h3" size="6">Response</Heading>
-                            <div class="u-sep-block-end">
-                                <Tabs>
-                                    <Tab
-                                        selected={selectedResponse === 'logs'}
-                                        on:click={() => (selectedResponse = 'logs')}>
-                                        Logs
-                                    </Tab>
-                                    <Tab
-                                        selected={selectedResponse === 'errors'}
-                                        on:click={() => (selectedResponse = 'errors')}>
-                                        Errors
-                                    </Tab>
-                                    <Tab
-                                        selected={selectedResponse === 'headers'}
-                                        on:click={() => (selectedResponse = 'headers')}>
-                                        Headers
-                                    </Tab>
-                                    <Tab
-                                        selected={selectedResponse === 'body'}
-                                        on:click={() => (selectedResponse = 'body')}>
-                                        Body
-                                    </Tab>
-                                </Tabs>
-                            </div>
-                            {#if selectedResponse === 'logs'}
-                                {#if execution?.logs}
-                                    {#if isCloud && limit !== 0 && limit < Infinity}
-                                        <Alert>
-                                            Logs are retained in rolling {hoursToDays(limit)} intervals
-                                            with the {tier} plan.
-                                            {#if $organization.billingPlan === BillingPlan.FREE}
-                                                <Button link href={$upgradeURL}>Upgrade</Button> to increase
-                                                your log retention for a longer period.
-                                            {/if}
-                                        </Alert>
-                                    {/if}
-                                    <Code
-                                        allowScroll
-                                        withCopy
-                                        noMargin
-                                        code={unescapeNewLines(execution.logs)}
-                                        language="sh"
-                                        class="limited-code-height" />
-                                {:else}
-                                    <Card isDashed isTile>
-                                        <p class="text u-text-center">No response was recorded.</p>
-                                    </Card>
-                                {/if}
-                            {:else if selectedResponse === 'errors'}
-                                {#if execution?.errors}
-                                    <Code
-                                        allowScroll
-                                        withCopy
-                                        noMargin
-                                        code={unescapeNewLines(execution.errors)}
-                                        language="sh"
-                                        class="limited-code-height" />
-                                {:else}
-                                    <Card isDashed isTile>
-                                        <p class="text u-text-center">No response was recorded.</p>
-                                    </Card>
-                                {/if}
-                            {:else if selectedResponse === 'headers'}
-                                {#if execution.responseHeaders.length}
-                                    <TableScroll noMargin>
-                                        <TableHeader>
-                                            <TableCellHead>Name</TableCellHead>
-                                            <TableCellHead>Value</TableCellHead>
-                                        </TableHeader>
-                                        <TableBody>
-                                            {#each execution.responseHeaders as header}
-                                                <TableRow>
-                                                    <TableCellText title="Name">
-                                                        {header.name}
-                                                    </TableCellText>
-                                                    <TableCellText title="Value"
-                                                        >{header.value}</TableCellText>
-                                                </TableRow>
-                                            {/each}
-                                        </TableBody>
-                                    </TableScroll>
-                                {/if}
-                                <p class="text u-text-center u-padding-16">
-                                    {execution.responseHeaders?.length
-                                        ? 'Not all header data is'
-                                        : 'Header data is not'}
-                                    captured by Appwrite for your user's security and privacy. To display
-                                    header data in the Logs tab, use
-                                    <b>context.log()</b>.
-                                    <a
-                                        href="https://appwrite.io/docs/products/functions/development#logging"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="link">Learn more</a
-                                    >.
-                                </p>
-                            {:else if selectedResponse === 'body'}
-                                <p class="text u-text-center u-padding-16">
-                                    Body data is not captured by Appwrite for your user's security
-                                    and privacy. To display body data in the Logs tab, use
-                                    <b>context.log()</b>.
-                                    <a
-                                        href="https://appwrite.io/docs/products/functions/development#logging"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="link">Learn more</a
-                                    >.
-                                </p>
-                            {/if}
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-    </section>
-{/if}
-
-<style>
-    :global(.limited-code-height) {
-        overflow: auto;
-        max-height: 50vh;
-    }
-
-    .code-panel-compact-header .u-flex {
-        gap: 1.5rem;
-    }
-
-    @media (max-width: 768px) {
-        .code-panel-compact-header {
-            row-gap: 1rem;
-            flex-direction: column;
-        }
-
-        .code-panel-content {
-            padding: unset;
-            padding-block: 1.5rem;
-        }
-
-        .mobile-only-inline-20-padding {
-            padding-inline: 1.5rem;
-        }
-
-        .mobile-only-block-start-20-padding {
-            padding-block-start: 1.5rem;
-        }
-
-        .code-panel-content.grid-1-2 {
-            display: unset;
-            row-gap: unset;
-        }
-    }
-</style>
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 50de10200..7568db77c 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -1,25 +1,11 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { BillingPlan } from '$lib/constants';
-    import { isMac } from '$lib/helpers/platform';
-    import { slide } from '$lib/helpers/transition';
-    import { upgradeURL } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
-    import { canSeeDatabases } from '$lib/stores/roles';
-    import { wizard } from '$lib/stores/wizard';
-    import { isCloud } from '$lib/system';
-    import Create from '$routes/(console)/feedbackWizard.svelte';
-    import { showSupportModal } from '$routes/(console)/wizard/support/store';
+    import { page } from '$app/state';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
-    import { showSubNavigation } from '$lib/stores/layout';
 
-    $: projectPath = `${base}/project-${$page.params.region}-${$page.params.project}`;
+    export let subNavigation;
 
-    $: subNavigation = $page.data.subNavigation;
+    $: subNavigation = page.data.subNavigation;
     // We need to have this second variable, because we only want narrow
     // to change automatically if we change from having a second side nav to
     // not having one, not when the second side nav changes to a different value.
@@ -40,219 +26,6 @@
             narrow = !narrow;
         }
     }
-
-    function openFeedback() {
-        $showSubNavigation = false;
-        wizard.start(Create);
-    }
-
-    function openSupport() {
-        $showSubNavigation = false;
-        $showSupportModal = true;
-    }
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
-
-<div class="side-nav" class:is-open-level-2={hasSubNavigation}>
-    <div class="side-nav-level-1" class:is-narrow={narrow}>
-        {#if $page.params.project}
-            <div class="side-nav-main">
-                <section class="drop-section">
-                    <ul class="drop-list">
-                        <li class="drop-list-item">
-                            <a
-                                class="drop-button"
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/overview`
-                                )}
-                                on:click={() => trackEvent('click_menu_overview')}
-                                href={projectPath}
-                                use:tooltip={{
-                                    content: 'Overview',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <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(
-                                    `${projectPath}/auth`
-                                )}
-                                on:click={() => trackEvent('click_menu_auth')}
-                                href={`${projectPath}/auth`}
-                                use:tooltip={{
-                                    content: 'Auth',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-user-group" aria-hidden="true" />
-                                <span class="text">Auth</span>
-                            </a>
-                        </li>
-                        {#if $canSeeDatabases}
-                            <li class="drop-list-item">
-                                <a
-                                    class="drop-button"
-                                    class:is-selected={$page.url.pathname.startsWith(
-                                        `${projectPath}/databases`
-                                    )}
-                                    on:click={() => trackEvent('click_menu_databases')}
-                                    href={`${projectPath}/databases`}
-                                    use:tooltip={{
-                                        content: 'Databases',
-                                        placement: 'right',
-                                        disabled: !narrow
-                                    }}>
-                                    <span class="icon-database" aria-hidden="true" />
-                                    <span class="text">Databases</span>
-                                </a>
-                            </li>
-                        {/if}
-                        <li class="drop-list-item">
-                            <a
-                                class="drop-button"
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/functions`
-                                )}
-                                on:click={() => trackEvent('click_menu_functions')}
-                                href={`${projectPath}/functions`}
-                                use:tooltip={{
-                                    content: 'Functions',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-lightning-bolt" aria-hidden="true" />
-                                <span class="text">Functions</span>
-                            </a>
-                        </li>
-                        <li class="drop-list-item">
-                            <a
-                                class="drop-button"
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/messaging`
-                                )}
-                                on:click={() => trackEvent('click_menu_messaging')}
-                                href={`${projectPath}/messaging`}
-                                use:tooltip={{
-                                    content: 'Messaging',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-send" aria-hidden="true" />
-                                <span class="text">Messaging</span>
-                            </a>
-                        </li>
-                        <li class="drop-list-item">
-                            <a
-                                class="drop-button"
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/storage`
-                                )}
-                                on:click={() => trackEvent('click_menu_storage')}
-                                href={`${projectPath}/storage`}
-                                use:tooltip={{
-                                    content: 'Storage',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-folder" aria-hidden="true" />
-                                <span class="text">Storage</span>
-                            </a>
-                        </li>
-                        <li class="drop-list-item is-not-desktop">
-                            <a
-                                class="drop-button"
-                                href={`${projectPath}/settings`}
-                                on:click={() => trackEvent('click_menu_settings')}
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/settings`
-                                )}
-                                title="Settings"
-                                use:tooltip={{
-                                    content: 'Settings',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-cog" aria-hidden="true" />
-                                <span class="text">Settings</span>
-                            </a>
-                        </li>
-                    </ul>
-                </section>
-            </div>
-
-            <div class="side-nav-bottom">
-                <section class="drop-section">
-                    <a
-                        class="drop-button is-only-desktop"
-                        href={`${projectPath}/settings`}
-                        on:click={() => trackEvent('click_menu_settings')}
-                        class:is-selected={$page.url.pathname.startsWith(`${projectPath}/settings`)}
-                        title="Settings"
-                        use:tooltip={{
-                            content: 'Settings',
-                            placement: 'right',
-                            disabled: !narrow
-                        }}>
-                        <span class="icon-cog" aria-hidden="true" />
-                        <span class="text">Settings</span>
-                    </a>
-
-                    <ul class="drop-list is-not-desktop">
-                        {#if isCloud && $organization?.billingPlan !== BillingPlan.SCALE}
-                            <li class="drop-list-item">
-                                <a class="drop-button" href={$upgradeURL}>
-                                    <span class="text">Upgrade</span>
-                                </a>
-                            </li>
-                        {/if}
-                        <li class="drop-list-item">
-                            <button class="drop-button" on:click={openSupport}>
-                                <span class="text">Support</span>
-                            </button>
-                        </li>
-                        <li class="drop-list-item">
-                            <button class="drop-button" on:click={openFeedback}>
-                                <span class="text">Feedback</span>
-                            </button>
-                        </li>
-                    </ul>
-                </section>
-            </div>
-        {/if}
-
-        {#if subNavigation}
-            <button
-                class="side-nav-button button is-small is-secondary is-not-mobile"
-                aria-label="resize menu"
-                on:click={() => (narrow = !narrow)}
-                use:tooltip={{
-                    content: isMac() ? '⌥ + S' : 'Alt + S'
-                }}>
-                <span
-                    class:icon-cheveron-right={narrow}
-                    class:icon-cheveron-left={!narrow}
-                    aria-hidden="true" />
-            </button>
-        {/if}
-    </div>
-
-    {#if subNavigation}
-        <div class="side-nav-level-2 is-open" transition:slide={{ axis: 'x', duration: 250 }}>
-            <div class="side-nav-main">
-                <svelte:component this={subNavigation} />
-            </div>
-        </div>
-    {/if}
-</div>
-
-<style>
-    .side-nav {
-        z-index: 9999;
-    }
-</style>
diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
deleted file mode 100644
index 5968f9cd3..000000000
--- a/src/lib/layout/notification.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import type { Notification } from '../stores/notifications';
-
-    export let type: Notification['type'] = 'info';
-    export let icon: Notification['icon'] = null;
-    export let title: Notification['title'];
-    export let buttons: Notification['buttons'];
-    export let message: Notification['message'];
-    export let html: Notification['isHtml'] = false;
-
-    const dispatch = createEventDispatcher();
-</script>
-
-<div
-    class="alert-sticky"
-    class:is-success={type === 'success'}
-    class:is-warning={type === 'warning'}
-    class:is-danger={type === 'error'}
-    class:is-info={type === 'info'}
-    transition:fly|global={{ x: 50 }}>
-    <button
-        class="button is-text is-only-icon"
-        style="--button-size:1.5rem;"
-        aria-label="close alert"
-        on:click={() => dispatch('dismiss')}>
-        <span class="icon-x" aria-hidden="true" />
-    </button>
-    <div class="alert-sticky-image">
-        <span
-            class:icon-check-circle={type === 'success' && !icon}
-            class:icon-exclamation={type === 'warning' && !icon}
-            class:icon-exclamation-circle={type === 'error' && !icon}
-            class:icon-info={type === 'info'}
-            class={icon ? `icon-${icon}` : ''}
-            aria-hidden="true" />
-    </div>
-    <div class="alert-sticky-content" data-private>
-        {#if title}
-            <h4 class="alert-sticky-title">{title}</h4>
-        {/if}
-        {#if html}
-            {@html message}
-        {:else}
-            <p>{message}</p>
-        {/if}
-    </div>
-    {#if buttons}
-        <div class="alert-sticky-buttons u-flex">
-            {#each buttons as button}
-                <button
-                    class="button is-text is-small"
-                    on:click|preventDefault|stopPropagation={button.method}>
-                    <span class="text">{button.name}</span>
-                </button>
-            {/each}
-        </div>
-    {/if}
-</div>
diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index e2558ddf7..a1306f3d1 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -1,25 +1,28 @@
 <script lang="ts">
-    import Notification from './notification.svelte';
     import { dismissNotification, notifications } from '../stores/notifications';
     import { flip } from 'svelte/animate';
+    import { Layout, Toast } from '@appwrite.io/pink-svelte';
 </script>
 
 {#if $notifications}
     <section>
-        <ul class="u-flex u-flex-vertical u-gap-16">
+        <Layout.Stack gap="s">
             {#each $notifications as notification (notification.id)}
-                <li animate:flip={{ duration: 500 }}>
-                    <Notification
-                        type={notification.type}
+                <span animate:flip={{ duration: 500 }}>
+                    <Toast
                         title={notification.title}
-                        icon={notification.icon}
-                        on:dismiss={() => dismissNotification(notification.id)}
-                        buttons={notification?.buttons}
-                        message={notification.message}
-                        html={notification?.isHtml} />
-                </li>
+                        status={notification.type}
+                        description={notification.message}
+                        actions={notification.buttons?.map((button) => {
+                            return {
+                                label: button.name,
+                                onClick: button.method
+                            };
+                        })}
+                        on:dismiss={() => dismissNotification(notification.id)} />
+                </span>
             {/each}
-        </ul>
+        </Layout.Stack>
     </section>
 {/if}
 
diff --git a/src/lib/layout/progress.svelte b/src/lib/layout/progress.svelte
index e14baedec..8d34097f4 100644
--- a/src/lib/layout/progress.svelte
+++ b/src/lib/layout/progress.svelte
@@ -5,7 +5,7 @@
     const maximum = 0.994;
     const settleTime = 700;
     const intervalTime = 700;
-    const displayThresholdMs = 150;
+    const displayThresholdMs = 2000;
     const stepSizes = [0, 0.005, 0.01, 0.02];
 
     let running: boolean = false;
@@ -101,7 +101,7 @@
 </script>
 
 {#if width}
-    <div class="progress-bar" class:progress-bar-hiding={completed} style={barStyle} />
+    <div class="progress-bar" class:progress-bar-hiding={completed} style={barStyle}></div>
 {/if}
 
 <style>
@@ -111,7 +111,7 @@
         left: 0;
         height: 2px;
         transition: width 0.2s ease-in-out;
-        z-index: 5;
+        z-index: 15;
         background: hsl(var(--color-primary-200));
     }
 
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
new file mode 100644
index 000000000..247564f86
--- /dev/null
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+    import { SearchQuery, ViewSelector } from '$lib/components';
+    import { FiltersBottomSheet, ParsedTagList, queryParamToMap } from '$lib/components/filters';
+    import QuickFilters from '$lib/components/filters/quickFilters.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { View } from '$lib/helpers/load';
+    import type { Column } from '$lib/helpers/types';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { IconAdjustments, IconFilterLine, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import type { Snippet } from 'svelte';
+    import type { Writable } from 'svelte/store';
+    import DisplaySettingsModal from './displaySettingsModal.svelte';
+    import { buildFilterCol } from '$lib/components/filters/quickFilters';
+    import { afterNavigate } from '$app/navigation';
+    import { setFilters } from '$lib/components/filters/setFilters';
+
+    let {
+        columns,
+        view = View.Table,
+        hideView = false,
+        hideColumns = false,
+        hasSearch = false,
+        searchPlaceholder = 'Search by ID',
+        hasFilters = false,
+        analyticsSource = '',
+        children
+    }: {
+        columns?: Writable<Column[]>;
+        view?: View;
+        hideView?: boolean;
+        hideColumns?: boolean;
+        hasSearch?: boolean;
+        searchPlaceholder?: string;
+        hasFilters?: boolean;
+        analyticsSource?: string;
+        children?: Snippet;
+    } = $props();
+
+    let hasDisplaySettings = $derived(!hideView || (!hideColumns && $columns?.length));
+    let numberOfOptions = $derived(
+        [hasSearch, hasFilters && $columns?.length, hasDisplaySettings].filter(Boolean).length
+    );
+    let showSearch = $state(false);
+    let showDisplaySettingsModal = $state(false);
+    let showFilters = $state(false);
+
+    let filterCols = $derived(
+        $columns.map((col) => (col.filter !== false ? buildFilterCol(col) : null)).filter(Boolean)
+    );
+
+    afterNavigate((p) => {
+        if (!hasFilters) return;
+        const paramQueries = p.to.url.searchParams.get('query');
+        const localQueries = queryParamToMap(paramQueries || '[]');
+        const localTags = Array.from(localQueries.keys());
+        setFilters(localTags, filterCols, $columns);
+        filterCols = filterCols;
+    });
+</script>
+
+<header>
+    <Layout.Stack>
+        {#if $isSmallViewport}
+            <Layout.Stack gap="xl">
+                <Layout.Stack direction="row">
+                    {#if children}
+                        <div style={`--button-width: 100%; width: 100%`}>
+                            {@render children()}
+                        </div>
+                    {/if}
+                    {#if numberOfOptions === 1}
+                        {#if hasSearch}
+                            {@render searchButton(true)}
+                        {:else if hasFilters && $columns?.length}
+                            {@render filtersButton(true)}
+                        {:else if hasDisplaySettings}
+                            {@render settingsButton(true)}
+                        {/if}
+                    {/if}
+                </Layout.Stack>
+                {#if numberOfOptions > 1}
+                    <Layout.Stack
+                        direction="row"
+                        gap="s"
+                        style={`--button-width: calc(${100 / numberOfOptions}% - var(--gap-s) / 2)`}>
+                        {#if hasSearch}
+                            {@render searchButton()}
+                        {/if}
+                        {#if hasFilters && $columns?.length}
+                            {@render filtersButton()}
+                        {/if}
+                        {#if hasDisplaySettings}
+                            {@render settingsButton()}
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+
+                {#if showSearch && hasSearch}
+                    <SearchQuery placeholder={searchPlaceholder} />
+                {/if}
+            </Layout.Stack>
+        {:else}
+            <Layout.Stack direction="row" justifyContent="space-between">
+                <Layout.Stack direction="row" alignItems="center">
+                    {#if hasSearch}
+                        <SearchQuery placeholder={searchPlaceholder} />
+                    {/if}
+                    {#if hasFilters && $columns?.length}
+                        <QuickFilters {columns} {analyticsSource} {filterCols} />
+                    {/if}
+                </Layout.Stack>
+                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+                    {#if hasDisplaySettings}
+                        <ViewSelector {view} {columns} {hideView} {hideColumns} />
+                    {/if}
+                    {#if children}
+                        {@render children()}
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        {/if}
+        <ParsedTagList />
+    </Layout.Stack>
+</header>
+
+{#if showDisplaySettingsModal}
+    <DisplaySettingsModal
+        bind:show={showDisplaySettingsModal}
+        {columns}
+        {hideColumns}
+        {hideView}
+        bind:view />
+{/if}
+
+{#if $isSmallViewport && showFilters}
+    <FiltersBottomSheet
+        bind:openBottomSheet={showFilters}
+        {columns}
+        {analyticsSource}
+        filterCols={filterCols.filter((f) => f?.options)} />
+{/if}
+
+<!-- SNIPPETS -->
+
+{#snippet searchButton(icon = false)}
+    <Button ariaLabel="Search" on:click={() => (showSearch = !showSearch)} secondary {icon}>
+        <Icon icon={IconSearch} />
+    </Button>
+{/snippet}
+
+{#snippet settingsButton(icon = false)}
+    <Button
+        ariaLabel="Display settings"
+        on:click={() => (showDisplaySettingsModal = !showDisplaySettingsModal)}
+        secondary
+        {icon}>
+        <Icon icon={IconAdjustments} />
+    </Button>
+{/snippet}
+
+{#snippet filtersButton(icon = false)}
+    <Button ariaLabel="Filters" on:click={() => (showFilters = !showFilters)} secondary {icon}>
+        <Icon icon={IconFilterLine} />
+    </Button>
+{/snippet}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 2db0781b9..871f2d525 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -1,33 +1,73 @@
 <script lang="ts">
-    import { browser } from '$app/environment';
     import { beforeNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { log } from '$lib/stores/logs';
+    import { Navbar, Sidebar } from '$lib/components';
+    import type { NavbarProject } from '$lib/components/navbar.svelte';
     import { wizard } from '$lib/stores/wizard';
     import { activeHeaderAlert } from '$routes/(console)/store';
     import { setContext } from 'svelte';
     import { writable } from 'svelte/store';
     import { showSubNavigation } from '$lib/stores/layout';
+    import { organization, organizationList } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { tierToPlan } from '$lib/stores/billing';
+    import { type Models } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import SideNavigation from '$lib/layout/navigation.svelte';
+    import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
+    import { isSidebarOpen } from '$lib/stores/sidebar';
+    import { BillingPlan } from '$lib/constants';
+    import { page } from '$app/stores';
 
     export let showSideNavigation = false;
+    export let showHeader = true;
+    export let showFooter = true;
+    export let loadedProjects: Array<NavbarProject> = [];
+    export let projects: Array<Models.Project> = [];
 
-    let y: number;
+    $: selectedProject = loadedProjects.find((project) => project.isSelected);
+    let yOnMenuOpen: number;
+    let showContentTransition = false;
+    let timeoutId: ReturnType<typeof setTimeout>;
 
     page.subscribe(({ url }) => {
         $showSubNavigation = url.searchParams.get('openNavbar') === 'true';
+        clearTimeout(timeoutId);
+
+        if (url.pathname.includes('project-')) {
+            timeoutId = setTimeout(() => {
+                showContentTransition = true;
+            }, 1000);
+        } else {
+            showContentTransition = false;
+        }
     });
 
-    const toggleMenu = () => {
-        y = 0;
-        $showSubNavigation = !$showSubNavigation;
-        if (browser) {
-            if ($showSubNavigation) {
-                document.body.classList.add('u-overflow-hidden');
-            } else {
-                document.body.classList.remove('u-overflow-hidden');
+    const bodyStyle = writable({ position: 'static', top: '' });
+
+    function style(node, { position, top }) {
+        node.style.position = position;
+        node.style.top = top;
+
+        return {
+            update: ({ position, top }) => {
+                node.style.position = position;
+                node.style.top = top;
             }
+        };
+    }
+
+    $: {
+        if ($isSidebarOpen) {
+            yOnMenuOpen = window.scrollY;
+            bodyStyle.set({ position: 'fixed', top: `-${window.scrollY}px` });
+        } else if (!$isSidebarOpen) {
+            bodyStyle.set({ position: 'static', top: '' });
+            requestAnimationFrame(() => {
+                window.scrollTo(0, yOnMenuOpen);
+            });
         }
-    };
+    }
 
     /**
      * Cancel navigation when wizard is open and triggered by popstate
@@ -45,70 +85,168 @@
 
     const isNarrow = setContext('isNarrow', writable(false));
     const hasSubNavigation = setContext('hasSubNavigation', writable(false));
+
     $: sideSize = $hasSubNavigation ? ($isNarrow ? '17rem' : '25rem') : '12.5rem';
+    $: navbarProps = {
+        logo: {
+            src: 'https://appwrite.io/images/logos/logo.svg',
+            alt: 'Logo Appwrite'
+        },
+
+        avatar: sdk.forConsole.avatars.getInitials($user?.name, 80, 80).toString(),
+
+        organizations: $organizationList.teams.map((org) => {
+            const billingPlan = org['billingPlan'];
+            return {
+                name: org.name,
+                $id: org.$id,
+                showUpgrade: billingPlan === BillingPlan.FREE,
+                tierName: isCloud ? tierToPlan(billingPlan).name : null,
+                isSelected: $organization?.$id === org.$id,
+                projects: loadedProjects
+            };
+        })
+    };
+
+    let showAccountMenu = false;
+    $: subNavigation = $page.data.subNavigation;
+    let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
+    $: state = $isSidebarOpen ? 'open' : 'closed';
+
+    function handleResize() {
+        $isSidebarOpen = false;
+        showAccountMenu = false;
+    }
+
+    const progressCard = function getProgressCard() {
+        if (selectedProject && !hasOnboardingDismissed(selectedProject.$id)) {
+            const currentProject = projects.find((project) => project.$id === selectedProject.$id);
+
+            return {
+                title: 'Get started',
+                percentage: currentProject && currentProject.platforms.length ? 100 : 33
+            };
+        }
+
+        return undefined;
+    };
 </script>
 
-<svelte:window bind:scrollY={y} />
-
+<svelte:window on:resize={handleResize} />
+<svelte:body use:style={$bodyStyle} />
+{#if $activeHeaderAlert?.show}
+    <svelte:component this={$activeHeaderAlert.component} />
+{/if}
 <main
-    class:grid-with-side={showSideNavigation}
+    class:has-alert={$activeHeaderAlert?.show}
     class:is-open={$showSubNavigation}
-    class:u-hide={$wizard.show || $log.show || $wizard.cover}
+    class:u-hide={$wizard.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
+    class:no-header={!showHeader}
     style:--p-side-size={sideSize}>
-    {#if $activeHeaderAlert?.show}
-        <svelte:component this={$activeHeaderAlert.component} />
+    {#if showHeader}
+        <Navbar {...navbarProps} bind:sideBarIsOpen={$isSidebarOpen} bind:showAccountMenu />
     {/if}
-    <header class="main-header u-padding-inline-end-0">
-        <button
-            class:u-hide={!showSideNavigation}
-            class="icon-button is-not-desktop"
-            aria-label="Open Menu"
-            on:click={toggleMenu}>
-            <span
-                class:icon-x={$showSubNavigation}
-                class:icon-menu={!$showSubNavigation}
-                aria-hidden="true" />
-        </button>
-        <slot name="header" />
-    </header>
-    {#if showSideNavigation}
-        <nav class="main-side">
-            <slot name="side" />
-        </nav>
-    {/if}
-    <section class="main-content">
-        {#if $page.data?.header}
-            <svelte:component this={$page.data.header} />
-        {/if}
+    <Sidebar
+        project={selectedProject}
+        progressCard={progressCard()}
+        avatar={navbarProps.avatar}
+        bind:subNavigation
+        bind:sideBarIsOpen={$isSidebarOpen}
+        bind:showAccountMenu
+        bind:state />
+    <SideNavigation bind:subNavigation />
+    <div
+        class="content"
+        class:has-transition={showContentTransition}
+        class:icons-content={state === 'icons'}
+        class:no-sidebar={!showSideNavigation}>
+        <section class="main-content" data-test={showSideNavigation}>
+            {#if $page.data?.header}
+                <svelte:component this={$page.data.header} />
+            {/if}
+            <slot />
+            {#if showFooter}
+                <slot name="footer" />
+            {/if}
+        </section>
+    </div>
 
-        <slot />
-        <slot name="footer" />
-    </section>
+    <button
+        type="button"
+        class="overlay-button"
+        aria-label="Close sidebar"
+        class:overlay={$isSidebarOpen}
+        on:click={() => {
+            $isSidebarOpen = false;
+        }}></button>
 </main>
 
 <style lang="scss">
-    main {
+    .content {
+        width: 100%;
+
+        margin-block-start: 48px;
+
+        @media (min-width: 1024px) {
+            width: 100%;
+            padding-left: 190px;
+
+            &.icons-content {
+                padding-left: 54px;
+            }
+        }
+    }
+
+    .has-transition {
+        @media (min-width: 1024px) {
+            transition: all 0.3s ease-in-out;
+        }
+    }
+
+    .no-sidebar {
+        padding-left: 0;
+    }
+
+    .main-content {
+        min-height: calc(100vh - 48px);
+    }
+
+    .no-header {
         min-height: 100vh;
 
-        &:not(.grid-with-side) {
-            display: flex;
-            flex-direction: column;
+        .content {
+            margin-block-start: 0;
         }
     }
 
-    .main-side {
-        z-index: 25;
+    :global(main:has(.sub-navigation)) {
+        .main-content {
+            @media (min-width: 1024px) {
+                padding-left: 255px;
+            }
+        }
     }
 
-    @media (max-width: 550.99px), (min-width: 551px) and (max-width: 1198.99px) {
-        .main-side {
-            top: 4.5rem;
+    .overlay {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        right: 0;
+        top: 0;
+        z-index: 10;
+        background-color: #56565c1a;
+        backdrop-filter: blur(5px);
+        transition:
+            backdrop-filter 0.5s ease-in-out,
+            background-color 0.35s ease-in-out;
+    }
+    .overlay-button {
+        @media (min-width: 1024px) {
+            display: none;
         }
     }
-    @media (min-width: 1199px) {
-        .grid-with-side {
-            grid-template-columns: auto 1fr !important;
-        }
+    main {
+        min-height: calc(100vh - 48px);
     }
 </style>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 001554954..9d1afcb2b 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Avatar, AvatarInitials, Card, Heading } from '$lib/components';
+    import { AvatarInitials, Card } from '$lib/components';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.png';
@@ -8,6 +8,7 @@
     import type { Coupon } from '$lib/sdk/billing';
     import { app } from '$lib/stores/app';
     import type { Campaign } from '$lib/stores/campaigns';
+    import { Typography, Layout, Avatar } from '@appwrite.io/pink-svelte';
     import { getCampaignImageUrl } from '$routes/(public)/card/helpers';
 
     export const imgLight = LoginLight;
@@ -15,6 +16,7 @@
 
     export let campaign: Campaign = null;
     export let coupon: Coupon = null;
+    export let align: 'start' | 'center' | 'end' = 'start';
 
     $: variation = ((coupon?.campaign ?? campaign) ? campaign?.template : 'default') as
         | 'default'
@@ -47,7 +49,7 @@
             ? ''
             : `url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
         {#if variation !== 'default'}
-            <div class="side-bg-container" />
+            <div class="side-bg-container"></div>
         {/if}
         <div
             class="logo u-flex u-gap-16"
@@ -71,118 +73,89 @@
         </div>
 
         {#if variation === 'default'}
-            <div class="u-flex u-stretch" />
+            <div class="u-flex u-stretch"></div>
 
             <div class="tag-line is-not-mobile">
                 <p>Build like a team of hundreds<span class="underscore">_</span></p>
             </div>
         {:else if variation === 'card'}
-            <section
-                class="u-flex u-flex-vertical u-main-center u-cross-center u-height-100-percent u-width-full-line">
-                <img
-                    src={getCampaignImageUrl(campaign?.image[$app.themeInUse])}
-                    class="u-block u-image-object-fit-cover side-bg-img"
-                    alt="promo" />
+            <div style:max-inline-size="30rem" style:height="100%">
+                <Layout.Stack justifyContent="center" alignItems="center" height="100%" gap="xxxl">
+                    <img
+                        src={getCampaignImageUrl(campaign?.image[$app.themeInUse])}
+                        class="u-block u-image-object-fit-cover side-bg-img"
+                        alt="promo" />
 
-                <div class="u-text-center auth-container">
-                    <div class="is-only-mobile u-width-full-line">
-                        <Heading
-                            size="5"
-                            tag="h3"
-                            class="u-margin-block-start-16"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <div class="is-not-mobile u-width-full-line">
-                        <Heading
-                            size="4"
-                            tag="h3"
-                            class="u-margin-block-start-32"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <p class="u-margin-block-start-16">
-                        {generateDesc()}
-                    </p>
-                </div>
-            </section>
+                    <Layout.Stack gap="s">
+                        <Typography.Title size="s" color="--fgcolor-neutral-primary" align="center"
+                            >{generateTitle()}</Typography.Title>
+                        <Typography.Text
+                            variant="l-400"
+                            color="--fgcolor-neutral-secondary"
+                            align="center">
+                            {generateDesc()}
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </div>
         {:else if variation === 'review'}
-            <section
-                class="u-flex u-flex-vertical u-main-center u-cross-center u-height-100-percent u-width-full-line review-container">
-                <div class="u-text-center">
-                    <div class="is-only-mobile u-width-full-line">
-                        <Heading
-                            size="5"
-                            tag="h3"
-                            class="u-margin-block-start-48"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <div class="is-not-mobile u-width-full-line">
-                        <Heading
-                            size="3"
-                            tag="h3"
-                            class="u-margin-block-start-32"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                </div>
-
-                <p class="body-text-1 u-margin-block-start-16 u-text-center">{generateDesc()}</p>
-                <div class="review-container u-margin-block-start-64">
-                    <Card style="--p-card-padding: 1.25rem">
-                        <p class="body-text-1">
-                            {currentReview.review}
-                        </p>
-                        <div class="u-margin-block-start-16 u-flex u-gap-16">
-                            {#if currentReview?.image}
-                                <Avatar
-                                    src={getCampaignImageUrl(currentReview?.image)}
-                                    name={currentReview.name}
-                                    size={40} />
-                            {:else}
-                                <AvatarInitials size={40} name={currentReview.name} />
-                            {/if}
-                            <div>
-                                <p class="body-text-2 u-bold">{currentReview.name}</p>
-                                <p class="body-text-2">{currentReview.description}</p>
-                            </div>
-                        </div>
+            <div style:max-inline-size="30rem" style:height="100%">
+                <Layout.Stack justifyContent="center" alignItems="center" height="100%" gap="xxxl">
+                    <Card radius="m" padding="s">
+                        <Layout.Stack gap="xl">
+                            <Typography.Text variant="l-400" color="--fgcolor-neutral-secondary">
+                                {currentReview.review}</Typography.Text>
+                            <Layout.Stack gap="s" direction="row">
+                                {#if currentReview?.image}
+                                    <Avatar
+                                        src={getCampaignImageUrl(currentReview?.image)}
+                                        alt={currentReview.name}
+                                        size="m" />
+                                {:else}
+                                    <AvatarInitials size="m" name={currentReview.name} />
+                                {/if}
+                                <Layout.Stack direction="column" gap="xxxs">
+                                    <Typography.Text
+                                        variant="m-500"
+                                        color="--fgcolor-neutral-primary"
+                                        >{currentReview.name}</Typography.Text>
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                        >{currentReview.description}</Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Layout.Stack>
                     </Card>
-                </div>
-                {#if campaign?.footer}
-                    <div
-                        class="u-flex u-gap-16 u-cross-center u-main-center review-footer-container">
-                        <p class="u-bold" style:text-transform="uppercase">provided to you by</p>
-                        <img
-                            style:max-block-size="2.5rem"
-                            src={getCampaignImageUrl(campaign?.image[$app.themeInUse])}
-                            alt={coupon?.campaign ?? campaign.$id} />
-                    </div>
-                {/if}
-            </section>
+                    <Layout.Stack gap="s">
+                        <Typography.Title size="s" align="center" color="--fgcolor-neutral-primary"
+                            >{generateTitle()}</Typography.Title>
+                        <Typography.Text variant="l-400" align="center"
+                            >{generateDesc()}</Typography.Text>
+                    </Layout.Stack>
+                    {#if campaign?.footer}
+                        <div
+                            class="u-flex u-gap-16 u-cross-center u-main-center review-footer-container">
+                            <p class="u-bold" style:text-transform="uppercase">
+                                provided to you by
+                            </p>
+                            <img
+                                style:max-block-size="2.5rem"
+                                src={getCampaignImageUrl(campaign?.image[$app.themeInUse])}
+                                alt={coupon?.campaign ?? campaign.$id} />
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </div>
         {/if}
     </section>
     <section class="grid-1-1-col-2 u-flex u-flex-vertical u-cross-center u-main-center">
         <slot name="top" />
         <div class="container u-flex u-flex-vertical u-cross-center u-main-center">
             <div class="auth-container u-width-full-line">
-                <h1 class="heading-level-4 u-margin-block-start-auto is-not-mobile">
+                <Typography.Title size="m" {align}>
                     <slot name="title" />
-                </h1>
-                <h1
-                    class="heading-level-5 u-margin-block-start-auto is-only-mobile"
-                    class:u-padding-block-start-24={variation !== 'default'}>
-                    <slot name="title" />
-                </h1>
+                </Typography.Title>
                 <div class="u-margin-block-start-24">
                     <slot />
                 </div>
@@ -216,7 +189,7 @@
 </main>
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
     .side-bg {
         position: relative;
@@ -305,7 +278,7 @@
         }
 
         .tag-line {
-            font-family: 'Aeonik Pro';
+            font-family: 'Aeonik Pro', 'Inter', sans-serif;
             font-size: 4rem;
             font-style: normal;
             font-weight: 400;
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index a522a327c..9f5889b04 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+    import { ProjectUsageRange, type Models } from '@appwrite.io/console';
     export type UsagePeriods = '24h' | '30d' | '90d';
 
     export function periodToDates(period: UsagePeriods): {
@@ -68,54 +69,62 @@
 </script>
 
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
+    import { goto } from '$app/navigation';
+
     import { BarChart } from '$lib/charts';
-    import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
+    import { Card } from '$lib/components';
+    import { InputSelect } from '$lib/elements/forms';
     import { formatNumberWithCommas } from '$lib/helpers/numbers';
-    import { Container } from '$lib/layout';
-    import { ProjectUsageRange, type Models } from '@appwrite.io/console';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     type MetricMetadata = {
         title: string;
         legend: string;
     };
 
-    export let title: string;
     export let total: number;
     export let count: Models.Metric[];
     export let countMetadata: MetricMetadata;
     export let path: string = null;
-    export let hideSelectPeriod: boolean = false;
+    export let hidePeriodSelect = false;
     export let isCumulative: boolean = false;
 </script>
 
-<Container>
-    <div class="u-flex u-main-space-between common-section">
-        <Heading tag="h2" size="5">{title}</Heading>
-        {#if !hideSelectPeriod}
-            <SecondaryTabs>
-                <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
-                    24h
-                </SecondaryTabsItem>
-                <SecondaryTabsItem
-                    href={`${path}/30d`}
-                    disabled={!$page.params.period || $page.params.period === '30d'}>
-                    30d
-                </SecondaryTabsItem>
-                <SecondaryTabsItem href={`${path}/90d`} disabled={$page.params.period === '90d'}>
-                    90d
-                </SecondaryTabsItem>
-            </SecondaryTabs>
-        {/if}
-    </div>
+<Layout.Stack gap="s">
+    {#if !hidePeriodSelect}
+        <div
+            style:max-width="250px"
+            style:--input-background-color="var(--bgcolor-neutral-primary)">
+            <InputSelect
+                on:change={(e) => goto(`${path}/${e.detail}`)}
+                id="period"
+                options={[
+                    {
+                        label: '24 hours',
+                        value: '24h'
+                    },
+                    {
+                        label: '30 days',
+                        value: '30d'
+                    },
+                    {
+                        label: '90 days',
+                        value: '90d'
+                    }
+                ]}
+                value={page.params.period ?? '30d'} />
+        </div>
+    {/if}
     <Card>
         {#if count}
-            <Heading tag="h6" size="6">{formatNumberWithCommas(total)}</Heading>
-            <p>{countMetadata.title}</p>
-            <div class="u-margin-block-start-16" />
+            <Layout.Stack gap="xs">
+                <Typography.Title>{formatNumberWithCommas(total)}</Typography.Title>
+                <Typography.Text>{countMetadata.title}</Typography.Text>
+            </Layout.Stack>
             <div class="chart-container">
                 <BarChart
-                    formatted={$page.params.period === '24h' ? 'hours' : 'days'}
+                    formatted={page.params.period === '24h' ? 'hours' : 'days'}
                     series={[
                         {
                             name: countMetadata.legend,
@@ -127,7 +136,7 @@
             </div>
         {/if}
     </Card>
-</Container>
+</Layout.Stack>
 
 <style lang="scss">
     .chart-container {
diff --git a/src/lib/layout/usageMultiple.svelte b/src/lib/layout/usageMultiple.svelte
index c68494a92..421b0892b 100644
--- a/src/lib/layout/usageMultiple.svelte
+++ b/src/lib/layout/usageMultiple.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
     import { BarChart, Legend, type LegendData } from '$lib/charts';
     import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte';
-    import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
-    import { page } from '$app/stores';
+    import { Card, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
+    import { page } from '$app/state';
     import { type Models } from '@appwrite.io/console';
     import { formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let title: string;
     export let total: number[];
@@ -13,43 +13,43 @@
     export let count: Models.Metric[][];
     export let legendData: LegendData[];
     export let showHeader: boolean = true;
-    export let overlapContainerCover = false;
     export let legendNumberFormat: 'comma' | 'abbreviate' = 'comma';
 </script>
 
-<Container overlapCover={overlapContainerCover}>
-    <div class="u-flex u-main-space-between common-section">
-        {#if showHeader}
-            <Heading tag="h2" size="5">{title}</Heading>
-        {/if}
+<div>
+    {#if showHeader}
+        <div class="u-flex u-main-space-between common-section">
+            <Typography.Title>{title}</Typography.Title>
+
+            {#if path}
+                <SecondaryTabs>
+                    <SecondaryTabsItem href={`${path}/24h`} disabled={page.params.period === '24h'}>
+                        24h
+                    </SecondaryTabsItem>
+                    <SecondaryTabsItem
+                        href={`${path}/30d`}
+                        disabled={!page.params.period || page.params.period === '30d'}>
+                        30d
+                    </SecondaryTabsItem>
+                    <SecondaryTabsItem href={`${path}/90d`} disabled={page.params.period === '90d'}>
+                        90d
+                    </SecondaryTabsItem>
+                </SecondaryTabs>
+            {/if}
+        </div>
+    {/if}
 
-        {#if path}
-            <SecondaryTabs>
-                <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
-                    24h
-                </SecondaryTabsItem>
-                <SecondaryTabsItem
-                    href={`${path}/30d`}
-                    disabled={!$page.params.period || $page.params.period === '30d'}>
-                    30d
-                </SecondaryTabsItem>
-                <SecondaryTabsItem href={`${path}/90d`} disabled={$page.params.period === '90d'}>
-                    90d
-                </SecondaryTabsItem>
-            </SecondaryTabs>
-        {/if}
-    </div>
     <Card>
         {#if count}
             {@const totalCount = total.reduce((a, b) => a + b, 0)}
 
-            <Heading tag="h6" size="6">{formatNumberWithCommas(totalCount)}</Heading>
-            <p>Total {title.toLocaleLowerCase()}</p>
-            <div class="u-margin-block-start-16" />
-
+            <Layout.Stack gap="xs">
+                <Typography.Title>{formatNumberWithCommas(totalCount)}</Typography.Title>
+                <Typography.Text>Total {title.toLocaleLowerCase()}</Typography.Text>
+            </Layout.Stack>
             <div class="multiple-chart-container u-flex-vertical u-gap-16">
                 <BarChart
-                    formatted={$page.params.period === '24h' ? 'hours' : 'days'}
+                    formatted={page.params.period === '24h' ? 'hours' : 'days'}
                     series={count.map((c, index) => ({
                         name: legendData[index].name,
                         data: accumulateFromEndingTotal(c, total[index])
@@ -64,7 +64,7 @@
             </div>
         {/if}
     </Card>
-</Container>
+</div>
 
 <style lang="scss">
     .multiple-chart-container {
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 81e4e4696..b6c9a895c 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -1,249 +1,112 @@
-<script context="module" lang="ts">
-    export type WizardStepsType = Map<
-        number,
-        {
-            label: string;
-            component: typeof SvelteComponent<unknown>;
-            optional?: boolean;
-            disabled?: boolean;
-            actions?: {
-                label: string;
-                onClick: () => Promise<void>;
-            }[];
-        }
-    >;
-</script>
-
 <script lang="ts">
+    import { Layout } from '@appwrite.io/pink-svelte';
     import { trackEvent } from '$lib/actions/analytics';
-
-    import { Steps } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { wizard } from '$lib/stores/wizard';
-    import { createEventDispatcher, type SvelteComponent } from 'svelte';
     import WizardExitModal from './wizardExitModal.svelte';
+    import { goto } from '$app/navigation';
+    import { wizard } from '$lib/stores/wizard';
 
-    export let title: string;
-    export let steps: WizardStepsType;
-    export let confirmExit = false;
-    export let finalAction = 'Create';
-    export let finalMethod: () => Promise<void> = null;
+    type $$Props =
+        | {
+              title?: string;
+              confirmExit: boolean;
+              showExitModal: boolean;
+              href?: string;
+              invertColumns?: boolean;
+              hideFooter?: boolean;
+              column?: boolean;
+              columnSize?: 's' | 'm' | 'l';
+              stickySide?: boolean;
+              onExit?: () => void;
+          }
+        | {
+              title?: string;
+              href?: string;
+              confirmExit?: boolean;
+              showExitModal?: boolean;
+              invertColumns?: boolean;
+              hideFooter?: boolean;
+              column?: boolean;
+              columnSize?: 's' | 'm' | 'l';
+              stickySide?: boolean;
+              onExit?: () => void;
+          };
 
-    // If the parent layout manages hiding the wizard via dispatched `exit` events,
-    // the wizard won't hide automatically when `manualExitControl` is true. Handle it manually.
-    export let manualExitControl = false;
-
-    const dispatch = createEventDispatcher();
-
-    let showExitModal = false;
+    export let title: $$Props['title'] = '';
+    export let confirmExit: $$Props['confirmExit'] = false;
+    export let href: $$Props['href'] = '';
+    export let showExitModal: $$Props['showExitModal'] = false;
+    export let invertColumns: $$Props['invertColumns'] = false;
+    export let hideFooter = false;
+    export let column: $$Props['column'] = false;
+    export let columnSize: $$Props['columnSize'] = 'm';
+    export let stickySide: $$Props['stickySide'] = false;
+    export let onExit: $$Props['onExit'] = undefined;
 
     function handleKeydown(event: KeyboardEvent) {
-        const openDialog = document.querySelectorAll('dialog[open]');
-        if (event.key === 'Escape' && !showExitModal && !openDialog?.length) {
+        if (event.key === 'Escape') {
             event.preventDefault();
-            trackEvent('wizard_exit', {
-                from: 'escape'
-            });
 
-            dispatch('exit', { optional: steps.get($wizard.step).optional });
-            if (!manualExitControl) wizard.hide();
-        }
-    }
-
-    function handleExit() {
-        if (confirmExit) {
-            showExitModal = true;
-        } else {
-            trackEvent('wizard_exit', {
-                from: 'button'
-            });
-            dispatch('exit', { optional: steps.get($wizard.step).optional });
-            if (!manualExitControl) wizard.hide();
-        }
-    }
-
-    function handleStepClick(e: CustomEvent<number>) {
-        const step = e.detail;
-        if (step < $wizard.step) {
-            $wizard.step = step;
-            // clear the interceptor
-            wizard.setInterceptor(null);
-        }
-    }
-
-    async function submit() {
-        if ($wizard.interceptor) {
-            $wizard.nextDisabled = true;
-            try {
-                await $wizard.interceptor();
-            } catch (error) {
-                if (!$wizard.interceptorNotificationEnabled) return;
-                addNotification({
-                    message: error.message,
-                    type: 'error'
+            if (confirmExit) {
+                showExitModal = true;
+            } else {
+                goto(href);
+                trackEvent('wizard_exit', {
+                    from: 'escape'
                 });
-                return;
-            } finally {
-                $wizard.nextDisabled = false;
             }
         }
-
-        wizard.setInterceptor(null);
-        if (isLastStep) {
-            if ($wizard.finalAction) {
-                $wizard.nextDisabled = true;
-                try {
-                    await $wizard.finalAction();
-                    trackEvent('wizard_finish');
-                } catch (error) {
-                    addNotification({
-                        message: error.message,
-                        type: 'error'
-                    });
-                } finally {
-                    $wizard.nextDisabled = false;
-                }
-            } else {
-                $wizard.nextDisabled = true;
-                if (finalMethod) {
-                    await finalMethod();
-                    trackEvent('wizard_finish');
-                    $wizard.nextDisabled = false;
-                } else {
-                    trackEvent('wizard_finish');
-                    dispatch('finish');
-
-                    setTimeout(() => {
-                        $wizard.nextDisabled = false;
-                    }, 2000);
-                }
-            }
-        } else {
-            if (steps.get($wizard.step + 1)?.disabled) {
-                $wizard.step++;
-                while (steps.get($wizard.step)?.disabled) {
-                    $wizard.step++;
-                }
-            } else {
-                $wizard.step++;
-            }
-            trackEvent('wizard_next');
-        }
     }
-
-    function previousStep() {
-        if (steps.get($wizard.step - 1)?.disabled) {
-            $wizard.step--;
-            while (steps.get($wizard.step)?.disabled) {
-                $wizard.step--;
-            }
-        } else {
-            $wizard.step--;
-        }
-        wizard.setInterceptor(null);
-        trackEvent('wizard_back');
-    }
-
-    $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
-    $: isLastStep = (() => {
-        if ($wizard.step === steps.size) {
-            return true;
-        }
-        let lastStep = true;
-        steps.forEach((step, i) => {
-            if (i > $wizard.step && !step.disabled) {
-                lastStep = false;
-            }
-        });
-        return lastStep;
-    })();
-    $: currentStep = steps.get($wizard.step);
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
-<section class="wizard">
-    <div class="wizard-header-strip" />
-    <div class="wizard-start-bg" />
-    <div class="wizard-end-bg" />
-
-    <header class="wizard-header">
-        <div class="body-text-1 u-bold">{title}</div>
-
-        <slot name="header" />
-        <button
-            class="button is-text is-only-icon u-margin-inline-start-auto"
-            style="--button-size:1.5rem;"
-            aria-label="close wizard"
-            on:click={handleExit}>
-            <span class="icon-x" aria-hidden="true" />
-        </button>
-    </header>
-
-    <aside class="wizard-side">
-        <slot name="aside">
-            <Steps
-                on:step={handleStepClick}
-                steps={sortedSteps.map(([, { label, optional, disabled }]) => ({
-                    text: label,
-                    optional,
-                    disabled
-                }))}
-                currentStep={$wizard.step} />
-        </slot>
-    </aside>
-    <div class="wizard-media">
-        {#if $wizard.media}
-            <img src={$wizard.media} alt="wizard media" loading="lazy" />
-        {/if}
-    </div>
-    <div class="wizard-main">
-        <Form noStyle onSubmit={submit}>
-            {#each sortedSteps as [step, { component }]}
-                {#if $wizard.step === step}
-                    <svelte:component this={component} />
-                {/if}
-            {/each}
-            <div class="u-z-index-5 form-footer">
-                <div class="u-flex u-main-end u-gap-12">
-                    {#if !isLastStep && currentStep?.optional}
-                        <Button text on:click={() => dispatch('finish', { skipped: true })}>
-                            Skip optional steps
-                        </Button>
-                    {/if}
-
-                    {#if $wizard.step === 1}
-                        <Button secondary on:click={handleExit}>Cancel</Button>
-                    {:else}
-                        <Button secondary on:click={previousStep}>Back</Button>
-                    {/if}
-
-                    {#if currentStep?.actions}
-                        {#each currentStep.actions as action}
-                            <Button secondary on:click={action.onClick}>
-                                {action.label}</Button>
-                        {/each}
-                    {/if}
-
-                    <Button submit disabled={$wizard.nextDisabled}>
-                        {isLastStep ? finalAction : 'Next'}
-                    </Button>
-                </div>
-            </div>
-        </Form>
-    </div>
-</section>
+<Layout.Wizard
+    {title}
+    {invertColumns}
+    {column}
+    {columnSize}
+    {stickySide}
+    {hideFooter}
+    href={confirmExit ? null : href}
+    buttonMethod={() => {
+        if (confirmExit) {
+            showExitModal = true;
+        } else {
+            goto(href);
+            trackEvent('wizard_exit', {
+                from: 'button'
+            });
+        }
+    }}>
+    <slot />
+    <svelte:fragment slot="aside">
+        <slot name="aside" />
+    </svelte:fragment>
+    <svelte:fragment slot="footer">
+        <slot name="footer" />
+    </svelte:fragment>
+</Layout.Wizard>
 
 {#if showExitModal}
     <WizardExitModal
+        {href}
         bind:show={showExitModal}
         on:exit={() => {
             trackEvent('wizard_exit', {
                 from: 'prompt'
             });
+
             wizard.hide();
+            if (onExit) {
+                onExit();
+
+                // clear exit
+                onExit = null;
+            }
         }}>
-        <slot name="exit">this process</slot>
+        <slot name="exit">
+            Are you sure you want to exit from this process? All data will be deleted. This action
+            is irreversible.
+        </slot>
     </WizardExitModal>
 {/if}
diff --git a/src/lib/layout/wizardCover.svelte b/src/lib/layout/wizardCover.svelte
index f73953fd1..efae05939 100644
--- a/src/lib/layout/wizardCover.svelte
+++ b/src/lib/layout/wizardCover.svelte
@@ -1,9 +1,20 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
 
+    export let previousPage: string = null;
+
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
+            close();
+        }
+    }
+
+    function close() {
+        if (previousPage) {
+            goto(previousPage);
+        } else {
             wizard.hide();
         }
     }
@@ -11,7 +22,7 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<section class="cover-frame is-color-header">
+<section class="cover-frame is-color-header" data-is-page={previousPage}>
     <header class="cover-frame-header">
         <slot name="header">
             <div
@@ -21,11 +32,11 @@
                     <div class="body-text-1 u-bold"><slot name="title" /></div>
                 </div>
                 <button
-                    on:click={wizard.hide}
+                    on:click={close}
                     class="button is-text is-only-icon"
                     style:--button-size="1.5rem"
                     aria-label="close popup">
-                    <span class="icon-x" aria-hidden="true" />
+                    <span class="icon-x" aria-hidden="true"></span>
                 </button>
             </div>
         </slot>
@@ -35,3 +46,20 @@
         <slot />
     </div>
 </section>
+
+<style lang="scss">
+    //style for cover with is-page data attribute
+    .cover-frame[data-is-page] {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 30;
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        overflow-y: auto;
+        background: var(--bgcolor-neutral-primary);
+    }
+</style>
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index 2b71f4a59..80f8ec227 100644
--- a/src/lib/layout/wizardExitModal.svelte
+++ b/src/lib/layout/wizardExitModal.svelte
@@ -1,35 +1,28 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Dialog, Layout } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let show = false;
     export let href: string = null;
     const dispatch = createEventDispatcher();
 
-    function handleSubmit() {
+    function handleExit() {
         dispatch('exit');
         show = false;
     }
 </script>
 
-<Modal
-    title="Exit process"
-    bind:show
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    size="small"
-    headerDivider={false}>
-    <p class="text">
-        <slot />
-    </p>
+<Dialog title="Exit process" bind:open={show}>
+    <slot />
     <svelte:fragment slot="footer">
-        <Button text on:click={() => (show = false)}>Cancel</Button>
-        {#if href}
-            <Button secondary {href}>Exit</Button>
-        {:else}
-            <Button secondary submit>Exit</Button>
-        {/if}
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            {#if href}
+                <Button secondary size="s" {href}>Exit</Button>
+            {:else}
+                <Button secondary size="s" on:click={handleExit}>Exit</Button>
+            {/if}
+        </Layout.Stack>
     </svelte:fragment>
-</Modal>
+</Dialog>
diff --git a/src/lib/layout/wizardSecondaryContainer.svelte b/src/lib/layout/wizardSecondaryContainer.svelte
index 3bb3685a4..167fbba6c 100644
--- a/src/lib/layout/wizardSecondaryContainer.svelte
+++ b/src/lib/layout/wizardSecondaryContainer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import WizardExitModal from './wizardExitModal.svelte';
     import { goto } from '$app/navigation';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     type $$Props =
         | {
@@ -42,10 +42,11 @@
     <div class="wizard-secondary-container">
         <header class="wizard-secondary-header">
             <div class="u-flex u-main-space-between u-gap-32 u-cross-center">
-                <Heading size={5} tag="h1"><slot name="title" /></Heading>
+                <Typography.Title><slot name="title" /></Typography.Title>
+
                 <Button
                     text
-                    round
+                    icon
                     ariaLabel="close modal"
                     href={confirmExit ? null : href}
                     on:click={() => {
diff --git a/src/lib/layout/wizardStep.svelte b/src/lib/layout/wizardStep.svelte
index f081703a1..4b64ae445 100644
--- a/src/lib/layout/wizardStep.svelte
+++ b/src/lib/layout/wizardStep.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { wizard } from '$lib/stores/wizard';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { onDestroy } from 'svelte';
 
     /**
@@ -20,18 +20,18 @@
     }
 </script>
 
-<header class="form-header" class:hide-divider={!$$slots.subtitle}>
-    <Heading tag="h1" size="6">
-        <slot name="title" />
-    </Heading>
-    {#if $$slots.subtitle}
-        <p>
-            <slot name="subtitle" />
-        </p>
-    {/if}
-</header>
+<Layout.Stack>
+    <header class="form-header" class:hide-divider={!$$slots.subtitle}>
+        <Typography.Title><slot name="title" /></Typography.Title>
+        {#if $$slots.subtitle}
+            <p>
+                <slot name="subtitle" />
+            </p>
+        {/if}
+    </header>
 
-<slot />
+    <slot />
+</Layout.Stack>
 
 <style>
     header {
diff --git a/src/lib/layout/wizardWithSteps.svelte b/src/lib/layout/wizardWithSteps.svelte
new file mode 100644
index 000000000..7c2bb6ba6
--- /dev/null
+++ b/src/lib/layout/wizardWithSteps.svelte
@@ -0,0 +1,245 @@
+<script context="module" lang="ts">
+    export type WizardStepsType = Map<
+        number,
+        {
+            label: string;
+            component: Component;
+            optional?: boolean;
+            disabled?: boolean;
+            actions?: {
+                label: string;
+                onClick: () => Promise<void>;
+            }[];
+        }
+    >;
+</script>
+
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+
+    import { Steps } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
+    import { createEventDispatcher, type Component } from 'svelte';
+    import WizardExitModal from './wizardExitModal.svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
+
+    export let title: string;
+    export let steps: WizardStepsType;
+    export let confirmExit = false;
+    export let finalAction = 'Create';
+    export let finalMethod: () => Promise<void> = null;
+
+    const dispatch = createEventDispatcher();
+
+    let showExitModal = false;
+
+    function handleKeydown(event: KeyboardEvent) {
+        const openDialog = document.querySelectorAll('dialog[open]');
+        if (event.key === 'Escape' && !showExitModal && !openDialog?.length) {
+            event.preventDefault();
+            trackEvent('wizard_exit', {
+                from: 'escape'
+            });
+            dispatch('exit');
+            wizard.hide();
+        }
+    }
+
+    function handleExit() {
+        if (confirmExit) {
+            showExitModal = true;
+        } else {
+            trackEvent('wizard_exit', {
+                from: 'button'
+            });
+            dispatch('exit');
+            wizard.hide();
+        }
+    }
+
+    function handleStepClick(e: CustomEvent<number>) {
+        const step = e.detail;
+        if (step < $wizard.step) {
+            $wizard.step = step;
+        }
+    }
+
+    async function submit() {
+        if ($wizard.interceptor) {
+            $wizard.nextDisabled = true;
+            try {
+                await $wizard.interceptor();
+            } catch (error) {
+                if (!$wizard.interceptorNotificationEnabled) return;
+                addNotification({
+                    message: error.message,
+                    type: 'error'
+                });
+                return;
+            } finally {
+                $wizard.nextDisabled = false;
+            }
+        }
+
+        wizard.setInterceptor(null);
+        if (isLastStep) {
+            if ($wizard.finalAction) {
+                $wizard.nextDisabled = true;
+                try {
+                    await $wizard.finalAction();
+                    trackEvent('wizard_finish');
+                } catch (error) {
+                    addNotification({
+                        message: error.message,
+                        type: 'error'
+                    });
+                } finally {
+                    $wizard.nextDisabled = false;
+                }
+            } else {
+                $wizard.nextDisabled = true;
+                if (finalMethod) {
+                    await finalMethod();
+                    trackEvent('wizard_finish');
+                    $wizard.nextDisabled = false;
+                } else {
+                    trackEvent('wizard_finish');
+                    dispatch('finish');
+
+                    setTimeout(() => {
+                        $wizard.nextDisabled = false;
+                    }, 2000);
+                }
+            }
+        } else {
+            if (steps.get($wizard.step + 1)?.disabled) {
+                $wizard.step++;
+                while (steps.get($wizard.step)?.disabled) {
+                    $wizard.step++;
+                }
+            } else {
+                $wizard.step++;
+            }
+            trackEvent('wizard_next');
+        }
+    }
+
+    function previousStep() {
+        if (steps.get($wizard.step - 1)?.disabled) {
+            $wizard.step--;
+            while (steps.get($wizard.step)?.disabled) {
+                $wizard.step--;
+            }
+        } else {
+            $wizard.step--;
+        }
+        wizard.setInterceptor(null);
+        trackEvent('wizard_back');
+    }
+
+    $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
+    $: isLastStep = (() => {
+        if ($wizard.step === steps.size) {
+            return true;
+        }
+        let lastStep = true;
+        steps.forEach((step, i) => {
+            if (i > $wizard.step && !step.disabled) {
+                lastStep = false;
+            }
+        });
+        return lastStep;
+    })();
+    $: currentStep = steps.get($wizard.step);
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<section class="wizard">
+    <div class="wizard-header-strip"></div>
+    <div class="wizard-start-bg"></div>
+    <div class="wizard-end-bg"></div>
+
+    <header class="wizard-header">
+        <div class="body-text-1 u-bold">{title}</div>
+
+        <slot name="header" />
+        <button
+            class="button is-text is-only-icon u-margin-inline-start-auto"
+            style="--button-size:1.5rem;"
+            aria-label="close wizard"
+            on:click={handleExit}>
+            <span class="icon-x" aria-hidden="true"></span>
+        </button>
+    </header>
+
+    <aside class="wizard-side">
+        <slot name="aside">
+            <Steps
+                on:step={handleStepClick}
+                steps={sortedSteps.map(([, { label, optional, disabled }]) => ({
+                    text: label,
+                    optional,
+                    disabled
+                }))}
+                currentStep={$wizard.step} />
+        </slot>
+    </aside>
+    <div class="wizard-media">
+        {#if $wizard.media}
+            <img src={$wizard.media} alt="wizard media" loading="lazy" />
+        {/if}
+    </div>
+    <div class="wizard-main">
+        <Form onSubmit={submit}>
+            <Layout.Stack>
+                {#each sortedSteps as [step, { component }]}
+                    {#if $wizard.step === step}
+                        <svelte:component this={component} />
+                    {/if}
+                {/each}
+                <div class="u-z-index-5 form-footer">
+                    <div class="u-flex u-main-end u-gap-12">
+                        {#if !isLastStep && currentStep?.optional}
+                            <Button text on:click={() => dispatch('finish')}>
+                                Skip optional steps
+                            </Button>
+                        {/if}
+
+                        {#if $wizard.step === 1}
+                            <Button secondary on:click={handleExit}>Cancel</Button>
+                        {:else}
+                            <Button secondary on:click={previousStep}>Back</Button>
+                        {/if}
+
+                        {#if currentStep?.actions}
+                            {#each currentStep.actions as action}
+                                <Button secondary on:click={action.onClick}>
+                                    {action.label}</Button>
+                            {/each}
+                        {/if}
+
+                        <Button submit disabled={$wizard.nextDisabled}>
+                            {isLastStep ? finalAction : 'Next'}
+                        </Button>
+                    </div>
+                </div>
+            </Layout.Stack>
+        </Form>
+    </div>
+</section>
+
+{#if showExitModal}
+    <WizardExitModal
+        bind:show={showExitModal}
+        on:exit={() => {
+            trackEvent('wizard_exit', {
+                from: 'prompt'
+            });
+            wizard.hide();
+        }}>
+        <slot name="exit">this process</slot>
+    </WizardExitModal>
+{/if}
diff --git a/src/lib/mock/wizard.test.svelte b/src/lib/mock/wizard.test.svelte
index 0314a51e7..bf73a4f46 100644
--- a/src/lib/mock/wizard.test.svelte
+++ b/src/lib/mock/wizard.test.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import Wizard from '$lib/layout/wizard.svelte';
+    import Wizard from '$lib/layout/wizardWithSteps.svelte';
     import Step1 from './wizard.step1.test.svelte';
     import Step2 from './wizard.step2.test.svelte';
     import { wizard } from '$lib/stores/wizard';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
 
     const stepsComponents: WizardStepsType = new Map();
 
diff --git a/src/lib/pages/domains/create.svelte b/src/lib/pages/domains/create.svelte
index 0b0e53a43..d2fed1030 100644
--- a/src/lib/pages/domains/create.svelte
+++ b/src/lib/pages/domains/create.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-    import { Wizard } from '$lib/layout';
+    import { WizardWithSteps } from '$lib/layout';
     import { invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
     import { dependencyStore, domain } from './wizard/store';
     import Step1 from './wizard/step1.svelte';
     import Step2 from './wizard/step2.svelte';
     import { onMount } from 'svelte';
     import type { Models } from '@appwrite.io/console';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { realtime } from '$lib/stores/sdk';
 
     onMount(() => {
         domain.set({ $id: '', domain: '' });
 
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe<Models.ProxyRule>('console', (message) => {
                 if (
-                    message.channels.includes(`projects.${$page.params.project}`) &&
+                    message.channels.includes(`projects.${page.params.project}`) &&
                     message.events.includes('rules.*')
                 ) {
                     domain.set(message.payload);
@@ -42,7 +42,7 @@
     });
 </script>
 
-<Wizard
+<WizardWithSteps
     title="Create domain"
     steps={stepsComponents}
     finalAction="Go to console"
diff --git a/src/lib/pages/domains/delete.svelte b/src/lib/pages/domains/delete.svelte
index dc225b79f..b4b6ee439 100644
--- a/src/lib/pages/domains/delete.svelte
+++ b/src/lib/pages/domains/delete.svelte
@@ -1,22 +1,35 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import type { Models } from '@appwrite.io/console';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import type { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { page } from '$app/state';
 
     export let showDelete = false;
     export let selectedDomain: Models.ProxyRule;
     export let dependency: Dependencies;
 
+    let error: string;
+
+    function getCorrectMessage(): string {
+        const resourceType = selectedDomain.type;
+        switch (resourceType) {
+            case 'api':
+                return `access ${resourceType}`;
+            case 'deployment':
+                return `view your ${resourceType}`;
+            case 'redirect':
+                return `view your ${resourceType} `;
+        }
+    }
+
     async function deleteDomain() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .proxy.deleteRule(selectedDomain.$id);
             await invalidate(dependency);
             showDelete = false;
@@ -25,31 +38,14 @@
                 message: `${selectedDomain.domain} has been deleted`
             });
             trackEvent(Submit.DomainDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.DomainDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DomainDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete domain"
-    bind:show={showDelete}
-    onSubmit={deleteDomain}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    {#if selectedDomain}
-        <p data-private>
-            Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
-            able to execute your function by visiting this domain.
-        </p>
-    {/if}
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+<Confirm onSubmit={deleteDomain} title="Delete domain" bind:open={showDelete} bind:error>
+    <p data-private>Are you sure you want to delete <b>{selectedDomain?.domain}</b>?</p>
+    <p>You will no longer be able to {getCorrectMessage()} by visiting this domain.</p>
+</Confirm>
diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index 1c57ad634..7db400506 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -1,39 +1,45 @@
 <script lang="ts">
-    import { DropList, DropListItem, Empty, Heading, Modal, Trim } from '$lib/components';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellLink,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
+    import { Empty, Modal, SearchQuery } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { onMount } from 'svelte';
-    import { dependencyStore, domain, typeStore } from './wizard/store';
+    import { dependencyStore } from './wizard/store';
     import { toLocaleDate } from '$lib/helpers/date';
     import { wizard } from '$lib/stores/wizard';
     import type { Dependencies } from '$lib/constants';
-    import type { Models, ResourceType } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
     import Create from './create.svelte';
     import Delete from './delete.svelte';
     import Retry from './wizard/retry.svelte';
-    import { Pill } from '$lib/elements';
     import { canWriteRules } from '$lib/stores/roles';
+    import {
+        Layout,
+        Table,
+        Link,
+        Icon,
+        Badge,
+        Popover,
+        ActionMenu
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconCheckCircle,
+        IconDotsHorizontal,
+        IconExclamationCircle,
+        IconPlus,
+        IconRefresh,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
 
     export let rules: Models.ProxyRuleList;
-    export let type: ResourceType;
     export let dependency: Dependencies;
 
-    let showDomainsDropdown = [];
     let showDelete = false;
     let showRetry = false;
     let selectedDomain: Models.ProxyRule;
     let retryError = null;
 
     onMount(() => {
-        typeStore.set(type);
         dependencyStore.set(dependency);
     });
 
@@ -41,149 +47,125 @@
         wizard.start(Create);
     }
 
-    function openRetry(rule: Models.ProxyRule, index?: number) {
+    function openRetry(rule: Models.ProxyRule) {
         retryError = null;
-        if (index !== undefined) {
-            showDomainsDropdown[index] = false;
-        }
-        domain.set(rule);
+        selectedDomain = rule;
         showRetry = true;
     }
 </script>
 
-<div class="u-flex u-gap-12 common-section u-main-space-between">
-    <Heading tag="h2" size="5">
-        <slot name="heading" />
-    </Heading>
-
-    {#if $canWriteRules}
-        <Button on:click={openWizard}>
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
-        </Button>
-    {/if}
-</div>
+{#if $canWriteRules}
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button
+                href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/create`}
+                event="create_user"
+                size="s">
+                <Icon size="s" icon={IconPlus} slot="start" />
+                <span class="text">Create domain</span>
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
+{/if}
 {#if rules.total}
-    <TableScroll>
-        <TableHeader>
-            <TableCellHead width={150}>Name</TableCellHead>
-            <TableCellHead width={120}>Verification Status</TableCellHead>
-            <TableCellHead width={180}>Certificate Status</TableCellHead>
-            {#if $canWriteRules}
-                <TableCellHead width={40} />
-            {/if}
-        </TableHeader>
-        <TableBody>
-            {#each rules.rules as domain, i}
-                <TableRow>
-                    <TableCellLink
-                        title="Domain"
-                        href={`https://${domain.domain}`}
-                        external
-                        noStyle>
-                        <span class="u-flex u-gap-4 u-cross-center">
-                            <Trim>
-                                <span class="link">{domain.domain}</span>
-                            </Trim>
-                            <span class="icon-external-link" aria-hidden="true" />
-                        </span>
-                    </TableCellLink>
-                    <TableCell title="Verification">
-                        {#if domain.status === 'created'}
-                            <div class="u-flex u-gap-16 u-cross-center">
-                                <Pill danger>
-                                    <span
-                                        class="icon-exclamation-circle u-color-text-danger"
-                                        aria-hidden="true" />
-                                    <span class="u-text">failed</span>
-                                </Pill>
-                                <button type="button" on:click={() => openRetry(domain)}>
-                                    <span class="link">Retry</span>
-                                </button>
-                            </div>
-                        {:else}
-                            <Pill success>
-                                <span
-                                    class="icon-check-circle u-color-text-success"
-                                    aria-hidden="true" />
-                                <p class="text">verified</p>
-                            </Pill>
-                        {/if}
-                    </TableCell>
-                    <TableCell title="Certificate">
-                        {#if domain.status === 'unverified'}
-                            <div class="u-flex u-gap-16 u-cross-center">
-                                <Pill danger>
-                                    <span
-                                        class="icon-exclamation-circle u-color-text-danger"
-                                        aria-hidden="true" />
-                                    <span class="u-text">failed</span>
-                                </Pill>
-                                <button type="button" on:click={() => openRetry(domain)}>
-                                    <span class="link">Retry</span>
-                                </button>
-                            </div>
-                        {:else if domain.status === 'verified'}
-                            <div class="u-flex u-gap-16 u-cross-center">
-                                <Pill success>
-                                    <span
-                                        class="icon-check-circle u-color-text-success"
-                                        aria-hidden="true" />
-                                    <span>generated</span>
-                                </Pill>
-                                {#if domain.renewAt}
-                                    <span class="u-text-color-gray">
-                                        Auto-renewal: {toLocaleDate(domain.renewAt)}
-                                    </span>
-                                {/if}
-                            </div>
-                        {:else}
-                            <Pill warning>
-                                <span class="icon-clock u-text-color-gray" aria-hidden="true" />
-                                <p class="text">blocked by verification</p>
-                            </Pill>
-                        {/if}
-                    </TableCell>
-                    {#if $canWriteRules}
-                        <TableCell right>
-                            <DropList
-                                bind:show={showDomainsDropdown[i]}
-                                placement="bottom-start"
-                                noArrow>
-                                <Button
-                                    text
-                                    round
-                                    ariaLabel="more options"
-                                    on:click={() =>
-                                        (showDomainsDropdown[i] = !showDomainsDropdown[i])}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </Button>
-                                <svelte:fragment slot="list">
-                                    {#if domain.status !== 'verified'}
-                                        <DropListItem
-                                            icon="refresh"
-                                            on:click={() => openRetry(domain, i)}>
-                                            {domain.status === 'unverified'
-                                                ? 'Retry generation'
-                                                : 'Retry verification'}
-                                        </DropListItem>
-                                    {/if}
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            selectedDomain = domain;
-                                            showDelete = true;
-                                            showDomainsDropdown[i] = false;
-                                        }}>
-                                        Delete
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </TableCell>
+    <Table.Root
+        let:root
+        columns={[
+            { id: 'name' },
+            { id: 'verification' },
+            { id: 'certificate' },
+            { id: 'action', width: 20, hide: !$canWriteRules }
+        ]}>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell column="verification" {root}>Verification status</Table.Header.Cell>
+            <Table.Header.Cell column="certificate" {root}>Certificate status</Table.Header.Cell>
+            <Table.Header.Cell column="action" {root} />
+        </svelte:fragment>
+        {#each rules.rules as domain}
+            <Table.Row.Base {root}>
+                <Table.Cell column="name" {root}>
+                    <Layout.Stack direction="row" alignItems="center">
+                        <Link.Anchor href={`https://${domain.domain}`} target="_blank">
+                            {domain.domain}
+                        </Link.Anchor>
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell column="verification" {root}>
+                    {#if domain.status === 'created'}
+                        <Layout.Stack direction="row" alignItems="center">
+                            <Badge variant="secondary" content="failed" type="error">
+                                <Icon slot="start" size="s" icon={IconExclamationCircle} />
+                            </Badge>
+                            <Link.Button variant="muted" on:click={() => openRetry(domain)}>
+                                Retry
+                            </Link.Button>
+                        </Layout.Stack>
+                    {:else}
+                        <Badge content="verified" variant="secondary" type="success">
+                            <Icon slot="start" size="s" icon={IconCheckCircle} />
+                        </Badge>
                     {/if}
-                </TableRow>
-            {/each}
-        </TableBody>
-    </TableScroll>
+                </Table.Cell>
+                <Table.Cell column="certificate" {root}>
+                    {#if domain.status === 'unverified'}
+                        <Layout.Stack direction="row" alignItems="center">
+                            <Badge variant="secondary" content="failed" type="error">
+                                <Icon slot="start" size="s" icon={IconExclamationCircle} />
+                            </Badge>
+                            <Link.Button variant="muted" on:click={() => openRetry(domain)}>
+                                Retry
+                            </Link.Button>
+                        </Layout.Stack>
+                    {:else if domain.status === 'verified'}
+                        <Layout.Stack direction="row" alignItems="center">
+                            <Badge content="generated" variant="secondary" type="success">
+                                <Icon slot="start" size="s" icon={IconCheckCircle} />
+                            </Badge>
+                            {#if domain.renewAt}
+                                <span class="u-text-color-gray">
+                                    Auto-renewal: {toLocaleDate(domain.renewAt)}
+                                </span>
+                            {/if}
+                        </Layout.Stack>
+                    {:else}
+                        <Badge content="blocked by verification" variant="secondary" type="warning">
+                            <Icon slot="start" size="s" icon={IconExclamationCircle} />
+                        </Badge>
+                    {/if}
+                </Table.Cell>
+                <Table.Cell column="action" {root}>
+                    <Popover let:toggle placement="bottom-start" padding="none">
+                        <Button text icon ariaLabel="more options" on:click={toggle}>
+                            <Icon icon={IconDotsHorizontal} size="s" />
+                        </Button>
+                        <ActionMenu.Root slot="tooltip">
+                            {#if domain.status !== 'verified'}
+                                <ActionMenu.Item.Button
+                                    leadingIcon={IconRefresh}
+                                    on:click={() => openRetry(domain)}>
+                                    {domain.status === 'unverified'
+                                        ? 'Retry generation'
+                                        : 'Retry verification'}
+                                </ActionMenu.Item.Button>
+                            {/if}
+                            <ActionMenu.Item.Button
+                                leadingIcon={IconTrash}
+                                on:click={() => {
+                                    selectedDomain = domain;
+                                    showDelete = true;
+                                }}>
+                                Delete
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </Popover>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
 {:else}
     <Empty
         single
@@ -193,11 +175,11 @@
 {/if}
 
 <Delete bind:showDelete bind:selectedDomain {dependency} />
-<Modal bind:show={showRetry} headerDivider={false} bind:error={retryError} size="big">
-    <svelte:fragment slot="title">
-        Retry {$domain.status === 'unverified' ? 'certificate generation' : 'verification'}
-    </svelte:fragment>
-    <Retry on:error={(e) => (retryError = e.detail)} />
+<Modal
+    bind:show={showRetry}
+    bind:error={retryError}
+    title={`Retry ${selectedDomain?.status === 'unverified' ? 'certificate generation' : 'verification'}`}>
+    <Retry domain={selectedDomain} on:error={(e) => (retryError = e.detail)} />
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showRetry = false)}>Close</Button>
     </svelte:fragment>
diff --git a/src/lib/pages/domains/wizard/cnameTable.svelte b/src/lib/pages/domains/wizard/cnameTable.svelte
index 09b00cd1f..72bf72543 100644
--- a/src/lib/pages/domains/wizard/cnameTable.svelte
+++ b/src/lib/pages/domains/wizard/cnameTable.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
     import { Copy } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
+    import { Table } from '@appwrite.io/pink-svelte';
     import { domain } from './store';
     import { getProjectEndpoint } from '$lib/helpers/project';
 
@@ -20,27 +12,27 @@
     $: target = new URL(getProjectEndpoint()).hostname;
 </script>
 
-<Table noMargin noStyles style="--p-table-bg-color: var(--transparent);">
-    <TableHeader>
-        <TableCellHead>Type</TableCellHead>
-        <TableCellHead>Name</TableCellHead>
-        <TableCellHead>Value</TableCellHead>
-        <TableCellHead width={50} />
-    </TableHeader>
-    <TableBody>
-        <TableRow>
-            <TableCellText title="Type">CNAME</TableCellText>
-            <TableCellText title="Name">{cnameValue}</TableCellText>
-            <TableCellText title="Value">
-                {target}
-            </TableCellText>
-            <TableCell>
-                <Button text>
-                    <Copy value={target}>
-                        <span class="icon-duplicate" aria-hidden="true" />
-                    </Copy>
-                </Button>
-            </TableCell>
-        </TableRow>
-    </TableBody>
-</Table>
+<Table.Root
+    let:root
+    columns={[{ id: 'type' }, { id: 'name' }, { id: 'value' }, { id: 'action', width: 40 }]}>
+    <svelte:fragment slot="header" let:root>
+        <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+        <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+        <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+        <Table.Header.Cell column="action" {root} />
+    </svelte:fragment>
+    <Table.Row.Base {root}>
+        <Table.Cell column="type" {root}>CNAME</Table.Cell>
+        <Table.Cell column="name" {root}>{cnameValue}</Table.Cell>
+        <Table.Cell column="value" {root}>
+            {target}
+        </Table.Cell>
+        <Table.Cell column="action" {root}>
+            <Button text>
+                <Copy value={target}>
+                    <span class="icon-duplicate" aria-hidden="true"></span>
+                </Copy>
+            </Button>
+        </Table.Cell>
+    </Table.Row.Base>
+</Table.Root>
diff --git a/src/lib/pages/domains/wizard/retry.svelte b/src/lib/pages/domains/wizard/retry.svelte
index 3c8c9f765..b5461ecf6 100644
--- a/src/lib/pages/domains/wizard/retry.svelte
+++ b/src/lib/pages/domains/wizard/retry.svelte
@@ -1,31 +1,34 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
-    import { domain } from './store';
     import CnameTable from './cnameTable.svelte';
     import { createEventDispatcher } from 'svelte';
-    import { Box, Code, Trim } from '$lib/components';
+    import { Code } from '$lib/components';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
+    import type { Models } from '@appwrite.io/console';
+    import { Card, Icon, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
+    import { IconExclamationCircle } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     let retrying = false;
     export let showTitle = true;
+    export let domain: Models.ProxyRule;
 
     const dispatch = createEventDispatcher();
 
     async function retry() {
         try {
             retrying = true;
-            $domain = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .proxy.updateRuleVerification($domain.$id);
+            domain = await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.updateRuleVerification(domain.$id);
             invalidate(Dependencies.FUNCTION_DOMAINS);
             addNotification({
                 message:
-                    $domain.status === 'unverified'
+                    domain.status === 'unverified'
                         ? 'Domain certificate has been generated successfully'
                         : 'Domain has been verified successfully',
                 type: 'success'
@@ -40,60 +43,50 @@
     }
 </script>
 
-{#if showTitle}
-    <Trim alternativeTrim><b>{$domain.domain}</b></Trim>
-{/if}
-
-{#if $domain.status === 'created'}
-    <Box radius="small">
-        <div class="u-flex u-gap-8 u-cross-center">
-            <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
-            <p class="u-stretch">Verification failed</p>
-            <Button secondary on:click={retry} disabled={retrying}>
-                {#if retrying}
-                    <div class="loader u-text-color-gray" />
-                {:else}
-                    Retry
-                {/if}
-            </Button>
-        </div>
-        <p class="text u-margin-block-start-24">
-            In order to continue, set the following record on your DNS provider. DNS records may
-            take up to 48 hours to propagate. Please retry over the next 48 hours, but if
-            verification still fails, please <a
-                href="https://appwrite.io/discord"
-                target="_blank"
-                rel="noopener noreferrer">contact support</a
-            >.
-        </p>
-        <div class="u-margin-block-start-24">
-            <CnameTable />
-        </div>
-    </Box>
-{:else if $domain.status === 'unverified'}
-    <Box radius="small">
-        <div class="u-flex u-gap-8 u-cross-center">
-            <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
-            <p class="u-stretch">Generation failed</p>
-            <Button secondary on:click={retry} disabled={retrying}>
-                {#if retrying}
-                    <div class="loader u-text-color-gray" />
-                {:else}
-                    Retry
-                {/if}
-            </Button>
-        </div>
-        <p class="text u-margin-block-start-24">
-            In order to continue, set the following record on your DNS provider. DNS records may
-            take up to 48 hours to propagate. Please retry over the next 48 hours, but if
-            verification still fails, please <a
-                href="https://appwrite.io/discord"
-                target="_blank"
-                rel="noopener noreferrer">contact support</a
-            >.
-        </p>
-        {#if $domain?.logs}
-            <Code language="sh" withCopy code={$domain.logs} />
-        {/if}
-    </Box>
+{#if domain.status === 'created'}
+    <Card.Base variant="secondary" padding="s">
+        <Layout.Stack gap="s" direction="row" justifyContent="space-between" wrap="wrap">
+            {#if showTitle}
+                <b>{domain.domain}</b>
+            {/if}
+            <Layout.Stack direction="row" gap="s" inline alignItems="center">
+                <Icon color="--web-red-500" size="s" icon={IconExclamationCircle} />
+                <Typography.Text>Verification failed</Typography.Text>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Card.Base>
+    <Typography.Text>
+        In order to continue, set the following record on your DNS provider. DNS records may take up
+        to 48 hours to propagate. Please retry over the next 48 hours, but if verification still
+        fails, please <Link.Anchor
+            href="https://appwrite.io/discord"
+            target="_blank"
+            rel="noopener noreferrer">contact support</Link.Anchor
+        >.
+    </Typography.Text>
+    <CnameTable />
+{:else if domain.status === 'unverified'}
+    <div class="u-flex u-gap-8 u-cross-center">
+        <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true"></span>
+        <p class="u-stretch">Generation failed</p>
+        <Button secondary on:click={retry} disabled={retrying}>
+            {#if retrying}
+                <div class="loader u-text-color-gray"></div>
+            {:else}
+                Retry
+            {/if}
+        </Button>
+    </div>
+    <Typography.Text>
+        In order to continue, set the following record on your DNS provider. DNS records may take up
+        to 48 hours to propagate. Please retry over the next 48 hours, but if verification still
+        fails, please <Link.Anchor
+            href="https://appwrite.io/discord"
+            target="_blank"
+            rel="noopener noreferrer">contact support</Link.Anchor
+        >.
+    </Typography.Text>
+    {#if domain?.logs}
+        <Code language="sh" withCopy code={domain.logs} />
+    {/if}
 {/if}
diff --git a/src/lib/pages/domains/wizard/step1.svelte b/src/lib/pages/domains/wizard/step1.svelte
index 1cccf7381..3f4e01f74 100644
--- a/src/lib/pages/domains/wizard/step1.svelte
+++ b/src/lib/pages/domains/wizard/step1.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert } from '$lib/components';
-    import { Button, FormList, InputDomain } from '$lib/elements/forms';
+    import { Button, InputDomain } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { isSelfHosted } from '$lib/system';
     import { func } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
-    import { domain, typeStore } from './store';
+    import { domain } from './store';
     import { consoleVariables } from '$routes/(console)/store';
-    import { ResourceType } from '@appwrite.io/console';
-    import { page } from '$app/stores';
+    import { Alert } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     let error = null;
     const isDomainsEnabled = $consoleVariables?._APP_DOMAIN_ENABLED === true;
@@ -18,17 +17,13 @@
         try {
             if ($domain.$id) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .proxy.deleteRule($domain.$id);
             }
 
             $domain = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .proxy.createRule(
-                    $domain.domain,
-                    $typeStore,
-                    $typeStore === ResourceType.Function ? $func.$id : undefined
-                );
+                .forProject(page.params.region, page.params.project)
+                .proxy.createFunctionRule($domain.domain, $func.$id);
 
             trackEvent(Submit.DomainCreate);
         } catch (e) {
@@ -50,15 +45,14 @@
         >.
     </svelte:fragment>
 
-    <FormList>
-        <InputDomain
-            id="domain"
-            label="Domain"
-            placeholder="appwrite.example.com"
-            autocomplete={false}
-            required
-            bind:value={$domain.domain} />
-    </FormList>
+    <InputDomain
+        id="domain"
+        label="Domain"
+        placeholder="appwrite.example.com"
+        autocomplete={false}
+        required
+        bind:value={$domain.domain} />
+
     {#if error}
         <div class="common-section">
             <p>
@@ -73,13 +67,10 @@
         </div>
     {/if}
     {#if isSelfHosted && !isDomainsEnabled}
-        <Alert class="common-section" type="info">
-            <svelte:fragment slot="title">
-                Adding a domain to a self-hosted instance
-            </svelte:fragment>
-            To add a domain to a locally hosted Appwrite project, you must first configure your server
-            domain.
-            <svelte:fragment slot="buttons">
+        <Alert.Inline status="info" title="Adding a domain to a self-hosted instance">
+            To add a domain to a locally hosted Appwrite project, you must first configure your
+            server domain.
+            <svelte:fragment slot="actions">
                 <Button
                     href="https://appwrite.io/docs/advanced/self-hosting/functions#git"
                     external
@@ -87,6 +78,6 @@
                     Learn more
                 </Button>
             </svelte:fragment>
-        </Alert>
+        </Alert.Inline>
     {/if}
 </WizardStep>
diff --git a/src/lib/pages/domains/wizard/step2.svelte b/src/lib/pages/domains/wizard/step2.svelte
index b6b66d208..2d1b20fcc 100644
--- a/src/lib/pages/domains/wizard/step2.svelte
+++ b/src/lib/pages/domains/wizard/step2.svelte
@@ -4,6 +4,7 @@
     import Retry from './retry.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { Box } from '$lib/components';
+    import type { Models } from '@appwrite.io/console';
 
     function onRetryError(event: CustomEvent<string>) {
         addNotification({
@@ -11,6 +12,11 @@
             type: 'error'
         });
     }
+
+    // TODO: @arman, please confirm that its no longer partial at this point.
+    function domainAsProxyRule(): Models.ProxyRule {
+        return $domain as Models.ProxyRule;
+    }
 </script>
 
 <WizardStep>
@@ -18,10 +24,10 @@
 
     <div class="boxes-wrapper u-margin-block-start-24">
         {#if $domain.status === 'created'}
-            <Retry on:error={onRetryError} showTitle={false} />
+            <Retry domain={domainAsProxyRule()} on:error={onRetryError} showTitle={false} />
         {:else}
             <div class="u-flex u-gap-8 u-cross-center">
-                <span class="icon-check u-color-text-success" aria-hidden="true" />
+                <span class="icon-check u-color-text-success" aria-hidden="true"></span>
                 <p class="u-stretch">Domain verified</p>
             </div>
         {/if}
@@ -30,13 +36,14 @@
                 {#if $domain.status === 'verifying'}
                     <div
                         class="loader"
-                        style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
+                        style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem">
+                    </div>
                     <p class="u-stretch">Generating certificate</p>
                 {:else if $domain.status === 'verified'}
-                    <span class="icon-check u-color-text-success" aria-hidden="true" />
+                    <span class="icon-check u-color-text-success" aria-hidden="true"></span>
                     <p class="u-stretch">Certificate generated</p>
                 {:else}
-                    <span class="icon-clock u-text-color-gray" aria-hidden="true" />
+                    <span class="icon-clock u-text-color-gray" aria-hidden="true"></span>
                     <p class="u-stretch">
                         Certificate generation will begin after domain verification
                     </p>
diff --git a/src/lib/pages/domains/wizard/store.ts b/src/lib/pages/domains/wizard/store.ts
index b6c6d486b..96e3caff2 100644
--- a/src/lib/pages/domains/wizard/store.ts
+++ b/src/lib/pages/domains/wizard/store.ts
@@ -1,7 +1,6 @@
-import type { Models, ResourceType } from '@appwrite.io/console';
+import type { Models } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
 import type { Dependencies } from '$lib/constants';
 
 export const domain = writable<Partial<Models.ProxyRule>>({ $id: '', domain: '' });
-export const typeStore = writable<ResourceType>();
 export const dependencyStore = writable<Dependencies>();
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index c254b6725..5ce84abba 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -99,6 +99,7 @@ export type Coupon = {
     status: string; // 'active' | 'disabled' | 'expired'
     validity: number;
     campaign?: string;
+    onlyNewOrgs?: boolean;
 };
 
 export type Credit = {
diff --git a/src/lib/sdk/domains.ts b/src/lib/sdk/domains.ts
new file mode 100644
index 000000000..889093438
--- /dev/null
+++ b/src/lib/sdk/domains.ts
@@ -0,0 +1,1981 @@
+import { AppwriteException, Client, type Payload } from '@appwrite.io/console';
+
+/**
+ * Domain
+ */
+export type Domain = {
+    /**
+     * Domain ID.
+     */
+    $id: string;
+    /**
+     * Domain creation time in ISO 8601 format.
+     */
+    $createdAt: string;
+    /**
+     * Domain update date in ISO 8601 format.
+     */
+    $updatedAt: string;
+    /**
+     * Domain name.
+     */
+    domain: string;
+    /**
+     * Domain registrar (e.g. &quot;appwrite&quot; or &quot;third_party&quot;).
+     */
+    registrar: string;
+    /**
+     * Nameservers setting. &quot;Appwrite&quot; or empty string.
+     */
+    nameservers: string;
+    /**
+     * Domain expiry date in ISO 8601 format.
+     */
+    expiry: string;
+    /**
+     * Domain renewal date in ISO 8601 format.
+     */
+    renewal: string;
+    /**
+     * If set to true, the domain will automatically renew.
+     */
+    autoRenewal: boolean;
+    /**
+     * Renewal price (in USD).
+     */
+    renewalPrice: number;
+    /**
+     * Team ID.
+     */
+    teamId: string;
+};
+/**
+ * DNSRecord
+ */
+export type DnsRecord = {
+    /**
+     * DNS Record ID.
+     */
+    $id: string;
+    /**
+     * DNS Record creation time in ISO 8601 format.
+     */
+    $createdAt: string;
+    /**
+     * DNS Record update date in ISO 8601 format.
+     */
+    $updatedAt: string;
+    /**
+     * DNS record type (e.g. A, CNAME, MX).
+     */
+    type: string;
+    /**
+     * Record name or subdomain.
+     */
+    name: string;
+    /**
+     * Value of the record (IP address, domain, etc.).
+     */
+    value: string;
+    /**
+     * Time to live (in seconds).
+     */
+    ttl: number;
+    /**
+     * Record priority (commonly used for MX).
+     */
+    priority: number;
+    /**
+     * Whether this record is locked (read-only).
+     */
+    lock: boolean;
+    /**
+     * Record weight (used for SRV records).
+     */
+    weight: number;
+    /**
+     * Target port (used for SRV records).
+     */
+    port: number;
+    /**
+     * Comment for the DNS record.
+     */
+    comment: string;
+};
+
+export type DomainsList = {
+    /**
+     * Total number of domains documents that matched your query.
+     */
+    total: number;
+    /**
+     * List of domains.
+     */
+    domains: Domain[];
+};
+/**
+ * DNS records list
+ */
+export type DnsRecordsList = {
+    /**
+     * Total number of dnsRecords documents that matched your query.
+     */
+    total: number;
+    /**
+     * List of dnsRecords.
+     */
+    dnsRecords: DnsRecord[];
+};
+
+export class Domains {
+    client: Client;
+
+    constructor(client: Client) {
+        this.client = client;
+    }
+
+    /**
+     * List domains
+     *
+     *
+     * @param {string[]} queries
+     * @param {string} search
+     * @throws {AppwriteException}
+     * @returns {Promise<DomainsList>}
+     */
+    async list(queries?: string[], search?: string): Promise<DomainsList> {
+        const apiPath = '/domains';
+        const payload: Payload = {};
+        if (typeof queries !== 'undefined') {
+            payload['queries'] = queries;
+        }
+        if (typeof search !== 'undefined') {
+            payload['search'] = search;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new domain.
+     *
+     *
+     * @param {string} teamId
+     * @param {string} domain
+     * @throws {AppwriteException}
+     * @returns {Promise<Domain>}
+     */
+    async create(teamId: string, domain: string): Promise<Domain> {
+        if (typeof teamId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "teamId"');
+        }
+        if (typeof domain === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domain"');
+        }
+        const apiPath = '/domains';
+        const payload: Payload = {};
+        if (typeof teamId !== 'undefined') {
+            payload['teamId'] = teamId;
+        }
+        if (typeof domain !== 'undefined') {
+            payload['domain'] = domain;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Get a single domain by its unique ID.
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<Domain>}
+     */
+    async get(domainId: string): Promise<Domain> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Delete a domain by its unique ID.
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<{}>}
+     */
+    async delete(domainId: string): Promise<{}> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('delete', uri, apiHeaders, payload);
+    }
+    /**
+     * Verify which NS records are used and update the domain accordingly.
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<Domain>}
+     */
+    async updateNameservers(domainId: string): Promise<Domain> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/nameservers'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('patch', uri, apiHeaders, payload);
+    }
+    /**
+     * Get Google Workspace preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async getPresetGoogleWorkspace(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/google-workspace'.replace(
+            '{domainId}',
+            domainId
+        );
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create Google Workspace preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async createPresetGoogleWorkspace(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/google-workspace'.replace(
+            '{domainId}',
+            domainId
+        );
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Get iCloud preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async getPresetICloud(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/icloud'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create iCloud preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async createPresetICloud(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/icloud'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Get Mailgun preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async getPresetMailgun(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/mailgun'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create Mailgun preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async createPresetMailgun(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/mailgun'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Get Outlook preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async getPresetOutlook(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/outlook'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create Outlook preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async createPresetOutlook(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/outlook'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Get ProtonMail preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async getPresetProtonMail(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/proton-mail'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create ProtonMail preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async createPresetProtonMail(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/proton-mail'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Get Zoho preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async getPresetZoho(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/zoho'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create Zoho Mail preset (Records)
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async createPresetZoho(domainId: string): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/presets/zoho'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * List DNS records for a given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string[]} queries
+     * @param {string} search
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecordsList>}
+     */
+    async listRecords(
+        domainId: string,
+        queries?: string[],
+        search?: string
+    ): Promise<DnsRecordsList> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/records'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof queries !== 'undefined') {
+            payload['queries'] = queries;
+        }
+        if (typeof search !== 'undefined') {
+            payload['search'] = search;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new A record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordA(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/a'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing A record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordA(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/a/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new AAAA record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordAAAA(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/aaaa'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing AAAA record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordAAAA(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/aaaa/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new ALIAS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordAlias(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/alias'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing ALIAS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordAlias(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/alias/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new CAA record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordCAA(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/caa'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing CAA record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordCAA(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/caa/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new CNAME record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordCNAME(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/cname'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing CNAME record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordCNAME(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/cname/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new HTTPS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordHTTPS(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/https'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing HTTPS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordHTTPS(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/https/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new MX record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {number} priority
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordMX(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        priority: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        if (typeof priority === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "priority"');
+        }
+        const apiPath = '/domains/{domainId}/records/mx'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof priority !== 'undefined') {
+            payload['priority'] = priority;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing MX record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {number} priority
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordMX(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        priority: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        if (typeof priority === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "priority"');
+        }
+        const apiPath = '/domains/{domainId}/records/mx/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof priority !== 'undefined') {
+            payload['priority'] = priority;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new NS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordNS(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/ns'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing NS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordNS(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/ns/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new SRV record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {number} priority
+     * @param {number} weight
+     * @param {number} port
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordSRV(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        priority: number,
+        weight: number,
+        port: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        if (typeof priority === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "priority"');
+        }
+        if (typeof weight === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "weight"');
+        }
+        if (typeof port === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "port"');
+        }
+        const apiPath = '/domains/{domainId}/records/srv'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof priority !== 'undefined') {
+            payload['priority'] = priority;
+        }
+        if (typeof weight !== 'undefined') {
+            payload['weight'] = weight;
+        }
+        if (typeof port !== 'undefined') {
+            payload['port'] = port;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing SRV record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {number} priority
+     * @param {number} weight
+     * @param {number} port
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordSRV(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        priority: number,
+        weight: number,
+        port: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        if (typeof priority === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "priority"');
+        }
+        if (typeof weight === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "weight"');
+        }
+        if (typeof port === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "port"');
+        }
+        const apiPath = '/domains/{domainId}/records/srv/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof priority !== 'undefined') {
+            payload['priority'] = priority;
+        }
+        if (typeof weight !== 'undefined') {
+            payload['weight'] = weight;
+        }
+        if (typeof port !== 'undefined') {
+            payload['port'] = port;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Create a new TXT record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async createRecordTXT(
+        domainId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/txt'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('post', uri, apiHeaders, payload);
+    }
+    /**
+     * Update an existing TXT record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @param {string} name
+     * @param {string} value
+     * @param {number} ttl
+     * @param {string} comment
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async updateRecordTXT(
+        domainId: string,
+        recordId: string,
+        name: string,
+        value: string,
+        ttl: number,
+        comment?: string
+    ): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        if (typeof name === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "name"');
+        }
+        if (typeof value === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "value"');
+        }
+        if (typeof ttl === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "ttl"');
+        }
+        const apiPath = '/domains/{domainId}/records/txt/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        if (typeof name !== 'undefined') {
+            payload['name'] = name;
+        }
+        if (typeof value !== 'undefined') {
+            payload['value'] = value;
+        }
+        if (typeof ttl !== 'undefined') {
+            payload['ttl'] = ttl;
+        }
+        if (typeof comment !== 'undefined') {
+            payload['comment'] = comment;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+    /**
+     * Get a single DNS record for a given domain by record ID.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @throws {AppwriteException}
+     * @returns {Promise<DnsRecord>}
+     */
+    async getRecord(domainId: string, recordId: string): Promise<DnsRecord> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        const apiPath = '/domains/{domainId}/records/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Delete a DNS record for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} recordId
+     * @throws {AppwriteException}
+     * @returns {Promise<{}>}
+     */
+    async deleteRecord(domainId: string, recordId: string): Promise<{}> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof recordId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "recordId"');
+        }
+        const apiPath = '/domains/{domainId}/records/{recordId}'
+            .replace('{domainId}', domainId)
+            .replace('{recordId}', recordId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('delete', uri, apiHeaders, payload);
+    }
+    /**
+     * Update domain team.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} teamId
+     * @throws {AppwriteException}
+     * @returns {Promise<Domain>}
+     */
+    async updateTeam(domainId: string, teamId: string): Promise<Domain> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof teamId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "teamId"');
+        }
+        const apiPath = '/domains/{domainId}/team'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof teamId !== 'undefined') {
+            payload['teamId'] = teamId;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('patch', uri, apiHeaders, payload);
+    }
+    /**
+     * Retrieve the DNS zone file for the given domain.
+     *
+     *
+     * @param {string} domainId
+     * @throws {AppwriteException}
+     * @returns {Promise<{}>}
+     */
+    async getZone(domainId: string): Promise<{}> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        const apiPath = '/domains/{domainId}/zone'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('get', uri, apiHeaders, payload);
+    }
+    /**
+     * Update the DNS zone for the given domain using the provided zone file content. All parsed records are imported and then the main domain document is returned.
+     *
+     *
+     * @param {string} domainId
+     * @param {string} content
+     * @throws {AppwriteException}
+     * @returns {Promise<Domain>}
+     */
+    async updateZone(domainId: string, content: string): Promise<Domain> {
+        if (typeof domainId === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "domainId"');
+        }
+        if (typeof content === 'undefined') {
+            throw new AppwriteException('Missing required parameter: "content"');
+        }
+        const apiPath = '/domains/{domainId}/zone'.replace('{domainId}', domainId);
+        const payload: Payload = {};
+        if (typeof content !== 'undefined') {
+            payload['content'] = content;
+        }
+        const uri = new URL(this.client.config.endpoint + apiPath);
+
+        const apiHeaders: { [header: string]: string } = {
+            'content-type': 'application/json'
+        };
+
+        payload['project'] = this.client.config.project;
+
+        return await this.client.call('put', uri, apiHeaders, payload);
+    }
+}
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 299adcef3..e9388c8c9 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -1,8 +1,8 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 import { base } from '$app/paths';
+import { Click, trackEvent } from '$lib/actions/analytics';
 import { page } from '$app/stores';
-import { trackEvent } from '$lib/actions/analytics';
 import LimitReached from '$lib/components/billing/alerts/limitReached.svelte';
 import MarkedForDeletion from '$lib/components/billing/alerts/markedForDeletion.svelte';
 import MissingPaymentMethod from '$lib/components/billing/alerts/missingPaymentMethod.svelte';
@@ -140,6 +140,7 @@ export type PlanServices =
     | 'users'
     | 'usersAddon'
     | 'webhooks'
+    | 'sites'
     | 'authPhone'
     | 'imageTransformations';
 
@@ -361,7 +362,7 @@ export async function checkForUsageLimit(org: Organization) {
                     name: 'Upgrade plan',
                     method: () => {
                         goto(`${base}/organization-${org.$id}/change-plan`);
-                        trackEvent('click_organization_upgrade', {
+                        trackEvent(Click.OrganizationClickUpgrade, {
                             from: 'button',
                             source: 'limit_reached_notification'
                         });
diff --git a/src/lib/stores/domains.ts b/src/lib/stores/domains.ts
new file mode 100644
index 000000000..ea339f83d
--- /dev/null
+++ b/src/lib/stores/domains.ts
@@ -0,0 +1,34 @@
+export const statusCodeOptions = [
+    {
+        label: '301 Moved permanently',
+        value: 301
+    },
+    {
+        label: '302 Found',
+        value: 302
+    },
+    {
+        label: '303 See other',
+        value: 303
+    },
+    {
+        label: '307 Temporary redirect',
+        value: 307
+    },
+    {
+        label: '308 Permanent redirect',
+        value: 308
+    }
+];
+
+export type RecordType =
+    | 'A'
+    | 'AAAA'
+    | 'CNAME'
+    | 'MX'
+    | 'TXT'
+    | 'NS'
+    | 'SRV'
+    | 'CAA'
+    | 'HTTPS'
+    | 'ALIAS';
diff --git a/src/lib/stores/feedback.ts b/src/lib/stores/feedback.ts
index e0254e0bc..30dc99687 100644
--- a/src/lib/stores/feedback.ts
+++ b/src/lib/stores/feedback.ts
@@ -1,9 +1,10 @@
 import { browser } from '$app/environment';
 import { VARS } from '$lib/system';
 import { get, writable } from 'svelte/store';
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 import FeedbackGeneral from '$lib/components/feedback/feedbackGeneral.svelte';
 import FeedbackNps from '$lib/components/feedback/feedbackNPS.svelte';
+import { Submit, trackEvent } from '$lib/actions/analytics';
 
 export type Feedback = {
     elapsed: number;
@@ -21,22 +22,19 @@ export type FeedbackData = {
 
 export type FeedbackOption = {
     type: Feedback['type'];
-    title: string;
-    desc: string;
-    component: typeof SvelteComponent<unknown>;
+    desc?: string;
+    component: Component;
 };
 
 export const feedbackOptions: FeedbackOption[] = [
     {
         type: 'general',
-        title: 'Help us improve Appwrite',
         desc: 'Appwrite evolves with your input. Share your thoughts and help us improve Appwrite.',
         component: FeedbackGeneral
     },
     {
         type: 'nps',
-        title: 'Help us improve Appwrite',
-        desc: 'Appwrite evolves with your input. Share your thoughts and help us improve Appwrite. If you would like to be contacted regarding your feedback, please share your contact details below.',
+        desc: 'How likely are you to recommend Appwrite to a friend or colleague?',
         component: FeedbackNps
     }
 ];
@@ -122,6 +120,7 @@ function createFeedbackStore() {
             userId?: string
         ) => {
             if (!VARS.GROWTH_ENDPOINT) return;
+            trackEvent(Submit.FeedbackSubmit);
 
             const customFields: Array<{ id: string; value: string | number }> = [
                 { id: '47364', value: currentPage }
diff --git a/src/lib/stores/git.ts b/src/lib/stores/git.ts
new file mode 100644
index 000000000..c5eeec8d5
--- /dev/null
+++ b/src/lib/stores/git.ts
@@ -0,0 +1,41 @@
+import { page } from '$app/state';
+import { sdk } from './sdk';
+
+export function connectGitHub(callbackState: Record<string, string> = null) {
+    const redirect = new URL(page.url);
+    if (callbackState) {
+        Object.keys(callbackState).forEach((key) => {
+            redirect.searchParams.append(key, callbackState[key]);
+        });
+    }
+    const target = new URL(
+        `${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}/vcs/github/authorize`
+    );
+    target.searchParams.set('project', page.params.project);
+    target.searchParams.set('success', redirect.toString());
+    target.searchParams.set('failure', redirect.toString());
+    target.searchParams.set('mode', 'admin');
+    return target;
+}
+
+export function deploymentStatusConverter(status: string) {
+    // Status component possible values - status: 'waiting' | 'ready' | 'processing' | 'pending' | 'failed' | 'complete';
+    switch (status) {
+        case 'ready':
+            return 'ready';
+        case 'processing':
+            return 'processing';
+        case 'building':
+            return 'pending';
+        case 'waiting':
+            return 'waiting';
+        case 'queued':
+            return 'waiting';
+        case 'cancelled':
+            return 'processing';
+        case 'failed':
+            return 'failed';
+        default:
+            return 'processing';
+    }
+}
diff --git a/src/lib/stores/headerAlert.ts b/src/lib/stores/headerAlert.ts
index ed8ecfeca..6accad1f7 100644
--- a/src/lib/stores/headerAlert.ts
+++ b/src/lib/stores/headerAlert.ts
@@ -1,10 +1,10 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 import { writable } from 'svelte/store';
 
 export type HeaderAlert = {
     id: string;
     show: boolean;
-    component: typeof SvelteComponent<unknown>;
+    component: Component;
     importance: number;
 };
 
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 7a9a3ef13..317489d73 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 
 export type Tab = {
     href: string;
@@ -14,12 +14,12 @@ export type Breadcrumb = {
 export type View = 'list' | 'grid';
 
 export type updateLayoutArguments = {
-    header?: typeof SvelteComponent<unknown>;
-    breadcrumb?: typeof SvelteComponent<unknown>;
+    header?: Component;
+    breadcrumb?: Component;
 };
 
-export const header = writable<typeof SvelteComponent<unknown>>();
-export const breadcrumb = writable<typeof SvelteComponent<unknown>>();
+export const header = writable<Component>();
+export const breadcrumb = writable<Component>();
 
 export function updateLayout(args: updateLayoutArguments) {
     header.set(args.header ?? null);
diff --git a/src/lib/stores/logs.ts b/src/lib/stores/logs.ts
deleted file mode 100644
index 825bd79ce..000000000
--- a/src/lib/stores/logs.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Models } from '@appwrite.io/console';
-import { writable } from 'svelte/store';
-
-export const log = writable<{
-    show: boolean;
-    func: Models.Function;
-    data: Models.Execution;
-}>({
-    show: false,
-    func: null,
-    data: null
-});
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 46487d932..47d426e9f 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,4 +1,4 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 import Apple from '$routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte';
 import Auth0 from '$routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte';
 import Authentik from '$routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte';
@@ -13,7 +13,7 @@ export type Provider = {
     name: string;
     icon: string;
     docs?: string;
-    component: typeof SvelteComponent<unknown>;
+    component: Component;
 };
 
 export const oAuthProviders: Record<string, Provider> = {
diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
index b8ccdfd1b..a59cc3724 100644
--- a/src/lib/stores/pagination.ts
+++ b/src/lib/stores/pagination.ts
@@ -1,16 +1,16 @@
 import { afterNavigate, goto } from '$app/navigation';
-import { page } from '$app/stores';
-import { get, writable } from 'svelte/store';
+import { page } from '$app/state';
+import { writable } from 'svelte/store';
 
 export function createPersistentPagination(limit: number) {
-    const url = get(page).url;
+    const url = page.url;
     const current = +(url.searchParams.get('page') ?? 1);
     const offset = current * limit - limit;
     const { subscribe, set } = writable<number>(offset < 0 ? 0 : offset);
 
     let keepHistory = false;
     const apply = (n: number) => {
-        const { pathname, searchParams, href } = get(page).url;
+        const { pathname, searchParams, href } = page.url;
         const newPage = n / limit + 1;
 
         if (newPage > 1) {
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 11c432355..4467efdf7 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -5,6 +5,7 @@ import { get, writable } from 'svelte/store';
 import { sdk } from './sdk';
 import type { Models } from '@appwrite.io/console';
 import { organization } from './organization';
+import { page } from '$app/state';
 
 type Preferences = {
     limit?: number;
@@ -17,14 +18,12 @@ type TeamPreferences = {
 };
 
 type PreferencesStore = {
-    [key: string]: {
-        [key: string]: Preferences;
-        collections?: {
-            [key: string]: Preferences['columns'];
-        };
-        displayNames?: {
-            [key: string]: TeamPreferences['names'];
-        };
+    [key: string]: Preferences;
+    collections?: {
+        [key: string]: Preferences['columns'];
+    };
+    displayNames?: {
+        [key: string]: TeamPreferences['names'];
     };
 } & { hideAiDisclaimer?: boolean };
 
@@ -47,62 +46,70 @@ function createPreferences() {
         subscribe,
         set,
         update,
-        get: (projectId: string, route: Page['route']): Preferences =>
-            preferences[projectId]?.[route.id] ?? {
-                limit: null,
-                view: null,
-                columns: null
-            },
+        get: (route?: Page['route']): Preferences => {
+            const parsedRoute = route ?? page.route;
+            return (
+                preferences?.[parsedRoute.id] ?? {
+                    limit: null,
+                    view: null,
+                    columns: null
+                }
+            );
+        },
 
-        getCustomCollectionColumns: (
-            projectId: string,
-            collectionId: string
-        ): Preferences['columns'] => preferences[projectId]?.collections?.[collectionId] ?? [],
-        setLimit: (projectId: string, route: Page['route'], limit: Preferences['limit']) =>
+        getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => {
+            return preferences?.collections?.[collectionId] ?? [];
+        },
+        setLimit: (limit: Preferences['limit']) =>
             update((n) => {
-                if (!n[projectId]?.[route.id]) {
-                    n[projectId] ??= {};
-                    n[projectId][route.id] ??= {};
+                const path = page.route.id;
+
+                if (!n?.[path]) {
+                    n ??= {};
+                    n[path] ??= {};
                 }
 
-                n[projectId][route.id].limit = limit;
+                n[path].limit = limit;
 
                 return n;
             }),
-        setView: (projectId: string, route: Page['route'], view: Preferences['view']) =>
+        setView: (view: Preferences['view']) =>
             update((n) => {
-                if (!n[projectId]?.[route.id]) {
-                    n[projectId] ??= {};
-                    n[projectId][route.id] ??= {};
+                const path = page.route.id;
+
+                if (!n?.[path]) {
+                    n ??= {};
+                    n[path] ??= {};
                 }
 
-                n[projectId][route.id].view = view;
+                n[path].view = view;
 
                 return n;
             }),
-        setColumns: (projectId: string, route: Page['route'], columns: Preferences['columns']) =>
+        setColumns: (columns: Preferences['columns']) =>
             update((n) => {
-                if (!n[projectId]?.[route.id]) {
-                    n[projectId] ??= {};
-                    n[projectId][route.id] ??= {};
+                const path = page.route.id;
+
+                if (!n?.[path]) {
+                    n ??= {};
+                    n[path] ??= {};
                 }
 
-                n[projectId][route.id].columns = columns;
+                n[path].columns = columns;
 
                 return n;
             }),
-        setCustomCollectionColumns: (
-            projectId: string,
-            route: Page['route'],
-            columns: Preferences['columns']
-        ) =>
+        setCustomCollectionColumns: (columns: Preferences['columns']) =>
             update((n) => {
-                if (!n[projectId]?.collections?.[route.id]) {
-                    n[projectId] ??= {};
-                    n[projectId].collections ??= {};
+                const current = page;
+
+                const collection = current.params.collection;
+                if (!n?.collections?.[collection]) {
+                    n ??= {};
+                    n.collections ??= {};
                 }
 
-                n[projectId].collections[route.id] = columns;
+                n.collections[collection] = columns;
 
                 return n;
             }),
@@ -116,22 +123,19 @@ function createPreferences() {
             return teamPrefs;
         },
         getDisplayNames: () => {
-            const id = get(organization)?.$id;
-            if (!id) return {};
-
-            return preferences?.[id]?.displayNames ?? {};
+            return preferences?.displayNames ?? {};
         },
         setDisplayNames: async (collectionId: string, names: TeamPreferences['names']) => {
             const id = get(organization).$id;
             let teamPrefs: Models.Preferences;
             update((n) => {
-                if (!n[id]?.displayNames) {
-                    n[id] ??= {};
-                    n[id].displayNames ??= {};
+                if (!n?.displayNames) {
+                    n ??= {};
+                    n.displayNames ??= {};
                 }
 
-                teamPrefs = n[id];
-                n[id].displayNames[collectionId] = names;
+                teamPrefs = n;
+                n.displayNames[collectionId] = names;
 
                 return n;
             });
diff --git a/src/lib/stores/roles.ts b/src/lib/stores/roles.ts
index b7b79f500..449424f7e 100644
--- a/src/lib/stores/roles.ts
+++ b/src/lib/stores/roles.ts
@@ -22,6 +22,9 @@ export const canWriteTeams = derived(scopes, ($scopes) => $scopes.includes('team
 export const canWriteCollections = derived(scopes, ($scopes) =>
     $scopes.includes('collections.write')
 );
+export const canWriteSites = derived(scopes, ($scopes) => $scopes.includes('sites.write'));
+export const canWriteDomains = derived(scopes, ($scopes) => $scopes.includes('domains.write')); //TODO: check if correct
+
 export const canWriteDocuments = derived(scopes, ($scopes) => $scopes.includes('documents.write'));
 export const canWriteExecutions = derived(scopes, ($scopes) =>
     $scopes.includes('executions.write')
@@ -46,3 +49,5 @@ export const canSeeFunctions = derived(scopes, ($scopes) => $scopes.includes('fu
 export const canSeeTeams = derived(scopes, ($scopes) => $scopes.includes('teams.read'));
 export const canSeeBuckets = derived(scopes, ($scopes) => $scopes.includes('buckets.read'));
 export const canSeeMessages = derived(scopes, ($scopes) => $scopes.includes('messages.read'));
+export const canSeeSites = derived(scopes, ($scopes) => $scopes.includes('sites.read'));
+export const canSeeDomains = derived(scopes, ($scopes) => $scopes.includes('domains.read')); //TODO: check if correct
diff --git a/src/lib/stores/runtimes.ts b/src/lib/stores/runtimes.ts
index b5529f5a3..c42f8b1f7 100644
--- a/src/lib/stores/runtimes.ts
+++ b/src/lib/stores/runtimes.ts
@@ -1,17 +1,24 @@
-import { page } from '$app/stores';
-import type { Models } from '@appwrite.io/console';
-import { derived } from 'svelte/store';
-
-export const runtimesList = derived(
-    page,
-    async ($page) => (await $page.data.runtimesList) as Models.RuntimeList
-);
-
-export const baseRuntimesList = derived(runtimesList, async ($runtimesList) => {
-    const baseRuntimes = new Map<string, Models.Runtime>();
-    for (const runtime of (await $runtimesList).runtimes) {
-        const runtimeBase = runtime.name.split('-')[0];
-        baseRuntimes.set(runtimeBase, runtime);
+export function getIconFromRuntime(runtime: string) {
+    switch (true) {
+        case runtime.includes('node'):
+            return 'node';
+        case runtime.includes('php'):
+            return 'php';
+        case runtime.includes('ruby'):
+            return 'ruby';
+        case runtime.includes('python'):
+            return 'python';
+        case runtime.includes('dart'):
+            return 'dart';
+        case runtime.includes('bun'):
+            return 'bun';
+        case runtime.includes('go'):
+            return 'go';
+        case runtime.includes('deno'):
+            return 'deno';
+        case runtime.includes('flutter'):
+            return 'flutter';
+        default:
+            return undefined;
     }
-    return { runtimes: [...baseRuntimes.values()] };
-});
+}
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index bf463d972..9b46263cf 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -18,10 +18,13 @@ import {
     Storage,
     Teams,
     Users,
-    Vcs
+    Vcs,
+    Sites,
+    Tokens
 } from '@appwrite.io/console';
 import { Billing } from '../sdk/billing';
 import { Backups } from '../sdk/backups';
+import { Domains } from '$lib/sdk/domains';
 import { Sources } from '$lib/sdk/sources';
 import {
     REGION_FRA,
@@ -32,6 +35,7 @@ import {
     SUBDOMAIN_SYD
 } from '$lib/constants';
 import { building } from '$app/environment';
+import { getProjectId } from '$lib/helpers/project';
 
 export function getApiEndpoint(region?: string): string {
     if (building) return '';
@@ -63,13 +67,14 @@ const getSubdomain = (region?: string) => {
 const endpoint = getApiEndpoint();
 
 const clientConsole = new Client();
-const clientRealtime = new Client();
 const clientProject = new Client();
+const clientRealtime = new Client();
 
 if (!building) {
     clientConsole.setEndpoint(endpoint).setProject('console');
     clientRealtime.setEndpoint(endpoint).setProject('console');
     clientProject.setEndpoint(endpoint).setMode('admin');
+    clientRealtime.setEndpoint(endpoint).setProject('console');
 }
 
 const sdkForProject = {
@@ -85,11 +90,13 @@ const sdkForProject = {
     project: new Project(clientProject),
     projectApi: new ProjectApi(clientProject),
     storage: new Storage(clientProject),
+    tokens: new Tokens(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
     vcs: new Vcs(clientProject),
     proxy: new Proxy(clientProject),
-    migrations: new Migrations(clientProject)
+    migrations: new Migrations(clientProject),
+    sites: new Sites(clientProject)
 };
 
 export const realtime = {
@@ -117,7 +124,9 @@ export const sdk = {
         console: new Console(clientConsole),
         assistant: new Assistant(clientConsole),
         billing: new Billing(clientConsole),
-        sources: new Sources(clientConsole)
+        sources: new Sources(clientConsole),
+        sites: new Sites(clientConsole),
+        domains: new Domains(clientConsole)
     },
     forProject(region: string, projectId: string) {
         const endpoint = getApiEndpoint(region);
@@ -131,3 +140,23 @@ export const sdk = {
         return sdkForProject;
     }
 };
+
+export enum RuleType {
+    DEPLOYMENT = 'deployment',
+    API = 'api',
+    REDIRECT = 'redirect'
+}
+
+export enum DeploymentResourceType {
+    FUNCTION = 'function',
+    SITE = 'site'
+}
+
+export enum RuleTrigger {
+    DEPLOYMENT = 'deployment',
+    MANUAL = 'manual'
+}
+
+export const createAdminClient = () => {
+    return new Client().setEndpoint(getApiEndpoint()).setMode('admin').setProject(getProjectId());
+};
diff --git a/src/lib/stores/sidebar.ts b/src/lib/stores/sidebar.ts
new file mode 100644
index 000000000..b6e02bb65
--- /dev/null
+++ b/src/lib/stores/sidebar.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const isSidebarOpen = writable(false);
diff --git a/src/lib/stores/sites.ts b/src/lib/stores/sites.ts
new file mode 100644
index 000000000..fcd321572
--- /dev/null
+++ b/src/lib/stores/sites.ts
@@ -0,0 +1,35 @@
+export function getFrameworkIcon(framework: string) {
+    switch (true) {
+        case framework.toLocaleLowerCase().includes('sveltekit'):
+            return 'svelte';
+        case framework.toLocaleLowerCase().includes('nuxt'):
+            return 'nuxt';
+        case framework.toLocaleLowerCase().includes('vue'):
+            return 'vue';
+        case framework.toLocaleLowerCase().includes('react'):
+            return 'react';
+        case framework.toLocaleLowerCase().includes('angular'):
+            return 'angular';
+        case framework.toLocaleLowerCase().includes('svelte'):
+            return 'svelte';
+        case framework.toLocaleLowerCase().includes('next'):
+            return 'nextjs';
+        case framework.toLocaleLowerCase().includes('astro'):
+            return 'astro';
+        case framework.toLocaleLowerCase().includes('remix'):
+            return 'remix';
+        case framework.toLocaleLowerCase().includes('flutter'):
+            return 'flutter';
+        case framework.toLocaleLowerCase().includes('analog'):
+            return 'analog';
+        case framework.toLocaleLowerCase().includes('vite'):
+            return 'vite';
+        case framework.toLocaleLowerCase().includes('lynx'):
+            return 'lynx';
+        case framework.toLocaleLowerCase().includes('other'):
+            return 'empty';
+
+        default:
+            return 'empty';
+    }
+}
diff --git a/src/lib/stores/specifications.ts b/src/lib/stores/specifications.ts
index 30bc5eabb..85cf239f8 100644
--- a/src/lib/stores/specifications.ts
+++ b/src/lib/stores/specifications.ts
@@ -4,5 +4,5 @@ import { derived } from 'svelte/store';
 
 export const specificationsList = derived(
     page,
-    async ($page) => (await $page.data.specificationsList) as Models.SpecificationList
+    ($page) => $page.data.specificationsList as Models.SpecificationList
 );
diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index c1d6f60b7..86651a3e8 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -1,4 +1,4 @@
-import type { Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
+import type { Appearance, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
 import { sdk } from './sdk';
 import { app } from './app';
 import { get, writable } from 'svelte/store';
@@ -7,6 +7,7 @@ import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 import { addNotification } from './notifications';
 import { organization } from './organization';
 import { base } from '$app/paths';
+import { ThemeLightCloud } from '$themes';
 
 export const stripe = writable<Stripe>();
 let paymentMethod: PaymentMethodData;
@@ -16,7 +17,7 @@ let paymentElement: StripeElement;
 
 export const isStripeInitialized = writable(false);
 
-export async function initializeStripe() {
+export async function initializeStripe(node: HTMLElement) {
     if (!get(stripe)) return;
     isStripeInitialized.set(true);
 
@@ -41,7 +42,7 @@ export async function initializeStripe() {
     // Set up Elements and then create form
     elements = get(stripe).elements(options);
     paymentElement = elements.create('payment');
-    paymentElement.mount('#payment-element');
+    paymentElement.mount(node);
 }
 
 export async function unmountPaymentElement() {
@@ -60,7 +61,7 @@ export async function submitStripeCard(name: string, organizationId?: string) {
             clientSecret = paymentMethod.clientSecret;
         }
 
-        // // Element needs to be submitted before confirming the setup intent
+        // Element needs to be submitted before confirming the setup intent
         await elements.submit();
 
         const baseUrl = 'https://cloud.appwrite.io/console';
@@ -184,17 +185,27 @@ export async function confirmSetup(
     }
 }
 
-const appearanceLight = {
+const appearanceLight: Appearance = {
     variables: {
-        colorPrimary: '#606a7b',
-        colorText: 'rgb(107, 107, 112)',
-        colorBackground: '#FFFFFF',
-        color: '#606a7b',
-        colorDanger: '#df1b41',
-        fontFamily: 'Inter, arial, sans-serif',
-        borderRadius: '4px'
+        fontSizeBase: ThemeLightCloud['font-size-s'],
+        fontSizeSm: ThemeLightCloud['font-size-s'],
+        colorPrimary: ThemeLightCloud['neutral-700'],
+        colorText: ThemeLightCloud['neutral-700'],
+        colorBackground: 'rgb(250, 250, 251)',
+        colorDanger: ThemeLightCloud['fgcolor-error'],
+        fontFamily: ThemeLightCloud['font-family-sansserif'],
+        borderRadius: ThemeLightCloud['base-8']
     },
     rules: {
+        '.Label': {
+            color: ThemeLightCloud['neutral-700'],
+            marginBottom: ThemeLightCloud['base-8'],
+            fontWeight: '500'
+        },
+        '.Input': {
+            padding: ThemeLightCloud['base-6'],
+            paddingLeft: ThemeLightCloud['base-12']
+        },
         '.Input:hover': {
             border: 'solid 1px rgb(195, 195, 198)',
             boxShadow: 'none'
diff --git a/src/lib/stores/templates.ts b/src/lib/stores/templates.ts
deleted file mode 100644
index 0d64cadb2..000000000
--- a/src/lib/stores/templates.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { page } from '$app/stores';
-import type { Models } from '@appwrite.io/console';
-import { derived } from 'svelte/store';
-
-export const templatesList = derived(
-    page,
-    async ($page) => (await $page.data.templatesList) as Models.TemplateFunctionList
-);
-
-export const featuredTemplatesList = derived(templatesList, async ($templatesList) => {
-    return {
-        templates: (await $templatesList).templates
-            .filter((template) => template.id !== 'starter')
-            .slice(0, 2)
-    };
-});
-
-export const starterTemplate = derived(templatesList, async ($templatesList) => {
-    return (await $templatesList).templates.find((template) => template.id === 'starter');
-});
diff --git a/src/lib/stores/uploader.ts b/src/lib/stores/uploader.ts
index b25e3da81..fa0c75e47 100644
--- a/src/lib/stores/uploader.ts
+++ b/src/lib/stores/uploader.ts
@@ -1,14 +1,15 @@
-import { Client, type Models, Storage } from '@appwrite.io/console';
+import { Client, type Models, Sites, Storage } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
 import { getApiEndpoint } from '$lib/stores/sdk';
+import { page } from '$app/state';
 
 type UploaderFile = {
     $id: string;
-    bucketId: string;
+    resourceId: string;
     name: string;
     progress: number;
-    completed: boolean;
-    failed: boolean;
+    size: number;
+    status: 'failed' | 'pending' | 'success';
     error?: string;
 };
 export type Uploader = {
@@ -21,10 +22,16 @@ const temporaryStorage = (region: string, projectId: string) => {
     const clientProject = new Client().setMode('admin');
     const endpoint = getApiEndpoint(region);
     clientProject.setEndpoint(endpoint).setProject(projectId);
-
     return new Storage(clientProject);
 };
 
+const temporarySites = (region: string, projectId: string) => {
+    const clientProject = new Client().setMode('admin');
+    const endpoint = getApiEndpoint(region);
+    clientProject.setEndpoint(endpoint).setProject(projectId);
+    return new Sites(clientProject);
+};
+
 const createUploader = () => {
     const { subscribe, set, update } = writable<Uploader>({
         isOpen: false,
@@ -74,11 +81,11 @@ const createUploader = () => {
         ) => {
             const newFile: UploaderFile = {
                 $id: id,
-                bucketId: bucketId,
+                resourceId: bucketId,
                 name: file.name,
+                size: file.size,
                 progress: 0,
-                completed: false,
-                failed: false
+                status: 'pending'
             };
             update((n) => {
                 n.isOpen = true;
@@ -94,15 +101,44 @@ const createUploader = () => {
                 (p) => {
                     newFile.$id = p.$id;
                     newFile.progress = p.progress;
-                    newFile.completed = p.progress === 100;
+                    newFile.status = p.progress === 100 ? 'success' : 'pending';
                     updateFile(p.$id, newFile);
                 }
             );
             newFile.$id = uploadedFile.$id;
             newFile.progress = 100;
-            newFile.completed = true;
+            newFile.status = 'success';
             updateFile(newFile.$id, newFile);
         },
+        uploadSiteDeployment: async (siteId: string, code: File) => {
+            const newDeployment: UploaderFile = {
+                $id: '',
+                resourceId: siteId,
+                name: code.name,
+                size: code.size,
+                progress: 0,
+                status: 'pending'
+            };
+            update((n) => {
+                n.isOpen = true;
+                n.isCollapsed = false;
+                n.files.unshift(newDeployment);
+                return n;
+            });
+            const uploadedFile = await temporarySites(
+                page.params.region,
+                page.params.project
+            ).createDeployment(siteId, code, true, undefined, undefined, undefined, (p) => {
+                newDeployment.$id = p.$id;
+                newDeployment.progress = p.progress;
+                newDeployment.status = p.progress === 100 ? 'success' : 'pending';
+                updateFile(p.$id, newDeployment);
+            });
+            newDeployment.$id = uploadedFile.$id;
+            newDeployment.progress = 100;
+            newDeployment.status = 'success';
+            updateFile(newDeployment.$id, newDeployment);
+        },
         removeFromQueue: (id: string) => {
             update((n) => {
                 n.files = n.files.filter((f) => f.$id !== id);
diff --git a/src/lib/stores/vcs.ts b/src/lib/stores/vcs.ts
new file mode 100644
index 000000000..fd79c333f
--- /dev/null
+++ b/src/lib/stores/vcs.ts
@@ -0,0 +1,20 @@
+import { page } from '$app/stores';
+import type { Models } from '@appwrite.io/console';
+import { derived, writable } from 'svelte/store';
+
+export const installations = derived(
+    page,
+    ($page) => $page.data.installations as Models.InstallationList
+);
+export const repository = writable<Models.ProviderRepository>();
+export const installation = writable<Models.Installation>();
+
+export function sortBranches(branches: Models.Branch[]) {
+    return branches.sort((a, b) => {
+        if (a.name === 'main' || a.name === 'master') {
+            return -1;
+        }
+
+        return a.name > b.name ? 1 : -1;
+    });
+}
diff --git a/src/lib/stores/viewport.ts b/src/lib/stores/viewport.ts
new file mode 100644
index 000000000..beeb1777c
--- /dev/null
+++ b/src/lib/stores/viewport.ts
@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+
+export const isSmallViewport = writable(false);
+export const isTabletViewport = writable(false);
+
+export function updateViewport() {
+    if (typeof window !== 'undefined') {
+        isSmallViewport.set(
+            typeof window !== 'undefined' ? window.matchMedia('(max-width: 767px)').matches : false
+        );
+
+        isTabletViewport.set(
+            typeof window !== 'undefined' ? window.matchMedia('(max-width: 1023px)').matches : false
+        );
+    }
+}
diff --git a/src/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index 6a752584f..b5581d34d 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -1,18 +1,19 @@
 import { trackEvent } from '$lib/actions/analytics';
-import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-import type { SvelteComponent } from 'svelte';
+import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
+import type { Component } from 'svelte';
 import { writable } from 'svelte/store';
 
 export type WizardStore = {
     show: boolean;
     media?: string;
-    component?: typeof SvelteComponent<unknown>;
-    cover?: typeof SvelteComponent<unknown>;
+    component?: Component;
+    cover?: Component;
     interceptor?: () => Promise<void>;
     finalAction?: () => Promise<void>;
     nextDisabled: boolean;
     step: number;
     interceptorNotificationEnabled: boolean;
+    props: Record<string, unknown>;
 };
 
 function createWizardStore() {
@@ -25,16 +26,18 @@ function createWizardStore() {
         media: null,
         nextDisabled: false,
         step: 1,
-        finalAction: null
+        finalAction: null,
+        props: {}
     });
 
     return {
         subscribe,
         set,
         start: (
-            component: typeof SvelteComponent<unknown>,
+            component: Component,
             media: string = null,
-            step: number = 1
+            step: number = 1,
+            props: Record<string, unknown> = {}
         ) =>
             update((n) => {
                 n.show = true;
@@ -46,6 +49,7 @@ function createWizardStore() {
                 n.cover = null;
                 n.nextDisabled = false;
                 n.finalAction = null;
+                n.props = props;
                 trackEvent('wizard_start');
                 return n;
             }),
@@ -75,7 +79,7 @@ function createWizardStore() {
 
                 return n;
             }),
-        showCover: (component: typeof SvelteComponent<unknown>) =>
+        showCover: (component: Component) =>
             update((n) => {
                 n.cover = component;
                 return n;
diff --git a/src/lib/system.ts b/src/lib/system.ts
index a23558304..62c9e4309 100644
--- a/src/lib/system.ts
+++ b/src/lib/system.ts
@@ -27,10 +27,8 @@ export const isDev = ENV.DEV;
 export const isProd = ENV.PROD;
 export const hasStripePublicKey = !!VARS.PUBLIC_STRIPE_KEY;
 export const GRACE_PERIOD_OVERRIDE = false;
+export const SHOW_INIT_FEATURES = true;
 
-/**
- * Returns true if multi-region is supported.
- */
 export function isMultiRegionSupported(url: URL): boolean {
     if (env.PUBLIC_APPWRITE_MULTI_REGION === 'true') return true;
 
diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
deleted file mode 100644
index 5c8cdd89d..000000000
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ /dev/null
@@ -1,240 +0,0 @@
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { EmptySearch } from '$lib/components';
-    import { Button, InputSearch, InputSelect } from '$lib/elements/forms';
-    import { timeFromNow } from '$lib/helpers/date';
-    import { app } from '$lib/stores/app';
-    import { sdk } from '$lib/stores/sdk';
-    import { repositories } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
-    import { installation, installations, repository } from '../store';
-    import { createEventDispatcher } from 'svelte';
-
-    const dispatch = createEventDispatcher();
-
-    export let callbackState: Record<string, string> = null;
-    export let selectedRepository: string = null;
-    export let hasInstallations = false;
-    export let action: 'button' | 'select' = 'select';
-
-    $: {
-        hasInstallations = $installations?.total > 0;
-    }
-
-    let selectedInstallation = null;
-    async function loadInstallations() {
-        const { installations } = await sdk
-            .forProject($page.params.region, $page.params.project)
-            .vcs.listInstallations();
-        if (installations.length) {
-            selectedInstallation = installations[0].$id;
-            installation.set(installations.find((entry) => entry.$id === selectedInstallation));
-        }
-        return installations;
-    }
-
-    let search = '';
-    async function loadRepositories(installationId: string, search: string) {
-        if (
-            !$repositories ||
-            $repositories.installationId !== installationId ||
-            $repositories.search !== search
-        ) {
-            $repositories.repositories = (
-                await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .vcs.listRepositories(installationId, search || undefined)
-            ).providerRepositories;
-        }
-
-        $repositories.search = search;
-        $repositories.installationId = installationId;
-
-        if ($repositories.repositories.length) {
-            selectedRepository = $repositories.repositories[0].id;
-            $repository = $repositories.repositories[0];
-        }
-
-        return $repositories.repositories.slice(0, 4);
-    }
-
-    function connectGitHub() {
-        const redirect = new URL($page.url);
-        if (callbackState) {
-            Object.keys(callbackState).forEach((key) => {
-                redirect.searchParams.append(key, callbackState[key]);
-            });
-        }
-        const target = new URL(
-            `${sdk.forProject($page.params.region, $page.params.project).client.config.endpoint}/vcs/github/authorize`
-        );
-        target.searchParams.set('project', $page.params.project);
-        target.searchParams.set('success', redirect.toString());
-        target.searchParams.set('failure', redirect.toString());
-        target.searchParams.set('mode', 'admin');
-        return target;
-    }
-</script>
-
-{#if hasInstallations}
-    {#await loadInstallations()}
-        <div class="u-flex u-gap-16">
-            <ul class="u-width-full-line">
-                <InputSelect
-                    disabled
-                    id="installation"
-                    label="Select installation"
-                    showLabel={false}
-                    options={[
-                        {
-                            label: 'Loading...',
-                            value: null
-                        }
-                    ]}
-                    value={null} />
-            </ul>
-            <ul class="u-width-full-line">
-                <InputSearch placeholder="Search repositories" disabled />
-            </ul>
-        </div>
-    {:then installations}
-        <div class="u-flex u-gap-16">
-            <ul class="u-width-full-line">
-                <InputSelect
-                    id="installation"
-                    label="Select installation"
-                    showLabel={false}
-                    options={installations.map((entry) => {
-                        return {
-                            label: entry.organization,
-                            value: entry.$id
-                        };
-                    })}
-                    on:change={() => {
-                        search = '';
-                        installation.set(
-                            installations.find((entry) => entry.$id === selectedInstallation)
-                        );
-                    }}
-                    bind:value={selectedInstallation} />
-            </ul>
-            <ul class="u-width-full-line">
-                <InputSearch placeholder="Search repositories" bind:value={search} />
-            </ul>
-        </div>
-    {/await}
-    <p class="text u-margin-block-start-16">
-        Manage organization configuration in your <a
-            class="link"
-            href={`${base}/project-${$page.params.region}-${$page.params.project}/settings`}
-            >project settings</a
-        >.
-    </p>
-    {#if selectedInstallation}
-        {#await loadRepositories(selectedInstallation, search)}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center" style:height="50vh">
-                <div class="loader u-margin-32" />
-            </div>
-        {:then response}
-            {#if response?.length}
-                <ul class="table is-remove-outer-styles common-section">
-                    {#each response as repo, i}
-                        <li
-                            class="table-row"
-                            style:border-block-end={i === response.length - 1 ? 'none' : null}>
-                            <div class="table-col">
-                                <div
-                                    class="u-flex u-cross-center u-gap-8"
-                                    style="margin-block: .75rem;">
-                                    {#if action === 'select'}
-                                        <input
-                                            class="is-small u-margin-inline-end-8"
-                                            type="radio"
-                                            name="repositories"
-                                            bind:group={selectedRepository}
-                                            on:change={() => repository.set(repo)}
-                                            value={repo.id} />
-                                    {/if}
-                                    <div
-                                        class="avatar is-size-x-small"
-                                        style:--p-text-size="1.25rem"
-                                        class:is-color-empty={!repo.runtime}>
-                                        {#if repo.runtime}
-                                            <img
-                                                src={`${base}/icons/${$app.themeInUse}/color/${
-                                                    repo.runtime.split('-')[0]
-                                                }.svg`}
-                                                alt={repo.name} />
-                                        {/if}
-                                    </div>
-                                    <div class="u-flex u-gap-8 u-cross-center">
-                                        <span class="text u-trim-1">{repo.name}</span>
-                                        {#if repo.private}
-                                            <span
-                                                class="icon-lock-closed"
-                                                style="font-size: var(--icon-size-small)"
-                                                aria-hidden="true" />
-                                        {/if}
-                                        <time
-                                            class="u-color-text-gray u-trim-1"
-                                            datetime={repo.pushedAt}>
-                                            {timeFromNow(repo.pushedAt)}
-                                        </time>
-                                    </div>
-                                    {#if action === 'button'}
-                                        <div class="u-margin-inline-start-auto">
-                                            <Button
-                                                secondary
-                                                on:click={() => dispatch('connect', repo)}>
-                                                Connect
-                                            </Button>
-                                        </div>
-                                    {/if}
-                                </div>
-                            </div>
-                        </li>
-                    {/each}
-                </ul>
-            {:else if search}
-                <EmptySearch hidePages>
-                    <div class="common-section">
-                        <div class="u-text-center common-section">
-                            <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
-                            <p>There are no repositories that match your search.</p>
-                        </div>
-                        <div class="u-flex u-gap-16 common-section u-main-center">
-                            <Button secondary on:click={() => (search = '')}>Clear search</Button>
-                        </div>
-                    </div>
-                </EmptySearch>
-            {:else}
-                <EmptySearch hidePages />
-            {/if}
-        {/await}
-    {/if}
-{:else}
-    <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
-        <Button href={connectGitHub().toString()} fullWidth secondary>
-            <span class="icon-github" aria-hidden="true" />
-            <span class="text">GitHub</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-gitlab" aria-hidden="true" />
-            <span class="text">GitLab (coming soon)</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-bitBucket" aria-hidden="true" />
-            <span class="text">BitBucket (coming soon)</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-azure" aria-hidden="true" />
-            <span class="text">Azure (coming soon)</span>
-        </Button>
-    </div>
-{/if}
-
-<style>
-    .icon-lock-closed {
-        color: hsl(var(--color-neutral-50));
-    }
-</style>
diff --git a/src/lib/wizards/functions/components/specificationsTooltip.svelte b/src/lib/wizards/functions/components/specificationsTooltip.svelte
deleted file mode 100644
index 279f5a0f1..000000000
--- a/src/lib/wizards/functions/components/specificationsTooltip.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-    import { Button } from '$lib/elements/forms';
-    import { upgradeURL } from '$lib/stores/billing';
-</script>
-
-<div class="u-flex-vertical u-gap-16">
-    <p>Additional CPU and RAM are available for Pro and Scale teams.</p>
-    <div class="u-flex u-gap-8 u-cross-center">
-        <a
-            class="u-bold u-block"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://appwrite.io/docs/advanced/platform/gb-hours">Learn more</a>
-        <Button href={$upgradeURL} secondary fullWidthMobile event={'specifications_cta_upgrade'}>
-            <span class="text">Upgrade Plan</span>
-        </Button>
-    </div>
-</div>
-
-<style>
-    a {
-        flex-grow: 1;
-    }
-</style>
diff --git a/src/lib/wizards/functions/connectExisting.svelte b/src/lib/wizards/functions/connectExisting.svelte
deleted file mode 100644
index 6f8947960..000000000
--- a/src/lib/wizards/functions/connectExisting.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import SelectRepository from './steps/selectRepository.svelte';
-    import GitConfiguration from './steps/gitConfiguration.svelte';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { func } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
-    import { choices, installation, repository } from './store';
-    import { wizard } from '$lib/stores/wizard';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { Runtime } from '@appwrite.io/console';
-    import { page } from '$app/stores';
-
-    async function createGitHubInstallation() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $func.runtime)) {
-                throw new Error(`Invalid runtime: ${$func.runtime}`);
-            }
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.update(
-                    $func.$id,
-                    $func.name,
-                    $func.runtime,
-                    $func.execute || undefined,
-                    $func.events || undefined,
-                    $func.schedule || undefined,
-                    $func.timeout || undefined,
-                    $func.enabled || undefined,
-                    $func.logging || undefined,
-                    $func.entrypoint || undefined,
-                    $func.commands || undefined,
-                    $func.scopes || undefined,
-                    $installation.$id,
-                    $repository.id,
-                    $choices.branch,
-                    $choices.silentMode || undefined,
-                    $choices.rootDir,
-                    $func.specification || undefined
-                );
-            trackEvent(Submit.FunctionConnectRepo, {
-                customId: !!$func.$id
-            });
-            await invalidate(Dependencies.FUNCTION);
-            resetState();
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.FunctionConnectRepo);
-        }
-    }
-
-    function resetState() {
-        choices.set({
-            branch: null,
-            silentMode: false,
-            rootDir: null
-        });
-        installation.set(null);
-        repository.set(null);
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Repository',
-        component: SelectRepository
-    });
-    stepsComponents.set(2, {
-        label: 'Git',
-        component: GitConfiguration
-    });
-</script>
-
-<Wizard
-    title="Connect Git"
-    steps={stepsComponents}
-    on:finish={createGitHubInstallation}
-    on:exit={resetState} />
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
deleted file mode 100644
index 44870d576..000000000
--- a/src/lib/wizards/functions/cover.svelte
+++ /dev/null
@@ -1,319 +0,0 @@
-<script context="module" lang="ts">
-    import CreateTemplate from './createTemplate.svelte';
-
-    export function connectTemplate(
-        template: Models.TemplateFunction,
-        runtime: string | null = null
-    ) {
-        const variables: Record<string, string> = {};
-        template.variables.forEach((variable) => {
-            variables[variable.name] = variable.value ?? '';
-        });
-
-        templateStore.set(template);
-        templateConfig.set({
-            $id: null,
-            runtime,
-            name: template.name,
-            variables,
-            repositoryBehaviour: 'new',
-            repositoryName: template.id,
-            repositoryPrivate: true,
-            repositoryId: null,
-            specification: null
-        });
-        wizard.start(CreateTemplate);
-    }
-</script>
-
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { AvatarGroup, Box, Heading } from '$lib/components';
-    import { app } from '$lib/stores/app';
-    import { wizard } from '$lib/stores/wizard';
-    import { repository, templateConfig, template as templateStore } from './store';
-    import { Button } from '$lib/elements/forms';
-    import { page } from '$app/stores';
-    import { baseRuntimesList } from '$lib/stores/runtimes';
-    import { trackEvent } from '$lib/actions/analytics';
-    import type { Models } from '@appwrite.io/console';
-    import WizardCover from '$lib/layout/wizardCover.svelte';
-    import Repositories from './components/repositories.svelte';
-    import CreateManual from './createManual.svelte';
-    import CreateGit from './createGit.svelte';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { isSelfHosted } from '$lib/system';
-    import { consoleVariables } from '$routes/(console)/store';
-    import { featuredTemplatesList, starterTemplate } from '$lib/stores/templates';
-
-    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-    let hasInstallations: boolean;
-    let selectedRepository: string;
-
-    function connect(event: CustomEvent<Models.ProviderRepository>) {
-        trackEvent('click_connect_repository', {
-            from: 'cover'
-        });
-        repository.set(event.detail);
-        wizard.start(CreateGit);
-    }
-</script>
-
-<WizardCover>
-    <svelte:fragment slot="title">Create Function</svelte:fragment>
-    <div class="wizard-container container">
-        <div class="git-container u-position-relative">
-            <div class="grid-1-1 u-gap-24">
-                <div class="card u-cross-child-start u-height-100-percent">
-                    <Heading size="6" tag="h6">Connect Git repository</Heading>
-                    <p class="u-margin-block-start-8">
-                        Create and deploy a function with a connected git repository.
-                    </p>
-                    <div class="u-margin-block-start-24">
-                        <Repositories
-                            bind:hasInstallations
-                            bind:selectedRepository
-                            action="button"
-                            callbackState={{
-                                from: 'github',
-                                to: 'cover'
-                            }}
-                            on:connect={connect} />
-                    </div>
-                    {#if isSelfHosted && !isVcsEnabled}
-                        <div
-                            class="overlay u-flex-vertical u-position-absolute u-height-100-percent u-width-full-line u-z-index-1 u-text-center u-inset-0"
-                            style="border-radius: var(--border-radius-medium)">
-                            <div
-                                class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16 u-padding-inline-24">
-                                <Heading size="7" tag="h6" trimmed={false}>
-                                    Connect your self-hosted instance to Git
-                                </Heading>
-                                <p>
-                                    Configure your self-hosted instance to connect your function to
-                                    a Git repository.
-                                    <a
-                                        href="https://appwrite.io/docs/advanced/self-hosting/functions#git"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="link">Learn more</a
-                                    >.
-                                </p>
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-
-                <div class="card u-height-100-percent">
-                    <section class="common-section">
-                        <Heading size="6" tag="h6">Quick start</Heading>
-                        <p class="u-margin-block-start-8">Use a starter template.</p>
-                        <ul
-                            class="grid-box u-margin-block-start-16"
-                            style:--grid-item-size="8rem"
-                            style:--grid-item-size-small-screens="9rem"
-                            style:--grid-gap=".5rem">
-                            {#await Promise.all([$baseRuntimesList, $starterTemplate])}
-                                {#each Array(6) as _i}
-                                    <li>
-                                        <button
-                                            disabled
-                                            class="box u-width-full-line u-flex u-cross-center u-main-center"
-                                            style:--box-padding="1rem"
-                                            style:--box-border-radius="var(--border-radius-small)">
-                                            <div class="avatar is-size-small">
-                                                <div class="loader u-margin-16" />
-                                            </div>
-                                        </button>
-                                    </li>
-                                {/each}
-                            {:then [response, quickStart]}
-                                {@const runtimes = new Map(
-                                    response.runtimes.map((r) => [r.$id, r])
-                                )}
-                                {@const templates = quickStart.runtimes.filter((template) =>
-                                    runtimes.has(template.name)
-                                )}
-                                {#each templates.slice(0, 6) as template}
-                                    {@const runtimeDetail = runtimes.get(template.name)}
-                                    <li>
-                                        <button
-                                            on:click={() => {
-                                                trackEvent('click_connect_template', {
-                                                    from: 'cover',
-                                                    template: quickStart.id,
-                                                    runtime: template.name
-                                                });
-                                            }}
-                                            on:click={() =>
-                                                connectTemplate(quickStart, template.name)}
-                                            class="box u-width-full-line u-flex u-cross-center u-gap-8"
-                                            style:--box-padding="1rem"
-                                            style:--box-border-radius="var(--border-radius-small)">
-                                            <div class="avatar is-size-small">
-                                                <img
-                                                    style:--p-text-size="1.25rem"
-                                                    src={`${base}/icons/${$app.themeInUse}/color/${
-                                                        template.name.split('-')[0]
-                                                    }.svg`}
-                                                    alt={template.name} />
-                                            </div>
-                                            <div class="body-text-2">
-                                                {runtimeDetail.name}
-                                                <!--{#if runtimeDetail.name.toLowerCase() === 'deno'}-->
-                                                <!--    <span class="inline-tag">New</span>-->
-                                                <!--{/if}-->
-                                            </div>
-                                        </button>
-                                    </li>
-                                {/each}
-
-                                {#if templates.length < 6}
-                                    <li
-                                        use:tooltip={{
-                                            content: 'More runtimes coming soon'
-                                        }}>
-                                        <Box
-                                            class="u-width-full-line u-flex u-cross-center u-gap-8"
-                                            padding={16}
-                                            radius="small">
-                                            <AvatarGroup
-                                                icons={['dotnet', 'deno']}
-                                                total={4}
-                                                avatarSize="small"
-                                                color="u-color-text-gray"
-                                                bordered />
-                                        </Box>
-                                    </li>
-                                {/if}
-                            {/await}
-                        </ul>
-                    </section>
-
-                    <Button
-                        text
-                        class="u-margin-block-start-24 u-margin-inline-start-auto"
-                        href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/templates?useCase=starter`}>
-                        All starter templates <span class="icon-cheveron-right" />
-                    </Button>
-                    <div class="u-sep-block-start common-section" />
-                    <section class="common-section">
-                        <Heading size="6" tag="h6">Templates</Heading>
-                        <p class="text u-margin-block-start-8">
-                            Find the right template for your use case.
-                        </p>
-
-                        <ul class="clickable-list u-margin-block-start-16">
-                            {#await $featuredTemplatesList}
-                                {#each Array(3) as _i}
-                                    <li>
-                                        <button
-                                            disabled
-                                            class="clickable-list-button u-width-full-line u-flex u-gap-12">
-                                            <div class="avatar is-size-small">
-                                                <div class="loader" />
-                                            </div>
-                                            <div class="u-flex u-flex-vertical u-gap-4">
-                                                <div class="body-text-2 u-bold u-trim">
-                                                    <div class="loader" />
-                                                </div>
-                                                <div class="u-trim-1 u-color-text-gray">
-                                                    <div class="loader" />
-                                                </div>
-                                            </div>
-                                        </button>
-                                    </li>
-                                {/each}
-                            {:then templatesListWithoutStarter}
-                                {#each templatesListWithoutStarter.templates as template}
-                                    <li class="clickable-list-item u-padding-block-8">
-                                        <button
-                                            type="button"
-                                            on:click={() => {
-                                                trackEvent('click_connect_template', {
-                                                    from: 'cover',
-                                                    template: template.id
-                                                });
-                                            }}
-                                            on:click={() => connectTemplate(template)}
-                                            class="clickable-list-button u-width-full-line u-flex u-gap-12">
-                                            <div
-                                                class="avatar is-size-small"
-                                                style:--p-text-size="1.25rem">
-                                                <span class={template.icon} />
-                                            </div>
-                                            <div class="u-flex u-flex-vertical u-gap-4">
-                                                <div class="body-text-2 u-bold u-trim">
-                                                    {template.name}
-                                                </div>
-                                                <div class="u-trim-1 u-color-text-gray">
-                                                    {template.tagline}
-                                                </div>
-                                            </div>
-                                        </button>
-                                    </li>
-                                {/each}
-                            {/await}
-                        </ul>
-                    </section>
-                    <Button
-                        text
-                        noMargin
-                        class="u-margin-inline-start-auto u-margin-block-start-16"
-                        href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/templates`}>
-                        <span> All templates </span>
-                        <span class="icon-cheveron-right" aria-hidden="true" />
-                    </Button>
-                </div>
-            </div>
-            <p class="u-margin-block-start-16">
-                You can also create a function <button
-                    class="link"
-                    on:click={() => {
-                        trackEvent('click_create_function_manual', {
-                            from: 'cover'
-                        });
-                    }}
-                    on:click={() => wizard.start(CreateManual)}>manually</button>
-                or using the CLI.
-                <a
-                    href="https://appwrite.io/docs/products/functions/deployment"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="link">Learn more</a
-                >.
-            </p>
-        </div>
-    </div>
-</WizardCover>
-
-<style lang="scss">
-    .git-container .overlay {
-        background: linear-gradient(
-            0,
-            hsl(var(--p-card-bg-color)) 68.91%,
-            hsl(var(--p-card-bg-color) / 0.5) 92.8%
-        );
-    }
-
-    .u-sep-block-start {
-        border-block-start: solid 0.0625rem hsl(var(--color-neutral)) !important;
-    }
-
-    .clickable-list-item:not(:last-child) {
-        border-block-end: solid 0.0625rem hsl(var(--color-neutral)) !important;
-    }
-
-    :global(.theme-light) {
-        --color-neutral: var(--color-neutral-10);
-    }
-
-    :global(.theme-dark) {
-        --color-neutral: var(--color-neutral-85);
-    }
-
-    .inline-tag {
-        line-height: 140%;
-        font-weight: 500;
-    }
-</style>
diff --git a/src/lib/wizards/functions/createGit.svelte b/src/lib/wizards/functions/createGit.svelte
deleted file mode 100644
index ecb1b63e6..000000000
--- a/src/lib/wizards/functions/createGit.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-    import { ID, Runtime } from '@appwrite.io/console';
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import { goto } from '$app/navigation';
-    import { choices, createFunction, installation, repository } from './store';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import ExecuteAccess from './steps/executeAccess.svelte';
-    import GitConfiguration from './steps/gitConfiguration.svelte';
-    import FunctionConfiguration from './steps/functionConfiguration.svelte';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    async function create() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $createFunction.runtime)) {
-                throw new Error(`Invalid runtime: ${$createFunction.runtime}`);
-            }
-            const response = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.create(
-                    $createFunction.$id || ID.unique(),
-                    $createFunction.name,
-                    $createFunction.runtime,
-                    $createFunction.execute || undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    $createFunction.entrypoint,
-                    $createFunction.commands || undefined,
-                    undefined,
-                    $installation.$id,
-                    $repository.id,
-                    $choices.branch,
-                    $choices.silentMode || undefined,
-                    $choices.rootDir || undefined
-                );
-            goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${response.$id}`
-            );
-            addNotification({
-                message: `${$createFunction.name} has been created`,
-                type: 'success'
-            });
-            trackEvent(Submit.FunctionCreate, {
-                customId: !!$createFunction.$id
-            });
-            resetState();
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.FunctionCreate);
-        }
-    }
-
-    function resetState() {
-        createFunction.set({
-            $id: null,
-            name: null,
-            entrypoint: null,
-            execute: [],
-            runtime: null
-        });
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Git',
-        component: GitConfiguration
-    });
-    stepsComponents.set(2, {
-        label: 'Configuration',
-        component: FunctionConfiguration
-    });
-    stepsComponents.set(3, {
-        label: 'Execute access',
-        component: ExecuteAccess,
-        optional: true
-    });
-</script>
-
-<Wizard title="Create Function" steps={stepsComponents} on:finish={create} on:exit={resetState} />
diff --git a/src/lib/wizards/functions/createManual.svelte b/src/lib/wizards/functions/createManual.svelte
deleted file mode 100644
index a61525cb1..000000000
--- a/src/lib/wizards/functions/createManual.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-    import { ID, Runtime } from '@appwrite.io/console';
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import { goto } from '$app/navigation';
-    import {
-        choices,
-        createFunction,
-        createFunctionDeployment,
-        installation,
-        repository
-    } from './store';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import Details from './steps/manualDetails.svelte';
-    import Configuration from './steps/manualConfiguration.svelte';
-    import ExecuteAccess from './steps/executeAccess.svelte';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    async function create() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $createFunction.runtime)) {
-                throw new Error(`Invalid runtime: ${$createFunction.runtime}`);
-            }
-            const response = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.create(
-                    $createFunction.$id || ID.unique(),
-                    $createFunction.name,
-                    $createFunction.runtime,
-                    $createFunction.execute || undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    $createFunction.entrypoint,
-                    $createFunction.commands || undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    $createFunction.specification
-                );
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.createDeployment(response.$id, $createFunctionDeployment[0], true);
-            goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${response.$id}`
-            );
-            addNotification({
-                message: `${$createFunction.name} has been created`,
-                type: 'success'
-            });
-            trackEvent(Submit.FunctionCreate, {
-                customId: !!$createFunction.$id
-            });
-            resetState();
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.FunctionCreate);
-        }
-    }
-
-    function resetState() {
-        createFunction.reset();
-        choices.set({
-            branch: null,
-            silentMode: false,
-            rootDir: null
-        });
-        installation.set(null);
-        repository.set(null);
-        createFunctionDeployment.set(null);
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Details',
-        component: Details
-    });
-    stepsComponents.set(2, {
-        label: 'Configuration',
-        component: Configuration
-    });
-    stepsComponents.set(3, {
-        label: 'Execute access',
-        component: ExecuteAccess,
-        optional: true
-    });
-</script>
-
-<Wizard title="Create Function" steps={stepsComponents} on:finish={create} on:exit={resetState} />
diff --git a/src/lib/wizards/functions/createTemplate.svelte b/src/lib/wizards/functions/createTemplate.svelte
deleted file mode 100644
index 3e08577fb..000000000
--- a/src/lib/wizards/functions/createTemplate.svelte
+++ /dev/null
@@ -1,140 +0,0 @@
-<script lang="ts">
-    import { ID, Runtime } from '@appwrite.io/console';
-    import { Wizard } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import { goto } from '$app/navigation';
-    import {
-        choices,
-        installation,
-        repository,
-        template,
-        templateConfig,
-        templateStepsComponents
-    } from './store';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-    import TemplateConfiguration from './steps/templateConfiguration.svelte';
-    import TemplatePermissions from './steps/templatePermissions.svelte';
-    import TemplateVariables from './steps/templateVariables.svelte';
-    import TemplateDeployment from './steps/templateDeployment.svelte';
-    import CreateRepository from './steps/createRepository.svelte';
-    import GitConfiguration from './steps/gitConfiguration.svelte';
-
-    async function create() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $templateConfig.runtime)) {
-                throw new Error(`Invalid runtime: ${$templateConfig.runtime}`);
-            }
-            const runtimeDetail = $template.runtimes.find(
-                (r) => r.name === $templateConfig.runtime
-            );
-
-            const response = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.create(
-                    $templateConfig.$id || ID.unique(),
-                    $templateConfig.name,
-                    $templateConfig.runtime,
-                    $templateConfig?.execute ? $template.permissions || undefined : undefined,
-                    $template.events || undefined,
-                    $template.cron || undefined,
-                    $template.timeout || undefined,
-                    undefined,
-                    undefined,
-                    runtimeDetail.entrypoint,
-                    runtimeDetail.commands || undefined,
-                    $templateConfig?.scopes?.length ? $templateConfig.scopes : undefined,
-                    $templateConfig.repositoryBehaviour === 'manual'
-                        ? undefined
-                        : $installation.$id,
-                    $templateConfig.repositoryBehaviour === 'manual' ? undefined : $repository.id,
-                    $templateConfig.repositoryBehaviour === 'manual' ? undefined : $choices.branch,
-                    $templateConfig.repositoryBehaviour === 'manual'
-                        ? undefined
-                        : $choices.silentMode || undefined,
-                    $templateConfig.repositoryBehaviour === 'manual'
-                        ? undefined
-                        : $choices.rootDir || undefined,
-                    $template.providerRepositoryId || undefined,
-                    $template.providerOwner || undefined,
-                    runtimeDetail.providerRootDirectory || undefined,
-                    $template.providerVersion || undefined,
-                    $templateConfig.specification || undefined
-                );
-
-            if ($templateConfig.variables) {
-                const promises = Object.entries($templateConfig.variables).map(([key, value]) =>
-                    sdk
-                        .forProject($page.params.region, $page.params.project)
-                        .functions.createVariable(response.$id, key, value?.toString())
-                );
-
-                await Promise.all(promises);
-            }
-
-            goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${response.$id}`
-            );
-            addNotification({
-                message: `${response.name} has been created`,
-                type: 'success'
-            });
-            trackEvent(Submit.FunctionCreate, {
-                customId: !!response.$id,
-                runtime: response.runtime,
-                deployment_type: $templateConfig.repositoryBehaviour,
-                scopes: $templateConfig.scopes,
-                specification: $templateConfig.specification
-            });
-            resetState();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.FunctionCreate);
-        }
-    }
-    function resetState() {
-        wizard.hide();
-        templateConfig.set(null);
-        template.set(null);
-        installation.set(null);
-    }
-
-    $templateStepsComponents.set(1, {
-        label: 'Configuration',
-        component: TemplateConfiguration
-    });
-    $templateStepsComponents.set(2, {
-        label: 'Permissions',
-        component: TemplatePermissions
-    });
-    $templateStepsComponents.set(3, {
-        label: 'Variables',
-        component: TemplateVariables,
-        disabled: !$template?.variables?.length
-    });
-    $templateStepsComponents.set(4, {
-        label: 'Deployment',
-        component: TemplateDeployment
-    });
-    $templateStepsComponents.set(5, {
-        label: 'Repository',
-        component: CreateRepository
-    });
-    $templateStepsComponents.set(6, {
-        label: 'Branch',
-        component: GitConfiguration
-    });
-</script>
-
-<Wizard
-    title="Create Function"
-    steps={$templateStepsComponents}
-    on:finish={create}
-    on:exit={resetState} />
diff --git a/src/lib/wizards/functions/steps/createRepository.svelte b/src/lib/wizards/functions/steps/createRepository.svelte
deleted file mode 100644
index 394966111..000000000
--- a/src/lib/wizards/functions/steps/createRepository.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import Button from '$lib/elements/forms/button.svelte';
-    import FormList from '$lib/elements/forms/formList.svelte';
-    import InputChoice from '$lib/elements/forms/inputChoice.svelte';
-    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    import InputText from '$lib/elements/forms/inputText.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import Repositories from '../components/repositories.svelte';
-    import { installation, repository, template, templateConfig } from '../store';
-    import { Box } from '$lib/components';
-
-    let selectedInstallationId: string;
-    let hasInstallations: boolean;
-    let selectedRepository: string;
-
-    onMount(() => {
-        $templateConfig.repositoryPrivate = true;
-    });
-
-    async function beforeSubmit() {
-        if (!hasInstallations || !$installation) {
-            throw new Error('Please connect a Git provider');
-        }
-
-        if ($templateConfig.repositoryBehaviour === 'new') {
-            const repo = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .vcs.createRepository(
-                    $installation.$id,
-                    $templateConfig.repositoryName,
-                    $templateConfig.repositoryPrivate
-                );
-            $repository = repo;
-
-            addNotification({
-                type: 'success',
-                message: 'Repository successfully created.'
-            });
-        }
-
-        if (!$repository) {
-            throw new Error('Please select a repository');
-        }
-    }
-
-    function connectGitHub() {
-        const redirect = new URL($page.url);
-        const callbackState = {
-            from: 'github',
-            to: 'template',
-            step: '5',
-            template: $template.id,
-            templateConfig: JSON.stringify($templateConfig)
-        };
-
-        if (callbackState) {
-            Object.keys(callbackState).forEach((key) => {
-                redirect.searchParams.append(key, callbackState[key]);
-            });
-        }
-        const target = new URL(
-            `${sdk.forProject($page.params.region, $page.params.project).client.config.endpoint}/vcs/github/authorize`
-        );
-        target.searchParams.set('project', $page.params.project);
-        target.searchParams.set('success', redirect.toString());
-        target.searchParams.set('failure', redirect.toString());
-        target.searchParams.set('mode', 'admin');
-        return target;
-    }
-
-    async function loadInstallations() {
-        const { installations } = await sdk
-            .forProject($page.params.region, $page.params.project)
-            .vcs.listInstallations();
-        if (installations.length) {
-            $installation = installations[0];
-            hasInstallations = true;
-        }
-
-        return installations;
-    }
-
-    function getProviderIcon(provider: string) {
-        switch (provider) {
-            case 'github':
-                return 'icon-github';
-            default:
-                return '';
-        }
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Repository</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Select a Git repository that will trigger your function deployments when updated.
-    </svelte:fragment>
-
-    {#if $templateConfig.repositoryBehaviour === 'existing'}
-        <Repositories bind:hasInstallations bind:selectedRepository />
-    {:else}
-        {#await loadInstallations()}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center">
-                <div class="loader u-margin-32" />
-            </div>
-        {:then installations}
-            {#if hasInstallations}
-                <FormList>
-                    <InputSelect
-                        id="installation"
-                        label="Git organization"
-                        options={installations.map((entry) => {
-                            return {
-                                label: entry.organization,
-                                value: entry.$id
-                            };
-                        })}
-                        on:change={() => {
-                            $installation = installations.find(
-                                (entry) => entry.$id === selectedInstallationId
-                            );
-                        }}
-                        bind:value={selectedInstallationId} />
-                </FormList>
-            {:else}
-                <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
-                    <Button href={connectGitHub().toString()} fullWidth secondary>
-                        <span class="icon-github" aria-hidden="true" />
-                        <span class="text">GitHub</span>
-                    </Button>
-                    <Button disabled fullWidth secondary>
-                        <span class="icon-gitlab" aria-hidden="true" />
-                        <span class="text">GitLab (coming soon)</span>
-                    </Button>
-                    <Button disabled fullWidth secondary>
-                        <span class="icon-bitBucket" aria-hidden="true" />
-                        <span class="text">BitBucket (coming soon)</span>
-                    </Button>
-                    <Button disabled fullWidth secondary>
-                        <span class="icon-azure" aria-hidden="true" />
-                        <span class="text">Azure (coming soon)</span>
-                    </Button>
-                </div>
-            {/if}
-            {#if $installation}
-                <Box radius="small" class="u-margin-block-start-20">
-                    <div class="u-flex u-gap-16">
-                        <div class="avatar is-size-x-small">
-                            <span class={getProviderIcon($installation.provider)} />
-                        </div>
-                        <div class="u-cross-child-center u-line-height-1-5">
-                            <h6 class="u-bold u-trim-1">
-                                {$installation.organization}/{$templateConfig.repositoryName}
-                            </h6>
-                        </div>
-                    </div>
-                    <div class="u-margin-block-start-24">
-                        <FormList>
-                            <InputText
-                                id="repositoryName"
-                                label="Repository name"
-                                placeholder="my-repository"
-                                bind:value={$templateConfig.repositoryName} />
-                            <InputChoice
-                                id="repositoryPrivate"
-                                label="Keep repository private"
-                                bind:value={$templateConfig.repositoryPrivate} />
-                        </FormList>
-                    </div>
-                </Box>
-            {/if}
-        {/await}
-    {/if}
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/executeAccess.svelte b/src/lib/wizards/functions/steps/executeAccess.svelte
deleted file mode 100644
index 64f2ec6d9..000000000
--- a/src/lib/wizards/functions/steps/executeAccess.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { Roles } from '$lib/components/permissions';
-    import { createFunction } from '../store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose who can execute this function using the client API. For more information, visit our
-        <a
-            href="https://appwrite.io/docs/advanced/platform/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions guide</a
-        >.
-    </svelte:fragment>
-
-    <Roles bind:roles={$createFunction.execute} />
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/functionConfiguration.svelte b/src/lib/wizards/functions/steps/functionConfiguration.svelte
deleted file mode 100644
index 31a764cc4..000000000
--- a/src/lib/wizards/functions/steps/functionConfiguration.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts">
-    import { Collapsible, CollapsibleItem, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputSelect, InputText } from '$lib/elements/forms';
-    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { choices, createFunction, installation, repository } from '../store';
-    import { runtimesList } from '$lib/stores/runtimes';
-    import { page } from '$app/stores';
-
-    let showCustomId = false;
-
-    let detectingRuntime = true;
-    async function loadDetection(
-        installationId: string,
-        repositoryId: string,
-        rootDirectory: string
-    ) {
-        const detection = await sdk
-            .forProject($page.params.region, $page.params.project)
-            .vcs.createRepositoryDetection(installationId, repositoryId, rootDirectory);
-
-        return detection;
-    }
-
-    let options = [];
-
-    onMount(async () => {
-        options = (await $runtimesList).runtimes.map((runtime) => ({
-            label: `${runtime.name} - ${runtime.version}`,
-            value: runtime.$id
-        }));
-
-        try {
-            const detection = await loadDetection(
-                $installation.$id,
-                $repository.id,
-                $choices.rootDir
-            );
-            $createFunction.runtime = detection.runtime;
-        } catch (err) {
-            console.error(err);
-        } finally {
-            detectingRuntime = false;
-        }
-    });
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Configuration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Set your deployment configuration and any build commands here.
-    </svelte:fragment>
-    <FormList>
-        <InputText
-            label="Name"
-            id="name"
-            placeholder="Function name"
-            autofocus
-            bind:value={$createFunction.name}
-            required />
-        {#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
-                autofocus
-                bind:show={showCustomId}
-                name="Function"
-                bind:id={$createFunction.$id}
-                fullWidth />
-        {/if}
-
-        {#if detectingRuntime}
-            <InputSelect
-                disabled
-                label="Runtime"
-                id="runtime"
-                placeholder="Detecting runtime"
-                value={null}
-                options={[]} />
-        {:else}
-            <InputSelect
-                label="Runtime"
-                id="runtime"
-                placeholder="Select runtime"
-                bind:value={$createFunction.runtime}
-                {options}
-                required />
-        {/if}
-
-        <InputText
-            label="Entrypoint"
-            id="entrypoint"
-            placeholder="Entrypoint"
-            bind:value={$createFunction.entrypoint}
-            required />
-        <Collapsible>
-            <CollapsibleItem>
-                <svelte:fragment slot="title">Build commands</svelte:fragment>
-                <svelte:fragment slot="subtitle">(optional)</svelte:fragment>
-                <FormList>
-                    <InputTextarea
-                        label="Commands"
-                        placeholder="Enter a build command (e.g. 'npm install')"
-                        id="build"
-                        tooltip="Enter a single command or chain multiple commands with the && operator"
-                        bind:value={$createFunction.commands} />
-                </FormList>
-            </CollapsibleItem>
-        </Collapsible>
-    </FormList>
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte
deleted file mode 100644
index 291f7d791..000000000
--- a/src/lib/wizards/functions/steps/gitConfiguration.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Box, SvgIcon } from '$lib/components';
-    import { FormList, InputChoice, InputText } from '$lib/elements/forms';
-    import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { sortBranches } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateConfiguration.svelte';
-    import { choices, installation, repository } from '../store';
-
-    $choices.rootDir ??= '';
-
-    async function loadBranches() {
-        const { branches } = await sdk
-            .forProject($page.params.region, $page.params.project)
-            .vcs.listRepositoryBranches($installation.$id, $repository.id);
-        const sorted = sortBranches(branches);
-        $choices.branch = sorted[0]?.name ?? null;
-
-        if (!$choices.branch) {
-            $choices.branch = 'main';
-        }
-
-        return sorted;
-    }
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Branch</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose the Git branch that will trigger your function deployments when updated.
-    </svelte:fragment>
-
-    <Box radius="small">
-        <div class="u-flex u-gap-8 u-cross-center">
-            <SvgIcon name={$repository.provider} iconSize="large" />
-            <h6 class="u-bold u-trim-1">{$installation.organization}/{$repository.name}</h6>
-        </div>
-        {#await loadBranches()}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center">
-                <div class="loader u-margin-32" />
-            </div>
-        {:then branches}
-            {@const options =
-                branches
-                    ?.map((branch) => {
-                        return {
-                            value: branch.name,
-                            label: branch.name
-                        };
-                    })
-                    ?.sort((a, b) => {
-                        return a.label > b.label ? 1 : -1;
-                    }) ?? []}
-            <div class="u-margin-block-start-24">
-                <FormList>
-                    <InputSelectSearch
-                        required={true}
-                        id="branch"
-                        label="Production branch"
-                        placeholder="Select branch"
-                        tooltip="Every commit pushed to this branch will activate the deployment after a successful build"
-                        hideRequired
-                        bind:value={$choices.branch}
-                        bind:search={$choices.branch}
-                        on:select={(event) => {
-                            $choices.branch = event.detail.value;
-                        }}
-                        interactiveOutput
-                        name="branches"
-                        {options} />
-                    <InputText
-                        id="root"
-                        label="Root directory"
-                        placeholder="functions/my-function"
-                        bind:value={$choices.rootDir} />
-                    <InputChoice
-                        id="silent"
-                        label="Silent mode"
-                        tooltip="When enabled, comments will not be made on pull requests in this repository"
-                        bind:value={$choices.silentMode} />
-                </FormList>
-            </div>
-        {/await}
-    </Box>
-    <p class="text u-margin-block-start-8">
-        Visit your repository on <a
-            href={`https://github.com/${$repository.organization}/${$repository.name}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">GitHub</a
-        >.
-    </p>
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/manualConfiguration.svelte b/src/lib/wizards/functions/steps/manualConfiguration.svelte
deleted file mode 100644
index 11e86decb..000000000
--- a/src/lib/wizards/functions/steps/manualConfiguration.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-    import { Collapsible, CollapsibleItem } from '$lib/components';
-    import { FormList, InputFile, InputText } from '$lib/elements/forms';
-    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { createFunction, createFunctionDeployment } from '../store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Configuration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Set your deployment configuration and any build commands here.
-    </svelte:fragment>
-    <FormList>
-        <InputFile
-            label="Upload a zip file (tar.gz) containing your function source code"
-            allowedFileExtensions={['gz']}
-            bind:files={$createFunctionDeployment}
-            required />
-
-        <InputText
-            label="Entrypoint"
-            id="entrypoint"
-            placeholder="Entrypoint"
-            bind:value={$createFunction.entrypoint}
-            required />
-        <Collapsible>
-            <CollapsibleItem>
-                <svelte:fragment slot="title">Build commands</svelte:fragment>
-                <svelte:fragment slot="subtitle">(optional)</svelte:fragment>
-                <FormList>
-                    <InputTextarea
-                        label="Commands"
-                        placeholder="Enter a build command (e.g. 'npm install')"
-                        id="build"
-                        tooltip="Enter a single command or chain multiple commands with the && operator"
-                        bind:value={$createFunction.commands} />
-                </FormList>
-            </CollapsibleItem>
-        </Collapsible>
-    </FormList>
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/manualDetails.svelte b/src/lib/wizards/functions/steps/manualDetails.svelte
deleted file mode 100644
index 9167474d0..000000000
--- a/src/lib/wizards/functions/steps/manualDetails.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-    import { CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, InputSelect, FormList } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { onMount } from 'svelte';
-    import { createFunction } from '../store';
-    import { runtimesList } from '$lib/stores/runtimes';
-    import { specificationsList } from '$lib/stores/specifications';
-    import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
-    import SpecificationsTooltip from '../components/specificationsTooltip.svelte';
-
-    let showCustomId = false;
-
-    let options = [];
-    let specificationOptions = [];
-
-    onMount(async () => {
-        options = (await $runtimesList).runtimes.map((runtime) => ({
-            label: `${runtime.name} - ${runtime.version}`,
-            value: runtime.$id
-        }));
-
-        specificationOptions = (await $specificationsList).specifications.map((size) => ({
-            label:
-                `${size.cpus} CPU, ${size.memory} MB RAM` +
-                (!size.enabled ? ` (Upgrade to use this)` : ''),
-            value: size.slug,
-            disabled: !size.enabled
-        }));
-    });
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Details</svelte:fragment>
-    <svelte:fragment slot="subtitle">Create and deploy your function manually.</svelte:fragment>
-    <FormList>
-        <InputText
-            label="Name"
-            id="name"
-            placeholder="Function name"
-            autofocus
-            bind:value={$createFunction.name}
-            required />
-
-        <InputSelect
-            label="Runtime"
-            id="runtime"
-            placeholder="Select runtime"
-            bind:value={$createFunction.runtime}
-            {options}
-            required />
-
-        <InputSelect
-            label="CPU and memory"
-            id="specification"
-            placeholder="Select specification"
-            required
-            disabled={specificationOptions.length < 1}
-            options={specificationOptions}
-            popover={isCloud && $organization?.billingPlan === BillingPlan.FREE
-                ? SpecificationsTooltip
-                : null}
-            bind:value={$createFunction.specification} />
-
-        {#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
-                autofocus
-                bind:show={showCustomId}
-                name="Function"
-                bind:id={$createFunction.$id}
-                fullWidth />
-        {/if}
-    </FormList>
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/selectRepository.svelte b/src/lib/wizards/functions/steps/selectRepository.svelte
deleted file mode 100644
index 8ae8a1b14..000000000
--- a/src/lib/wizards/functions/steps/selectRepository.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import Repositories from '../components/repositories.svelte';
-
-    let hasInstallations: boolean;
-    let selectedRepository: string;
-    async function beforeSubmit() {
-        if (!hasInstallations) {
-            throw new Error('Please connect a Git provider');
-        }
-        if (!selectedRepository) {
-            throw new Error('Please select a repository');
-        }
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Repository</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Select a Git repository that will trigger your function deployments when updated.
-    </svelte:fragment>
-    <Repositories bind:hasInstallations bind:selectedRepository />
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
deleted file mode 100644
index fbce477fb..000000000
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-<script lang="ts">
-    import { CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputSelect, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { runtimesList } from '$lib/stores/runtimes';
-    import { specificationsList } from '$lib/stores/specifications';
-    import { BillingPlan } from '$lib/constants';
-    import SpecificationsTooltip from '../components/specificationsTooltip.svelte';
-    import { template, templateConfig } from '../store';
-    import { organization } from '$lib/stores/organization';
-    import { isCloud } from '$lib/system';
-
-    let showCustomId = false;
-
-    async function beforeSubmit() {
-        if (!$templateConfig.runtime) {
-            throw new Error('Please select a runtime.');
-        }
-
-        if (!$templateConfig.specification) {
-            throw new Error('Please select a specification.');
-        }
-    }
-
-    async function loadRuntimes() {
-        const options = (await $runtimesList).runtimes
-            .map((runtime) => ({
-                label: `${runtime.name} - ${runtime.version}`,
-                value: runtime.$id
-            }))
-            .filter((runtime) => {
-                const allowedRuntimes = $template.runtimes.map((r) => r.name);
-                return allowedRuntimes.includes(runtime.value);
-            });
-
-        return options;
-    }
-
-    async function loadSpecifications() {
-        const specificationOptions = (await $specificationsList).specifications.map((size) => ({
-            label:
-                `${size.cpus} CPU, ${size.memory} MB RAM` +
-                (!size.enabled ? ` (Upgrade to use this)` : ''),
-            value: size.slug,
-            disabled: !size.enabled
-        }));
-
-        if (!$templateConfig.specification && specificationOptions.length > 0) {
-            $templateConfig.specification = specificationOptions[0].value;
-        }
-
-        return specificationOptions;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">{$template.name}</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        {$template.tagline}
-    </svelte:fragment>
-    <FormList>
-        <InputText
-            label="Name"
-            id="name"
-            placeholder="Function name"
-            autofocus
-            bind:value={$templateConfig.name}
-            required />
-        {#await loadRuntimes()}
-            <InputSelect
-                label="Runtime"
-                id="runtime"
-                placeholder="Loading runtimes..."
-                required
-                disabled
-                options={[]}
-                value={null} />
-        {:then options}
-            <InputSelect
-                label="Runtime"
-                id="runtime"
-                placeholder="Select runtime"
-                required
-                disabled={options.length < 1}
-                {options}
-                bind:value={$templateConfig.runtime} />
-        {/await}
-        {#await loadSpecifications()}
-            <InputSelect
-                label="CPU and memory"
-                id="specification"
-                placeholder="Loading specifications..."
-                required
-                disabled
-                options={[]}
-                value={null} />
-        {:then specificationOptions}
-            <InputSelect
-                label="CPU and memory"
-                id="specification"
-                placeholder="Select specification"
-                required
-                disabled={specificationOptions.length < 1}
-                options={specificationOptions}
-                popover={isCloud && $organization?.billingPlan === BillingPlan.FREE
-                    ? SpecificationsTooltip
-                    : null}
-                bind:value={$templateConfig.specification} />
-        {/await}
-    </FormList>
-
-    <FormList class="u-margin-block-start-24">
-        {#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
-                autofocus
-                bind:show={showCustomId}
-                name="Function"
-                bind:id={$templateConfig.$id}
-                fullWidth />
-        {/if}
-    </FormList>
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/templateDeployment.svelte b/src/lib/wizards/functions/steps/templateDeployment.svelte
deleted file mode 100644
index 4d6fc9bdc..000000000
--- a/src/lib/wizards/functions/steps/templateDeployment.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { LabelCard } from '$lib/components';
-    import { FormList } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { consoleVariables } from '$routes/(console)/store';
-    import { onMount } from 'svelte';
-    import { templateConfig, templateStepsComponents } from '../store';
-
-    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-
-    onMount(() => {
-        if (!isVcsEnabled) {
-            $templateConfig.repositoryBehaviour = 'manual';
-        }
-    });
-
-    async function beforeSubmit() {
-        if (!$templateConfig.repositoryBehaviour) {
-            throw new Error('Please select repository behaviour.');
-        }
-    }
-
-    $: if ($templateConfig.repositoryBehaviour === 'manual') {
-        $templateStepsComponents.get(5).disabled = true;
-        $templateStepsComponents.get(6).disabled = true;
-        $templateStepsComponents = $templateStepsComponents;
-    } else {
-        $templateStepsComponents.get(5).disabled = false;
-        $templateStepsComponents.get(6).disabled = false;
-        $templateStepsComponents = $templateStepsComponents;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Deployment</svelte:fragment>
-
-    <h3>Connect with Git <span class="inline-code">Recommended</span></h3>
-    <FormList gap={16} class="u-margin-block-start-8">
-        <LabelCard
-            name="behaviour"
-            value="new"
-            bind:group={$templateConfig.repositoryBehaviour}
-            disabled={!isVcsEnabled}>
-            <svelte:fragment slot="title">Create a new repository</svelte:fragment>
-            Clone the template to a newly created repository in your organization.
-        </LabelCard>
-        <LabelCard
-            name="behaviour"
-            value="existing"
-            bind:group={$templateConfig.repositoryBehaviour}
-            disabled={!isVcsEnabled}>
-            <svelte:fragment slot="title">Add to existing repository</svelte:fragment>
-            Clone the template to an existing repository in your organization.
-        </LabelCard>
-    </FormList>
-
-    <h3 class="u-margin-block-start-24">Quick start</h3>
-    <ul class="u-margin-block-start-8">
-        <LabelCard name="behaviour" value="manual" bind:group={$templateConfig.repositoryBehaviour}>
-            <svelte:fragment slot="title">Connect later</svelte:fragment>
-            Deploy now and continue development via CLI, or connect Git from your function settings.
-        </LabelCard>
-    </ul>
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/templatePermissions.svelte b/src/lib/wizards/functions/steps/templatePermissions.svelte
deleted file mode 100644
index a8559b5d4..000000000
--- a/src/lib/wizards/functions/steps/templatePermissions.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-    import { scopes } from '$lib/constants';
-    import { FormList, InputChoice } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { onMount } from 'svelte';
-    import { template, templateConfig } from '../store';
-    import { tooltip } from '$lib/actions/tooltip';
-
-    let templateScopes = [];
-    onMount(() => {
-        $templateConfig.execute = $template.permissions.includes('any');
-        templateScopes = scopes
-            // hot fix for perplexity chat template,
-            // backend doesn't have scopes for this template.
-            // TODO: @itznotabug fix on backend too.
-            .filter((scope) => ($template.scopes ?? []).includes(scope.scope))
-            .map((scope) => ({
-                ...scope,
-                active: true
-            }));
-    });
-
-    $: $templateConfig.scopes = templateScopes
-        ?.filter((scope) => scope.active)
-        ?.map((scope) => scope.scope);
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Enable recommended scopes and execute access for when your function is deployed.
-    </svelte:fragment>
-    <h3 class="label">Execute permissions</h3>
-    <FormList class="u-margin-block-start-16">
-        <div class="user-profile">
-            <span class="avatar" style:--p-text-size="1rem">
-                <span class="icon-lock-open" />
-            </span>
-            <span class="user-profile-info u-flex u-main-space-between u-gap-16">
-                <div>
-                    <p class="name u-bold">
-                        Public (anyone can execute) <span
-                            class="icon-info"
-                            use:tooltip={{
-                                content:
-                                    'You can further customize execute permissions in your function settings.'
-                            }} />
-                    </p>
-                    <p class="text u-margin-block-start-4">
-                        This could include unauthorized users and bots.
-                    </p>
-                </div>
-
-                <InputChoice
-                    type="switchbox"
-                    id="execute"
-                    label="Execute"
-                    showLabel={false}
-                    bind:value={$templateConfig.execute}></InputChoice>
-            </span>
-        </div>
-    </FormList>
-    {#if templateScopes.length > 0}
-        <h3 class="label u-margin-block-start-48">Function scopes</h3>
-        <FormList class="u-margin-block-start-16">
-            {#each templateScopes as scope, i}
-                <div class="user-profile">
-                    <span class="avatar" style:--p-text-size="1rem">
-                        <span class={`icon-${scope.icon}`} />
-                    </span>
-                    <span class="user-profile-info u-flex u-main-space-between u-gap-16">
-                        <div>
-                            <p class="name u-bold">{scope.scope}</p>
-                            <p class="text u-margin-block-start-4">{scope.description}</p>
-                        </div>
-                        <InputChoice
-                            type="switchbox"
-                            id={scope.scope}
-                            label={scope.scope}
-                            showLabel={false}
-                            bind:value={scope.active}>
-                        </InputChoice>
-                    </span>
-                </div>
-                {#if i < templateScopes.length - 1}
-                    <div class="with-separators"></div>
-                {/if}
-            {/each}
-        </FormList>
-    {/if}
-</WizardStep>
diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
deleted file mode 100644
index c7db15bd4..000000000
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { template, templateConfig } from '../store';
-    import {
-        FormList,
-        Helper,
-        InputPassword,
-        InputText,
-        InputURL,
-        InputPhone,
-        InputEmail,
-        InputNumber
-    } from '$lib/elements/forms';
-    import { Card, Collapsible, CollapsibleItem } from '$lib/components';
-    import type { SvelteComponent } from 'svelte';
-
-    async function beforeSubmit() {
-        for (const variable of $template.variables) {
-            if (!variable.required) {
-                continue;
-            }
-            if (!$templateConfig.variables[variable.name]) {
-                throw new Error(`Please set ${variable.name} variable.`);
-            }
-        }
-    }
-
-    $: requiredVariables = $template?.variables?.filter((v) => v.required);
-    $: optionalVariables = $template?.variables?.filter((v) => !v.required);
-
-    function selectComponent(variableType: string): typeof SvelteComponent<unknown> {
-        switch (variableType) {
-            case 'password':
-                return InputPassword;
-            case 'text':
-                return InputText;
-            case 'url':
-                return InputURL;
-            case 'phone':
-                return InputPhone;
-            case 'email':
-                return InputEmail;
-            case 'number':
-                return InputNumber;
-            default:
-                return InputPassword;
-        }
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Variables</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Edit the values of the environment variables that will be passed to your function at
-        runtime.
-    </svelte:fragment>
-    {#if $template?.variables?.length}
-        {#if requiredVariables?.length}
-            <Collapsible>
-                <CollapsibleItem open={true}>
-                    <svelte:fragment slot="title">Required variables</svelte:fragment>
-                    <svelte:fragment slot="subtitle">
-                        <span class="inline-tag">{requiredVariables.length}</span>
-                    </svelte:fragment>
-
-                    <FormList>
-                        {#each requiredVariables as variable}
-                            <div>
-                                <svelte:component
-                                    this={selectComponent(variable.type)}
-                                    id={variable.name}
-                                    label={variable.name}
-                                    placeholder={variable.placeholder ?? 'Enter value'}
-                                    required={variable.required}
-                                    autocomplete={false}
-                                    minlength={variable.type === 'password' ? 0 : null}
-                                    showPasswordButton={variable.type === 'password'}
-                                    bind:value={$templateConfig.variables[variable.name]} />
-                                <Helper type="neutral">
-                                    {@html variable.description}
-                                </Helper>
-                            </div>
-                        {/each}
-                    </FormList>
-                </CollapsibleItem>
-            </Collapsible>
-        {/if}
-
-        {#if optionalVariables?.length}
-            <Collapsible>
-                <CollapsibleItem open={!requiredVariables?.length}>
-                    <svelte:fragment slot="title">Optional variables</svelte:fragment>
-                    <svelte:fragment slot="subtitle">
-                        <span class="inline-tag">{optionalVariables.length}</span>
-                    </svelte:fragment>
-
-                    <FormList>
-                        {#each optionalVariables as variable}
-                            <div>
-                                <svelte:component
-                                    this={selectComponent(variable.type)}
-                                    id={variable.name}
-                                    label={variable.name}
-                                    placeholder={variable.placeholder ?? 'Enter value'}
-                                    required={variable.required}
-                                    autocomplete={false}
-                                    showPasswordButton={variable.type === 'password'}
-                                    bind:value={$templateConfig.variables[variable.name]} />
-
-                                <Helper type="neutral">
-                                    {@html variable.description}
-                                </Helper>
-                            </div>
-                        {/each}
-                    </FormList>
-                </CollapsibleItem>
-            </Collapsible>
-        {/if}
-    {:else}
-        <Card isDashed>
-            <p class="text u-text-center">There are no environment variables to configure.</p>
-        </Card>
-    {/if}
-</WizardStep>
diff --git a/src/lib/wizards/functions/store.ts b/src/lib/wizards/functions/store.ts
deleted file mode 100644
index 6ae23d609..000000000
--- a/src/lib/wizards/functions/store.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { page } from '$app/stores';
-import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-import type { Models } from '@appwrite.io/console';
-import { derived, writable, type Writable } from 'svelte/store';
-
-export const template = writable<Models.TemplateFunction>();
-export const templateConfig = writable<{
-    $id: string;
-    name: string;
-    runtime: string;
-    variables: { [key: string]: unknown };
-    repositoryBehaviour: 'new' | 'existing' | 'manual';
-    repositoryName?: string;
-    repositoryPrivate?: boolean;
-    repositoryId: string;
-    execute?: boolean;
-    scopes?: string[];
-    specification?: string;
-}>();
-export const repository = writable<Models.ProviderRepository>();
-export const installation = writable<Models.Installation>();
-export const choices = writable<{
-    branch: string;
-    rootDir: string;
-    silentMode: boolean;
-}>({
-    branch: null,
-    rootDir: null,
-    silentMode: null
-});
-
-export const installations = derived(
-    page,
-    ($page) => $page.data.installations as Models.InstallationList
-);
-
-const initialCreateFunction: Partial<Models.Function> = {
-    $id: null,
-    name: null,
-    entrypoint: null,
-    execute: [],
-    runtime: null,
-    commands: null
-};
-
-function createFunctionStore() {
-    const store = writable<Partial<Models.Function>>({
-        ...initialCreateFunction
-    });
-
-    const reset = () => {
-        store.set({ ...initialCreateFunction });
-    };
-
-    return {
-        ...store,
-        reset
-    };
-}
-export const createFunction = createFunctionStore();
-
-export const createFunctionDeployment = writable<FileList>();
-
-export const templateStepsComponents: Writable<WizardStepsType> = writable(new Map());
diff --git a/src/routes/(authenticated)/git/authorize-contributor/+page.svelte b/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
index 9e2c270ee..0c1717dc4 100644
--- a/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
+++ b/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { app } from '$lib/stores/app';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
@@ -20,12 +20,12 @@
     let success = '';
 
     onMount(async () => {
-        const projectId = $page.url.searchParams.get('projectId');
+        const projectId = page.url.searchParams.get('projectId');
         client.setEndpoint(endpoint).setProject(projectId).setMode('admin');
 
-        installationId = $page.url.searchParams.get('installationId');
-        repositoryId = $page.url.searchParams.get('repositoryId');
-        providerPullRequestId = $page.url.searchParams.get('providerPullRequestId') + '';
+        installationId = page.url.searchParams.get('installationId');
+        repositoryId = page.url.searchParams.get('repositoryId');
+        providerPullRequestId = page.url.searchParams.get('providerPullRequestId') + '';
     });
 
     async function approveDeployment() {
diff --git a/src/routes/(authenticated)/mfa/+page.svelte b/src/routes/(authenticated)/mfa/+page.svelte
index 35b841124..f18b59e89 100644
--- a/src/routes/(authenticated)/mfa/+page.svelte
+++ b/src/routes/(authenticated)/mfa/+page.svelte
@@ -6,8 +6,10 @@
     import { Unauthenticated } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
     import MfaChallengeFormList, { verify } from '$lib/components/mfaChallengeFormList.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications.js';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -26,13 +28,13 @@
         disabled = true;
         try {
             await verify(challenge, code);
-            if ($page.url.searchParams) {
-                const redirect = $page.url.searchParams.get('redirect');
-                $page.url.searchParams.delete('redirect');
+            if (page.url.searchParams) {
+                const redirect = page.url.searchParams.get('redirect');
+                page.url.searchParams.delete('redirect');
                 if (redirect) {
-                    await goto(`${redirect}${$page.url.search}`);
+                    await goto(`${redirect}${page.url.search}`);
                 } else {
-                    await goto(`${base}/${$page.url.search ?? ''}`);
+                    await goto(`${base}/${page.url.search ?? ''}`);
                 }
             } else {
                 await goto(base);
@@ -51,26 +53,27 @@
     <title>Verify - Appwrite</title>
 </svelte:head>
 
-<Unauthenticated>
+<Unauthenticated align="center">
     <svelte:fragment slot="top">
         <div class="top u-flex u-position-absolute u-main-center">
             <div class="flex u-width-full-line">
-                <Button text noMargin class="u-border-width-0" on:click={back}>
-                    <span class="icon-cheveron-left u-font-size-20" aria-hidden="true" />
-                    Back</Button>
+                <Button compact on:click={back}>
+                    <Icon icon={IconChevronLeft} slot="start" size="s" />
+                    Back
+                </Button>
             </div>
         </div>
     </svelte:fragment>
     <svelte:fragment slot="title">Verify your identity</svelte:fragment>
-    <svelte:fragment>
-        <Form onSubmit={submit} class="body-text-1">
+    <Form onSubmit={submit}>
+        <Layout.Stack gap="l" justifyContent="center" alignContent="center" alignItems="center">
             <MfaChallengeFormList {factors} bind:challenge bind:code bind:disabled />
-        </Form>
-    </svelte:fragment>
+        </Layout.Stack>
+    </Form>
 </Unauthenticated>
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
     .top {
         inset-block-start: 5.85rem;
@@ -84,7 +87,7 @@
 
     @media (max-width: 440px) {
         .top {
-            inset-block-start: 0rem;
+            inset-block-start: 1rem;
             padding-inline: 0.5rem;
         }
     }
diff --git a/src/routes/(console)/(migration-wizard)/resource-form.svelte b/src/routes/(console)/(migration-wizard)/resource-form.svelte
index 88ebb305c..c0b09b5a2 100644
--- a/src/routes/(console)/(migration-wizard)/resource-form.svelte
+++ b/src/routes/(console)/(migration-wizard)/resource-form.svelte
@@ -134,12 +134,12 @@
     $: wizard.setNextDisabled(!report);
 </script>
 
-<Box radius="small">
+<Box radius="s">
     <div class="u-flex u-flex-vertical u-gap-16">
         <EyebrowHeading class="eyebrow" tag="h3" size={3}>Good to know</EyebrowHeading>
         <div class="u-flex u-gap-16">
             <div class="circled">
-                <i class="icon-cog" />
+                <i class="icon-cog"></i>
             </div>
             <div>
                 <p class="u-bold">Project settings are not imported</p>
@@ -148,7 +148,7 @@
         </div>
         <div class="u-flex u-gap-16">
             <div class="circled">
-                <i class="icon-trending-up" />
+                <i class="icon-trending-up"></i>
             </div>
             <div>
                 <p class="u-bold">Keep your organization plan's limits in mind</p>
@@ -160,7 +160,7 @@
         {#if $provider.provider === 'firebase'}
             <div class="u-flex u-gap-16">
                 <div class="circled">
-                    <i class="icon-exclamation u-color-text-warning" />
+                    <i class="icon-exclamation u-color-text-warning"></i>
                 </div>
                 <div>
                     <p class="u-bold">Possible charges by Firebase</p>
@@ -173,7 +173,7 @@
         {:else}
             <div class="u-flex u-gap-16">
                 <div class="circled">
-                    <i class="icon-currency-dollar" />
+                    <i class="icon-currency-dollar"></i>
                 </div>
                 <div>
                     <p class="u-bold">Transfer is free of charge</p>
@@ -247,11 +247,11 @@
                     {#if report?.user !== undefined}
                         <span class="inline-tag">{report.user}</span>
                     {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4" />
+                        <span class="loader is-small u-margin-inline-start-4"></span>
                     {/if}
                 {/if}
             </div>
-            <div />
+            <div></div>
             <span>Import all users</span>
 
             {#if resources?.includes('team')}
@@ -267,11 +267,11 @@
                                 {#if report?.team !== undefined}
                                     <span class="inline-tag">{report.team}</span>
                                 {:else if !error}
-                                    <span class="loader is-small u-margin-inline-start-4" />
+                                    <span class="loader is-small u-margin-inline-start-4"></span>
                                 {/if}
                             {/if}
                         </div>
-                        <div />
+                        <div></div>
                         <span>Import all teams and the team memberships of your users</span>
                     </li>
                 </ul>
@@ -291,11 +291,11 @@
                     {#if report?.database !== undefined}
                         <span class="inline-tag">{report.database}</span>
                     {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4" />
+                        <span class="loader is-small u-margin-inline-start-4"></span>
                     {/if}
                 {/if}
             </div>
-            <div />
+            <div></div>
             <span>Import all databases, including collections, indexes and attributes</span>
 
             {#if resources?.includes('document')}
@@ -311,11 +311,11 @@
                                 {#if report?.document !== undefined}
                                     <span class="inline-tag">{report.document}</span>
                                 {:else if !error}
-                                    <span class="loader is-small u-margin-inline-start-4" />
+                                    <span class="loader is-small u-margin-inline-start-4"></span>
                                 {/if}
                             {/if}
                         </div>
-                        <div />
+                        <div></div>
                         <span>Import all of your documents</span>
                     </li>
                 </ul>
@@ -335,11 +335,11 @@
                     {#if report?.function !== undefined}
                         <span class="inline-tag">{report.function}</span>
                     {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4" />
+                        <span class="loader is-small u-margin-inline-start-4"></span>
                     {/if}
                 {/if}
             </div>
-            <div />
+            <div></div>
             <span>Import all functions and their active deployment</span>
             <ul>
                 {#if resources?.includes('environment-variable')}
@@ -351,7 +351,7 @@
                         <div class="u-flex u-gap-4">
                             <span class="u-bold">Include environment variables</span>
                         </div>
-                        <div />
+                        <div></div>
                         <span>Import all environment variables</span>
                     </li>
                 {/if}
@@ -364,7 +364,7 @@
                         <div class="u-flex u-gap-4">
                             <span class="u-bold">Include inactive deployments</span>
                         </div>
-                        <div />
+                        <div></div>
                         <span>Import all deployments that are not currently active</span>
                     </li>
                 {/if}
@@ -384,11 +384,11 @@
                     {#if report?.size !== undefined}
                         <span class="inline-tag">{`${report.size.toFixed(2)}MB`}</span>
                     {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4" />
+                        <span class="loader is-small u-margin-inline-start-4"></span>
                     {/if}
                 {/if}
             </div>
-            <div />
+            <div></div>
 
             <p>
                 Import all buckets
@@ -416,7 +416,7 @@
         height: 1.5rem;
         flex-shrink: 0;
         border-radius: 100%;
-        border: 1px solid hsl(var(--color-border));
+        border: 1px solid hsl(var(--border));
         position: relative;
 
         i {
@@ -429,7 +429,7 @@
     }
 
     .buttons-list {
-        border-block-end: 1px solid hsl(var(--color-border));
+        border-block-end: 1px solid hsl(var(--border));
         padding-block-end: 0.625rem;
     }
 
diff --git a/src/routes/(console)/(migration-wizard)/step1.svelte b/src/routes/(console)/(migration-wizard)/step1.svelte
index 56335467a..3bc718df5 100644
--- a/src/routes/(console)/(migration-wizard)/step1.svelte
+++ b/src/routes/(console)/(migration-wizard)/step1.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { FormList, InputSelect } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { InputSelect } from '$lib/elements/forms';
     import InputText from '$lib/elements/forms/inputText.svelte';
     import { WizardStep } from '$lib/layout';
     import { Query, type Models, ID } from '@appwrite.io/console';
     import { selectedProject } from '.';
     import { sdk } from '$lib/stores/sdk';
 
-    const organizations = $page.data.organizations
+    const organizations = page.data.organizations
         .teams as Models.TeamList<Models.Preferences>['teams'];
     let selectedOrg = organizations.length ? organizations[0].$id : null;
 
@@ -44,70 +44,68 @@
 <WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Project</svelte:fragment>
 
-    <FormList>
-        {#if organizations.length > 1}
-            <InputSelect
-                id="organization"
-                bind:value={selectedOrg}
-                label="Select organization"
-                options={organizations.map((p) => ({
-                    label: p.name,
-                    value: p.$id
-                }))}
-                disabled={loadingProjects} />
-        {/if}
+    {#if organizations.length > 1}
+        <InputSelect
+            id="organization"
+            bind:value={selectedOrg}
+            label="Select organization"
+            options={organizations.map((p) => ({
+                label: p.name,
+                value: p.$id
+            }))}
+            disabled={loadingProjects} />
+    {/if}
 
-        {#if selectedOrg && !loadingProjects}
-            {#if projects.length}
-                <div class="radios">
-                    <div class="u-flex u-gap-8">
-                        <input
-                            type="radio"
-                            name="project_type"
-                            id="project_type--existing"
-                            bind:group={projectType}
-                            value="existing" />
-                        <label for="project_type--existing">
-                            <p class="u-bold">Existing project</p>
-                            <p>Import data to an existing project</p>
-                        </label>
-                    </div>
-                    <div class="u-flex u-gap-8">
-                        <input
-                            type="radio"
-                            name="project_type"
-                            id="project_type--new"
-                            bind:group={projectType}
-                            value="new" />
-                        <label for="project_type--new">
-                            <p class="u-bold">Create new project</p>
-                            <span>Import data to a new project</span>
-                        </label>
-                    </div>
+    {#if selectedOrg && !loadingProjects}
+        {#if projects.length}
+            <div class="radios">
+                <div class="u-flex u-gap-8">
+                    <input
+                        type="radio"
+                        name="project_type"
+                        id="project_type--existing"
+                        bind:group={projectType}
+                        value="existing" />
+                    <label for="project_type--existing">
+                        <p class="u-bold">Existing project</p>
+                        <p>Import data to an existing project</p>
+                    </label>
+                </div>
+                <div class="u-flex u-gap-8">
+                    <input
+                        type="radio"
+                        name="project_type"
+                        id="project_type--new"
+                        bind:group={projectType}
+                        value="new" />
+                    <label for="project_type--new">
+                        <p class="u-bold">Create new project</p>
+                        <span>Import data to a new project</span>
+                    </label>
                 </div>
-            {/if}
-
-            <div>
-                {#if projectType === 'existing'}
-                    <InputSelect
-                        id="project"
-                        bind:value={$selectedProject}
-                        label="Select a project"
-                        options={projects.map((p) => ({
-                            label: p.name,
-                            value: p.$id
-                        }))} />
-                {:else}
-                    <InputText
-                        label="Project name"
-                        placeholder="Enter project name"
-                        id="project_name"
-                        bind:value={newProjName}
-                        required />
-                {/if}
             </div>
         {/if}
-    </FormList>
+
+        <div>
+            {#if projectType === 'existing'}
+                <InputSelect
+                    id="project"
+                    bind:value={$selectedProject}
+                    label="Select a project"
+                    options={projects.map((p) => ({
+                        label: p.name,
+                        value: p.$id
+                    }))} />
+            {:else}
+                <InputText
+                    label="Project name"
+                    placeholder="Enter project name"
+                    id="project_name"
+                    bind:value={newProjName}
+                    required />
+            {/if}
+        </div>
+    {/if}
 </WizardStep>
 
 <style lang="scss">
diff --git a/src/routes/(console)/(migration-wizard)/wizard.svelte b/src/routes/(console)/(migration-wizard)/wizard.svelte
index 15fee1c47..e0b296759 100644
--- a/src/routes/(console)/(migration-wizard)/wizard.svelte
+++ b/src/routes/(console)/(migration-wizard)/wizard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto, invalidateAll } from '$app/navigation';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import Wizard from '$lib/layout/wizard.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
+    import Wizard from '$lib/layout/wizardWithSteps.svelte';
     import { migrationFormToResources } from '$lib/stores/migration';
     import { wizard } from '$lib/stores/wizard';
     import { onDestroy } from 'svelte';
diff --git a/src/routes/(console)/+error.svelte b/src/routes/(console)/+error.svelte
index 6b71031bd..7c01dcbb2 100644
--- a/src/routes/(console)/+error.svelte
+++ b/src/routes/(console)/+error.svelte
@@ -1,15 +1,20 @@
 <script>
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
-    <div class="u-flex-vertical u-gap-16">
-        <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
-        <Heading size="4" tag="h4" trimmed={false}>{$page.error.message}</Heading>
+    <div>
+        <Typography.Title size="xl"
+            >{'status' in page.error
+                ? page.error.status || 'Invalid Argument'
+                : 'Invalid Argument'}</Typography.Title>
+        <Typography.Title>{page.error.message}</Typography.Title>
+    </div>
+    <div>
         <Button href={base}>Back to the console</Button>
     </div>
 </Container>
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 3811a70af..2a101bc25 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { BillingPlan, INTERVAL } from '$lib/constants';
-    import { Logs } from '$lib/layout';
     import Footer from '$lib/layout/footer.svelte';
-    import Header from '$lib/layout/header.svelte';
-    import SideNavigation from '$lib/layout/navigation.svelte';
     import Shell from '$lib/layout/shell.svelte';
     import { app } from '$lib/stores/app';
-    import { log } from '$lib/stores/logs';
     import { newOrgModal, organization, type Organization } from '$lib/stores/organization';
     import { database, checkForDatabaseBackupPolicies } from '$lib/stores/database';
     import { wizard } from '$lib/stores/wizard';
@@ -46,6 +42,16 @@
     import { base } from '$app/paths';
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert } from '$lib/components';
+    import {
+        IconAnnotation,
+        IconBookOpen,
+        IconDiscord,
+        IconPencil,
+        IconPlus,
+        IconQuestionMarkCircle,
+        IconSparkles,
+        IconSwitchHorizontal
+    } from '@appwrite.io/pink-icons-svelte';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -56,8 +62,20 @@
 
     const isAssistantEnabled = $consoleVariables?._APP_ASSISTANT_ENABLED === true;
 
+    export let data;
+    $: loadedProjects = data.projects.map((project) => {
+        return {
+            name: project?.name,
+            $id: project.$id,
+            region: project.region,
+            isSelected: data.currentProjectId === project.$id,
+            platformCount: project.platforms.length,
+            pingCount: project.pingCount
+        };
+    });
+
     $: isOnSettingsLayout = $project?.$id
-        ? $page.url.pathname.includes(`project-${$project.$id}/settings`)
+        ? page.url.pathname.includes(`project-${$project.region}-${$project.$id}/settings`)
         : false;
 
     $: $registerCommands([
@@ -69,9 +87,9 @@
             keys: ['g', 'p'],
             group: 'navigation',
             disabled:
-                ($page.url.pathname.includes('/console/organization-') &&
-                    !$page.url.pathname.endsWith('/members') &&
-                    !$page.url.pathname.endsWith('/settings')) ||
+                (page.url.pathname.includes('/console/organization-') &&
+                    !page.url.pathname.endsWith('/members') &&
+                    !page.url.pathname.endsWith('/settings')) ||
                 !$canSeeProjects,
             rank: -1
         },
@@ -81,7 +99,7 @@
                 addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
-            icon: 'sparkles',
+            icon: IconSparkles,
             disabled: !isAssistantEnabled
         },
         {
@@ -90,7 +108,8 @@
                 isCloud ? goto(`${base}/create-organization`) : newOrgModal.set(true);
             },
             keys: ['c', 'o'],
-            group: 'organizations'
+            group: 'organizations',
+            icon: IconPlus
         },
         {
             label: 'Open documentation',
@@ -98,7 +117,7 @@
                 window.open('https://appwrite.io/docs', '_blank');
             },
             group: 'help',
-            icon: 'book-open'
+            icon: IconBookOpen
         },
         {
             label: 'Contact support',
@@ -106,7 +125,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: 'question-mark-circle'
+            icon: IconQuestionMarkCircle
         },
         {
             label: 'Send feedback',
@@ -114,7 +133,7 @@
                 feedback.toggleFeedback();
             },
             group: 'help',
-            icon: 'annotation'
+            icon: IconAnnotation
         },
         {
             label: 'Join Discord community',
@@ -122,7 +141,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: 'discord'
+            icon: IconDiscord
         },
         ...(['auto', 'dark', 'light'] as const).map((theme) => {
             return {
@@ -136,7 +155,7 @@
                     });
                 },
                 group: 'misc',
-                icon: 'switch-horizontal',
+                icon: IconSwitchHorizontal,
                 keys: ['t', theme[0]]
             } as const;
         }),
@@ -160,7 +179,7 @@
                     },
                     disabled: !$project?.$id,
                     group: 'security',
-                    icon: 'pencil'
+                    icon: IconPencil
                 }) as const
         ),
         // Settings
@@ -172,7 +191,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/settings`);
             },
             disabled:
-                !$project?.$id || (isOnSettingsLayout && $page.url.pathname.endsWith('settings')),
+                !$project?.$id || (isOnSettingsLayout && page.url.pathname.endsWith('settings')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
             rank: isOnSettingsLayout ? 40 : -1
         },
@@ -184,7 +203,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/settings/domains`);
             },
             disabled:
-                !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('domains')),
+                !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('domains')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
             rank: isOnSettingsLayout ? 30 : -1
         },
@@ -195,7 +214,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/settings/webhooks`);
             },
             disabled:
-                !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('webhooks')),
+                !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('webhooks')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
 
             rank: isOnSettingsLayout ? 20 : -1
@@ -207,7 +226,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/settings/migrations`);
             },
             disabled:
-                !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('migrations')),
+                !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('migrations')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
 
             rank: isOnSettingsLayout ? 10 : -1
@@ -218,7 +237,7 @@
             callback: () => {
                 goto(`${base}/project-${$project.region}-${$project.$id}/settings/smtp`);
             },
-            disabled: !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('smtp')),
+            disabled: !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('smtp')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
             rank: -1
         },
@@ -271,9 +290,9 @@
     }
 
     database.subscribe(async (database) => {
-        if (!database || !$page.params.region || !$page.params.project) return;
+        if (!database || !page.params.region || !page.params.project) return;
         // the component checks `isCloud` internally.
-        await checkForDatabaseBackupPolicies($page.params.region, $page.params.project, database);
+        await checkForDatabaseBackupPolicies(page.params.region, page.params.project, database);
     });
 
     let currentOrganizationId = null;
@@ -301,11 +320,6 @@
 
     $: checkForUsageLimits($organization);
 
-    $: if (!$log.show) {
-        $log.data = null;
-        $log.func = null;
-    }
-
     $: if ($requestedMigration) {
         openMigrationWizard();
     }
@@ -318,31 +332,29 @@
 </script>
 
 <CommandCenter />
-
 <Shell
-    showSideNavigation={$page.url.pathname !== '/console' &&
-        !$page?.params.organization &&
-        !$page.url.pathname.includes('/console/account') &&
-        !$page.url.pathname.includes('/console/card') &&
-        !$page.url.pathname.includes('/console/onboarding')}>
-    <Header slot="header" />
-    <SideNavigation slot="side" />
+    showSideNavigation={page.url.pathname !== '/console' &&
+        !page?.params.organization &&
+        !page.url.pathname.includes('/console/account') &&
+        !page.url.pathname.includes('/console/card') &&
+        !page.url.pathname.includes('/console/onboarding')}
+    showHeader={!page.url.pathname.includes('/console/onboarding')}
+    showFooter={!page.url.pathname.includes('/console/onboarding')}
+    bind:loadedProjects
+    bind:projects={data.projects}>
+    <!--    <Header slot="header" />-->
     <slot />
     <Footer slot="footer" />
 </Shell>
 
 {#if $wizard.show && $wizard.component}
-    <svelte:component this={$wizard.component} />
+    <svelte:component this={$wizard.component} {...$wizard.props} />
 {:else if $wizard.cover}
     <svelte:component this={$wizard.cover} />
 {/if}
 
 <Create bind:show={$newOrgModal} />
 
-{#if $log.show}
-    <Logs />
-{/if}
-
 {#if $showSupportModal}
     <MobileSupportModal bind:show={$showSupportModal}></MobileSupportModal>
 {/if}
diff --git a/src/routes/(console)/+layout.ts b/src/routes/(console)/+layout.ts
index 1f5bbfc3e..f09c16ef3 100644
--- a/src/routes/(console)/+layout.ts
+++ b/src/routes/(console)/+layout.ts
@@ -4,12 +4,15 @@ import type { Tier } from '$lib/stores/billing';
 import { sdk } from '$lib/stores/sdk';
 import { isCloud } from '$lib/system';
 import type { LayoutLoad } from './$types';
+import { Query } from '@appwrite.io/console';
 
-export const load: LayoutLoad = async ({ fetch, depends, parent }) => {
+export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
     await parent();
-
     depends(Dependencies.RUNTIMES);
     depends(Dependencies.CONSOLE_VARIABLES);
+    depends(Dependencies.ORGANIZATION);
+
+    const prefs = await sdk.forConsole.account.getPrefs();
 
     const { endpoint, project } = sdk.forConsole.client.config;
     const versionPromise = fetch(`${endpoint}/health/version`, {
@@ -31,11 +34,38 @@ export const load: LayoutLoad = async ({ fetch, depends, parent }) => {
         }, new Map<Tier, Plan>());
     }
 
+    const organizations = !isCloud
+        ? await sdk.forConsole.teams.list()
+        : await sdk.forConsole.billing.listOrganization();
+
+    let projects = [];
+    let currentOrgId = params.organization ? params.organization : prefs.organization;
+
+    if (!currentOrgId && organizations.teams.length > 0) {
+        currentOrgId = organizations.teams[0].$id;
+    }
+    if (currentOrgId) {
+        const orgProjects = await sdk.forConsole.projects.list([
+            Query.equal('teamId', currentOrgId),
+            Query.limit(100),
+            Query.orderDesc('$updatedAt')
+        ]);
+        projects = orgProjects.projects.length > 0 ? orgProjects.projects : [];
+    }
+
+    // set `default` if no region!
+    for (const project of projects) {
+        project.region ??= 'default';
+    }
+
     return {
         consoleVariables: variables,
         version: data?.version ?? null,
         plansInfo,
         roles: [],
-        scopes: []
+        scopes: [],
+        projects: projects,
+        currentProjectId: params.project ?? '',
+        organizations: organizations
     };
 };
diff --git a/src/routes/(console)/account/activity/+page.ts b/src/routes/(console)/account/activity/+page.ts
index 4dfa80227..4f02c4912 100644
--- a/src/routes/(console)/account/activity/+page.ts
+++ b/src/routes/(console)/account/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);
-    const limit = getLimit('console', url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/account/delete.svelte b/src/routes/(console)/account/delete.svelte
index 9969c90be..b7bf6fa15 100644
--- a/src/routes/(console)/account/delete.svelte
+++ b/src/routes/(console)/account/delete.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
 
@@ -27,17 +26,6 @@
     }
 </script>
 
-<Modal
-    title="Delete account"
-    bind:show={showDelete}
-    bind:error
-    onSubmit={deleteAccount}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <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>
+<Confirm title="Delete account" onSubmit={deleteAccount} bind:open={showDelete} bind:error>
+    Are you sure you want to delete your account?
+</Confirm>
diff --git a/src/routes/(console)/account/deleteAccount.svelte b/src/routes/(console)/account/deleteAccount.svelte
index 863839c66..0c31d74c4 100644
--- a/src/routes/(console)/account/deleteAccount.svelte
+++ b/src/routes/(console)/account/deleteAccount.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AvatarInitials, BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { AvatarInitials, BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { user } from '$lib/stores/user';
     import Delete from './delete.svelte';
@@ -7,18 +7,14 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h2" size="7">Delete account</Heading>
-    </div>
-    <p>
-        Your account will be permanently deleted and access will be lost to any of your teams and
-        data. This action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete account</svelte:fragment>
+    Your account will be permanently deleted and access will be lost to any of your teams and data. This
+    action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
-                <AvatarInitials size={48} name={$user.name || $user.email} />
+                <AvatarInitials size="m" name={$user.name || $user.email} />
             </svelte:fragment>
             <svelte:fragment slot="title">
                 <span class="u-bold u-trim-1" data-private>{$user.name || 'User'}</span>
diff --git a/src/routes/(console)/account/deleteMfa.svelte b/src/routes/(console)/account/deleteMfa.svelte
index ba17b1e74..e37bd9d49 100644
--- a/src/routes/(console)/account/deleteMfa.svelte
+++ b/src/routes/(console)/account/deleteMfa.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { AuthenticatorType } from '@appwrite.io/console';
@@ -34,21 +33,11 @@
     }
 </script>
 
-<Modal
-    title="Delete authentication method"
-    bind:show={showDelete}
+<Confirm
     onSubmit={deleteAuthenticator}
-    icon="exclamation"
-    state="warning"
-    bind:error
-    headerDivider={false}>
-    <p>
-        Are you sure you want to delete this authentication method? You will no longer be able to
-        use this method to authenticate your account.
-    </p>
-
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    title="Delete authentication method"
+    bind:open={showDelete}
+    bind:error>
+    <p>Are you sure you want to delete this authentication method?</p>
+    <p>You will no longer be able to use this method to authenticate your account.</p>
+</Confirm>
diff --git a/src/routes/(console)/account/header.svelte b/src/routes/(console)/account/header.svelte
index ce5d6fc0c..b0f030d80 100644
--- a/src/routes/(console)/account/header.svelte
+++ b/src/routes/(console)/account/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { isTabSelected } from '$lib/helpers/load';
@@ -55,14 +55,14 @@
             {$user.name || $user.email}
         </CoverTitle>
         <div class="u-margin-inline-start-auto">
-            <Button secondary on:click={logout}>Logout</Button>
+            <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)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/account/identities.svelte b/src/routes/(console)/account/identities.svelte
index c6cc98041..e6aa0416b 100644
--- a/src/routes/(console)/account/identities.svelte
+++ b/src/routes/(console)/account/identities.svelte
@@ -1,16 +1,7 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableScroll,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { identities } from './store';
@@ -18,7 +9,9 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { oAuthProviders } from '$lib/stores/oauth-providers';
-    import EmptySearch from '$lib/components/emptySearch.svelte';
+    import { Card, Empty, Icon, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
 
     async function deleteIdentity(id: string) {
         try {
@@ -40,62 +33,65 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">Identities</Heading>
-    <p class="text">
-        Identities are your connected GitHub accounts. You can sign in using these accounts.
-    </p>
+    <svelte:fragment slot="title">Identities</svelte:fragment>
+    Identities are your connected GitHub accounts. You can sign in using these accounts.
 
     <svelte:fragment slot="aside">
         {#if $identities.length === 0}
-            <EmptySearch hidePagination>
-                <div class="u-text-center">
-                    No identities are currently available. Once you sign in via GitHub, you'll see
-                    it here.
-                </div>
-            </EmptySearch>
+            <Card.Base padding="none">
+                <Empty
+                    type="secondary"
+                    title="No identities are currently available."
+                    description="Once you sign in via GitHub, you'll see
+                it here." />
+            </Card.Base>
         {:else}
-            <TableScroll noMargin noStyles>
-                <TableHeader>
-                    <TableCellHead width={100}>Provider</TableCellHead>
-                    <TableCellHead width={140}>Email</TableCellHead>
-                    <TableCellHead width={140}>Created At</TableCellHead>
-                    <TableCellHead width={140}>Expiry Date</TableCellHead>
-                    <TableCellHead width={40} />
-                </TableHeader>
-                <TableBody>
-                    {#each $identities as identity (identity.$id)}
-                        {@const provider = oAuthProviders[identity.provider]}
-                        <TableRow>
-                            <TableCell title="Provider">
-                                <div class="u-flex u-gap-8 u-cross-center">
-                                    <div class="avatar is-size-small">
-                                        <span
-                                            class={`icon-${provider.icon}`}
-                                            style="font-size: var(--icon-size-medium)!important" />
-                                    </div>
-                                    {provider.name}
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'provider' },
+                    { id: 'email' },
+                    { id: 'createdAt' },
+                    { id: 'expiryDate' },
+                    { id: 'actions', width: 40 }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="provider" {root}>Provider</Table.Header.Cell>
+                    <Table.Header.Cell column="email" {root}>Email</Table.Header.Cell>
+                    <Table.Header.Cell column="createdAt" {root}>Created At</Table.Header.Cell>
+                    <Table.Header.Cell column="expiryDate" {root}>Expiry Date</Table.Header.Cell>
+                    <Table.Header.Cell column="actions" {root} />
+                </svelte:fragment>
+                {#each $identities as identity (identity.$id)}
+                    {@const provider = oAuthProviders[identity.provider]}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="provider" {root}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                <div class="avatar is-size-small">
+                                    <span
+                                        class={`icon-${provider.icon}`}
+                                        style="font-size: var(--icon-size-medium)!important"></span>
                                 </div>
-                            </TableCell>
-                            <TableCellText title="Email">
-                                {identity.providerEmail}
-                            </TableCellText>
-                            <TableCellText title="Created at">
-                                {toLocaleDateTime(identity.$createdAt)}
-                            </TableCellText>
-                            <TableCellText title="Expiry date">
-                                {toLocaleDateTime(identity.providerAccessTokenExpiry)}
-                            </TableCellText>
-                            <TableCell title="Remove">
-                                <Button
-                                    text
-                                    class="is-only-icon"
-                                    on:click={() => deleteIdentity(identity.$id)}
-                                    ><span class="icon-trash" aria-hidden="true" /></Button>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </TableScroll>
+                                {provider.name}
+                            </Layout.Stack>
+                        </Table.Cell>
+                        <Table.Cell column="email" {root}>
+                            {identity.providerEmail}
+                        </Table.Cell>
+                        <Table.Cell column="createdAt" {root}>
+                            <DualTimeView time={identity.$createdAt} />
+                        </Table.Cell>
+                        <Table.Cell column="expiryDate" {root}>
+                            {toLocaleDateTime(identity.providerAccessTokenExpiry)}
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <Button text on:click={() => deleteIdentity(identity.$id)}>
+                                <Icon icon={IconTrash} size="s" />
+                            </Button>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
         {/if}
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/(console)/account/mfa.svelte b/src/routes/(console)/account/mfa.svelte
index 61d7e73af..4768c28ee 100644
--- a/src/routes/(console)/account/mfa.svelte
+++ b/src/routes/(console)/account/mfa.svelte
@@ -3,7 +3,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal, CopyInput } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputDigits } from '$lib/elements/forms';
+    import { Button, InputDigits } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { AuthenticatorType, type Models } from '@appwrite.io/console';
     import QrFrame from '$lib/images/qr2.svg';
@@ -11,7 +11,6 @@
 
     export let showSetup = false;
 
-    let copyParent: HTMLElement;
     let code: string;
     let type: Models.MfaType = null;
     let step = 1;
@@ -42,7 +41,7 @@
 </script>
 
 <Modal
-    title={step == 1 ? 'Scan QR code' : 'Enter verification code'}
+    title={step === 1 ? 'Scan QR code' : 'Enter verification code'}
     bind:show={showSetup}
     onSubmit={verifyAuthenticator}
     {error}>
@@ -67,20 +66,16 @@
                 </div>
                 <span class="with-separators eyebrow-heading-3">or</span>
 
-                <div bind:this={copyParent}>
+                <div>
                     <CopyInput
-                        showLabel={true}
                         label="Manual entry code"
-                        labelTooltip="Manually enter the following code into the authenticator app"
-                        value={type.secret}
-                        appendTo={copyParent} />
+                        optionalText="Manually enter the following code into the authenticator app"
+                        value={type.secret} />
                 </div>
             {/await}
         {:else}
-            <FormList>
-                <label for="code">Enter the 6-digit one-time code generated by the app</label>
-                <InputDigits bind:value={code} autofocus />
-            </FormList>
+            <label for="code">Enter the 6-digit one-time code generated by the app</label>
+            <InputDigits bind:value={code} autofocus />
         {/if}
     {/key}
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/account/mfaRecoveryCodes.svelte b/src/routes/(console)/account/mfaRecoveryCodes.svelte
index 63ec5d0fa..c5b46ae28 100644
--- a/src/routes/(console)/account/mfaRecoveryCodes.svelte
+++ b/src/routes/(console)/account/mfaRecoveryCodes.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { Modal, Output, Copy, Alert } from '$lib/components';
+    import { Modal, Output, Copy } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
     import { type Models } from '@appwrite.io/console';
+    import { IconDownload, IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Alert, Layout, Divider, Table } from '@appwrite.io/pink-svelte';
 
     export let showRecoveryCodes = false;
     export let codes: Models.MfaRecoveryCodes = null;
@@ -11,54 +12,44 @@
 <Modal title="Recovery codes" bind:show={showRecoveryCodes}>
     {#if codes}
         {@const formattedBackupCodes = codes.recoveryCodes.join('\n')}
-        <Alert type="warning">
-            <span slot="title">
-                Securely store your recovery codes as they won't be visible again for security
-                purposes
+        <Alert.Inline
+            status="warning"
+            title="Securely store your recovery codes as they won't be visible again for security
+        purposes">
+            Use security codes for emergency sign-ins in case you've lost access to your mobile
+            device. Each recovery code can only be used once.
+        </Alert.Inline>
+        <Layout.Stack direction="row-reverse" alignItems="center" gap="s">
+            <Button
+                download="appwrite-backups.txt"
+                href={`data:application/octet-stream;charset=utf-8,${formattedBackupCodes}`}
+                text>
+                <Icon icon={IconDownload} slot="start" size="s" />
+                Download .txt
+            </Button>
+            <span style:height="20px">
+                <Divider vertical />
             </span>
-            <p>
-                Use security codes for emergency sign-ins in case you've lost access to your mobile
-                device. Each recovery code can only be used once.
-            </p>
-        </Alert>
-        <div
-            style:flex-direction="row-reverse"
-            class="u-flex u-flex-vertical-mobile u-main-space-between u-gap-16">
-            <ul class="buttons-list">
-                <li class="buttons-list-item">
-                    <Button
-                        download="appwrite-backups.txt"
-                        href={`data:application/octet-stream;charset=utf-8,${formattedBackupCodes}`}
-                        text>
-                        <span class="icon-download u-font-size-20" aria-hidden="true" />
-                        <span class="text">Download .txt</span>
-                    </Button>
-                </li>
-                <li class="buttons-list-item">
-                    <Copy value={formattedBackupCodes} appendTo="parent">
-                        <Button text>
-                            <span class="icon-duplicate" />
-                            <span class="text">Copy all</span>
-                        </Button>
-                    </Copy>
-                </li>
-            </ul>
-        </div>
-        <Table noMargin noStyles>
-            <TableBody>
-                {#each codes.recoveryCodes as code}
-                    <TableRow>
-                        <TableCell title="code">
-                            <Output value={code} hideCopyIcon>{code}</Output>
-                        </TableCell>
-                        <TableCell title="actions" width={24}>
-                            <Copy value={code} appendTo="parent">
-                                <span class="icon-duplicate" aria-hidden="true" />
-                            </Copy>
-                        </TableCell>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </Table>
+            <Copy value={formattedBackupCodes}>
+                <Button text>
+                    <Icon icon={IconDuplicate} slot="start" size="s" />
+                    Copy all
+                </Button>
+            </Copy>
+        </Layout.Stack>
+        <Table.Root columns={[{ id: 'code' }, { id: 'action', width: 24 }]} let:root>
+            {#each codes.recoveryCodes as code}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="code" {root}>
+                        <Output value={code} hideCopyIcon>{code}</Output>
+                    </Table.Cell>
+                    <Table.Cell column="action" {root}>
+                        <Copy value={code}>
+                            <Icon icon={IconDuplicate} />
+                        </Copy>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
     {/if}
 </Modal>
diff --git a/src/routes/(console)/account/mfaRegenerateCodes.svelte b/src/routes/(console)/account/mfaRegenerateCodes.svelte
index 2f671f7ec..46395048e 100644
--- a/src/routes/(console)/account/mfaRegenerateCodes.svelte
+++ b/src/routes/(console)/account/mfaRegenerateCodes.svelte
@@ -29,14 +29,7 @@
     }
 </script>
 
-<Modal
-    title="Regenerate recovery codes"
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    {error}
-    onSubmit={submit}
-    bind:show>
+<Modal title="Regenerate recovery codes" {error} onSubmit={submit} bind:show>
     <p>
         Are you sure you want to regenerate all recovery codes? All <b
             >previously generated recovery codes will become invalid.</b>
@@ -45,8 +38,7 @@
         factors={{ ...factors, recoveryCode: false }}
         bind:challenge
         bind:code
-        showVerifyButton={false}
-        autoSubmit={false} />
+        showVerifyButton={false} />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/(console)/account/organizations/+page.svelte b/src/routes/(console)/account/organizations/+page.svelte
index 37aafa8cb..ff59cad50 100644
--- a/src/routes/(console)/account/organizations/+page.svelte
+++ b/src/routes/(console)/account/organizations/+page.svelte
@@ -5,7 +5,6 @@
         Empty,
         AvatarGroup,
         CardContainer,
-        Heading,
         PaginationWithLimit
     } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -18,10 +17,11 @@
     import type { Models } from '@appwrite.io/console';
     import type { Organization } from '$lib/stores/organization';
     import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
-    import { tooltip } from '$lib/actions/tooltip';
     import { toLocaleDate } from '$lib/helpers/date';
     import { BillingPlan } from '$lib/constants';
     import { goto } from '$app/navigation';
+    import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
     let addOrganization = false;
@@ -46,11 +46,11 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Organizations</Heading>
+        <Typography.Title>Organizations</Typography.Title>
 
         <Button on:click={createOrg} event="create_organization">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create organization</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create organization
         </Button>
     </div>
 
@@ -64,7 +64,8 @@
                 {@const avatarList = getMemberships(organization.$id)}
                 <GridItem1 href={`${base}/organization-${organization.$id}`}>
                     <svelte:fragment slot="eyebrow">
-                        {organization?.total ? organization?.total : 'No'} members
+                        {organization?.total}
+                        {organization?.total > 1 ? 'members' : 'member'}
                     </svelte:fragment>
                     <svelte:fragment slot="title">
                         {organization.name}
@@ -72,33 +73,32 @@
                     <svelte:fragment slot="status">
                         {#if isCloudOrg(organization)}
                             {#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
-                                <div
-                                    class="u-flex u-cross-center"
-                                    use:tooltip={{
-                                        content:
-                                            'You are limited to 1 free organization per account'
-                                    }}>
-                                    <Pill class="eyebrow-heading-3"
-                                        >{tierToPlan(organization?.billingPlan)?.name}</Pill>
-                                </div>
+                                <Tooltip>
+                                    <div class="u-flex u-cross-center">
+                                        <Pill class="eyebrow-heading-3"
+                                            >{tierToPlan(organization?.billingPlan)?.name}</Pill>
+                                    </div>
+                                    <span slot="tooltip"
+                                        >You are limited to 1 free organization per account</span>
+                                </Tooltip>
                             {/if}
                             {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}
-                                <div
-                                    class="u-flex u-cross-center"
-                                    use:tooltip={{
-                                        content: `Your trial ends on ${toLocaleDate(
+                                <Tooltip>
+                                    <div class="u-flex u-cross-center">
+                                        <Pill class="eyebrow-heading-3">TRIAL</Pill>
+                                    </div>
+                                    <span slot="tooltip"
+                                        >{`Your trial ends on ${toLocaleDate(
                                             organization.billingStartDate
-                                        )}. ${$daysLeftInTrial} days remaining.`
-                                    }}>
-                                    <Pill class="eyebrow-heading-3">TRIAL</Pill>
-                                </div>
+                                        )}. ${$daysLeftInTrial} days remaining.`}</span>
+                                </Tooltip>
                             {/if}
                         {/if}
                     </svelte:fragment>
                     {#await avatarList}
-                        <span class="avatar is-color-empty" />
+                        <span class="avatar is-color-empty"></span>
                     {:then avatars}
-                        <AvatarGroup size={40} {avatars} />
+                        <AvatarGroup {avatars} />
                     {/await}
                 </GridItem1>
             {/each}
@@ -107,7 +107,7 @@
             </svelte:fragment>
         </CardContainer>
     {:else}
-        <Empty single on:click={createOrg}>
+        <Empty single on:click={createOrg} target="organization">
             <p>Create a new organization</p>
         </Empty>
     {/if}
diff --git a/src/routes/(console)/account/organizations/+page.ts b/src/routes/(console)/account/organizations/+page.ts
index 159e2a6e2..c1734a28c 100644
--- a/src/routes/(console)/account/organizations/+page.ts
+++ b/src/routes/(console)/account/organizations/+page.ts
@@ -7,7 +7,7 @@ import { isCloud } from '$lib/system';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);
-    const limit = getLimit('console', url, route, CARD_LIMIT);
+    const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
     const queries = [Query.offset(offset), Query.limit(limit), Query.orderDesc('')];
diff --git a/src/routes/(console)/account/payments/+page.svelte b/src/routes/(console)/account/payments/+page.svelte
index 1e00b42eb..3fbc90653 100644
--- a/src/routes/(console)/account/payments/+page.svelte
+++ b/src/routes/(console)/account/payments/+page.svelte
@@ -1,27 +1,25 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import PaymentMethods from './paymentMethods.svelte';
     import BillingAddress from './billingAddress.svelte';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { confirmPayment } from '$lib/stores/stripe';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     let showPayment = false;
 
     onMount(async () => {
-        if ($page.url.searchParams.has('clientSecret')) {
-            const clientSecret = $page.url.searchParams.get('clientSecret');
-            const paymentMethodId = $page.url.searchParams.get('paymentMethodId');
+        if (page.url.searchParams.has('clientSecret')) {
+            const clientSecret = page.url.searchParams.get('clientSecret');
+            const paymentMethodId = page.url.searchParams.get('paymentMethodId');
             await confirmPayment('', clientSecret, paymentMethodId);
         }
     });
 </script>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Payment details</Heading>
-    </div>
+    <Typography.Title size="s">Payment details</Typography.Title>
     <PaymentMethods bind:showPayment />
     <BillingAddress />
 </Container>
diff --git a/src/routes/(console)/account/payments/addressModal.svelte b/src/routes/(console)/account/payments/addressModal.svelte
index af262f621..55405deb1 100644
--- a/src/routes/(console)/account/payments/addressModal.svelte
+++ b/src/routes/(console)/account/payments/addressModal.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, InputSelect, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -29,9 +29,9 @@
 
     onMount(async () => {
         const countryList = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .locale.listCountries();
-        const locale = await sdk.forProject($page.params.region, $page.params.project).locale.get();
+        const locale = await sdk.forProject(page.params.region, page.params.project).locale.get();
         if (locale.countryCode) {
             country = locale.countryCode;
         }
@@ -78,50 +78,38 @@
     $: isButtonDisabled = !country || !address || !city || !state;
 </script>
 
-<Modal bind:show bind:error onSubmit={handleSubmit} size="big" title="Add billing address">
-    <FormList gap={16}>
-        <InputSelect
-            bind:value={country}
-            {options}
-            label="Country or region"
-            placeholder="Select country or region"
-            id="country"
-            required />
-        <InputText
-            bind:value={address}
-            id="address"
-            label="Street address"
-            placeholder="Enter street address"
-            required />
-        <InputText
-            bind:value={address2}
-            id="address2"
-            label="Address line 2"
-            placeholder="Unit number, floor, etc." />
-        <InputText
-            bind:value={city}
-            id="city"
-            label="City or suburb"
-            placeholder="Enter your city"
-            required />
-        <FormItem isMultiple>
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={state}
-                id="state"
-                label="State"
-                placeholder="Enter your state"
-                required />
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={zip}
-                id="zip"
-                label="Postal code"
-                placeholder="Enter postal code" />
-        </FormItem>
-    </FormList>
+<Modal bind:show bind:error onSubmit={handleSubmit} size="m" title="Add billing address">
+    <InputSelect
+        bind:value={country}
+        {options}
+        label="Country or region"
+        placeholder="Select country or region"
+        id="country"
+        required />
+    <InputText
+        bind:value={address}
+        id="address"
+        label="Street address"
+        placeholder="Enter street address"
+        required />
+    <InputText
+        bind:value={address2}
+        id="address2"
+        label="Address line 2"
+        placeholder="Unit number, floor, etc." />
+    <InputText
+        bind:value={city}
+        id="city"
+        label="City or suburb"
+        placeholder="Enter your city"
+        required />
+    <InputText
+        bind:value={state}
+        id="state"
+        label="State"
+        placeholder="Enter your state"
+        required />
+    <InputText bind:value={zip} id="zip" label="Postal code" placeholder="Enter postal code" />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/(console)/account/payments/billingAddress.svelte b/src/routes/(console)/account/payments/billingAddress.svelte
index 482d7f88a..9903c2162 100644
--- a/src/routes/(console)/account/payments/billingAddress.svelte
+++ b/src/routes/(console)/account/payments/billingAddress.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
-    import { CardGrid, DropList, DropListItem, Empty, Heading } from '$lib/components';
+    import { CardGrid, Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { addressList } from '$lib/stores/billing';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -19,21 +11,35 @@
     import type { Address } from '$lib/sdk/billing';
     import { organizationList, type Organization } from '$lib/stores/organization';
     import { base } from '$app/paths';
-    import { Pill } from '$lib/elements';
-    import { page } from '$app/stores';
+    import {
+        IconDotsHorizontal,
+        IconInfo,
+        IconPencil,
+        IconPlus,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Icon,
+        Layout,
+        Link,
+        Popover,
+        Table,
+        Tag,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     let show = false;
     let showEdit = false;
     let selectedAddress: Address;
     let selectedLinkedOrgs: Organization[] = [];
     let showDelete = false;
-    let showDropdown = [];
     let countryList: Models.CountryList;
-    let showLinked = [];
 
     onMount(async () => {
         countryList = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .locale.listCountries();
     });
 
@@ -41,114 +47,98 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Billing Address</Heading>
-
-    <p class="text">
-        View or update your billing address. This address will be included in your invoices from
-        Appwrite.
-    </p>
+    <svelte:fragment slot="title">Billing address</svelte:fragment>
+    View or update your billing address. This address will be included in your invoices from Appwrite.
     <svelte:fragment slot="aside">
         {#if $addressList.total && countryList?.total}
-            <Table noMargin noStyles transparent>
-                <TableHeader>
-                    <TableCellHead>Billing address</TableCellHead>
-                    <TableCellHead width={195} />
-                    <TableCellHead width={40} />
-                </TableHeader>
-                <TableBody>
-                    {#each $addressList.billingAddresses as address, i}
-                        {@const country = countryList?.countries?.find(
-                            (c) => c.code === address.country
-                        )}
-                        {@const linkedOrgs = orgList?.filter(
-                            (org) => address.$id === org.billingAddressId
-                        )}
+            <Table.Root
+                let:root
+                columns={[{ id: 'address' }, { id: 'links' }, { id: 'actions', width: 40 }]}>
+                {#each $addressList.billingAddresses as address}
+                    {@const country = countryList?.countries?.find(
+                        (c) => c.code === address.country
+                    )}
+                    {@const linkedOrgs = orgList?.filter(
+                        (org) => address.$id === org.billingAddressId
+                    )}
 
-                        <TableRow>
-                            <TableCell>
-                                <div class="u-line-height-1-5">
-                                    <p class="text">{address.streetAddress}</p>
-                                    {#if address?.addressLine2}
-                                        <p class="text">{address.addressLine2}</p>
-                                    {/if}
-                                    <p class="text">{address.city}</p>
-                                    <p class="text">{address.state}</p>
-                                    <p class="text">{address.postalCode}</p>
-                                    <p class="text">{country ? country.name : address.country}</p>
-                                </div>
-                            </TableCell>
-                            <TableCell style="vertical-align: top;">
-                                {#if linkedOrgs?.length > 0}
-                                    <DropList bind:show={showLinked[i]} width="20" scrollable>
-                                        <Pill
-                                            button
-                                            on:click={() => (showLinked[i] = !showLinked[i])}>
-                                            <span class="icon-info" /> linked to organization
-                                        </Pill>
-                                        <svelte:fragment slot="list">
-                                            <p class="u-break-word">
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="address" {root}>
+                            {address.streetAddress},
+                            {#if address?.addressLine2}
+                                {address.addressLine2},
+                            {/if}
+                            {address.city},
+                            {#if address?.state}
+                                {address.state},
+                            {/if}
+                            {#if address?.postalCode}
+                                {address.postalCode},
+                            {/if}
+                            {country ? country.name : address.country}
+                        </Table.Cell>
+                        <Table.Cell column="links" {root}>
+                            {#if linkedOrgs?.length > 0}
+                                <Popover let:toggle>
+                                    <Tag on:click={toggle} size="s">
+                                        <Icon icon={IconInfo} slot="start" />
+                                        linked to organization
+                                    </Tag>
+                                    <svelte:fragment slot="tooltip">
+                                        <Layout.Stack>
+                                            <Typography.Text>
                                                 This billing address is linked to the following
                                                 organizations:
-                                            </p>
-                                            <div class="u-flex u-flex-vertical u-gap-4">
+                                            </Typography.Text>
+                                            <Layout.Stack gap="xxs">
                                                 {#each linkedOrgs as org}
-                                                    <a
-                                                        class="u-underline u-trim"
+                                                    <Link.Anchor
                                                         href={`${base}/organization-${org.$id}/billing`}>
                                                         {org.name}
-                                                    </a>
+                                                    </Link.Anchor>
                                                 {/each}
-                                            </div>
-                                        </svelte:fragment>
-                                    </DropList>
-                                {/if}
-                            </TableCell>
-                            <TableCell style="vertical-align: top;">
-                                <DropList
-                                    bind:show={showDropdown[i]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <Button
-                                        round
-                                        text
-                                        ariaLabel="More options"
-                                        on:click={() => {
-                                            showDropdown[i] = !showDropdown[i];
-                                        }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                                    </Button>
-                                    <svelte:fragment slot="list">
-                                        <DropListItem
-                                            icon="pencil"
-                                            on:click={() => {
-                                                showEdit = true;
-                                                selectedAddress = address;
-                                                showDropdown[i] = false;
-                                            }}>
-                                            Edit
-                                        </DropListItem>
-                                        <DropListItem
-                                            icon="trash"
-                                            on:click={() => {
-                                                showDelete = true;
-                                                selectedAddress = address;
-                                                selectedLinkedOrgs = linkedOrgs;
-                                                showDropdown[i] = false;
-                                            }}>
-                                            Delete
-                                        </DropListItem>
+                                            </Layout.Stack>
+                                        </Layout.Stack>
                                     </svelte:fragment>
-                                </DropList>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
+                                </Popover>
+                            {/if}
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <Popover let:toggle placement="bottom-end" padding="none">
+                                <Button icon text ariaLabel="More options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip">
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconPencil}
+                                        on:click={() => {
+                                            showEdit = true;
+                                            selectedAddress = address;
+                                        }}>
+                                        Edit
+                                    </ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconTrash}
+                                        on:click={() => {
+                                            showDelete = true;
+                                            selectedAddress = address;
+                                            selectedLinkedOrgs = linkedOrgs;
+                                        }}>
+                                        Delete
+                                    </ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </Popover>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
 
-            <Button text noMargin on:click={() => (show = true)}>
-                <span class="icon-plus" />
-                <span class="text">Add a billing address</span>
-            </Button>
+            <div>
+                <Button secondary on:click={() => (show = true)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add a billing address
+                </Button>
+            </div>
         {:else}
             <Empty on:click={() => (show = true)}>
                 <p class="text">Add a billing address</p>
diff --git a/src/routes/(console)/account/payments/deleteAddressModal.svelte b/src/routes/(console)/account/payments/deleteAddressModal.svelte
index e20c6948b..059beab3c 100644
--- a/src/routes/(console)/account/payments/deleteAddressModal.svelte
+++ b/src/routes/(console)/account/payments/deleteAddressModal.svelte
@@ -2,13 +2,13 @@
     import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import type { Address } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import type { Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
+    import { Layout, Link } from '@appwrite.io/pink-svelte';
 
     export let showDelete = false;
     export let selectedAddress: Address;
@@ -32,43 +32,31 @@
     }
 </script>
 
-<Modal
-    bind:show={showDelete}
+<Confirm
     onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
+    title={linkedOrgs.length ? 'Unable to delete billing address' : 'Delete billing address'}
+    bind:open={showDelete}
+    canDelete={linkedOrgs.length === 0}
     bind:error>
-    <svelte:fragment slot="title">
-        {linkedOrgs.length ? 'Unable to delete billing address' : 'Delete billing address'}
-    </svelte:fragment>
-
     {#if linkedOrgs.length === 1}
-        <p class="text">
+        <p>
             This billing address is set as the default for the <span class="u-bold"
                 >{linkedOrgs[0].name}</span
             >. As it has upcoming invoices it cannot be deleted from your account.
         </p>
     {:else if linkedOrgs.length > 1}
-        <p class="text">
+        <p>
             This billing address is set as the default for the following organisations. As they have
             upcoming invoices it cannot be deleted from your account.
         </p>
-        <ul>
+        <Layout.Stack gap="none">
             {#each linkedOrgs as org}
-                <li class="text">
-                    <a class="link" href={`${base}/organization-${org.$id}/billing`}>{org.name}</a>
-                </li>
+                <Link.Anchor href={`${base}/organization-${org.$id}/billing`}>
+                    {org.name}
+                </Link.Anchor>
             {/each}
-        </ul>
+        </Layout.Stack>
     {:else}
-        <p class="text">Are you sure you want to delete this billing address from your account?</p>
+        <p>Are you sure you want to delete this billing address from your account?</p>
     {/if}
-
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        {#if !linkedOrgs.length}
-            <Button secondary submit>Delete</Button>
-        {/if}
-    </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/account/payments/deletePaymentModal.svelte b/src/routes/(console)/account/payments/deletePaymentModal.svelte
index 59240ec39..50406a32f 100644
--- a/src/routes/(console)/account/payments/deletePaymentModal.svelte
+++ b/src/routes/(console)/account/payments/deletePaymentModal.svelte
@@ -2,17 +2,19 @@
     import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
+    import { Layout, Link, Typography } from '@appwrite.io/pink-svelte';
 
     export let linkedOrgs: Organization[] = [];
     export let showDelete = false;
     export let method: string;
 
+    let error: string;
+
     async function handleDelete() {
         try {
             await sdk.forConsole.billing.deletePaymentMethod(method);
@@ -23,51 +25,38 @@
                 message: `Payment method has been deleted`
             });
             trackEvent(Submit.PaymentMethodDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.PaymentMethodDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.PaymentMethodDelete);
         }
     }
 </script>
 
-<Modal
-    bind:show={showDelete}
+<Confirm
     onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <svelte:fragment slot="title">
-        {linkedOrgs.length ? 'Unable to delete payment method' : 'Delete payment method'}
-    </svelte:fragment>
+    title={linkedOrgs.length ? 'Unable to delete payment method' : 'Delete payment method'}
+    canDelete={linkedOrgs.length === 0}
+    bind:open={showDelete}
+    bind:error>
     {#if linkedOrgs.length === 1}
-        <p class="text">
+        <Typography.Text>
             This payment method is set as the default for the <span class="u-bold"
                 >{linkedOrgs[0].name}</span
             >. As it has upcoming invoices it cannot be deleted from your account.
-        </p>
+        </Typography.Text>
     {:else if linkedOrgs.length > 1}
-        <p class="text">
+        <Typography.Text>
             This payment method is set as the default for the following organisations. As they have
             upcoming invoices it cannot be deleted from your account.
-        </p>
-        <ul>
+        </Typography.Text>
+        <Layout.Stack gap="none">
             {#each linkedOrgs as org}
-                <li class="text">
-                    <a class="link" href={`${base}/organization-${org.$id}/billing`}>{org.name}</a>
-                </li>
+                <Link.Anchor href={`${base}/organization-${org.$id}/billing`}>
+                    {org.name}
+                </Link.Anchor>
             {/each}
-        </ul>
+        </Layout.Stack>
     {:else}
         <p class="text">Are you sure you want to delete this payment method from your account?</p>
     {/if}
-
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        {#if !linkedOrgs.length}
-            <Button secondary submit>Delete</Button>
-        {/if}
-    </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/account/payments/editAddressModal.svelte b/src/routes/(console)/account/payments/editAddressModal.svelte
index a86cf163c..42f665a3e 100644
--- a/src/routes/(console)/account/payments/editAddressModal.svelte
+++ b/src/routes/(console)/account/payments/editAddressModal.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, InputSelect, InputText } from '$lib/elements/forms';
     import type { Address } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -23,7 +23,7 @@
 
     onMount(async () => {
         const countryList = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .locale.listCountries();
         options = countryList.countries.map((country) => {
             return {
@@ -50,10 +50,10 @@
                 type: 'success',
                 message: `Address has been added`
             });
-            trackEvent(Submit.BillingAddressCreate);
+            trackEvent(Submit.BillingAddressUpdate);
         } catch (e) {
             error = e.message;
-            trackError(e, Submit.BillingAddressCreate);
+            trackError(e, Submit.BillingAddressUpdate);
         }
     }
 
@@ -65,7 +65,7 @@
      * which really shouldn't happen, but here we are, playing it safe!
      */
     $: if (show && !selectedAddress.country) {
-        sdk.forProject($page.params.region, $page.params.project)
+        sdk.forProject(page.params.region, page.params.project)
             .locale.get()
             .then((locale) => {
                 if (locale.countryCode) {
@@ -75,50 +75,43 @@
     }
 </script>
 
-<Modal bind:error bind:show onSubmit={handleSubmit} size="big" title="Update billing address">
-    <FormList gap={16}>
-        <InputSelect
-            bind:value={selectedAddress.country}
-            {options}
-            label="Country or region"
-            placeholder="Select country or region"
-            id="country"
-            required />
-        <InputText
-            bind:value={selectedAddress.streetAddress}
-            id="address"
-            label="Street address"
-            placeholder="Enter street address"
-            required />
-        <InputText
-            bind:value={selectedAddress.addressLine2}
-            id="address2"
-            label="Address line 2"
-            placeholder="Unit number, floor, etc." />
-        <InputText
-            bind:value={selectedAddress.city}
-            id="city"
-            label="City or suburb"
-            placeholder="Enter your city"
-            required />
-        <FormItem isMultiple>
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={selectedAddress.state}
-                id="state"
-                label="State"
-                placeholder="Enter your state"
-                required />
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={selectedAddress.postalCode}
-                id="zip"
-                label="Postal code"
-                placeholder="Enter postal code" />
-        </FormItem>
-    </FormList>
+<Modal bind:error bind:show onSubmit={handleSubmit} size="m" title="Update billing address">
+    <InputSelect
+        bind:value={selectedAddress.country}
+        {options}
+        label="Country or region"
+        placeholder="Select country or region"
+        id="country"
+        required />
+    <InputText
+        bind:value={selectedAddress.streetAddress}
+        id="address"
+        label="Street address"
+        placeholder="Enter street address"
+        required />
+    <InputText
+        bind:value={selectedAddress.addressLine2}
+        id="address2"
+        label="Address line 2"
+        placeholder="Unit number, floor, etc." />
+    <InputText
+        bind:value={selectedAddress.city}
+        id="city"
+        label="City or suburb"
+        placeholder="Enter your city"
+        required />
+    <InputText
+        bind:value={selectedAddress.state}
+        id="state"
+        label="State"
+        placeholder="Enter your state"
+        required />
+    <InputText
+        bind:value={selectedAddress.postalCode}
+        id="zip"
+        label="Postal code"
+        placeholder="Enter postal code" />
+
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button submit>Save</Button>
diff --git a/src/routes/(console)/account/payments/editPaymentModal.svelte b/src/routes/(console)/account/payments/editPaymentModal.svelte
index 56529fdc9..7850cdea9 100644
--- a/src/routes/(console)/account/payments/editPaymentModal.svelte
+++ b/src/routes/(console)/account/payments/editPaymentModal.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-    import { Alert, Modal } from '$lib/components';
-    import { Button, FormItem, FormList, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
     export let show = false;
     export let selectedPaymentMethod: PaymentMethodData;
@@ -63,43 +64,31 @@
     $: options = createMonthOptions(year);
 </script>
 
-<Modal
-    bind:error
-    onSubmit={handleSubmit}
-    size="big"
-    bind:show
-    title="Update payment method"
-    headerDivider={false}>
+<Modal bind:error onSubmit={handleSubmit} bind:show title="Update payment method">
     {#if selectedPaymentMethod?.expired}
-        <Alert type="error">
-            <svelte:fragment slot="title">This payment method has expired</svelte:fragment>
-        </Alert>
+        <Alert.Inline status="error" title="This payment method has expired" />
     {/if}
-    {#if isLinked}
-        Updates to this payment method will be applied to any linked organizations.
-    {/if}
-    <FormList>
-        <FormItem isMultiple style="align-items: start;">
-            <InputSelect
-                isMultiple
-                fullWidth
-                id="month"
-                label="Month"
-                bind:value={month}
-                {options}
-                required
-                placeholder="Enter expiry month" />
-            <InputNumber
-                isMultiple
-                fullWidth
-                id="year"
-                label="Year"
-                bind:value={year}
-                min={currentYear}
-                required
-                placeholder="Enter expiry year" />
-        </FormItem>
-    </FormList>
+    <svelte:fragment slot="description">
+        {#if isLinked}
+            Updates to this payment method will be applied to any linked organizations.
+        {/if}
+    </svelte:fragment>
+
+    <InputSelect
+        id="month"
+        label="Month"
+        bind:value={month}
+        {options}
+        required
+        placeholder="Enter expiry month" />
+    <InputNumber
+        id="year"
+        label="Year"
+        bind:value={year}
+        min={currentYear}
+        required
+        placeholder="Enter expiry year" />
+
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit disabled={!month || !year}>Update</Button>
diff --git a/src/routes/(console)/account/payments/paymentMethods.svelte b/src/routes/(console)/account/payments/paymentMethods.svelte
index 4108d3682..6b700d4c2 100644
--- a/src/routes/(console)/account/payments/paymentMethods.svelte
+++ b/src/routes/(console)/account/payments/paymentMethods.svelte
@@ -1,22 +1,6 @@
 <script lang="ts">
-    import {
-        CardGrid,
-        CreditCardInfo,
-        DropList,
-        DropListItem,
-        Empty,
-        Heading
-    } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { CardGrid, CreditCardInfo, Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { paymentMethods } from '$lib/stores/billing';
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { organizationList, type Organization } from '$lib/stores/organization';
@@ -25,6 +9,23 @@
     import DeletePaymentModal from './deletePaymentModal.svelte';
     import { hasStripePublicKey, isCloud } from '$lib/system';
     import PaymentModal from '$lib/components/billing/paymentModal.svelte';
+    import {
+        IconDotsHorizontal,
+        IconInfo,
+        IconPencil,
+        IconPlus,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Icon,
+        Layout,
+        Link,
+        Popover,
+        Table,
+        Tag,
+        Typography
+    } from '@appwrite.io/pink-svelte';
 
     export let showPayment = false;
     let showDropdown = [];
@@ -33,7 +34,6 @@
     let showDelete = false;
     let showEdit = false;
     let isLinked = false;
-    let showLinked = [];
 
     $: orgList = $organizationList.teams as unknown as Organization[];
 
@@ -43,105 +43,102 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Payment Methods</Heading>
-
-    <p class="text">
-        View or update your payment methods. These can be applied to any organizations you have
-        created.
-    </p>
+    <svelte:fragment slot="title">Payment methods</svelte:fragment>
+    View or update your payment methods. These can be applied to any organizations you have created.
     <svelte:fragment slot="aside">
         {#if $paymentMethods?.total && filteredMethods?.length > 0}
-            <Table noMargin noStyles transparent>
-                <TableHeader>
-                    <TableCellHead>Payment methods</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each filteredMethods as paymentMethod, i}
-                        {@const linkedOrgs = orgList?.filter(
-                            (org) =>
-                                paymentMethod.$id === org.paymentMethodId ||
-                                paymentMethod.$id === org.backupPaymentMethodId
-                        )}
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'cc' },
+                    { id: 'name' },
+                    { id: 'expiry' },
+                    { id: 'status' },
+                    { id: 'links' },
+                    { id: 'actions', width: 40 }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="cc" {root}>Credit card</Table.Header.Cell>
+                    <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+                    <Table.Header.Cell column="expiration" {root}
+                        >Expiration date</Table.Header.Cell>
+                    <Table.Header.Cell column="actions" {root} />
+                </svelte:fragment>
+                {#each filteredMethods as paymentMethod, i}
+                    {@const linkedOrgs = orgList?.filter(
+                        (org) =>
+                            paymentMethod.$id === org.paymentMethodId ||
+                            paymentMethod.$id === org.backupPaymentMethodId
+                    )}
 
-                        <TableRow>
-                            <TableCell>
-                                <CreditCardInfo {paymentMethod}>
-                                    <div class="u-flex u-gap-16 u-cross-center">
-                                        {#if linkedOrgs?.length > 0}
-                                            <DropList
-                                                bind:show={showLinked[i]}
-                                                width="20"
-                                                scrollable>
-                                                <Pill
-                                                    button
-                                                    on:click={() =>
-                                                        (showLinked[i] = !showLinked[i])}>
-                                                    <span class="icon-info" /> linked to organization
-                                                </Pill>
-                                                <svelte:fragment slot="list">
-                                                    <p class="u-break-word">
-                                                        This payment method is linked to the
-                                                        following organizations:
-                                                    </p>
-                                                    <div class="u-flex u-flex-vertical u-gap-4">
-                                                        {#each linkedOrgs as org}
-                                                            <a
-                                                                class="u-underline u-trim"
-                                                                href={`${base}/organization-${org.$id}/billing`}>
-                                                                {org.name}
-                                                            </a>
-                                                        {/each}
-                                                    </div>
-                                                </svelte:fragment>
-                                            </DropList>
-                                        {/if}
-
-                                        <DropList
-                                            bind:show={showDropdown[i]}
-                                            placement="bottom-start"
-                                            noArrow>
-                                            <Button
-                                                round
-                                                text
-                                                on:click={() => {
-                                                    showDropdown[i] = !showDropdown[i];
-                                                }}>
-                                                <span class="icon-dots-horizontal" />
-                                            </Button>
-                                            <svelte:fragment slot="list">
-                                                <DropListItem
-                                                    icon="pencil"
-                                                    on:click={() => {
-                                                        showEdit = true;
-                                                        showDropdown[i] = false;
-                                                        selectedMethod = paymentMethod;
-                                                        isLinked = !!linkedOrgs?.length;
-                                                    }}>
-                                                    Edit
-                                                </DropListItem>
-                                                <DropListItem
-                                                    icon="trash"
-                                                    on:click={() => {
-                                                        selectedMethod = paymentMethod;
-                                                        selectedLinkedOrgs = linkedOrgs;
-                                                        showDelete = true;
-                                                        showDropdown[i] = false;
-                                                    }}>
-                                                    Delete
-                                                </DropListItem>
-                                            </svelte:fragment>
-                                        </DropList>
-                                    </div>
-                                </CreditCardInfo>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-            <Button text noMargin on:click={() => (showPayment = true)}>
-                <span class="icon-plus" />
-                <span class="text">Add a payment method</span>
-            </Button>
+                    <Table.Row.Base {root}>
+                        <CreditCardInfo {root} {paymentMethod} />
+                        <Table.Cell column="links" {root}>
+                            {#if linkedOrgs?.length > 0}
+                                <Popover let:toggle>
+                                    <Tag on:click={toggle} size="s">
+                                        <Icon icon={IconInfo} slot="start" />
+                                        linked to organization
+                                    </Tag>
+                                    <svelte:fragment slot="tooltip">
+                                        <Layout.Stack>
+                                            <Typography.Text>
+                                                This payment method is linked to the following
+                                                organizations:
+                                            </Typography.Text>
+                                            <Layout.Stack gap="xxs">
+                                                {#each linkedOrgs as org}
+                                                    <Link.Anchor
+                                                        href={`${base}/organization-${org.$id}/billing`}>
+                                                        {org.name}
+                                                    </Link.Anchor>
+                                                {/each}
+                                            </Layout.Stack>
+                                        </Layout.Stack>
+                                    </svelte:fragment>
+                                </Popover>
+                            {/if}
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <Popover let:toggle placement="bottom-start" padding="none">
+                                <Button icon text on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <svelte:fragment slot="tooltip">
+                                    <ActionMenu.Root>
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPencil}
+                                            on:click={() => {
+                                                showEdit = true;
+                                                showDropdown[i] = false;
+                                                selectedMethod = paymentMethod;
+                                                isLinked = !!linkedOrgs?.length;
+                                            }}>
+                                            Edit
+                                        </ActionMenu.Item.Button>
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconTrash}
+                                            on:click={() => {
+                                                selectedMethod = paymentMethod;
+                                                selectedLinkedOrgs = linkedOrgs;
+                                                showDelete = true;
+                                                showDropdown[i] = false;
+                                            }}>
+                                            Delete
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                </svelte:fragment>
+                            </Popover>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+            <div>
+                <Button secondary on:click={() => (showPayment = true)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add a payment method
+                </Button>
+            </div>
         {:else}
             <Empty on:click={() => (showPayment = true)}>
                 <p class="text">Add a payment method</p>
diff --git a/src/routes/(console)/account/sessions/+page.svelte b/src/routes/(console)/account/sessions/+page.svelte
index dc443717d..f017fe0ea 100644
--- a/src/routes/(console)/account/sessions/+page.svelte
+++ b/src/routes/(console)/account/sessions/+page.svelte
@@ -1,21 +1,11 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page as pageStore } from '$app/stores';
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { Empty, Heading, Trim } from '$lib/components';
+    import { Trim } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
@@ -23,6 +13,7 @@
     import type { PageData } from './$types';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
+    import { Badge, Layout, Table, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
 
@@ -75,7 +66,7 @@
     }
 
     onMount(() => {
-        return page.subscribe(($page) => {
+        return pageStore.subscribe(($page) => {
             const url = new URL($page.url);
             const sessionId = url.searchParams.get('sessionId');
             if (sessionId) {
@@ -90,95 +81,78 @@
 </script>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Sessions</Heading>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Typography.Title>Sessions</Typography.Title>
+        <Button secondary on:click={logoutAll}>Sign out all sessions</Button>
+    </Layout.Stack>
 
-        <Button secondary on:click={logoutAll}>
-            <span class="text">Sign out all sessions</span>
-        </Button>
-    </div>
-
-    {#if data.sessions.total}
-        <TableScroll>
-            <TableHeader>
-                <TableCellHead width={250}>Client</TableCellHead>
-                <TableCellHead width={70}>Location</TableCellHead>
-                <TableCellHead width={90}>IP</TableCellHead>
-                <TableCellHead width={60} />
-            </TableHeader>
-            <TableBody>
-                {#each data.sessions.sessions as session}
-                    {@const browser = getBrowser(session.clientCode)}
-                    <TableRow>
-                        <TableCell title="Client">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                {#if session.clientName}
-                                    <div class="avatar">
-                                        {#if browser}
-                                            <img
-                                                height="20"
-                                                width="20"
-                                                src={getBrowser(session.clientCode).toString()}
-                                                style="--p-text-size: 1.25rem"
-                                                alt={session.clientName} />
-                                        {:else}
-                                            <span
-                                                class="icon-globe-alt"
-                                                style="--p-text-size: 1.25rem"
-                                                aria-hidden="true" />
-                                        {/if}
-                                    </div>
-                                    <Trim>
-                                        {session.clientName}
-                                        {session.clientVersion}
-                                        on {session.osName}
-                                        {session.osVersion}
-                                    </Trim>
+    <Table.Root
+        let:root
+        columns={[
+            { id: 'client' },
+            { id: 'location' },
+            { id: 'ip' },
+            { id: 'actions', width: 40 }
+        ]}>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
+            <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+            <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+            <Table.Header.Cell column="actions" {root} />
+        </svelte:fragment>
+        {#each data.sessions.sessions as session}
+            {@const browser = getBrowser(session.clientCode)}
+            <Table.Row.Base {root}>
+                <Table.Cell column="client" {root}>
+                    <Layout.Stack direction="row" alignItems="center">
+                        {#if session.clientName}
+                            <div class="avatar is-size-small">
+                                {#if browser}
+                                    <img
+                                        height="20"
+                                        width="20"
+                                        src={getBrowser(session.clientCode).toString()}
+                                        style="--p-text-size: 1.25rem"
+                                        alt={session.clientName} />
                                 {:else}
-                                    <span class="avatar is-color-empty" />
-                                    <p class="text u-trim">Unknown</p>
-                                {/if}
-                                <div class="is-only-desktop">
-                                    <Pill>{session.provider}</Pill>
-                                </div>
-                                {#if session.current}
-                                    <Pill success>current session</Pill>
+                                    <span
+                                        class="icon-globe-alt"
+                                        style="--p-text-size: 1.25rem"
+                                        aria-hidden="true"></span>
                                 {/if}
                             </div>
-                        </TableCell>
-                        <TableCellText title="Location">
-                            {#if session.countryCode !== '--'}
-                                {session.countryName}
-                            {:else}
-                                Unknown
-                            {/if}
-                        </TableCellText>
-                        <TableCellText title="IP">{session.ip}</TableCellText>
-                        <TableCell title="Client">
-                            <Button secondary on:click={() => logout(session)}>Sign out</Button>
-                        </TableCell>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </TableScroll>
-    {:else}
-        <Empty>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <p>No sessions available</p>
-                </div>
-                <div class="common-section">
-                    <Button
-                        external
-                        secondary
-                        href="https://appwrite.io/docs/references/cloud/client-web/account#createEmailPasswordSession">
-                        Documentation
-                    </Button>
-                </div>
-            </div>
-        </Empty>
-    {/if}
-    <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {data.sessions.total}</p>
-    </div>
+                            <Trim>
+                                {session.clientName}
+                                {session.clientVersion}
+                                on {session.osName}
+                                {session.osVersion}
+                            </Trim>
+                        {:else}
+                            <span class="avatar is-color-empty"></span>
+                            <p class="text u-trim">Unknown</p>
+                        {/if}
+                        <div class="is-only-desktop">
+                            <Badge variant="secondary" content={session.provider} />
+                        </div>
+                        {#if session.current}
+                            <Badge type="success" variant="secondary" content="current session" />
+                        {/if}
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell column="location" {root}>
+                    {#if session.countryCode !== '--'}
+                        {session.countryName}
+                    {:else}
+                        Unknown
+                    {/if}
+                </Table.Cell>
+                <Table.Cell column="ip" {root}>
+                    {session.ip}
+                </Table.Cell>
+                <Table.Cell column="actions" {root}>
+                    <Button size="xs" secondary on:click={() => logout(session)}>Sign out</Button>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
 </Container>
diff --git a/src/routes/(console)/account/updateEmail.svelte b/src/routes/(console)/account/updateEmail.svelte
index b5b12fba2..cad162c36 100644
--- a/src/routes/(console)/account/updateEmail.svelte
+++ b/src/routes/(console)/account/updateEmail.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputPassword, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputPassword, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -37,20 +37,22 @@
 
 <Form onSubmit={updateEmail}>
     <CardGrid>
-        <Heading tag="h2" size="7">Email</Heading>
-
+        <svelte:fragment slot="title">Email</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText id="email" label="Email" placeholder="Enter email" bind:value={email} />
-                {#if email !== $user.email && email}
-                    <InputPassword
-                        id="emailPassword"
-                        label="Password"
-                        placeholder="Enter password"
-                        showPasswordButton={true}
-                        bind:value={emailPassword} />
-                {/if}
-            </FormList>
+            <InputText
+                id="email"
+                label="Email"
+                placeholder="Enter email"
+                bind:value={email}
+                required />
+            {#if email !== $user.email && email}
+                <InputPassword
+                    id="emailPassword"
+                    label="Password"
+                    placeholder="Enter password"
+                    required
+                    bind:value={emailPassword} />
+            {/if}
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/account/updateMfa.svelte b/src/routes/(console)/account/updateMfa.svelte
index 90004eba6..35e6b97d6 100644
--- a/src/routes/(console)/account/updateMfa.svelte
+++ b/src/routes/(console)/account/updateMfa.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, EyebrowHeading, Heading } from '$lib/components';
+    import { CardGrid, EyebrowHeading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputChoice } from '$lib/elements/forms';
+    import { Button, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -14,8 +14,9 @@
     import type { Models } from '@appwrite.io/console';
     import MfaRegenerateCodes from './mfaRegenerateCodes.svelte';
     import { Pill } from '$lib/elements';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { onMount } from 'svelte';
+    import { Badge, Divider, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
 
     let showSetup: boolean = false;
     let showDelete: boolean = false;
@@ -28,7 +29,7 @@
         .map(([factor, _]) => factor);
     $: enabledMethods = enabledFactors.filter((factor) => factor !== 'recoveryCode');
 
-    $: cleanUrl = $page.url.origin + $page.url.pathname;
+    $: cleanUrl = page.url.origin + page.url.pathname;
 
     let creatingVerification = false;
 
@@ -52,7 +53,7 @@
     }
 
     async function updateEmailVerification() {
-        const searchParams = $page.url.searchParams;
+        const searchParams = page.url.searchParams;
         const userId = searchParams.get('userId');
         const secret = searchParams.get('secret');
 
@@ -136,173 +137,166 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">Multi-factor authentication</Heading>
-
+    <svelte:fragment slot="title">Multi-factor authentication</svelte:fragment>
+    Enhance your account's security by requiring a second sign-in method.
+    <Link.Anchor
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://appwrite.io/docs/products/auth/mfa">Learn more</Link.Anchor>
     <svelte:fragment slot="aside">
-        <div class="u-flex u-flex-vertical u-gap-32">
-            <div class="u-flex u-flex-vertical u-gap-16">
-                <FormList>
-                    <InputChoice
-                        on:change={updateMfa}
-                        type="switchbox"
-                        id="mfa"
-                        label="Multi-factor authentication"
-                        value={$user.mfa} />
-                </FormList>
-                <p>
-                    Two-factor authentication enhances your account's security by requiring a second
-                    sign-in method. <Button
-                        link
-                        external
-                        href="https://appwrite.io/docs/products/auth/mfa">Learn more.</Button>
-                </p>
-            </div>
-            {#if $user.mfa}
-                <div class="u-flex-vertical u-gap-16">
-                    <div class="u-sep-block-end" style="padding-block-end: 8px;">
+        <Layout.Stack gap="xl">
+            <InputChoice
+                on:change={updateMfa}
+                type="switchbox"
+                id="mfa"
+                label="Multi-factor authentication"
+                value={$user.mfa} />
+            <Layout.Stack gap="xl">
+                {#if $user.mfa}
+                    <Layout.Stack>
                         <EyebrowHeading tag="h3" size={3} class="u-normal">Methods</EyebrowHeading>
-                    </div>
-                    <div
-                        class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
-                        style="padding-block-end: 16px">
-                        <div class="u-flex u-gap-8 u-cross-baseline">
+                        <Layout.Stack direction="row">
                             <div class="avatar is-size-x-small">
-                                <span class="icon-device-mobile" aria-hidden="true" />
+                                <span class="icon-device-mobile" aria-hidden="true"></span>
                             </div>
-                            <div class="u-flex-vertical u-gap-4">
-                                <div class="u-flex u-gap-4 u-cross-center">
-                                    <span class="body-text-2 u-bold">Authenticator app</span>
+                            <Layout.Stack gap="xxxs">
+                                <Layout.Stack gap="s">
+                                    <Typography.Text variant="m-600"
+                                        >Authenticator app</Typography.Text>
                                     {#if $factors.totp}
                                         <Pill>connected</Pill>
                                     {/if}
-                                </div>
-                                <span class="body-text-2"
-                                    >Use an authentication app to generate two-factor authentication
-                                    codes.</span>
-                            </div>
-                        </div>
-                        <div class="method-button">
-                            {#if $factors.totp}
-                                <Button
-                                    text
-                                    class="is-not-mobile"
-                                    on:click={() => (showDelete = true)}>Delete</Button>
-                                <Button
-                                    text
-                                    class="is-only-mobile"
-                                    noMargin
-                                    on:click={() => (showDelete = true)}>Delete</Button>
-                            {:else}
-                                <Button secondary on:click={() => (showSetup = true)}>Add</Button>
-                            {/if}
-                        </div>
-                    </div>
-
-                    {#if $factors.email}
-                        <div
-                            class="u-flex u-main-space-between u-sep-block-end"
-                            style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8 u-cross-baseline">
-                                <div class="avatar is-size-x-small">
-                                    <span class="icon-mail" aria-hidden="true" />
-                                </div>
-                                <div class="u-flex-vertical u-gap-4">
-                                    <div class="u-flex u-gap-4 u-cross-center">
-                                        <span class="body-text-2 u-bold">Email</span>
-                                        <Pill>verified</Pill>
-                                    </div>
-                                    <span>One-time codes will be sent to: {$user.email}</span>
-                                </div>
-                            </div>
-                        </div>
-                    {:else if !$user.emailVerification}
-                        <div
-                            class="u-flex u-main-space-between u-sep-block-end"
-                            style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8 u-cross-baseline">
-                                <div class="avatar is-size-x-small">
-                                    <span class="icon-mail" aria-hidden="true" />
-                                </div>
-                                <div class="u-flex-vertical u-gap-4">
-                                    <div class="u-flex u-gap-4 u-cross-center">
-                                        <span class="body-text-2 u-bold">Email</span>
-                                        <Pill>unverified</Pill>
-                                    </div>
-                                    <span>Verify your email to receive login MFA codes.</span>
-                                </div>
-                            </div>
-                            <Button
-                                secondary
-                                disabled={creatingVerification}
-                                on:click={() => createVerification()}>Verify</Button>
-                        </div>
-                    {/if}
-
-                    {#if $factors.phone}
-                        <div
-                            class="u-flex u-main-space-between u-sep-block-end"
-                            style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8 u-cross-baseline">
-                                <div class="avatar is-size-x-small">
-                                    <span class="icon-send" aria-hidden="true" />
-                                </div>
-                                <div class="u-flex-vertical u-gap-4">
-                                    <div class="u-flex u-gap-4 u-cross-center">
-                                        <span class="body-text-2 u-bold">SMS</span>
-                                        <Pill>verified</Pill>
-                                    </div>
-                                    <span>One-time codes will be sent to: {$user.phone}</span>
-                                </div>
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-
-                {#if enabledMethods.length > 0}
-                    <div class="u-flex-vertical u-gap-16">
-                        <div class="u-sep-block-end" style="padding-block-end: 8px;">
-                            <EyebrowHeading tag="h6" size={3} class="u-normal"
-                                >Recovery</EyebrowHeading>
-                        </div>
-                        <div
-                            class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
-                            style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8 u-cross-baseline">
-                                <div class="avatar is-size-x-small">
-                                    <span class="icon-lock-open" aria-hidden="true" />
-                                </div>
-                                <div class="u-flex-vertical u-gap-4 body-text-2">
-                                    <span class="u-bold">Recovery codes</span>
-                                    <span
-                                        >Use in case you can't receive two-factor authentication
-                                        codes.</span>
-                                </div>
-                            </div>
-                            <div class="method-button">
-                                {#if $factors.recoveryCode}
+                                </Layout.Stack>
+                                <Typography.Text variant="m-400">
+                                    Use an authentication app to generate two-factor authentication
+                                    codes.
+                                </Typography.Text>
+                            </Layout.Stack>
+                            <div>
+                                {#if $factors.totp}
                                     <Button
-                                        class="method-button is-not-mobile"
                                         text
-                                        on:click={() => (showRegenerateRecoveryCodes = true)}
-                                        >Regenerate</Button>
-                                    <Button
-                                        class="method-button is-only-mobile"
-                                        text
-                                        noMargin
-                                        on:click={() => (showRegenerateRecoveryCodes = true)}
-                                        >Regenerate</Button>
+                                        class="is-not-mobile"
+                                        on:click={() => (showDelete = true)}>Delete</Button>
                                 {:else}
-                                    <Button
-                                        class="method-button"
-                                        secondary
-                                        on:click={createRecoveryCodes}>View</Button>
+                                    <Button secondary on:click={() => (showSetup = true)}
+                                        >Add</Button>
                                 {/if}
                             </div>
-                        </div>
-                    </div>
+                        </Layout.Stack>
+
+                        <Divider />
+
+                        {#if $factors.email}
+                            <Layout.Stack>
+                                <Layout.Stack direction="row">
+                                    <div class="avatar is-size-x-small">
+                                        <span class="icon-mail" aria-hidden="true"></span>
+                                    </div>
+                                    <Layout.Stack gap="xxxs">
+                                        <Layout.Stack gap="s" direction="row">
+                                            <Typography.Text variant="m-600">Email</Typography.Text>
+                                            <Badge
+                                                variant="secondary"
+                                                content="verified"
+                                                size="s" />
+                                        </Layout.Stack>
+                                        <Typography.Text variant="m-400">
+                                            One-time codes will be sent to: {$user.email}
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {:else if !$user.emailVerification}
+                            <Layout.Stack>
+                                <Layout.Stack direction="row">
+                                    <div class="avatar is-size-x-small">
+                                        <span class="icon-mail" aria-hidden="true"></span>
+                                    </div>
+                                    <Layout.Stack gap="xxxs">
+                                        <Layout.Stack gap="s" direction="row">
+                                            <Typography.Text variant="m-600">Email</Typography.Text>
+                                            <Badge
+                                                variant="secondary"
+                                                size="s"
+                                                content="unverified" />
+                                        </Layout.Stack>
+                                        <Typography.Text variant="m-400">
+                                            Verify your email to receive login MFA codes.
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                    <div>
+                                        <Button
+                                            secondary
+                                            disabled={creatingVerification}
+                                            on:click={() => createVerification()}>Verify</Button>
+                                    </div>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/if}
+
+                        {#if $factors.phone}
+                            <Layout.Stack>
+                                <Layout.Stack direction="row">
+                                    <div class="avatar is-size-x-small">
+                                        <span class="icon-send" aria-hidden="true"></span>
+                                    </div>
+                                    <Layout.Stack gap="xxxs">
+                                        <Layout.Stack gap="s" direction="row">
+                                            <Typography.Text variant="m-600">SMS</Typography.Text>
+                                            <Badge
+                                                variant="secondary"
+                                                size="s"
+                                                content="verified" />
+                                        </Layout.Stack>
+                                        <Typography.Text variant="m-400">
+                                            One-time codes will be sent to: {$user.phone}
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.Stack>
+
+                    {#if enabledMethods.length >= 0}
+                        <Layout.Stack class="method">
+                            <EyebrowHeading tag="h6" size={3} class="u-normal"
+                                >Recovery</EyebrowHeading>
+                            <Layout.Stack>
+                                <Layout.Stack direction="row">
+                                    <div class="avatar is-size-x-small">
+                                        <span class="icon-lock-open" aria-hidden="true"></span>
+                                    </div>
+                                    <Layout.Stack gap="xxxs">
+                                        <Layout.Stack gap="s" direction="row">
+                                            <Typography.Text variant="m-600"
+                                                >Recovery codes</Typography.Text>
+                                        </Layout.Stack>
+                                        <Typography.Text variant="m-400">
+                                            Use in case you can't receive two-factor authentication
+                                            codes.
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                    {#if $factors.recoveryCode}
+                                        <Button
+                                            secondary
+                                            class="recovery-codes-button"
+                                            on:click={() => (showRegenerateRecoveryCodes = true)}>
+                                            Regenerate
+                                        </Button>
+                                    {:else}
+                                        <Button
+                                            secondary
+                                            class="recovery-codes-button"
+                                            on:click={createRecoveryCodes}>View</Button>
+                                    {/if}
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    {/if}
                 {/if}
-            {/if}
-        </div>
+            </Layout.Stack>
+        </Layout.Stack>
     </svelte:fragment>
 </CardGrid>
 
@@ -317,21 +311,10 @@
     {regenerateRecoveryCodes}
     factors={$factors} />
 
-<style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
-
-    /* Default (including mobile) */
-    .method {
-        align-items: start;
-        .method-button {
-            margin-inline-start: 2rem;
-        }
-    }
-
-    /* for smaller screens */
-    @media #{devices.$break2open} {
-        .method {
-            align-items: center;
-        }
+<style>
+    :global(.recovery-codes-button) {
+        height: fit-content;
+        margin-inline-start: 0.5rem;
+        padding-inline: 1rem !important;
     }
 </style>
diff --git a/src/routes/(console)/account/updateName.svelte b/src/routes/(console)/account/updateName.svelte
index 06b42fcf9..07e85def1 100644
--- a/src/routes/(console)/account/updateName.svelte
+++ b/src/routes/(console)/account/updateName.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -36,12 +36,10 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h2" size="7">Name</Heading>
+        <svelte:fragment slot="title">Name</svelte:fragment>
 
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText id="name" label="Name" placeholder="Enter name" bind:value={name} />
-            </FormList>
+            <InputText id="name" label="Name" placeholder="Enter name" bind:value={name} required />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/account/updatePassword.svelte b/src/routes/(console)/account/updatePassword.svelte
index 2004db143..d51f612bf 100644
--- a/src/routes/(console)/account/updatePassword.svelte
+++ b/src/routes/(console)/account/updatePassword.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, Form, FormList, InputPassword } from '$lib/elements/forms';
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Link } from '@appwrite.io/pink-svelte';
 
     let newPassword: string = null;
     let oldPassword: string = null;
@@ -30,26 +31,23 @@
 
 <Form onSubmit={updatePassword}>
     <CardGrid>
-        <Heading tag="h2" size="7">Password</Heading>
-        <p class="text">
-            Forgot your password? <a class="link" href={`${base}/recover`}>Recover your password</a>
-        </p>
+        <svelte:fragment slot="title">Password</svelte:fragment>
+        Forgot your password? <Link.Anchor href={`${base}/recover`}
+            >Recover your password</Link.Anchor>
 
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputPassword
-                    id="oldPassword"
-                    label="Old password"
-                    placeholder="Enter password"
-                    showPasswordButton={true}
-                    bind:value={oldPassword} />
-                <InputPassword
-                    id="newPassword"
-                    label="New password"
-                    placeholder="Enter password"
-                    showPasswordButton={true}
-                    bind:value={newPassword} />
-            </FormList>
+            <InputPassword
+                id="oldPassword"
+                label="Old password"
+                placeholder="Enter password"
+                required
+                bind:value={oldPassword} />
+            <InputPassword
+                id="newPassword"
+                label="New password"
+                placeholder="Enter password"
+                required
+                bind:value={newPassword} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/apply-credit/+page.svelte b/src/routes/(console)/apply-credit/+page.svelte
index 6b1bb48f8..abd0cc60e 100644
--- a/src/routes/(console)/apply-credit/+page.svelte
+++ b/src/routes/(console)/apply-credit/+page.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
     import { afterNavigate, goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CreditsApplied, EstimatedTotal, SelectPaymentMethod } from '$lib/components/billing';
+    import { CreditsApplied, SelectPaymentMethod } from '$lib/components/billing';
     import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputSelect, InputTags, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputSelect, InputTags, InputText } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
-    import {
-        WizardSecondaryContainer,
-        WizardSecondaryContent,
-        WizardSecondaryFooter
-    } from '$lib/layout';
+    import { Wizard } from '$lib/layout';
     import { type PaymentList, type Plan } from '$lib/sdk/billing';
-    import { app } from '$lib/stores/app';
-    import { plansInfo, isOrganization, type Tier } from '$lib/stores/billing.js';
     import { addNotification } from '$lib/stores/notifications';
     import {
         organizationList,
@@ -26,7 +20,10 @@
     import { ID } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
-    import { getCampaignImageUrl } from '$routes/(public)/card/helpers';
+    import { isOrganization, plansInfo, type Tier } from '$lib/stores/billing';
+    import { Fieldset, Icon, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import EstimatedTotalBox from '$lib/components/billing/estimatedTotalBox.svelte';
 
     export let data;
 
@@ -72,10 +69,15 @@
     let couponData = data?.couponData;
     let campaign = data?.campaign;
     let billingPlan: Tier = BillingPlan.PRO;
+    let tempOrgId = null;
     let currentPlan: Plan;
 
+    $: onlyNewOrgs = (campaign && campaign.onlyNewOrgs) || (couponData && couponData.onlyNewOrgs);
+
+    $: selectedOrgId = tempOrgId;
+
     function isUpgrade() {
-        const newPlan = $page.data.plansInfo.get(billingPlan);
+        const newPlan = page.data.plansInfo.get(billingPlan);
         return currentPlan && newPlan && currentPlan.order < newPlan.order;
     }
 
@@ -84,19 +86,22 @@
         if (!$organizationList?.total || campaign?.onlyNewOrgs) {
             selectedOrgId = newOrgId;
         }
-        if ($page.url.searchParams.has('org')) {
-            selectedOrgId = $page.url.searchParams.get('org');
+        if (page.url.searchParams.has('org')) {
+            selectedOrgId = page.url.searchParams.get('org');
             canSelectOrg = false;
         }
         if (campaign?.plan) {
             billingPlan = campaign.plan;
         }
 
-        if ($page.url.searchParams.has('type')) {
-            const type = $page.url.searchParams.get('type');
+        if ($organizationList.total > 0 && tempOrgId === null) {
+            tempOrgId = $organizationList.teams[0].$id;
+        }
+        if (page.url.searchParams.has('type')) {
+            const type = page.url.searchParams.get('type');
             if (type === 'payment_confirmed') {
-                const organizationId = $page.url.searchParams.get('id');
-                collaborators = $page.url.searchParams.get('invites').split(',');
+                const organizationId = page.url.searchParams.get('id');
+                collaborators = page.url.searchParams.get('invites').split(',');
 
                 await sdk.forConsole.billing.validateOrganization(organizationId, collaborators);
             }
@@ -159,7 +164,7 @@
                 let params = new URLSearchParams();
                 params.append('type', 'payment_confirmed');
                 params.append('org', org.teamId);
-                for (const [key, value] of $page.url.searchParams.entries()) {
+                for (const [key, value] of page.url.searchParams.entries()) {
                     if (key !== 'type' && key !== 'id') {
                         params.append(key, value);
                     }
@@ -226,11 +231,14 @@
             selectedOrg?.billingPlan && $plansInfo.get(selectedOrg.billingPlan)
                 ? $plansInfo.get(selectedOrg.billingPlan)
                 : null;
+
         if (!campaignPlan || !orgPlan) {
             return;
         }
+
         return campaignPlan.order > orgPlan.order ? campaign.plan : selectedOrg?.billingPlan;
     }
+
     $: if (selectedOrg) {
         billingPlan = getBillingPlan();
     }
@@ -248,121 +256,126 @@
     <title>Apply credits - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer href={previousPage} bind:showExitModal confirmExit>
-    <svelte:fragment slot="title">Apply credits</svelte:fragment>
-    <WizardSecondaryContent>
+<Wizard bind:showExitModal href={previousPage} confirmExit title="Apply credits">
+    <Layout.Stack gap="l">
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
-            <FormList>
-                {#if $organizationList?.total && !campaign?.onlyNewOrgs && canSelectOrg}
-                    <InputSelect
-                        bind:value={selectedOrgId}
-                        label="Select organization"
-                        {options}
-                        required
-                        placeholder="Select organization"
-                        id="organization" />
-                {/if}
-                {#if selectedOrgId && (selectedOrg?.billingPlan === BillingPlan.FREE || !selectedOrg?.paymentMethodId)}
-                    {#if selectedOrgId === newOrgId}
-                        <InputText
-                            label="Organization name"
-                            placeholder="Enter organization name"
-                            id="name"
-                            required
-                            bind:value={name} />
-                    {/if}
-                    <InputTags
-                        bind:tags={collaborators}
-                        label="Invite members by email"
-                        tooltip="Invited members will have access to all services and payment data within your organization"
-                        placeholder="Enter email address(es)"
-                        validityRegex={emailRegex}
-                        validityMessage="Invalid email address"
-                        id="members" />
-                    <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId />
-                {/if}
-            </FormList>
-        </Form>
-        <Form bind:this={couponForm} onSubmit={addCoupon}>
-            <FormList>
-                {#if !data?.couponData?.code && selectedOrgId}
-                    <InputText
-                        required
-                        disabled={!!couponData?.credits}
-                        bind:value={coupon}
-                        placeholder="Enter coupon code"
-                        id="code"
-                        label="Coupon code">
-                        <Button submit secondary disabled={!!couponData?.credits}>
-                            <span class="text">Apply</span>
-                        </Button>
-                    </InputText>
-                {/if}
-            </FormList>
-        </Form>
-        <svelte:fragment slot="aside">
-            {#if campaign?.template === 'card'}
-                <div
-                    class="box card-container u-position-relative"
-                    style:--box-border-radius="var(--border-radius-small)">
-                    <div class="card-bg"></div>
-                    <div class="u-flex u-flex-vertical u-gap-24 u-cross-center u-position-relative">
-                        <img
-                            src={getCampaignImageUrl(campaign?.image[$app.themeInUse])}
-                            class="u-block u-image-object-fit-cover card-img"
-                            alt="promo" />
-                        <p class="text">
-                            {#if couponData?.credits}
-                                {campaign.title.replace('VALUE', couponData.credits.toString())}
-                            {:else}
-                                {campaign.title}
-                            {/if}
-                        </p>
-                    </div>
-                </div>
-            {/if}
-            {#if selectedOrg?.$id && selectedOrg?.billingPlan === billingPlan}
-                <section
-                    class="card u-margin-block-start-24"
-                    style:--p-card-padding="1.5rem"
-                    style:--p-card-border-radius="var(--border-radius-small)">
-                    {#if couponData?.code && couponData?.status === 'active'}
-                        <CreditsApplied bind:couponData fixedCoupon={!!data?.couponData?.code} />
-                        <p class="text u-margin-block-start-12">
-                            Credits will automatically be applied to your next invoice on <b
-                                >{toLocaleDate(selectedOrg?.billingNextInvoiceDate)}.</b>
-                        </p>
-                    {:else}
-                        <p class="text">Add a coupon code to apply credits to your organization.</p>
-                    {/if}
-                </section>
-            {:else if selectedOrgId}
-                <div class:u-margin-block-start-24={campaign?.template === 'card'}>
-                    <EstimatedTotal
-                        {billingBudget}
-                        organizationId={selectedOrgId === newOrgId ? undefined : selectedOrgId}
-                        {billingPlan}
-                        {collaborators}
-                        {couponData}>
-                        {#if campaign?.template === 'review' && (campaign?.cta || campaign?.claimed || campaign?.unclaimed)}
-                            <div class="u-margin-block-end-24">
-                                <p class="body-text-1 u-bold">{campaign?.cta}</p>
-                                <p class="text u-margin-block-start-8">
-                                    {#if couponData?.code && couponData?.status === 'active' && campaign?.claimed}
-                                        {campaign?.claimed}
-                                    {:else if campaign?.unclaimed}
-                                        {campaign?.unclaimed}
-                                    {/if}
-                                </p>
-                            </div>
+            <Layout.Stack gap="xl">
+                <Fieldset legend="Setup">
+                    <Layout.Stack gap="l">
+                        {#if $organizationList?.total && !onlyNewOrgs && canSelectOrg}
+                            <InputSelect
+                                bind:value={selectedOrgId}
+                                label="Organization"
+                                {options}
+                                required
+                                placeholder="Select organization"
+                                id="organization" />
                         {/if}
-                    </EstimatedTotal>
-                </div>
-            {/if}
-        </svelte:fragment>
-    </WizardSecondaryContent>
+                        {#if selectedOrgId && (selectedOrg?.billingPlan !== BillingPlan.PRO || !selectedOrg?.paymentMethodId)}
+                            {#if selectedOrgId === newOrgId}
+                                <InputText
+                                    label="Organization name"
+                                    placeholder="Enter name"
+                                    id="name"
+                                    required
+                                    bind:value={name} />
+                            {/if}
+                            <InputTags
+                                bind:tags={collaborators}
+                                label="Invite members by email"
+                                placeholder="Enter email address(es)"
+                                pattern={emailRegex.toString()}
+                                id="members">
+                                <Tooltip slot="info">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <span slot="tooltip">
+                                        Invited members will have access to all services and payment
+                                        data within your organization
+                                    </span>
+                                </Tooltip>
+                            </InputTags>
+                        {/if}
+                    </Layout.Stack>
+                </Fieldset>
+                {#if (selectedOrgId && (selectedOrg?.billingPlan !== BillingPlan.PRO || !selectedOrg?.paymentMethodId)) || (!data?.couponData?.code && selectedOrgId)}
+                    <Fieldset legend="Payment">
+                        <Layout.Stack gap="xl">
+                            {#if selectedOrgId && (selectedOrg?.billingPlan !== BillingPlan.PRO || !selectedOrg?.paymentMethodId)}
+                                <SelectPaymentMethod
+                                    bind:methods
+                                    bind:value={paymentMethodId}
+                                    bind:taxId />
+                            {/if}
+                            <Form bind:this={couponForm} onSubmit={addCoupon}>
+                                {#if !data?.couponData?.code && selectedOrgId}
+                                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                        <InputText
+                                            required
+                                            disabled={!!couponData?.credits}
+                                            bind:value={coupon}
+                                            placeholder="Enter code"
+                                            id="code"
+                                            label="Coupon code">
+                                        </InputText>
 
-    <WizardSecondaryFooter>
+                                        <Button
+                                            submit
+                                            secondary
+                                            size="s"
+                                            disabled={!!couponData?.credits}>
+                                            <span class="text">Add</span>
+                                        </Button>
+                                    </Layout.Stack>
+                                {/if}
+                            </Form>
+                        </Layout.Stack>
+                    </Fieldset>
+                {/if}
+            </Layout.Stack>
+        </Form>
+    </Layout.Stack>
+    <svelte:fragment slot="aside">
+        {#if selectedOrg?.$id && selectedOrg?.billingPlan === billingPlan}
+            <section
+                class="card"
+                style:--p-card-padding="1.5rem"
+                style:--p-card-border-radius="var(--border-radius-small)">
+                {#if couponData?.code && couponData?.status === 'active'}
+                    <CreditsApplied bind:couponData fixedCoupon={!!data?.couponData?.code} />
+                    <p class="text u-margin-block-start-12">
+                        Credits will automatically be applied to your next invoice on <b
+                            >{toLocaleDate(selectedOrg?.billingNextInvoiceDate)}.</b>
+                    </p>
+                {:else}
+                    <p class="text">Add a coupon code to apply credits to your organization.</p>
+                {/if}
+            </section>
+        {:else if selectedOrgId}
+            <div>
+                <EstimatedTotalBox
+                    fixedCoupon={!!data?.couponData?.code}
+                    {billingPlan}
+                    {collaborators}
+                    plans={$plansInfo}
+                    bind:couponData
+                    bind:billingBudget>
+                    {#if campaign?.template === 'review' && (campaign?.cta || campaign?.claimed || campaign?.unclaimed)}
+                        <div class="u-margin-block-end-24">
+                            <p class="body-text-1 u-bold">{campaign?.cta}</p>
+                            <p class="text u-margin-block-start-8">
+                                {#if couponData?.code && couponData?.status === 'active' && campaign?.claimed}
+                                    {campaign?.claimed}
+                                {:else if campaign?.unclaimed}
+                                    {campaign?.unclaimed}
+                                {/if}
+                            </p>
+                        </div>
+                    {/if}
+                </EstimatedTotalBox>
+            </div>
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="footer">
         <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
         <Button
             fullWidthMobile
@@ -373,15 +386,16 @@
             }}
             disabled={$isSubmitting}>
             {#if $isSubmitting}
-                <span class="loader is-small is-transparent u-line-height-1-5" aria-hidden="true" />
+                <span class="loader is-small is-transparent u-line-height-1-5" aria-hidden="true"
+                ></span>
             {/if}
             {#if selectedOrgId === newOrgId}
-                Create Organization
+                Create organization
             {:else}
-                Apply credits
+                Apply
             {/if}
         </Button>
-    </WizardSecondaryFooter>
+    </svelte:fragment>
     <svelte:fragment slot="exit">
         You can apply your credits to an organization at a later date. All other data entered will
         be lost.
@@ -389,42 +403,4 @@
             Credits expire {toLocaleDate(couponData.expiration)}.
         {/if}
     </svelte:fragment>
-</WizardSecondaryContainer>
-
-<style lang="scss">
-    .card-container {
-        overflow: hidden;
-    }
-    .card-bg {
-        position: absolute;
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-        inset: 0;
-    }
-    .card-bg::before {
-        position: absolute;
-        inset-block-start: -30px;
-        inset-inline-end: -30px;
-        content: '';
-        display: block;
-        inline-size: 30%;
-        block-size: 30%;
-        background: radial-gradient(49.55% 43.54% at 47% 50.69%, #e7f8f7 0%, #85dbd8 100%);
-        filter: blur(70px);
-    }
-    .card-bg::after {
-        position: absolute;
-        inset-block-end: -30px;
-        inset-inline-start: -30px;
-        content: '';
-        display: block;
-        inline-size: 30%;
-        block-size: 30%;
-        background: radial-gradient(50% 46.73% at 50% 53.27%, #fe9567 28.17%, #fd366e 59.38%);
-        filter: blur(70px);
-    }
-    .card-img {
-        max-width: 12.5rem;
-    }
-</style>
+</Wizard>
diff --git a/src/routes/(console)/create-organization/+page.svelte b/src/routes/(console)/create-organization/+page.svelte
index a9a92035e..6d37264de 100644
--- a/src/routes/(console)/create-organization/+page.svelte
+++ b/src/routes/(console)/create-organization/+page.svelte
@@ -1,48 +1,36 @@
 <script lang="ts">
     import { afterNavigate, goto, invalidate, preloadData } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { PlanComparisonBox, SelectPaymentMethod, SelectPlan } from '$lib/components/billing';
-    import EstimatedTotal from '$lib/components/billing/estimatedTotal.svelte';
+    import { PlanComparisonBox, PlanSelection, SelectPaymentMethod } from '$lib/components/billing';
     import ValidateCreditModal from '$lib/components/billing/validateCreditModal.svelte';
-    import Default from '$lib/components/roles/default.svelte';
     import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputTags, InputText, Label } from '$lib/elements/forms';
-    import {
-        WizardSecondaryContainer,
-        WizardSecondaryContent,
-        WizardSecondaryFooter
-    } from '$lib/layout';
-    import type { Coupon, PaymentList } from '$lib/sdk/billing';
+    import { Button, Form, InputTags, InputText } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import type { Coupon } from '$lib/sdk/billing';
     import { isOrganization, tierToPlan } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import {
-        organizationList,
-        type OrganizationError,
-        type Organization
-    } from '$lib/stores/organization';
+    import { type OrganizationError, type Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { confirmPayment } from '$lib/stores/stripe';
     import { ID } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Divider, Fieldset, Icon, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
     import { writable } from 'svelte/store';
+    import EstimatedTotalBox from '$lib/components/billing/estimatedTotalBox.svelte';
+    import { onMount } from 'svelte';
 
-    $: anyOrgFree = $organizationList.teams?.some(
-        (org) => (org as Organization)?.billingPlan === BillingPlan.FREE
-    );
-    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/i;
+    export let data;
+
+    let selectedPlan: BillingPlan = data.plan as BillingPlan;
+    let selectedCoupon: Partial<Coupon> | null = data.coupon;
     let previousPage: string = base;
     let showExitModal = false;
 
-    afterNavigate(({ from }) => {
-        previousPage = from?.url?.pathname || previousPage;
-    });
-
     let formComponent: Form;
     let isSubmitting = writable(false);
 
-    let methods: PaymentList;
     let name: string;
     let billingPlan: BillingPlan = BillingPlan.FREE;
     let paymentMethodId: string;
@@ -57,9 +45,13 @@
     let billingBudget: number;
     let showCreditModal = false;
 
+    afterNavigate(({ from }) => {
+        previousPage = from?.url?.pathname || previousPage;
+    });
+
     onMount(async () => {
-        if ($page.url.searchParams.has('coupon')) {
-            const coupon = $page.url.searchParams.get('coupon');
+        if (page.url.searchParams.has('coupon')) {
+            const coupon = page.url.searchParams.get('coupon');
             try {
                 const response = await sdk.forConsole.billing.getCouponAccount(coupon);
                 couponData = response;
@@ -71,37 +63,31 @@
                 };
             }
         }
-        if ($page.url.searchParams.has('name')) {
-            name = $page.url.searchParams.get('name');
+        if (page.url.searchParams.has('name')) {
+            name = page.url.searchParams.get('name');
         }
-        if ($page.url.searchParams.has('plan')) {
-            const plan = $page.url.searchParams.get('plan');
+        if (page.url.searchParams.has('plan')) {
+            const plan = page.url.searchParams.get('plan');
             if (plan && Object.values(BillingPlan).includes(plan as BillingPlan)) {
                 billingPlan = plan as BillingPlan;
             }
         }
         if (
-            anyOrgFree ||
-            ($page.url.searchParams.has('type') &&
-                $page.url.searchParams.get('type') === 'createPro')
+            data?.hasFreeOrganizations ||
+            (page.url.searchParams.has('type') && page.url.searchParams.get('type') === 'createPro')
         ) {
             billingPlan = BillingPlan.PRO;
         }
-        if ($page.url.searchParams.has('type')) {
-            const type = $page.url.searchParams.get('type');
+        if (page.url.searchParams.has('type')) {
+            const type = page.url.searchParams.get('type');
             if (type === 'payment_confirmed') {
-                const organizationId = $page.url.searchParams.get('id');
-                const invites = $page.url.searchParams.get('invites').split(',');
+                const organizationId = page.url.searchParams.get('id');
+                const invites = page.url.searchParams.get('invites').split(',');
                 await validate(organizationId, invites);
             }
         }
     });
 
-    async function loadPaymentMethods() {
-        methods = await sdk.forConsole.billing.listPaymentMethods();
-        paymentMethodId = methods.paymentMethods.find((method) => !!method?.last4)?.$id ?? null;
-    }
-
     async function validate(organizationId: string, invites: string[]) {
         try {
             const org = await sdk.forConsole.billing.validateOrganization(organizationId, invites);
@@ -126,7 +112,7 @@
         try {
             let org: Organization | OrganizationError;
 
-            if (billingPlan === BillingPlan.FREE) {
+            if (selectedPlan === BillingPlan.FREE) {
                 org = await sdk.forConsole.billing.createOrganization(
                     ID.unique(),
                     name,
@@ -138,7 +124,7 @@
                 org = await sdk.forConsole.billing.createOrganization(
                     ID.unique(),
                     name,
-                    billingPlan,
+                    selectedPlan,
                     paymentMethodId,
                     null,
                     couponData.code ? couponData.code : null,
@@ -152,7 +138,7 @@
                     let params = new URLSearchParams();
                     params.append('type', 'payment_confirmed');
                     params.append('id', org.teamId);
-                    for (const [key, value] of $page.url.searchParams.entries()) {
+                    for (const [key, value] of page.url.searchParams.entries()) {
                         if (key !== 'type' && key !== 'id') {
                             params.append(key, value);
                         }
@@ -191,68 +177,77 @@
             trackError(e, Submit.OrganizationCreate);
         }
     }
-
-    $: if (billingPlan !== BillingPlan.FREE) {
-        loadPaymentMethods();
-    }
 </script>
 
 <svelte:head>
     <title>Create organization - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer bind:showExitModal href={previousPage} confirmExit>
-    <svelte:fragment slot="title">Create organization</svelte:fragment>
-    <WizardSecondaryContent>
-        <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
-            <FormList>
+<Wizard title="Create organization" href={previousPage} bind:showExitModal confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Options">
                 <InputText
                     bind:value={name}
                     label="Organization name"
                     placeholder="Enter organization name"
                     id="name"
                     required />
-            </FormList>
-            <Label class="label u-margin-block-start-16">Select plan</Label>
-            <p class="text">
-                For more details on our plans, visit our
-                <Button href="https://appwrite.io/pricing" external link>pricing page</Button>.
-            </p>
-            <SelectPlan bind:billingPlan {anyOrgFree} isNewOrg />
-            {#if billingPlan !== BillingPlan.FREE}
-                <FormList class="u-margin-block-start-24">
+            </Fieldset>
+            <Fieldset legend="Select plan">
+                <Typography.Text>
+                    For more details on our plans, visit our
+                    <Link.Anchor
+                        href="https://appwrite.io/pricing"
+                        target="_blank"
+                        rel="noopener noreferrer">pricing page</Link.Anchor
+                    >.
+                </Typography.Text>
+                <PlanSelection
+                    bind:billingPlan={selectedPlan}
+                    anyOrgFree={data.hasFreeOrganizations}
+                    isNewOrg />
+            </Fieldset>
+            {#if selectedPlan !== BillingPlan.FREE}
+                <Fieldset legend="Payment">
+                    <SelectPaymentMethod
+                        methods={data.paymentMethods}
+                        bind:value={paymentMethodId}
+                        bind:taxId>
+                        <svelte:fragment slot="actions">
+                            {#if !selectedCoupon?.code}
+                                <Divider vertical style="height: 2rem;" />
+                                <Button compact on:click={() => (showCreditModal = true)}>
+                                    <Icon icon={IconPlus} slot="start" size="s" />
+                                    Add credits
+                                </Button>
+                            {/if}
+                        </svelte:fragment>
+                    </SelectPaymentMethod>
+                </Fieldset>
+                <Fieldset legend="Invite members">
                     <InputTags
                         bind:tags={collaborators}
                         label="Invite members by email"
-                        popover={Default}
                         placeholder="Enter email address(es)"
-                        validityRegex={emailRegex}
-                        validityMessage="Invalid email address"
                         id="members" />
-                    <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId
-                    ></SelectPaymentMethod>
-                </FormList>
-                {#if !couponData?.code}
-                    <Button
-                        text
-                        noMargin
-                        class="u-margin-block-start-16"
-                        on:click={() => (showCreditModal = true)}>
-                        <span class="icon-plus"></span> <span class="text">Add credits</span>
-                    </Button>
-                {/if}
+                </Fieldset>
             {/if}
-        </Form>
-        <svelte:fragment slot="aside">
-            {#if billingPlan !== BillingPlan.FREE}
-                <EstimatedTotal bind:billingBudget {billingPlan} {collaborators} bind:couponData />
-            {:else}
-                <PlanComparisonBox />
-            {/if}
-        </svelte:fragment>
-    </WizardSecondaryContent>
-
-    <WizardSecondaryFooter>
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        {#if selectedPlan !== BillingPlan.FREE}
+            <EstimatedTotalBox
+                billingPlan={selectedPlan}
+                {collaborators}
+                plans={data.plansInfo}
+                bind:couponData={selectedCoupon}
+                bind:billingBudget />
+        {:else}
+            <PlanComparisonBox />
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="footer">
         <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
         <Button
             fullWidthMobile
@@ -260,7 +255,7 @@
             disabled={$isSubmitting}>
             Create organization
         </Button>
-    </WizardSecondaryFooter>
-</WizardSecondaryContainer>
+    </svelte:fragment>
+</Wizard>
 
-<ValidateCreditModal bind:show={showCreditModal} bind:couponData />
+<ValidateCreditModal bind:show={showCreditModal} bind:couponData={selectedCoupon} isNewOrg />
diff --git a/src/routes/(console)/create-organization/+page.ts b/src/routes/(console)/create-organization/+page.ts
new file mode 100644
index 000000000..6c3cfe2f0
--- /dev/null
+++ b/src/routes/(console)/create-organization/+page.ts
@@ -0,0 +1,50 @@
+import { BillingPlan } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+import type { Coupon } from '$lib/sdk/billing';
+import type { Organization } from '$lib/stores/organization';
+
+export const load: PageLoad = async ({ url, parent }) => {
+    const { organizations } = await parent();
+    const [coupon, paymentMethods] = await Promise.all([
+        getCoupon(url),
+        sdk.forConsole.billing.listPaymentMethods()
+    ]);
+    let plan = getPlanFromUrl(url);
+    const hasFreeOrganizations = organizations.teams?.some(
+        (org) => (org as Organization)?.billingPlan === BillingPlan.FREE
+    );
+    if (plan === BillingPlan.FREE && hasFreeOrganizations) {
+        plan = BillingPlan.PRO;
+    }
+
+    return {
+        plan,
+        coupon,
+        hasFreeOrganizations,
+        paymentMethods,
+        name: url.searchParams.get('name') ?? ''
+    };
+};
+
+function getPlanFromUrl(url: URL): BillingPlan | null {
+    if (url.searchParams.has('plan')) {
+        const plan = url.searchParams.get('plan');
+        if (plan && plan in BillingPlan) {
+            return plan as BillingPlan;
+        }
+    }
+    return BillingPlan.FREE;
+}
+
+async function getCoupon(url: URL): Promise<Coupon | null> {
+    if (url.searchParams.has('code')) {
+        const coupon = url.searchParams.get('code');
+        try {
+            return sdk.forConsole.billing.getCoupon(coupon);
+        } catch (e) {
+            return null;
+        }
+    }
+    return null;
+}
diff --git a/src/routes/(console)/createOrganization.svelte b/src/routes/(console)/createOrganization.svelte
index 6547a5c51..b869b35e2 100644
--- a/src/routes/(console)/createOrganization.svelte
+++ b/src/routes/(console)/createOrganization.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { InputText, Button, FormList } from '$lib/elements/forms';
+    import { InputText, Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -8,9 +8,9 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { ID } from '@appwrite.io/console';
-    import Alert from '$lib/components/alert.svelte';
     import { isCloud } from '$lib/system';
     import { base } from '$app/paths';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
     export let show = false;
 
@@ -39,28 +39,27 @@
     }
 </script>
 
-<Modal title="Create new organization" {error} onSubmit={create} size="big" bind:show>
+<Modal title="Create new organization" {error} onSubmit={create} bind:show>
     {#if isCloud}
-        <Alert type="info">
-            <svelte:fragment slot="title">Get ready for Appwrite Pro</svelte:fragment>
+        <Alert.Inline status="info" title="Get ready for Appwrite Pro">
             We will soon introduce the much-anticipated Pro plan. Your account will continue to have
             access to <b>one free organization</b>. If you manage more than one organization, you
             will need to either upgrade to the Pro plan, transfer your projects to a Pro
             organization, or migrate to self-hosting.
-            <svelte:fragment slot="buttons">
+            <svelte:fragment slot="actions">
                 <Button href="https://appwrite.io/pricing" external text>Learn more</Button>
             </svelte:fragment>
-        </Alert>
+        </Alert.Inline>
     {/if}
-    <FormList>
-        <InputText
-            id="organization-name"
-            label="Name"
-            placeholder="Enter name"
-            bind:value={name}
-            autofocus={true}
-            required />
-    </FormList>
+
+    <InputText
+        id="organization-name"
+        label="Name"
+        placeholder="Enter name"
+        bind:value={name}
+        autofocus={true}
+        required />
+
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/feedbackWizard.svelte b/src/routes/(console)/feedbackWizard.svelte
index 9a7553ae1..72b83285c 100644
--- a/src/routes/(console)/feedbackWizard.svelte
+++ b/src/routes/(console)/feedbackWizard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Wizard } from '$lib/layout';
+    import { WizardWithSteps } from '$lib/layout';
     import { onDestroy } from 'svelte';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
     import { feedbackData } from '$lib/stores/feedback';
     import Step1 from './wizard/feedback/step1.svelte';
     import Step2 from './wizard/feedback/step2.svelte';
@@ -22,4 +22,4 @@
     });
 </script>
 
-<Wizard title="Feedback" steps={stepsComponents} finalAction="Close" />
+<WizardWithSteps title="Feedback" steps={stepsComponents} finalAction="Close" />
diff --git a/src/routes/(console)/onboarding/+layout.svelte b/src/routes/(console)/onboarding/+layout.svelte
deleted file mode 100644
index 3fad2e9ed..000000000
--- a/src/routes/(console)/onboarding/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<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
deleted file mode 100644
index e0a2cb5e5..000000000
--- a/src/routes/(console)/onboarding/+layout.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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
deleted file mode 100644
index b32451e1a..000000000
--- a/src/routes/(console)/onboarding/+page.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-<script lang="ts">
-    import { goto, invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Card, Heading } from '$lib/components';
-    import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Button, Form, InputSelect, 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 { sdk } from '$lib/stores/sdk';
-    import { isCloud } from '$lib/system';
-    import { ID } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
-    import { tierToPlan, type Tier, plansInfo, isOrganization } from '$lib/stores/billing';
-    import { formatCurrency } from '$lib/helpers/numbers';
-    import { base } from '$app/paths';
-    import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
-
-    let name: string;
-    let plan: Tier;
-
-    const options = isCloud
-        ? [
-              {
-                  value: BillingPlan.FREE,
-                  label: `${tierToPlan(BillingPlan.FREE).name} - ${formatCurrency($plansInfo.get(BillingPlan.FREE).price)} / month`
-              },
-              {
-                  value: BillingPlan.PRO,
-                  label: `${tierToPlan(BillingPlan.PRO).name} - ${formatCurrency($plansInfo.get(BillingPlan.PRO).price)} / month + add-ons`
-              },
-              {
-                  value: BillingPlan.SCALE,
-                  label: `${tierToPlan(BillingPlan.SCALE).name} - ${formatCurrency($plansInfo.get(BillingPlan.SCALE).price)}/month + usage`
-              }
-          ]
-        : [];
-
-    onMount(() => {
-        if (isCloud) {
-            checkPricingRefAndRedirect($page.url.searchParams);
-        }
-    });
-
-    async function handleSubmit() {
-        const orgName = name?.length ? name : 'Personal Projects';
-        if (isCloud) {
-            if (plan === BillingPlan.FREE) {
-                try {
-                    const org = await sdk.forConsole.billing.createOrganization(
-                        ID.unique(),
-                        orgName,
-                        plan,
-                        null,
-                        null
-                    );
-                    trackEvent(Submit.OrganizationCreate, {
-                        plan: tierToPlan(plan)?.name
-                    });
-                    await invalidate(Dependencies.ACCOUNT);
-                    if (isOrganization(org)) {
-                        await goto(`${base}/organization-${org.$id}`);
-                        addNotification({
-                            message: `${orgName} organization successfully created`,
-                            type: 'success'
-                        });
-                    } else {
-                        addNotification({
-                            message: `${org.message}`,
-                            type: 'error'
-                        });
-                    }
-                } catch (error) {
-                    addNotification({
-                        message: error.message,
-                        type: 'error'
-                    });
-                    trackError(error, Submit.OrganizationCreate);
-                }
-            } else {
-                goto(`${base}/create-organization?name=${orgName}&plan=${plan}`);
-            }
-        } else {
-            try {
-                const org = await sdk.forConsole.teams.create(ID.unique(), orgName);
-
-                await invalidate(Dependencies.ACCOUNT);
-                await goto(`${base}/organization-${org.$id}`);
-
-                addNotification({
-                    message: `${orgName} organization successfully created`,
-                    type: 'success'
-                });
-            } catch (error) {
-                addNotification({
-                    message: error.message,
-                    type: 'error'
-                });
-                trackError(error, Submit.OrganizationCreate);
-            }
-        }
-    }
-</script>
-
-<Container overlapCover size="large">
-    <Card>
-        <Heading size="4" tag="h2">Create a new organization</Heading>
-        <Form onSubmit={handleSubmit}>
-            <FormList gap={16}>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Organization name"
-                    hideRequired
-                    bind:value={name} />
-                {#if isCloud}
-                    <div class="u-margin-block-start-8">
-                        <h3><b>Plan</b></h3>
-                        <p>
-                            For more details on our plans, visit our <Button
-                                link
-                                external
-                                href="https://appwrite.io/pricing">pricing page</Button
-                            >.
-                        </p>
-                        <FormList class="u-margin-block-start-8">
-                            <InputSelect
-                                placeholder="Select a plan"
-                                label="Select plan"
-                                showLabel={false}
-                                id="plan"
-                                required
-                                hideRequired
-                                {options}
-                                bind:value={plan} />
-                        </FormList>
-                    </div>
-                {/if}
-                <Button
-                    fullWidth
-                    submit
-                    disabled={isCloud && !plan}
-                    event="create_organization"
-                    submissionLoader
-                    let:isSubmitting>
-                    {#if isSubmitting}
-                        Creating your first organization
-                    {:else}
-                        Get started
-                    {/if}
-                </Button>
-            </FormList>
-        </Form>
-    </Card>
-</Container>
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
new file mode 100644
index 000000000..3b7bd52ad
--- /dev/null
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { Card, Layout, Button } from '@appwrite.io/pink-svelte';
+    import { isCloud } from '$lib/system';
+    import { sdk } from '$lib/stores/sdk';
+    import { ID, Region } from '@appwrite.io/console';
+    import Loading from './loading.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { addNotification } from '$lib/stores/notifications';
+    import CreateProject from '$lib/layout/createProject.svelte';
+
+    let isLoading = false;
+    let id: string;
+    let startAnimation = false;
+    let projectName = 'Appwrite project';
+    let region = Region.Fra;
+    export let data;
+
+    async function createProject() {
+        isLoading = true;
+
+        console.log(data);
+        try {
+            const teamId = data.organization.$id;
+            const project = await sdk.forConsole.projects.create(
+                id ?? ID.unique(),
+                projectName,
+                teamId,
+                region ?? Region.Fra
+            );
+            trackEvent(Submit.ProjectCreate, {
+                customId: !!id,
+                teamId
+            });
+
+            startAnimation = true;
+
+            setTimeout(async () => {
+                await invalidate(Dependencies.ACCOUNT);
+                goto(`${base}/project-${project.region}-${project.$id}`);
+            }, 3000);
+        } catch (e) {
+            trackError(e, Submit.ProjectCreate);
+            isLoading = false;
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Create project - Appwrite</title>
+</svelte:head>
+<div
+    class="page-container u-flex-vertical u-cross-child-center u-cross-center"
+    class:u-margin-block-start-96={!isLoading}>
+    {#if isLoading}
+        <Loading {startAnimation} />
+    {:else}
+        <img
+            src="/console/images/appwrite-logo-light.svg"
+            width="120"
+            height="22"
+            class="u-only-light"
+            alt="Appwrite Logo" />
+        <img
+            src="/console/images/appwrite-logo-dark.svg"
+            width="120"
+            height="22"
+            class="u-only-dark"
+            alt="Appwrite Logo" />
+        <Card.Base variant="primary" padding="l">
+            <CreateProject
+                regions={isCloud ? data.regions.regions : []}
+                bind:projectName
+                bind:id
+                bind:region
+                on:submit={createProject}>
+                <svelte:fragment slot="submit">
+                    <Layout.Stack direction="row" justifyContent="flex-end">
+                        <Button.Button autofocus type="submit" variant="primary" size="s">
+                            Create
+                        </Button.Button>
+                    </Layout.Stack>
+                </svelte:fragment>
+            </CreateProject>
+        </Card.Base>
+    {/if}
+</div>
+
+<style lang="scss">
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
+
+    :global(body) {
+        background: var(--bgcolor-neutral-default, #19191c);
+    }
+    .page-container {
+        width: calc(100% - 2rem);
+        margin: 0 1rem;
+        gap: 4.5rem;
+        background: var(--bgcolor-neutral-default, #19191c);
+
+        @media #{devices.$break2open} {
+            width: 700px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/onboarding/create-project/+page.ts b/src/routes/(console)/onboarding/create-project/+page.ts
new file mode 100644
index 000000000..d67315cdc
--- /dev/null
+++ b/src/routes/(console)/onboarding/create-project/+page.ts
@@ -0,0 +1,74 @@
+import type { PageLoad } from './$types';
+import { isCloud } from '$lib/system';
+import { sdk } from '$lib/stores/sdk';
+import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+import { isOrganization, tierToPlan } from '$lib/stores/billing';
+import { ID, Query } from '@appwrite.io/console';
+import { BillingPlan } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import { base } from '$app/paths';
+
+export const load: PageLoad = async ({ parent }) => {
+    const { organizations } = await parent();
+    try {
+        if (!organizations?.total) {
+            try {
+                if (isCloud) {
+                    const org = await sdk.forConsole.billing.createOrganization(
+                        ID.unique(),
+                        'Personal projects',
+                        BillingPlan.FREE,
+                        null,
+                        null
+                    );
+                    trackEvent(Submit.OrganizationCreate, {
+                        plan: tierToPlan(BillingPlan.FREE)?.name,
+                        budget_cap_enabled: false,
+                        members_invited: 0
+                    });
+
+                    if (isOrganization(org)) {
+                        return {
+                            organization: org,
+                            regions: await sdk.forConsole.billing.listRegions(org.$id)
+                        };
+                    } else {
+                        const e = new Error(org.message, {
+                            cause: org
+                        });
+                        trackError(e, Submit.OrganizationCreate);
+                    }
+                } else {
+                    return {
+                        organization: await sdk.forConsole.teams.create(
+                            ID.unique(),
+                            'Personal projects'
+                        ),
+                        regions: null
+                    };
+                }
+            } catch (e) {
+                trackError(e, Submit.OrganizationCreate);
+            }
+        } else if (organizations?.total === 1) {
+            const org = organizations.teams[0];
+            const projects = await sdk.forConsole.projects.list([
+                Query.equal('teamId', org.$id),
+                Query.limit(1)
+            ]);
+            if (!projects.total) {
+                const regions = isCloud ? await sdk.forConsole.billing.listRegions(org.$id) : null;
+                return {
+                    organization: org,
+                    regions
+                };
+            } else {
+                redirect(303, `${base}/console/organization-${org.$id}`);
+            }
+        } else {
+            redirect(303, `${base}/console/organization-${organizations.teams[0].$id}`);
+        }
+    } catch (error) {
+        console.error(error);
+    }
+};
diff --git a/src/routes/(console)/onboarding/create-project/loading.svelte b/src/routes/(console)/onboarding/create-project/loading.svelte
new file mode 100644
index 000000000..484c0cfce
--- /dev/null
+++ b/src/routes/(console)/onboarding/create-project/loading.svelte
@@ -0,0 +1,546 @@
+<script>
+    import { Spinner, Typography, Layout } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
+    import { onMount } from 'svelte';
+    import { fade } from 'svelte/transition';
+
+    export let startAnimation = false;
+
+    const loadingSentences = [
+        'Database services are initializing',
+        'In-memory caching is ready',
+        'Backup services are ready',
+        'All 37 OAuth providers are ready',
+        'Global CDN is ready',
+        'Advanced DDoS protection is ready',
+        'Appwrite network is ready'
+    ];
+    let currentSentenceIndex = 0;
+    let visible = true;
+    let removeShadow = false;
+    let removeShadowTimeout;
+
+    function handleResize() {
+        startAnimation = false;
+        removeShadow = false;
+        setTimeout(() => {
+            startAnimation = true;
+            handleRemoveShadow();
+        }, 1500);
+    }
+
+    function handleRemoveShadow() {
+        removeShadowTimeout = setTimeout(() => {
+            removeShadow = true;
+        }, 2000); // wait for transition animation to be started
+    }
+
+    $: if (startAnimation) {
+        handleRemoveShadow();
+    }
+
+    onMount(() => {
+        const interval = setInterval(() => {
+            visible = false;
+            currentSentenceIndex = (currentSentenceIndex + 1) % loadingSentences.length;
+            setTimeout(() => {
+                visible = true;
+            }, 1000);
+        }, 3000);
+
+        return () => {
+            clearInterval(interval);
+            clearTimeout(removeShadowTimeout);
+        };
+    });
+
+    let initialDelay = 0;
+</script>
+
+<svelte:window on:resize={handleResize} />
+<div class="grid-container" class:start-animation={startAnimation}>
+    <div class="static-loader">
+        <Layout.Stack alignItems="center" gap="l">
+            <Spinner />
+            <Typography.Title size="l">Creating your project</Typography.Title>
+
+            <div style="height: 30px">
+                {#if visible}
+                    <span id="subtitle" transition:fade
+                        >{loadingSentences[currentSentenceIndex]}</span>
+                {/if}
+            </div>
+        </Layout.Stack>
+    </div>
+    <div class="title-container">
+        <Typography.Title size="l">Welcome to Appwrite</Typography.Title>
+    </div>
+    <div class="grid" class:remove-shadow={removeShadow}>
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 1; "></div>
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 2; "></div>
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 3; "></div>
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 4; "></div>
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 5; "></div>
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 6; "></div>
+        <div class="border-right is-not-mobile" style="grid-row: 1 / 6; grid-column-start: 7; ">
+        </div>
+        <div class="border-right is-not-mobile" style="grid-row: 1 / 6; grid-column-start: 8; ">
+        </div>
+
+        <div class="border-bottom" style="grid-row-start: 1;"></div>
+        <div class="border-bottom" style="grid-row-start: 2;"></div>
+        <div class="border-bottom" style="grid-row-start: 3;"></div>
+        <div class="border-bottom" style="grid-row-start: 4;"></div>
+
+        <div class="vertical-fade-top" style="grid-row-start: 1; "></div>
+        <div class="vertical-fade-bottom" style="grid-row-start: 5; "></div>
+        <div class="horizontal-fade-left" style="grid-row: 1 / 6; grid-column-start: 1;"></div>
+        <div class="horizontal-fade-right" style="grid-row: 1 / 6; "></div>
+
+        <div class="icon icon1" style:--delay={`${initialDelay}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon1.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon1-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon2" style:--delay={`${initialDelay + 0.1}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon2.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon2-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon3" style:--delay={`${initialDelay + 0.15}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon3.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon3-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon4" style:--delay={`${initialDelay + 0.2}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon4.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon4-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon5" style:--delay={`${initialDelay + 0.25}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon5.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon5-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon6" style:--delay={`${initialDelay + 0.3}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon6-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon7" style:--delay={`${initialDelay + 0.35}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon6-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon8" style:--delay={`${initialDelay + 0.4}s`}>
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} class="u-only-light" alt="" />
+                    <img
+                        src={`${base}/images/onboarding/icon6-dark.svg`}
+                        class="u-only-dark"
+                        alt="" />
+                </div>
+            </div>
+        </div>
+
+        <div class="appwrite">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/appwrite.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    :global(.theme-dark) {
+        --icon-content-background-color: var(--bgcolor-neutral-primary, #1d1d21);
+        --icon-content-border-color: var(--overlay-skeleton);
+        --icon-container-background-color: #242427;
+        --icon-container-border-color: rgba(255, 255, 255, 0.02);
+        --box-shadow: none;
+    }
+    :global(.theme-light) {
+        --icon-content-background-color: var(--neutral-0, #ffffff);
+        --icon-content-border-color: var(--neutral-50, #ededf0);
+        --icon-container-background-color: rgba(255, 255, 255, 0.5);
+        --icon-container-border-color: rgba(0, 0, 0, 0.02);
+        --box-shadow: 0 12.973px 12.973px 0 rgba(0, 0, 0, 0.04);
+    }
+    .grid-container {
+        max-width: 100vw;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: var(--fgcolor-neutral-primary, #2d2d31);
+
+        --animation-type: cubic-bezier(0.77, 0, 0.175, 1);
+        --icon-colorize-animation-duration: 0.3s; // duration of icons going from gray to colorized
+        --icon-move-to-center-animation-duration: 0.8s; // duration of icons merging together
+        --icons-fade-out-animation-duration: 0.75s; //duration of icons disappearing animation
+        --welcome-to-appwrite-animation-duration: 0.8s; //duration of fading in the welcome to appwrite text
+        --fade-in-animation-component-duration: 1s; //duration for the entire icon grid to show up
+
+        --show-icon-color-delay: calc(var(--fade-in-animation-component-duration) + 0.5s);
+        --icon-move-to-center-delay: calc(
+            var(--show-icon-color-delay) + 0.5s
+        ); //delay before the icons merging together is started
+        --icons-fade-out-delay: calc(
+            var(--icon-move-to-center-delay) + 0.4s
+        ); // delay before icons start disappearing
+        --final-icon-fade-out-delay: calc(
+            var(--icons-fade-out-delay) + 0.4s
+        ); //delay before the last icon start disappearing before the appwrite logo shows up
+        --appwrite-icon-fade-in-delay: calc(
+            var(--final-icon-fade-out-delay) + 0.1s
+        ); //delay before the appwrite logo appears
+        --welcome-to-appwrite-delay: calc(var(--icon-move-to-center-delay) + 1.25s);
+
+        --cell-dimension: 65px;
+        --icon-width: 26px;
+        --border-radius-container: 17px;
+        --border-radius-content: 12px;
+
+        --half-cell-dimension: calc(var(--cell-dimension) * 0.5);
+        --double-cell-dimension: calc(var(--cell-dimension) * 2);
+        --triple-cell-dimension: calc(var(--cell-dimension) * 3);
+        --quadriple-cell-dimension: calc(var(--cell-dimension) * 4);
+        --negative-cell-dimension: calc(var(--cell-dimension) * -1);
+        --negative-double-cell-dimension: calc(var(--cell-dimension) * -2);
+        --negative-triple-cell-dimension: calc(var(--cell-dimension) * -3);
+        --negative-quadriple-cell-dimension: calc(var(--cell-dimension) * -4);
+
+        @media (min-width: 768px) {
+            --cell-dimension: 120px;
+            --icon-width: 48px;
+            --border-radius-container: 32px;
+            --border-radius-content: 22px;
+        }
+    }
+
+    .static-loader {
+        z-index: 1;
+        transition: opacity 0.5s var(--animation-type);
+
+        @media (min-width: 768px) {
+            margin-top: 50px;
+            margin-bottom: 50px;
+        }
+    }
+    .start-animation .static-loader {
+        opacity: 0;
+    }
+    .title-container {
+        margin-bottom: -100px;
+        z-index: 1;
+        opacity: 0;
+        filter: blur(4px);
+        transform: translateY(-12px);
+    }
+    .start-animation .title-container {
+        opacity: 1;
+        filter: blur(0px);
+        transform: translateY(0);
+        transition-property: opacity, filter, transform;
+        transition: var(--welcome-to-appwrite-animation-duration) var(--animation-type)
+            var(--welcome-to-appwrite-delay);
+    }
+    .grid {
+        transition: opacity var(--fade-in-animation-component-duration) var(--animation-type);
+        display: grid;
+        grid-template-columns: var(--half-cell-dimension) repeat(5, var(--cell-dimension)) var(
+                --half-cell-dimension
+            );
+        grid-template-rows: 180px repeat(4, var(--cell-dimension));
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(9, var(--cell-dimension));
+            grid-template-rows: 180px repeat(4, var(--cell-dimension));
+        }
+    }
+
+    .icon-container {
+        width: calc(var(--cell-dimension) + 10px);
+        padding: 5px;
+        aspect-ratio: 1/1;
+        margin-top: -5px;
+        margin-left: -5px;
+        box-sizing: border-box;
+
+        border-radius: var(--border-radius-container);
+        border-width: 1px;
+        border-color: transparent;
+        border-style: solid;
+        transition: all calc(var(--icon-colorize-animation-duration) + var(--delay))
+            var(--animation-type) var(--show-icon-color-delay);
+
+        @media (min-width: 768px) {
+            width: calc(var(--cell-dimension) + 20px);
+            margin-top: -10px;
+            margin-left: -10px;
+            padding: 10px;
+        }
+    }
+
+    .start-animation .icon-container {
+        background-color: var(--icon-container-background-color);
+        border-color: var(--icon-container-border-color);
+        box-shadow: var(--box-shadow);
+    }
+
+    .icon-content {
+        width: var(--cell-dimension);
+        aspect-ratio: 1/1;
+        border-radius: var(--border-radius-content);
+
+        border-width: 1px;
+        border-color: transparent;
+        border-style: solid;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        filter: grayscale(100%) brightness(150%) contrast(90%);
+        transition: all var(--icon-colorize-animation-duration) var(--animation-type)
+            calc(var(--show-icon-color-delay) + var(--delay));
+
+        img {
+            width: var(--icon-width);
+        }
+    }
+
+    .start-animation .icon-content {
+        background: var(--icon-content-background-color);
+        border-color: var(--icon-content-border-color);
+    }
+
+    .start-animation .icon-content {
+        animation: grayscale-animation var(--icon-colorize-animation-duration) var(--animation-type)
+            var(--show-icon-color-delay);
+        animation-fill-mode: forwards;
+    }
+
+    @keyframes grayscale-animation {
+        100% {
+            -webkit-filter: grayscale(0%) brightness(100%) contrast(100%);
+            filter: grayscale(0%) brightness(100%) contrast(100%);
+        }
+    }
+
+    .icon {
+        transition: transform var(--icon-move-to-center-animation-duration) var(--animation-type)
+            calc(var(--icon-move-to-center-delay) + var(--delay));
+    }
+    .appwrite {
+        opacity: 0;
+        filter: blur(4px);
+        grid-row-start: 3;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 3;
+            grid-column-start: 5;
+        }
+    }
+
+    .start-animation .appwrite {
+        opacity: 1;
+        filter: blur(0px);
+        transition-property: opacity, filter;
+        transition: var(--icons-fade-out-animation-duration) var(--animation-type)
+            calc(var(--appwrite-icon-fade-in-delay) + 0.35s);
+    }
+
+    .border-right {
+        border-right: 1px solid var(--border-neutral);
+    }
+    .border-bottom {
+        border-bottom: 1px solid var(--border-neutral);
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
+    }
+
+    .vertical-fade-top {
+        background: linear-gradient(
+            to bottom,
+            var(--bgcolor-neutral-default, #19191c) 0%,
+            transparent 100%
+        );
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
+    }
+    .vertical-fade-bottom {
+        background: linear-gradient(
+            to top,
+            var(--bgcolor-neutral-default, #19191c) 0%,
+            transparent 100%
+        );
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
+    }
+    .horizontal-fade-left {
+        background: linear-gradient(
+            to right,
+            var(--bgcolor-neutral-default, #19191c) 0%,
+            transparent 100%
+        );
+    }
+    .horizontal-fade-right {
+        background: linear-gradient(
+            to left,
+            var(--bgcolor-neutral-default, #19191c) 0%,
+            transparent 100%
+        );
+        grid-column-start: 7;
+        @media (min-width: 768px) {
+            grid-column-start: 9;
+        }
+    }
+
+    .start-animation .icon1 {
+        transform: translateY(var(--cell-dimension)) translateX(var(--double-cell-dimension));
+    }
+    .start-animation .icon2 {
+        transform: translateY(var(--cell-dimension)) translateX(0);
+    }
+    .start-animation .icon3 {
+        transform: translateY(var(--cell-dimension))
+            translateX(var(--negative-double-cell-dimension));
+    }
+    .start-animation .icon4 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--double-cell-dimension));
+    }
+    .start-animation .icon5 {
+        transform: translateY(var(--negative-cell-dimension)) translateX(0);
+    }
+    .start-animation .icon6 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--double-cell-dimension));
+    }
+
+    .start-animation .icon7 {
+        transform: translateY(var(--negative-cell-dimension)) translateX(0);
+    }
+    .start-animation .icon8 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--negative-double-cell-dimension));
+    }
+
+    .remove-shadow :not(.icon8) .icon-container {
+        transition: box-shadow var(--icon-move-to-center-animation-duration) var(--animation-type);
+        box-shadow: 0 12.973px 12.973px 0 rgba(0, 0, 0, 0);
+    }
+
+    .icon1 {
+        grid-row-start: 2;
+        grid-column-start: 2;
+
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 3;
+        }
+    }
+
+    .icon2 {
+        grid-row-start: 2;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 5;
+        }
+    }
+
+    .icon3 {
+        grid-row-start: 2;
+        grid-column-start: 6;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 7;
+        }
+    }
+
+    .icon4 {
+        grid-row-start: 4;
+        grid-column-start: 2;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 3;
+        }
+    }
+    .icon5 {
+        grid-row-start: 4;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 5;
+        }
+    }
+
+    .icon6 {
+        display: none;
+    }
+
+    .icon7 {
+        display: none;
+    }
+
+    .icon8 {
+        grid-row-start: 4;
+        grid-column-start: 6;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 7;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/onboarding/header.svelte b/src/routes/(console)/onboarding/header.svelte
deleted file mode 100644
index 4bf595ce1..000000000
--- a/src/routes/(console)/onboarding/header.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-    import { Heading } from '$lib/components';
-    import { Cover } from '$lib/layout';
-</script>
-
-<Cover size="large">
-    <div class="u-flex u-cross-center u-main-center u-width-full-line">
-        <Heading size="1" tag="h1" trimmed={false}>Welcome to Appwrite</Heading>
-    </div>
-</Cover>
diff --git a/src/routes/(console)/organization-[organization]/+layout.svelte b/src/routes/(console)/organization-[organization]/+layout.svelte
index 3f71e24ab..3a6f7c179 100644
--- a/src/routes/(console)/organization-[organization]/+layout.svelte
+++ b/src/routes/(console)/organization-[organization]/+layout.svelte
@@ -3,7 +3,7 @@
     import CreateMember from './createMember.svelte';
     import Create from '../createOrganization.svelte';
     import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { registerCommands } from '$lib/commandCenter';
     import { requestedMigration } from '$routes/store';
     import { openMigrationWizard } from '../(migration-wizard)';
@@ -23,7 +23,7 @@
                 goto(`${base}/organization-${data.organization.$id}/members`);
             },
             keys: ['g', 'm'],
-            disabled: $page.url.pathname.endsWith('/members') || !$isOwner,
+            disabled: page.url.pathname.endsWith('/members') || !$isOwner,
             group: 'navigation'
         },
         {
@@ -32,7 +32,7 @@
                 goto(`${base}/organization-${data.organization.$id}/settings`);
             },
             keys: ['g', 's'],
-            disabled: $page.url.pathname.endsWith('/settings') || !$isOwner,
+            disabled: page.url.pathname.endsWith('/settings') || !$isOwner,
             group: 'navigation'
         }
     ]);
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index f7e391c74..b7af2ad1a 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import Create from './createProjectCloud.svelte';
     import CreateProject from './createProject.svelte';
     import CreateOrganization from '../createOrganization.svelte';
-    import { wizard } from '$lib/stores/wizard';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { registerCommands } from '$lib/commandCenter';
     import {
         CardContainer,
@@ -16,7 +13,6 @@
         DropListItem,
         Empty,
         GridItem1,
-        Heading,
         PaginationWithLimit
     } from '$lib/components';
     import { goto } from '$app/navigation';
@@ -28,49 +24,44 @@
     import { ID, Region } from '@appwrite.io/console';
     import { openImportWizard } from '../project-[region]-[project]/settings/migrations/(import)';
     import { readOnly } from '$lib/stores/billing';
-    import { onMount } from 'svelte';
+    import { onMount, type ComponentType } from 'svelte';
     import { canWriteProjects } from '$lib/stores/roles';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
+    import { Badge, Icon, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        IconAndroid,
+        IconApple,
+        IconCode,
+        IconFlutter,
+        IconPlus,
+        IconReact,
+        IconUnity
+    } from '@appwrite.io/pink-icons-svelte';
+    import { getPlatformInfo } from '$lib/helpers/platform';
+    import CreateProjectCloud from './createProjectCloud.svelte';
     import { organization, regions as regionsStore } from '$lib/stores/organization';
 
     export let data;
 
     let showCreate = false;
+    let showCreateProjectCloud = false;
     let addOrganization = false;
 
-    const getPlatformInfo = (platform: string) => {
-        let name: string, icon: string;
-        if (platform.includes('flutter')) {
-            name = 'Flutter';
-            icon = 'flutter';
-        } else if (platform.includes('apple')) {
-            name = 'Apple';
-            icon = 'apple';
-        } else if (platform.includes('android')) {
-            name = 'Android';
-            icon = 'android';
-        } else if (platform.includes('unity')) {
-            name = 'Unity';
-            icon = 'unity';
-        } else if (platform.includes('web')) {
-            name = 'Web';
-            icon = 'code';
-        } else {
-            name = 'Unknown';
-            icon = 'unknown';
-        }
-        return { name, icon };
-    };
-
-    function allServiceDisabled(project: Models.Project): boolean {
+    async function allServiceDisabled(project: Models.Project) {
         let disabled = true;
-        services.load(project);
-        $services.list.forEach((service) => {
-            if (service.value) {
-                disabled = false;
-            }
-        });
-        return disabled;
+        try {
+            if (!project.$id) return false;
+            if (!project.platforms.length) return false;
+            services.load(project);
+            $services.list.forEach((service) => {
+                if (service.value) {
+                    disabled = false;
+                }
+            });
+            return disabled;
+        } catch (e) {
+            return true;
+        }
     }
 
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
@@ -81,10 +72,29 @@
 
     function handleCreateProject() {
         if (!$canWriteProjects) return;
-        if (isCloud) wizard.start(Create);
+        if (isCloud) showCreateProjectCloud = true;
         else showCreate = true;
     }
 
+    function getIconForPlatform(platform: string): ComponentType {
+        switch (platform) {
+            case 'code':
+                return IconCode;
+            case 'flutter':
+                return IconFlutter;
+            case 'apple':
+                return IconApple;
+            case 'android':
+                return IconAndroid;
+            case 'react-native':
+                return IconReact;
+            case 'unity':
+                return IconUnity;
+            default:
+                return null;
+        }
+    }
+
     $: $registerCommands([
         {
             label: 'Create project',
@@ -94,7 +104,7 @@
             keys: ['c'],
             disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteProjects,
             group: 'projects',
-            icon: 'plus'
+            icon: IconPlus
         }
     ]);
 
@@ -106,11 +116,11 @@
             const project = await sdk.forConsole.projects.create(
                 ID.unique(),
                 `Imported project ${new Date().toISOString()}`,
-                $page.params.organization,
+                page.params.organization,
                 Region.Fra // default
             );
             trackEvent(Submit.ProjectCreate, {
-                teamId: $page.params.organization
+                teamId: page.params.organization
             });
             await goto(`${base}/project-${project.region}-${project.$id}/settings/migrations`);
             openImportWizard();
@@ -123,109 +133,111 @@
         if (isCloud && $organization.$id) {
             const regions = await sdk.forConsole.billing.listRegions($organization.$id);
             regionsStore.set(regions);
-            checkPricingRefAndRedirect($page.url.searchParams);
+            checkPricingRefAndRedirect(page.url.searchParams);
         }
     });
 
     function findRegion(project: Models.Project) {
-        return $regionsStore?.regions?.find((region) => region.$id === project.region);
+        return $regionsStore?.regions?.find(
+            (region) => region.$id === (project as Models.Project & { region: string }).region
+        );
     }
 </script>
 
-{#if $organization?.$id}
-    <Container>
-        <div class="u-flex u-gap-12 common-section u-main-space-between">
-            <Heading tag="h2" size="5">Projects</Heading>
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Typography.Title>Projects</Typography.Title>
 
-            <DropList bind:show={showDropdown} placement="bottom-end">
-                {#if $canWriteProjects}
-                    <Button
-                        on:click={handleCreateProject}
-                        event="create_project"
-                        disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create project</span>
-                    </Button>
-                {/if}
-                <svelte:fragment slot="list">
-                    <DropListItem on:click={() => (showCreate = true)}>Empty project</DropListItem>
-                    <DropListItem on:click={importProject}>
-                        <div class="u-flex u-gap-8 u-cross-center">
-                            Import project <span class="tag eyebrow-heading-3">Experimental</span>
-                        </div>
-                    </DropListItem>
-                </svelte:fragment>
-            </DropList>
-        </div>
+        <DropList bind:show={showDropdown} placement="bottom-end">
+            {#if $canWriteProjects}
+                <Button
+                    on:click={handleCreateProject}
+                    event="create_project"
+                    disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create project
+                </Button>
+            {/if}
+            <svelte:fragment slot="list">
+                <DropListItem on:click={() => (showCreate = true)}>Empty project</DropListItem>
+                <DropListItem on:click={importProject}>
+                    <div class="u-flex u-gap-8 u-cross-center">
+                        Import project <span class="tag eyebrow-heading-3">Experimental</span>
+                    </div>
+                </DropListItem>
+            </svelte:fragment>
+        </DropList>
+    </div>
 
-        {#if data.projects.total}
-            <CardContainer
-                showEmpty={$canWriteProjects}
-                total={data.projects.total}
-                offset={data.offset}
-                on:click={handleCreateProject}>
-                {#each data.projects.projects as project}
-                    {@const platforms = filterPlatforms(
-                        project.platforms.map((platform) => getPlatformInfo(platform.type))
-                    )}
-                    <li>
-                        <GridItem1 href={`${base}/project-${project.region}-${project.$id}`}>
-                            <svelte:fragment slot="eyebrow">
-                                {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
-                            </svelte:fragment>
-                            <svelte:fragment slot="title">
-                                {project.name}
-                            </svelte:fragment>
-                            {#if allServiceDisabled(project)}
-                                <p>
-                                    <span class="icon-pause" aria-hidden="true" /> All services are disabled.
-                                </p>
-                            {/if}
-
-                            {#each platforms as platform, i}
-                                {#if i < 3}
-                                    <Pill>
-                                        <span class={`icon-${platform.icon}`} aria-hidden="true" />
-                                        {platform.name}
-                                    </Pill>
-                                {/if}
-                            {/each}
-                            {#if platforms?.length > 3}
-                                <Pill>
-                                    +{project.platforms.length - 3}
-                                </Pill>
-                            {/if}
-                            <svelte:fragment slot="icons">
-                                {#if isCloud && $regionsStore?.regions}
-                                    {@const region = findRegion(project)}
-                                    <span class="u-color-text-gray u-medium u-line-height-2">
-                                        {region?.name}
-                                    </span>
-                                {/if}
-                            </svelte:fragment>
-                        </GridItem1>
-                    </li>
-                {/each}
-                <svelte:fragment slot="empty">
-                    <p>Create a new project</p>
-                </svelte:fragment>
-            </CardContainer>
-        {:else}
-            <Empty
-                single
-                allowCreate={$canWriteProjects}
-                on:click={handleCreateProject}
-                target="project"
-                href="https://appwrite.io/docs/quick-starts"></Empty>
-        {/if}
-
-        <PaginationWithLimit
-            name="Projects"
-            limit={data.limit}
+    {#if data.projects.total}
+        <CardContainer
+            disableEmpty={!$canWriteProjects}
+            total={data.projects.total}
             offset={data.offset}
-            total={data.projects.total} />
-    </Container>
+            on:click={handleCreateProject}>
+            {#each data.projects.projects as project}
+                {@const platforms = filterPlatforms(
+                    project.platforms.map((platform) => getPlatformInfo(platform.type))
+                )}
+                <GridItem1 href={`${base}/project-${project.region}-${project.$id}`}>
+                    <svelte:fragment slot="eyebrow">
+                        {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
+                    </svelte:fragment>
+                    <svelte:fragment slot="title">
+                        {project.name}
+                    </svelte:fragment>
+                    {#await allServiceDisabled(project) then isDisabled}
+                        {#if isDisabled}
+                            <p>
+                                <span class="icon-pause" aria-hidden="true"></span> All services are
+                                disabled.
+                            </p>
+                        {/if}
+                    {/await}
 
-    <CreateOrganization bind:show={addOrganization} />
-    <CreateProject bind:show={showCreate} teamId={$page.params.organization} />
+                    {#each platforms as platform, i}
+                        {#if i < 3}
+                            {@const icon = getIconForPlatform(platform.icon)}
+                            <Badge variant="secondary" content={platform.name}>
+                                <Icon {icon} size="s" slot="start" />
+                            </Badge>
+                        {/if}
+                    {/each}
+                    {#if platforms?.length > 3}
+                        <Badge variant="secondary" content={`+${project.platforms.length - 3}`} />
+                    {/if}
+                    <svelte:fragment slot="icons">
+                        {#if isCloud && $regionsStore?.regions}
+                            {@const region = findRegion(project)}
+                            <span class="u-color-text-gray u-medium u-line-height-2">
+                                {region?.name}
+                            </span>
+                        {/if}
+                    </svelte:fragment>
+                </GridItem1>
+            {/each}
+            <svelte:fragment slot="empty">
+                <p>Create a new project</p>
+            </svelte:fragment>
+        </CardContainer>
+    {:else}
+        <Empty
+            single
+            allowCreate={$canWriteProjects}
+            on:click={handleCreateProject}
+            target="project"
+            href="https://appwrite.io/docs/quick-starts"></Empty>
+    {/if}
+
+    <PaginationWithLimit
+        name="Projects"
+        limit={data.limit}
+        offset={data.offset}
+        total={data.projects.total} />
+</Container>
+
+<CreateOrganization bind:show={addOrganization} />
+<CreateProject bind:show={showCreate} teamId={page.params.organization} />
+{#if showCreateProjectCloud}
+    <CreateProjectCloud bind:showCreateProjectCloud regions={$regionsStore.regions} />
 {/if}
diff --git a/src/routes/(console)/organization-[organization]/+page.ts b/src/routes/(console)/organization-[organization]/+page.ts
index 42b3763e6..b6f1668b9 100644
--- a/src/routes/(console)/organization-[organization]/+page.ts
+++ b/src/routes/(console)/organization-[organization]/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
     const { scopes } = await parent();
     depends(Dependencies.ORGANIZATION);
     const page = getPage(url);
-    const limit = getLimit('console', url, route, CARD_LIMIT);
+    const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
     if (!scopes.includes('projects.read') && scopes.includes('billing.read')) {
         return redirect(301, `/console/organization-${params.organization}/billing`);
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.svelte b/src/routes/(console)/organization-[organization]/billing/+page.svelte
index 1e73af0c6..1915fb8d7 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/+page.svelte
@@ -8,17 +8,17 @@
     import AvailableCredit from './availableCredit.svelte';
     import PaymentHistory from './paymentHistory.svelte';
     import TaxId from './taxId.svelte';
-    import { Alert, Heading } from '$lib/components';
     import { failedInvoice, paymentMethods, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { confirmPayment } from '$lib/stores/stripe';
     import { sdk } from '$lib/stores/sdk';
     import { toLocaleDate } from '$lib/helpers/date';
     import RetryPaymentModal from './retryPaymentModal.svelte';
     import { selectedInvoice, showRetryModal } from './store';
     import { Button } from '$lib/elements/forms';
+    import { Alert, Typography } from '@appwrite.io/pink-svelte';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { base } from '$app/paths';
@@ -34,18 +34,18 @@
     );
 
     onMount(async () => {
-        if ($page.url.searchParams.has('type')) {
-            if ($page.url.searchParams.get('type') === 'upgrade') {
+        if (page.url.searchParams.has('type')) {
+            if (page.url.searchParams.get('type') === 'upgrade') {
                 goto($upgradeURL);
             }
 
             if (
-                $page.url.searchParams.has('invoice') &&
-                $page.url.searchParams.get('type') === 'confirmation'
+                page.url.searchParams.has('invoice') &&
+                page.url.searchParams.get('type') === 'confirmation'
             ) {
-                const invoiceId = $page.url.searchParams.get('invoice');
+                const invoiceId = page.url.searchParams.get('invoice');
                 const invoice = await sdk.forConsole.billing.getInvoice(
-                    $page.params.organization,
+                    page.params.organization,
                     invoiceId
                 );
 
@@ -58,30 +58,30 @@
             }
 
             if (
-                $page.url.searchParams.has('type') &&
-                $page.url.searchParams.get('type') === 'validate-invoice'
+                page.url.searchParams.has('type') &&
+                page.url.searchParams.get('type') === 'validate-invoice'
             ) {
-                const invoiceId = $page.url.searchParams.get('invoice');
+                const invoiceId = page.url.searchParams.get('invoice');
                 await sdk.forConsole.billing.updateInvoiceStatus($organization.$id, invoiceId);
                 invalidate(Dependencies.INVOICES);
                 invalidate(Dependencies.ORGANIZATION);
             }
 
             if (
-                $page.url.searchParams.has('invoice') &&
-                $page.url.searchParams.get('type') === 'retry'
+                page.url.searchParams.has('invoice') &&
+                page.url.searchParams.get('type') === 'retry'
             ) {
-                const invoiceId = $page.url.searchParams.get('invoice');
+                const invoiceId = page.url.searchParams.get('invoice');
                 const invoice = await sdk.forConsole.billing.getInvoice(
-                    $page.params.organization,
+                    page.params.organization,
                     invoiceId
                 );
                 selectedInvoice.set(invoice);
                 showRetryModal.set(true);
             }
         }
-        if ($page.url.searchParams.has('clientSecret')) {
-            const clientSecret = $page.url.searchParams.get('clientSecret');
+        if (page.url.searchParams.has('clientSecret')) {
+            const clientSecret = page.url.searchParams.get('clientSecret');
             await confirmPayment($organization.$id, clientSecret, $organization.paymentMethodId);
         }
     });
@@ -90,9 +90,9 @@
 <Container>
     {#if $failedInvoice}
         {#if $failedInvoice?.lastError}
-            <Alert type="error" class="common-section">
+            <Alert.Inline status="error">
                 The scheduled payment for {$organization.name} failed due to following error: {$failedInvoice.lastError}
-                <svelte:fragment slot="buttons">
+                <svelte:fragment slot="actions">
                     <Button
                         text
                         on:click={() => {
@@ -100,36 +100,32 @@
                             $showRetryModal = true;
                         }}>Try again</Button>
                 </svelte:fragment>
-            </Alert>
+            </Alert.Inline>
         {:else}
-            <Alert type="error" class="common-section">
-                <svelte:fragment slot="title">
-                    The scheduled payment for {$organization.name} failed
-                </svelte:fragment>
-                To avoid service disruptions in organization's your projects, please verify your payment
-                details and update them if necessary.
-            </Alert>
+            <Alert.Inline
+                status="error"
+                title={`The scheduled payment for ${$organization.name} failed`}>
+                To avoid service disruptions in organization's your projects, please verify your
+                payment details and update them if necessary.
+            </Alert.Inline>
         {/if}
     {/if}
     {#if defaultPaymentMethod?.failed && !backupPaymentMethod}
-        <Alert type="error" class="common-section">
-            <svelte:fragment slot="title">
-                The default payment method for {$organization.name} has expired
-            </svelte:fragment>
+        <Alert.Inline
+            status="error"
+            title={`The default payment method for ${$organization.name} has expired`}>
             To avoid service disruptions in your organization's projects, please update your payment
             details.
-        </Alert>
+        </Alert.Inline>
     {/if}
     {#if $organization?.billingPlanDowngrade}
-        <Alert type="info" class="common-section">
+        <Alert.Inline status="info">
             Your organization has changed to {tierToPlan($organization?.billingPlanDowngrade).name} plan.
             You will continue to have access to {tierToPlan($organization?.billingPlan).name} plan features
             until your billing period ends on {toLocaleDate($organization.billingNextInvoiceDate)}.
-        </Alert>
+        </Alert.Inline>
     {/if}
-    <div class="common-section">
-        <Heading tag="h2" size="5">Billing</Heading>
-    </div>
+    <Typography.Title>Billing</Typography.Title>
     <PlanSummary
         creditList={data?.creditList}
         currentPlan={data?.aggregationBillingPlan}
diff --git a/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte b/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
index 4a66d6797..792f6d9d5 100644
--- a/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
@@ -3,7 +3,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -36,20 +36,21 @@
     }
 </script>
 
-<Modal bind:show title="Add credits" headerDivider={false} onSubmit={redeem} size="big" bind:error>
-    Apply Appwrite credits to your organization.
+<Modal bind:show title="Add credits" onSubmit={redeem} bind:error>
+    <svelte:fragment slot="description">
+        Apply Appwrite credits to your organization.
+    </svelte:fragment>
 
-    <FormList>
-        <InputText
-            placeholder="Promo code"
-            id="code"
-            autofocus
-            label="Add promo code"
-            bind:value={coupon} />
-    </FormList>
+    <InputText
+        required
+        placeholder="Promo code"
+        id="code"
+        autofocus
+        label="Add promo code"
+        bind:value={coupon} />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button submit>Add credits</Button>
+        <Button disabled={coupon === ''} submit>Add credits</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/(console)/organization-[organization]/billing/addCreditWizard.svelte b/src/routes/(console)/organization-[organization]/billing/addCreditWizard.svelte
index 5b4029d34..3ae09404f 100644
--- a/src/routes/(console)/organization-[organization]/billing/addCreditWizard.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/addCreditWizard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Wizard } from '$lib/layout';
+    import { WizardWithSteps } from '$lib/layout';
     import { onDestroy } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
@@ -60,7 +60,7 @@
     });
 </script>
 
-<Wizard
+<WizardWithSteps
     title="Add credits"
     steps={$addCreditWizardSteps}
     finalAction="Add credits"
diff --git a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
index 23275fe0f..5f786ccc9 100644
--- a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
@@ -1,13 +1,5 @@
 <script lang="ts">
-    import { Alert, CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
-    import {
-        TableBody,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
+    import { CardGrid, Empty, PaginationInline } from '$lib/components';
     import { toLocaleDate } from '$lib/helpers/date';
     import type { CreditList } from '$lib/sdk/billing';
     import { organization } from '$lib/stores/organization';
@@ -20,10 +12,11 @@
     import AddCreditModal from './addCreditModal.svelte';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { BillingPlan } from '$lib/constants';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { upgradeURL } from '$lib/stores/billing';
     import { Pill } from '$lib/elements';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Alert, Badge, Icon, Link, Table, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let offset = 0;
     let creditList: CreditList = {
@@ -90,83 +83,84 @@
 </script>
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
-    <Heading tag="h2" size="6">
+    <svelte:fragment slot="title">
         {$organization?.billingPlan === BillingPlan.FREE ? 'Credits' : 'Available credit'}
-    </Heading>
-
-    <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
+    </svelte:fragment>
+    Appwrite credit will automatically be applied to your next invoice.
     <svelte:fragment slot="aside">
         {#if $organization?.billingPlan === BillingPlan.FREE}
-            <Alert type="info">
-                <svelte:fragment slot="title">Upgrade to Pro to add credits</svelte:fragment>
-                Upgrade to a Pro plan to add credits to your organization. For more information on what
-                you can do with a Pro plan,
-                <a
-                    class="link"
+            <Alert.Inline status="info" title="Upgrade to Pro to add credits">
+                Upgrade to a Pro plan to add credits to your organization. For more information on
+                what you can do with a Pro plan,
+                <Link.Anchor
                     href="https://appwrite.io/pricing"
                     target="_blank"
-                    rel="noopener noreferrer">view our pricing guide.</a>
-            </Alert>
+                    rel="noopener noreferrer">view our pricing guide.</Link.Anchor>
+            </Alert.Inline>
         {:else}
             <div class="u-flex u-cross-center u-main-space-between">
                 <div class="u-flex u-gap-8 u-cross-center">
-                    <h4 class="body-text-1 u-bold">Balance</h4>
-                    <span class="inline-tag">{formatCurrency(creditList.available)}</span>
+                    <Typography.Text variant="m-600">Balance</Typography.Text>
+                    <Badge
+                        variant="secondary"
+                        size="s"
+                        content={formatCurrency(creditList.available)} />
                 </div>
                 {#if creditList?.total}
                     <Button secondary on:click={handleCredits}>
-                        <span class="icon-plus" aria-hidden="true"></span>
-                        <span class="text">Add credits</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add credits
                     </Button>
                 {/if}
             </div>
             {#if creditList?.total}
-                <TableScroll noStyles noMargin class="u-margin-block-start-16">
-                    <TableHeader>
-                        <TableCellHead>Code</TableCellHead>
-                        <TableCellHead>Total</TableCellHead>
-                        <TableCellHead>Remaining</TableCellHead>
-                        <TableCellHead>Expires at</TableCellHead>
-                    </TableHeader>
-                    <TableBody>
-                        {#each creditList.credits as credit}
-                            <TableRow>
-                                <TableCellText title="code">
-                                    {credit?.couponId ?? '-'}
-                                </TableCellText>
-                                <TableCellText title="total">
-                                    {formatCurrency(credit.total)}
-                                </TableCellText>
-                                <TableCellText title="remaining">
-                                    {#if credit.status === 'expired'}
-                                        <span
-                                            style="text-decoration: line-through;"
-                                            class:u-hide={credit.credits === 0}>
-                                            {formatCurrency(credit.credits)}</span> $0.00
-                                    {:else}
-                                        {formatCurrency(credit.credits)}
-                                    {/if}
-                                </TableCellText>
-                                <TableCellText title="expiry date">
-                                    {#if credit.status === 'expired'}
-                                        <span
-                                            use:tooltip={{
-                                                content: toLocaleDate(credit.expiration)
-                                            }}>
+                <Table.Root columns={4} let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell {root}>Code</Table.Header.Cell>
+                        <Table.Header.Cell {root}>Total</Table.Header.Cell>
+                        <Table.Header.Cell {root}>Remaining</Table.Header.Cell>
+                        <Table.Header.Cell {root}>Expires at</Table.Header.Cell>
+                    </svelte:fragment>
+                    {#each creditList.credits as credit}
+                        <Table.Row.Base {root}>
+                            <Table.Cell {root}>
+                                {credit?.couponId ?? '-'}
+                            </Table.Cell>
+                            <Table.Cell {root}>
+                                {formatCurrency(credit.total)}
+                            </Table.Cell>
+                            <Table.Cell {root}>
+                                {#if credit.status === 'expired'}
+                                    <span
+                                        style="text-decoration: line-through;"
+                                        class:u-hide={credit.credits === 0}>
+                                        {formatCurrency(credit.credits)}</span> $0.00
+                                {:else}
+                                    {formatCurrency(credit.credits)}
+                                {/if}
+                            </Table.Cell>
+                            <Table.Cell {root}>
+                                {#if credit.status === 'expired'}
+                                    <Tooltip>
+                                        <span>
                                             <Pill>Expired</Pill>
                                         </span>
-                                    {:else}
-                                        {toLocaleDate(credit.expiration)}
-                                    {/if}
-                                </TableCellText>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </TableScroll>
-                <div class="u-flex u-main-space-between">
-                    <p class="text">Total credits: {creditList?.total}</p>
-                    <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
-                </div>
+                                        <span slot="tooltip"
+                                            >{toLocaleDate(credit.expiration)}</span>
+                                    </Tooltip>
+                                {:else}
+                                    {toLocaleDate(credit.expiration)}
+                                {/if}
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
+                {#if creditList?.total > limit}
+                    <div class="u-flex u-main-space-between">
+                        <p class="text">Total credits: {creditList?.total}</p>
+                        <PaginationInline {limit} bind:offset total={creditList?.total} hidePages />
+                    </div>
+                {/if}
             {:else}
                 <Empty target="credits" on:click={handleCredits}>Add credits</Empty>
             {/if}
@@ -178,7 +172,7 @@
                 secondary
                 href={$upgradeURL}
                 on:click={() => {
-                    trackEvent('click_organization_upgrade', {
+                    trackEvent(Click.OrganizationClickUpgrade, {
                         from: 'button',
                         source: 'billing_add_credits'
                     });
diff --git a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
index db11885d4..efa7769e8 100644
--- a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, DropList, Heading } from '$lib/components';
-    import DropListItem from '$lib/components/dropListItem.svelte';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import type { Address } from '$lib/sdk/billing';
@@ -15,11 +14,17 @@
     import AddressModal from '$routes/(console)/account/payments/addressModal.svelte';
     import EditAddressModal from '$routes/(console)/account/payments/editAddressModal.svelte';
     import ReplaceAddress from './replaceAddress.svelte';
+    import { ActionMenu, Card, Divider, Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconPencil,
+        IconPlus,
+        IconSwitchHorizontal,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
 
     export let billingAddress: Address = null;
 
-    let showDropdown = false;
-    let showBillingAddressDropdown = false;
     let showCreate = false;
     let showEdit = false;
     let showReplace = false;
@@ -32,7 +37,6 @@
             await invalidate(Dependencies.ADDRESS);
             await invalidate(Dependencies.ORGANIZATION);
 
-            showDropdown = false;
             addNotification({
                 type: 'success',
                 message: `A new billing address has been added to ${$organization.name}`
@@ -49,17 +53,13 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Billing address</Heading>
-
-    <p class="text">
-        View or update your billing address. This address will be included in your invoices from
-        Appwrite.
-    </p>
+    <svelte:fragment slot="title">Billing address</svelte:fragment>
+    View or update your billing address. This address will be included in your invoices from Appwrite.
     <svelte:fragment slot="aside">
         {#if $organization?.billingAddressId && billingAddress}
-            <div class="box">
-                <div class="u-flex u-main-space-between u-cross-start">
-                    <div class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2">
+            <Card.Base variant="secondary" padding="s">
+                <Layout.Stack direction="row" justifyContent="space-between">
+                    <div>
                         <p class="text">{billingAddress.streetAddress}</p>
                         {#if billingAddress?.addressLine2}
                             <p class="text">{billingAddress.addressLine2}</p>
@@ -69,100 +69,65 @@
                         <p class="text">{billingAddress.postalCode}</p>
                         <p class="text">{billingAddress.country}</p>
                     </div>
-
-                    <DropList
-                        bind:show={showBillingAddressDropdown}
-                        placement="bottom-start"
-                        noArrow>
-                        <Button
-                            round
-                            text
-                            ariaLabel="More options"
-                            on:click={() => {
-                                showBillingAddressDropdown = !showBillingAddressDropdown;
-                            }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </Button>
-                        <svelte:fragment slot="list">
-                            {#if billingAddress.userId === $user.$id}
-                                <DropListItem
-                                    icon="pencil"
-                                    on:click={() => {
-                                        showEdit = true;
-                                        showBillingAddressDropdown = false;
-                                    }}>
-                                    Edit
-                                </DropListItem>
-                            {/if}
-                            <DropListItem
-                                icon="switch-horizontal"
-                                on:click={() => {
-                                    showReplace = true;
-                                    showBillingAddressDropdown = false;
-                                }}>
-                                Replace
-                            </DropListItem>
-                            <DropListItem
-                                icon="trash"
-                                on:click={() => {
-                                    showRemove = true;
-                                    showBillingAddressDropdown = false;
-                                }}>
-                                Remove
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </div>
-            </div>
-        {: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">
-                        <DropList bind:show={showDropdown} placement="bottom-start">
-                            <Button
-                                secondary
-                                round
-                                on:click={() => {
-                                    if ($addressList.total) {
-                                        showDropdown = !showDropdown;
-                                    } else {
-                                        showCreate = true;
-                                    }
-                                }}>
-                                <i class="icon-plus" />
+                    <div>
+                        <Popover let:toggle placement="bottom-end" padding="none">
+                            <Button text icon ariaLabel="more options" on:click={toggle}>
+                                <Icon icon={IconDotsHorizontal} size="s" />
                             </Button>
-                            <svelte:fragment slot="list">
-                                {#if $addressList?.total}
-                                    {#each $addressList.billingAddresses as address}
-                                        <DropListItem on:click={() => addAddress(address?.$id)}>
-                                            <p class="text">
-                                                <span>{address.streetAddress}</span>,
-                                                {#if address?.addressLine2}
-                                                    <span>{address.addressLine2}</span>,
-                                                {/if}
-                                                <span>{address.city}</span>,
-                                                <span>{address.state}</span>,
-                                                <span>{address.postalCode}</span>,
-                                                <span>{address.country}</span>
-                                            </p>
-                                        </DropListItem>
-                                    {/each}
+                            <ActionMenu.Root slot="tooltip">
+                                {#if billingAddress.userId === $user.$id}
+                                    <ActionMenu.Item.Button
+                                        on:click={() => (showEdit = true)}
+                                        leadingIcon={IconPencil}>
+                                        Edit
+                                    </ActionMenu.Item.Button>
                                 {/if}
-                                <DropListItem
-                                    on:click={() => {
-                                        showCreate = true;
-                                        showDropdown = false;
-                                    }}>
-                                    Add new billing address
-                                </DropListItem>
-                            </svelte:fragment>
-                        </DropList>
+                                <ActionMenu.Item.Button
+                                    on:click={() => (showReplace = true)}
+                                    leadingIcon={IconSwitchHorizontal}>
+                                    Replace
+                                </ActionMenu.Item.Button>
+                                <ActionMenu.Item.Button
+                                    on:click={() => (showRemove = true)}
+                                    leadingIcon={IconTrash}>
+                                    Remove
+                                </ActionMenu.Item.Button>
+                            </ActionMenu.Root>
+                        </Popover>
                     </div>
-                    <div class="common-section">
-                        <span class="text">Add a billing address</span>
-                    </div>
-                </div>
-            </article>
+                </Layout.Stack>
+            </Card.Base>
+        {:else}
+            <Card.Base>
+                <Layout.Stack justifyContent="center" alignItems="center" gap="m">
+                    <Popover let:toggle padding="none" placement="bottom-start">
+                        <Button secondary icon on:click={toggle}>
+                            <Icon icon={IconPlus} size="s" />
+                        </Button>
+                        <ActionMenu.Root slot="tooltip">
+                            {#each $addressList.billingAddresses as address}
+                                <ActionMenu.Item.Button on:click={() => addAddress(address?.$id)}>
+                                    <span>{address.streetAddress}</span>,
+                                    {#if address?.addressLine2}
+                                        <span>{address.addressLine2}</span>,
+                                    {/if}
+                                    <span>{address.city}</span>,
+                                    <span>{address.state}</span>,
+                                    <span>{address.postalCode}</span>,
+                                    <span>{address.country}</span>
+                                </ActionMenu.Item.Button>
+                            {/each}
+                            <Divider />
+                            <ActionMenu.Item.Button
+                                leadingIcon={IconPlus}
+                                on:click={() => (showCreate = true)}>
+                                Add new billing address
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </Popover>
+                    <span>Add a billing address</span>
+                </Layout.Stack>
+            </Card.Base>
         {/if}
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
index b916004eb..81a72d60b 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { tierToPlan, upgradeURL } from '$lib/stores/billing';
-    import { Button, Form, FormList, InputSelectSearch } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
+    import { Button, Form } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { currentPlan, organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import { Alert, Icon, Table } from '@appwrite.io/pink-svelte';
+    import { IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
 
     export let alertsEnabled = false;
 
@@ -26,25 +20,29 @@
     let selectedAlert: number;
     let alerts: number[] = [];
 
-    const options = [
-        { value: 25, label: '25%' },
-        { value: 50, label: '50%' },
-        { value: 75, label: '75%' },
-        { value: 100, label: '100%' }
-    ];
+    $: options = [
+        { value: 25, label: '25%', disabled: false },
+        { value: 50, label: '50%', disabled: false },
+        { value: 75, label: '75%', disabled: false },
+        { value: 100, label: '100%', disabled: false }
+    ].map((option) => {
+        return {
+            value: option.value,
+            label: option.label,
+            disabled: alerts.includes(option.value)
+        };
+    });
 
     onMount(() => {
         alerts = $organization?.budgetAlerts ?? [];
     });
 
     function addAlert() {
-        if (isNaN(parseInt(search))) return;
         if (alerts.some((alert) => alert === selectedAlert)) {
             return;
         }
         if (alerts.length <= 3) {
             alerts = [...alerts, selectedAlert ? selectedAlert : parseInt(search)];
-            search = '';
             selectedAlert = null;
         }
     }
@@ -70,7 +68,7 @@
         } catch (error) {
             addNotification({
                 type: 'error',
-                message: `There was an error enabling your budget cap`
+                message: 'The budget limit cannot be less than current billing cycle addon usage.'
             });
             trackError(error, Submit.BudgetAlertsUpdate);
         }
@@ -80,101 +78,84 @@
         symmetricDifference(alerts, $organization.budgetAlerts).length === 0 || !alertsEnabled;
 </script>
 
-<Form onSubmit={updateBudget}>
-    <CardGrid>
-        <Heading tag="h2" size="6">Billing alerts</Heading>
-
-        <p class="text">
-            {#if !$currentPlan.budgeting}
-                Get notified by email when your organization meets a percentage of your budget cap. <b
-                    >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
-                    at 75% resource usage.</b>
+<CardGrid>
+    <svelte:fragment slot="title">Billing alerts</svelte:fragment>
+    {#if !$currentPlan.budgeting}
+        Get notified by email when your organization meets a percentage of your budget cap. <b
+            >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
+            at 75% resource usage.</b>
+    {:else}
+        Get notified by email when your organization meets or exceeds a percentage of your specified
+        billing alert(s).
+    {/if}
+    <svelte:fragment slot="aside">
+        {#if !$currentPlan.budgeting}
+            <Alert.Inline status="info" title="Billing alerts are a Pro plan feature">
+                Upgrade to a Pro plan to manage when you receive billing alerts for your
+                organization.
+            </Alert.Inline>
+        {:else if !$currentPlan.budgetCapEnabled}
+            <Alert.Inline status="info" title="Budget cap disabled">
+                Budget caps are not supported on your current plan. For more information, please
+                reach out to your customer success manager.
+            </Alert.Inline>
+        {:else}
+            {#if alerts.length >= 4}
+                <Alert.Inline status="info">
+                    You can set a maximum of 4 billing alerts per organization.
+                </Alert.Inline>
             {:else}
-                Get notified by email when your organization meets or exceeds a percentage of your
-                specified billing alert(s).
-            {/if}
-        </p>
-        <svelte:fragment slot="aside">
-            {#if !$currentPlan.budgeting}
-                <Alert type="info">
-                    <svelte:fragment slot="title"
-                        >Billing alerts are a Pro plan feature
-                    </svelte:fragment>
-                    Upgrade to a Pro plan to manage when you receive billing alerts for your organization.
-                </Alert>
-            {:else if !$currentPlan.budgetCapEnabled}
-                <Alert type="info">
-                    <svelte:fragment slot="title">Budget cap disabled</svelte:fragment>
-                    Budget caps are not supported on your current plan. For more information, please
-                    reach out to your customer success manager.
-                </Alert>
-            {:else}
-                <FormList>
-                    <Alert type="info">
-                        You can set a maximum of 4 billing alerts per organization.
-                    </Alert>
-
-                    <div class="u-flex u-gap-16">
-                        <InputSelectSearch
-                            disabled={!alertsEnabled}
-                            label="Percentage (%) of budget cap"
-                            placeholder="Select a percentage"
-                            id="alerts"
-                            {options}
-                            bind:search
-                            interactiveOutput
-                            bind:value={selectedAlert}
-                            on:select={() => (search = selectedAlert.toString())} />
-                        <div style="align-self: flex-end">
-                            <Button
-                                secondary
-                                disabled={alerts.length > 3 ||
-                                    (!search && !selectedAlert) ||
-                                    !alertsEnabled}
-                                on:click={addAlert}>
-                                Add alert
-                            </Button>
-                        </div>
+                <div class="u-flex u-gap-16">
+                    <InputSelect
+                        required
+                        label="Percentage (%) of budget cap"
+                        placeholder="Select a percentage"
+                        id="alerts"
+                        {options}
+                        bind:value={selectedAlert}
+                        on:select={() => (search = selectedAlert.toString())} />
+                    <div style="align-self: flex-end">
+                        <Button
+                            secondary
+                            disabled={alerts.length > 3 || (!search && !selectedAlert)}
+                            on:click={addAlert}>
+                            Add alert
+                        </Button>
                     </div>
-                </FormList>
-
-                {#if alerts.length}
-                    <Table noMargin noStyles transparent>
-                        <TableHeader>
-                            <TableCellHead>Alert at budget cap %</TableCellHead>
-                            <TableCellHead width={30} />
-                        </TableHeader>
-                        <TableBody>
-                            {#each alerts.sort() as alert}
-                                <TableRow>
-                                    <TableCellText title="Percentage">
-                                        {alert}%
-                                    </TableCellText>
-                                    <TableCell>
-                                        <Button
-                                            text
-                                            round
-                                            ariaLabel="remove alert"
-                                            on:click={() =>
-                                                (alerts = alerts.filter((a) => a !== alert))}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </Table>
-                {/if}
+                </div>
             {/if}
-        </svelte:fragment>
 
-        <svelte:fragment slot="actions">
+            {#if alerts.length}
+                <Table.Root columns={[{ id: 'percentage' }, { id: 'action', width: 40 }]} let:root>
+                    {#each alerts.sort() as alert}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="percentage" {root}>
+                                {alert}%
+                            </Table.Cell>
+                            <Table.Cell column="action" {root}>
+                                <Button
+                                    text
+                                    icon
+                                    ariaLabel="remove alert"
+                                    on:click={() => (alerts = alerts.filter((a) => a !== alert))}>
+                                    <Icon icon={IconTrash} size="s" />
+                                </Button>
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
+            {/if}
+        {/if}
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Form onSubmit={updateBudget}>
             {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
                 <Button
                     secondary
                     href={$upgradeURL}
                     on:click={() => {
-                        trackEvent('click_organization_upgrade', {
+                        trackEvent(Click.OrganizationClickUpgrade, {
                             from: 'button',
                             source: 'billing_alerts_card'
                         });
@@ -184,6 +165,6 @@
             {:else}
                 <Button disabled={isButtonDisabled} submit>Update</Button>
             {/if}
-        </svelte:fragment>
-    </CardGrid>
-</Form>
+        </Form>
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index 88890c45d..32a0be64a 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { Button, Form, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { organization, currentPlan } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
+    import { Alert, Link } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import BudgetAlert from './budgetAlert.svelte';
 
@@ -51,53 +52,43 @@
 
 <Form onSubmit={updateBudget}>
     <CardGrid>
-        <Heading id="update-budget" tag="h2" size="6">Budget cap</Heading>
-
-        <p class="text">
-            Restrict your resource usage by setting a budget cap. Cap usage is reset at the
-            beginning of each billing cycle.
-        </p>
+        <svelte:fragment slot="title">Budget cap</svelte:fragment>
+        Restrict your resource usage by setting a budget cap. Cap usage is reset at the beginning of
+        each billing cycle.
         <svelte:fragment slot="aside">
             {#if !$currentPlan.budgeting}
-                <Alert type="info">
-                    <svelte:fragment slot="title">
-                        Budget caps are a Pro plan feature
-                    </svelte:fragment>
-                    Upgrade to a Pro plan to set a budget cap for your organization. For more information
-                    on what you can do with a Pro plan,
-                    <a
-                        class="link"
+                <Alert.Inline status="info" title="Budget caps are a Pro plan feature">
+                    Upgrade to a Pro plan to set a budget cap for your organization. For more
+                    information on what you can do with a Pro plan,
+                    <Link.Anchor
                         href="https://appwrite.io/pricing"
                         target="_blank"
-                        rel="noopener noreferrer">view our pricing guide.</a>
-                </Alert>
+                        rel="noopener noreferrer">view our pricing guide.</Link.Anchor>
+                </Alert.Inline>
             {:else if !$currentPlan.budgetCapEnabled}
-                <Alert type="info">
-                    <svelte:fragment slot="title">Budget cap disabled</svelte:fragment>
+                <Alert.Inline status="info" title="Budget cap disabled">
                     Budget caps are not supported on your current plan. For more information, please
                     reach out to your customer success manager.
-                </Alert>
+                </Alert.Inline>
             {:else}
-                <FormList>
-                    <InputSwitch id="cap-active" label="Enable budget cap" bind:value={capActive}>
-                        <svelte:fragment slot="description">
-                            Budget cap limits do not include the base amount of your plan. <button
-                                class="link"
-                                type="button"
-                                on:click={() => ($showUsageRatesModal = true)}
-                                >Learn more about usage rates.
-                            </button>
-                        </svelte:fragment>
-                    </InputSwitch>
-                    {#if capActive}
-                        <InputNumber
-                            placeholder="Add budget cap"
-                            id="cap"
-                            autofocus
-                            label="Budget cap (USD)"
-                            bind:value={budget} />
-                    {/if}
-                </FormList>
+                <InputSwitch id="cap-active" label="Enable budget cap" bind:value={capActive}>
+                    <svelte:fragment slot="description">
+                        Budget cap limits do not include the base amount of your plan. <button
+                            class="link"
+                            type="button"
+                            on:click={() => ($showUsageRatesModal = true)}
+                            >Learn more about usage rates.
+                        </button>
+                    </svelte:fragment>
+                </InputSwitch>
+                {#if capActive}
+                    <InputNumber
+                        required
+                        placeholder="Add budget cap"
+                        id="cap"
+                        label="Budget cap (USD)"
+                        bind:value={budget} />
+                {/if}
             {/if}
         </svelte:fragment>
 
@@ -107,7 +98,7 @@
                     secondary
                     href={$upgradeURL}
                     on:click={() => {
-                        trackEvent('click_organization_upgrade', {
+                        trackEvent(Click.OrganizationClickUpgrade, {
                             from: 'button',
                             source: 'billing_budget_cap'
                         });
diff --git a/src/routes/(console)/organization-[organization]/billing/cancelDowngradeModal.svelte b/src/routes/(console)/organization-[organization]/billing/cancelDowngradeModal.svelte
index 91530ce71..44c9c9710 100644
--- a/src/routes/(console)/organization-[organization]/billing/cancelDowngradeModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/cancelDowngradeModal.svelte
@@ -28,24 +28,15 @@
     }
 </script>
 
-<div class="max-height-dialog">
-    <Modal
-        title="Cancel plan change"
-        onSubmit={cancelDowngrade}
-        bind:show={showCancel}
-        bind:error
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}>
-        <p>
-            Your organization is set to change to <strong>
-                {tierToPlan($organization?.billingPlanDowngrade).name}</strong>
-            plan on <strong> {toLocaleDate($organization.billingNextInvoiceDate)}</strong>. Are you
-            sure you want to cancel this change and keep your current plan?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showCancel = false)}>Keep change</Button>
-            <Button secondary submit>Cancel change</Button>
-        </svelte:fragment>
-    </Modal>
-</div>
+<Modal title="Cancel plan change" onSubmit={cancelDowngrade} bind:show={showCancel} bind:error>
+    <p>
+        Your organization is set to change to <strong>
+            {tierToPlan($organization?.billingPlanDowngrade).name}</strong>
+        plan on <strong> {toLocaleDate($organization.billingNextInvoiceDate)}</strong>. Are you sure
+        you want to cancel this change and keep your current plan?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showCancel = false)}>Keep change</Button>
+        <Button secondary submit>Cancel change</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte b/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
index e1e9f3ee8..8f6625179 100644
--- a/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan, Dependencies } from '$lib/constants';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let showDelete = false;
     export let isBackup = false;
@@ -55,37 +55,22 @@
 </script>
 
 {#if disabled}
-    <Modal
-        bind:show={showDelete}
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}
-        title="Unable to delete payment method">
-        <p data-private>
+    <Confirm title="Unable to delete payment method" bind:open={showDelete} canDelete={false}>
+        <Typography.Text>
             The {isBackup ? 'backup' : 'default'} payment method cannot be removed as
             <b>{$organization?.name}</b>
             has an upcoming invoice. To proceed, set a {isBackup ? 'default' : 'backup'} or add a new
             {isBackup ? 'backup' : 'default'} payment method.
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        </svelte:fragment>
-    </Modal>
+        </Typography.Text>
+    </Confirm>
 {:else}
-    <Modal
-        bind:show={showDelete}
-        bind:error
+    <Confirm
         onSubmit={isBackup ? removeBackuptMethod : removeDefaultMethod}
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}
-        title="Remove payment method">
-        <p data-private>
+        title="Remove payment method"
+        bind:open={showDelete}
+        bind:error>
+        <Typography.Text>
             Are you sure you want to remove the payment method from <b>{$organization?.name}</b>?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Remove</Button>
-        </svelte:fragment>
-    </Modal>
+        </Typography.Text>
+    </Confirm>
 {/if}
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
index 1272dc466..969a8a876 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
@@ -1,25 +1,7 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import {
-        CardGrid,
-        DropList,
-        DropListItem,
-        DropListLink,
-        EmptySearch,
-        Heading,
-        PaginationInline
-    } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { page } from '$app/state';
+    import { CardGrid, PaginationInline } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
     import { formatCurrency } from '$lib/helpers/numbers';
     import type { Invoice, InvoiceList } from '$lib/sdk/billing';
@@ -28,11 +10,25 @@
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { selectedInvoice, showRetryModal } from './store';
+    import {
+        ActionMenu,
+        Badge,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Link,
+        Popover,
+        Table
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconDownload,
+        IconExternalLink,
+        IconRefresh
+    } from '@appwrite.io/pink-icons-svelte';
     import { base } from '$app/paths';
 
-    let showDropdown = [];
-    let showFailedError = false;
-
     let offset = 0;
     let invoiceList: InvoiceList = {
         invoices: [],
@@ -44,15 +40,16 @@
     onMount(request);
 
     async function request() {
-        invoiceList = await sdk.forConsole.billing.listInvoices($page.params.organization, [
+        // isLoadingInvoices = true;
+        invoiceList = await sdk.forConsole.billing.listInvoices(page.params.organization, [
             Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ]);
     }
 
-    $: if ($page.url.searchParams.get('type') === 'validate-invoice') {
-        window.history.replaceState({}, '', $page.url.pathname);
+    $: if (page.url.searchParams.get('type') === 'validate-invoice') {
+        window.history.replaceState({}, '', page.url.pathname);
         request();
     }
 
@@ -67,149 +64,116 @@
 </script>
 
 <CardGrid>
-    <Heading id="payment-history" tag="h2" size="6">Payment history</Heading>
-
-    <p class="text">
-        Transaction history for this organization. Download invoices for more details about your
-        payments.
-    </p>
+    <svelte:fragment slot="title">Payment history</svelte:fragment>
+    Transaction history for this organization. Download invoices for more details about your payments.
     <svelte:fragment slot="aside">
         {#if invoiceList.total > 0}
-            <TableScroll noMargin transparent noStyles>
-                <TableHeader>
-                    <TableCellHead width={100}>Due Date</TableCellHead>
-                    <TableCellHead width={110}>Status</TableCellHead>
-                    <TableCellHead width={100}>Amount Due</TableCellHead>
-                    <TableCellHead width={40} />
-                </TableHeader>
-                <TableBody>
-                    {#each invoiceList?.invoices as invoice, i}
-                        {@const status = invoice.status}
-                        <TableRow>
-                            <TableCellText title="date">
-                                {toLocaleDate(invoice.dueAt)}
-                            </TableCellText>
-                            <TableCell title="status">
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'dueDate' },
+                    { id: 'status', width: { min: 200 } },
+                    { id: 'amount', width: { min: 120 } },
+                    { id: 'action', width: 40 }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="dueDate" {root}>Due date</Table.Header.Cell>
+                    <Table.Header.Cell column="status" {root}>Status</Table.Header.Cell>
+                    <Table.Header.Cell column="amount" {root}>Amount due</Table.Header.Cell>
+                    <Table.Header.Cell column="action" {root} />
+                </svelte:fragment>
+                {#each invoiceList?.invoices as invoice}
+                    {@const status = invoice.status}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="dueDate" {root}>
+                            {toLocaleDate(invoice.dueAt)}
+                        </Table.Cell>
+                        <Table.Cell column="status" {root}>
+                            {@const isDanger =
+                                status === 'overdue' ||
+                                status === 'failed' ||
+                                status === 'requires_authentication'}
+                            {@const isSuccess = status === 'paid' || status === 'succeeded'}
+                            {@const isWarning = status === 'pending'}
+                            <Layout.Stack direction="row" gap="s">
+                                <Badge
+                                    variant="secondary"
+                                    content={status === 'requires_authentication'
+                                        ? 'failed'
+                                        : status}
+                                    type={isDanger
+                                        ? 'error'
+                                        : isWarning
+                                          ? 'warning'
+                                          : isSuccess
+                                            ? 'success'
+                                            : undefined} />
                                 {#if invoice?.lastError}
-                                    <DropList bind:show={showFailedError}>
-                                        <Pill
-                                            danger={status === 'overdue' ||
-                                                status === 'failed' ||
-                                                status === 'requires_authentication'}
-                                            success={status === 'paid' || status === 'succeeded'}
-                                            warning={status === 'pending'}
-                                            on:click={() => (showFailedError = true)}
-                                            button>
-                                            {status === 'requires_authentication'
-                                                ? 'failed'
-                                                : status}
-                                        </Pill>
-                                        <svelte:fragment slot="list">
-                                            <li>
-                                                The scheduled payment has failed.
-                                                <Button
-                                                    link
-                                                    on:click={() => {
-                                                        retryPayment(invoice);
-                                                        showFailedError = false;
-                                                    }}
-                                                    >Try again
-                                                </Button>
-                                                .
-                                            </li>
+                                    <Popover let:toggle>
+                                        <Link.Button on:click={toggle}>Details</Link.Button>
+                                        <svelte:fragment slot="tooltip">
+                                            The scheduled payment has failed.
+                                            <Link.Button on:click={() => retryPayment(invoice)}
+                                                >Try again
+                                            </Link.Button>
                                         </svelte:fragment>
-                                    </DropList>
-                                {:else}
-                                    <Pill
-                                        danger={status === 'overdue' ||
-                                            status === 'failed' ||
-                                            status === 'requires_authentication'}
-                                        success={status === 'paid' || status === 'succeeded'}
-                                        warning={status === 'pending'}>
-                                        {status === 'requires_authentication' ? 'failed' : status}
-                                    </Pill>
+                                    </Popover>
                                 {/if}
-                            </TableCell>
-                            <TableCellText title="due">
-                                {formatCurrency(invoice.grossAmount)}
-                            </TableCellText>
-                            <TableCell showOverflow right>
-                                <DropList
-                                    bind:show={showDropdown[i]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <Button
-                                        round
-                                        text
-                                        noMargin
-                                        ariaLabel="More options"
-                                        on:click={() => {
-                                            showDropdown[i] = !showDropdown[i];
-                                        }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                                    </Button>
-                                    <svelte:fragment slot="list">
-                                        <DropListLink
-                                            icon="external-link"
-                                            external
-                                            href={`${base}/organization-${$page.params.organization}/invoices/${invoice.$id}/view`}
-                                            on:click={() => (showDropdown[i] = !showDropdown[i])}
-                                            event="view_invoice">
-                                            View invoice
-                                        </DropListLink>
-                                        <DropListLink
-                                            icon="download"
-                                            href={`${base}/organization-${$page.params.organization}/invoices/${invoice.$id}/download`}
+                            </Layout.Stack>
+                        </Table.Cell>
+                        <Table.Cell column="amount" {root}>
+                            {formatCurrency(invoice.grossAmount)}
+                        </Table.Cell>
+                        <Table.Cell column="status" {root}>
+                            <Popover let:toggle placement="bottom-start" padding="none">
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip">
+                                    <!-- todo: add missing event -->
+                                    <ActionMenu.Item.Anchor
+                                        leadingIcon={IconExternalLink}
+                                        external
+                                        href={`${base}/organizations/${page.params.organization}/invoices/${invoice.$id}/view`}>
+                                        View invoice
+                                    </ActionMenu.Item.Anchor>
+                                    <ActionMenu.Item.Anchor
+                                        leadingIcon={IconDownload}
+                                        href={`${base}/organizations/${page.params.organization}/invoices/${invoice.$id}/download`}>
+                                        Download PDF
+                                    </ActionMenu.Item.Anchor>
+                                    {#if status === 'overdue' || status === 'failed'}
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconRefresh}
                                             on:click={() => {
-                                                showDropdown[i] = !showDropdown[i];
-                                            }}
-                                            event="download_invoice">
-                                            Download PDF
-                                        </DropListLink>
-                                        {#if status === 'overdue' || status === 'failed'}
-                                            <DropListItem
-                                                icon="refresh"
-                                                on:click={() => {
-                                                    retryPayment(invoice);
-                                                    showDropdown[i] = !showDropdown[i];
-                                                    trackEvent(`click_retry_payment`, {
-                                                        from: 'button',
-                                                        source: 'billing_invoice_menu'
-                                                    });
-                                                }}>
-                                                Retry payment
-                                            </DropListItem>
-                                        {/if}
-                                    </svelte:fragment>
-                                </DropList>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </TableScroll>
-            <div class="u-flex u-main-space-between">
-                <p class="text">Total results: {invoiceList.total}</p>
-                <PaginationInline {limit} bind:offset sum={invoiceList.total} hidePages />
-            </div>
-            <!--{:else if isLoadingInvoices}-->
-            <!--    <div class="loader-holder">-->
-            <!--        <div class="loader" />-->
-            <!--    </div>-->
+                                                retryPayment(invoice);
+                                                trackEvent(`click_retry_payment`, {
+                                                    from: 'button',
+                                                    source: 'billing_invoice_menu'
+                                                });
+                                            }}>
+                                            Retry payment
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                </ActionMenu.Root>
+                            </Popover>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+            {#if invoiceList.total > limit}
+                <div class="u-flex u-main-space-between">
+                    <p class="text">Total results: {invoiceList.total}</p>
+                    <PaginationInline {limit} bind:offset total={invoiceList.total} hidePages />
+                </div>
+            {/if}
         {:else}
-            <EmptySearch hidePagination>
-                <p class="text u-text-center">
-                    You have no payment history. After you receive your first invoice, you'll see it
-                    here.
-                </p>
-            </EmptySearch>
+            <Card.Base>
+                <Empty
+                    type="secondary"
+                    title="You have no payment history."
+                    description="After you receive your first invoice, you'll see it here." />
+            </Card.Base>
         {/if}
     </svelte:fragment>
 </CardGrid>
-
-<!--<style>-->
-<!--    .loader-holder {-->
-<!--        height: 100%;-->
-<!--        align-content: center;-->
-<!--        justify-items: center;-->
-<!--    }-->
-<!--</style>-->
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index ebffd5426..6cb9717e2 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -2,14 +2,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import {
-        CardGrid,
-        CreditCardBrandImage,
-        CreditCardInfo,
-        DropList,
-        DropListItem,
-        Heading
-    } from '$lib/components';
+    import { CardGrid, CreditCardBrandImage, CreditCardInfo } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
@@ -20,12 +13,27 @@
     import DeleteOrgPayment from './deleteOrgPayment.svelte';
     import ReplaceCard from './replaceCard.svelte';
     import EditPaymentModal from '$routes/(console)/account/payments/editPaymentModal.svelte';
-    import { tooltip } from '$lib/actions/tooltip';
     import PaymentModal from '$lib/components/billing/paymentModal.svelte';
     import { user } from '$lib/stores/user';
-
-    let showDropdown = false;
-    let showDropdownBackup = false;
+    import {
+        ActionMenu,
+        Card,
+        Divider,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconInfo,
+        IconPencil,
+        IconPlus,
+        IconSwitchHorizontal,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
 
     let showPayment = false;
     let showEdit = false;
@@ -94,211 +102,195 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6" id="paymentMethod">Payment methods</Heading>
-
-    <p class="text">View or update your organization payment methods here.</p>
+    <svelte:fragment slot="title">Payment methods</svelte:fragment>
+    View or update your organization payment methods here.
     <svelte:fragment slot="aside">
-        <div class="u-flex u-flex-vertical u-gap-8">
-            {#if $organization?.paymentMethodId}
-                <CreditCardInfo isBox paymentMethod={defaultPaymentMethod}>
-                    <DropList bind:show={showDropdown} placement="bottom-start" noArrow>
-                        <Button
-                            round
-                            text
-                            ariaLabel="More options"
-                            on:click={() => {
-                                showDropdown = !showDropdown;
-                            }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </Button>
-                        <svelte:fragment slot="list">
-                            {#if defaultPaymentMethod.userId === $user.$id}
-                                <DropListItem
-                                    icon="pencil"
-                                    on:click={() => {
-                                        isSelectedBackup = false;
-                                        showEdit = true;
-                                        showDropdown = false;
-                                    }}>
-                                    Edit
-                                </DropListItem>
-                            {/if}
-                            <DropListItem
-                                icon="switch-horizontal"
-                                on:click={() => {
-                                    isSelectedBackup = false;
-                                    showReplace = true;
-                                    showDropdown = false;
-                                }}>
-                                Replace
-                            </DropListItem>
-                            <DropListItem
-                                icon="trash"
-                                on:click={() => {
-                                    isSelectedBackup = false;
-                                    showDelete = true;
-                                    showDropdown = false;
-                                }}>
-                                Remove
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </CreditCardInfo>
-            {:else}
-                {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
-                    (o) => !!o.last4 && o.$id !== $organization?.backupPaymentMethodId
-                )}
-                <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">
-                            <DropList bind:show={showDropdown} placement="bottom-start">
-                                <Button
-                                    secondary
-                                    round
-                                    on:click={() => {
-                                        if (filteredPaymentMethods.length) {
-                                            showDropdown = !showDropdown;
-                                        } else {
-                                            showPayment = true;
-                                        }
-                                    }}>
-                                    <i class="icon-plus" />
-                                </Button>
-                                <svelte:fragment slot="list">
-                                    {#if $paymentMethods.total}
-                                        {#each filteredPaymentMethods as paymentMethod}
-                                            <DropListItem
-                                                on:click={() => {
-                                                    showDropdown = false;
-                                                    addPaymentMethod(paymentMethod?.$id);
-                                                }}>
-                                                <span class="u-flex u-cross-center u-gap-8">
-                                                    <p class="text">
-                                                        Card ending in {paymentMethod.last4}
-                                                    </p>
-                                                    <CreditCardBrandImage
-                                                        brand={paymentMethod?.brand} />
-                                                </span>
-                                            </DropListItem>
-                                        {/each}
-                                    {/if}
-                                    <DropListItem on:click={() => (showPayment = true)}>
-                                        Add new payment method
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </div>
-                        <div class="common-section">
-                            <span class="text"> Add a payment method </span>
-                        </div>
-                    </div>
-                </article>
-            {/if}
-        </div>
-        {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
-            <div class="u-flex u-flex-vertical u-gap-8">
-                {#if $organization?.backupPaymentMethodId}
-                    <h4 class="u-bold body-text-2">Backup</h4>
-                    <CreditCardInfo isBox paymentMethod={backupPaymentMethod}>
-                        <DropList bind:show={showDropdownBackup} placement="bottom-start" noArrow>
-                            <Button
-                                round
-                                text
-                                ariaLabel="More options"
-                                on:click={() => {
-                                    showDropdownBackup = !showDropdownBackup;
-                                }}>
-                                <span class="icon-dots-horizontal" aria-hidden="true" />
+        {#if $organization?.paymentMethodId}
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'cc' },
+                    { id: 'name' },
+                    { id: 'expiry' },
+                    { id: 'status' },
+                    { id: 'actions', width: 40 }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="cc" {root}>Credit card</Table.Header.Cell>
+                    <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+                    <Table.Header.Cell column="expiry" {root}>Expiration date</Table.Header.Cell>
+                    <Table.Header.Cell column="status" {root} />
+                    <Table.Header.Cell column="actions" {root} />
+                </svelte:fragment>
+
+                <Table.Row.Base {root}>
+                    <CreditCardInfo {root} paymentMethod={defaultPaymentMethod} />
+                    <Table.Cell column="actions" {root}>
+                        <Popover let:toggle placement="bottom-start" padding="none">
+                            <Button text icon ariaLabel="more options" on:click={toggle}>
+                                <Icon icon={IconDotsHorizontal} size="s" />
                             </Button>
-                            <svelte:fragment slot="list">
-                                {#if backupPaymentMethod.userId === $user.$id}
-                                    <DropListItem
-                                        icon="pencil"
+                            <ActionMenu.Root slot="tooltip">
+                                {#if defaultPaymentMethod?.userId === $user?.$id}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconPencil}
                                         on:click={() => {
+                                            isSelectedBackup = false;
                                             showEdit = true;
-                                            isSelectedBackup = true;
-                                            showDropdownBackup = false;
                                         }}>
                                         Edit
-                                    </DropListItem>
+                                    </ActionMenu.Item.Button>
                                 {/if}
-                                <DropListItem
-                                    icon="switch-horizontal"
+                                <ActionMenu.Item.Button
+                                    leadingIcon={IconSwitchHorizontal}
                                     on:click={() => {
+                                        isSelectedBackup = false;
                                         showReplace = true;
-                                        isSelectedBackup = true;
-                                        showDropdownBackup = false;
                                     }}>
                                     Replace
-                                </DropListItem>
-                                <DropListItem
-                                    icon="trash"
+                                </ActionMenu.Item.Button>
+                                <ActionMenu.Item.Button
+                                    leadingIcon={IconTrash}
                                     on:click={() => {
+                                        isSelectedBackup = false;
                                         showDelete = true;
-                                        isSelectedBackup = true;
-                                        showDropdownBackup = false;
                                     }}>
-                                    Delete
-                                </DropListItem>
-                            </svelte:fragment>
-                        </DropList>
-                    </CreditCardInfo>
-                {:else}
-                    {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
-                        (o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
-                    )}
-                    <div
-                        class="u-bold body-text-2 u-flex u-cross-center u-gap-8 u-padding-block-start-8">
-                        <DropList bind:show={showDropdownBackup} placement="bottom-start">
-                            <div class="u-flex u-gap-8 u-cross-center">
-                                <Button
-                                    text
-                                    noMargin
-                                    on:click={() => {
-                                        if (filteredPaymentMethods.length) {
-                                            showDropdownBackup = !showDropdownBackup;
-                                        } else {
-                                            isSelectedBackup = true;
-                                            showPayment = true;
-                                        }
-                                    }}>
-                                    <span class="icon-plus" />
-                                    <span class="text"> Add a backup payment method </span>
+                                    Remove
+                                </ActionMenu.Item.Button>
+                            </ActionMenu.Root>
+                        </Popover>
+                    </Table.Cell>
+                </Table.Row.Base>
+                {#if $organization?.backupPaymentMethodId}
+                    <Table.Row.Base {root}>
+                        <CreditCardInfo {root} isBackup paymentMethod={backupPaymentMethod} />
+                        <Table.Cell column="actions" {root}>
+                            <Popover let:toggle placement="bottom-start" padding="none">
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
                                 </Button>
-                                <span
-                                    class="icon-info u-cursor-pointer"
-                                    style="font-size: var(--icon-size-small)"
-                                    use:tooltip={{
-                                        content:
-                                            'When your default payment method fails, a backup method will be used to pay your invoice automatically'
-                                    }} />
-                            </div>
-                            <svelte:fragment slot="list">
-                                {#if $paymentMethods.total}
-                                    {#each filteredPaymentMethods as paymentMethod}
-                                        <DropListItem
+                                <ActionMenu.Root slot="tooltip">
+                                    {#if backupPaymentMethod?.userId === $user?.$id}
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPencil}
                                             on:click={() => {
-                                                showDropdownBackup = true;
-                                                addBackupPaymentMethod(paymentMethod?.$id);
+                                                isSelectedBackup = true;
+                                                showEdit = true;
                                             }}>
-                                            <span class="u-flex u-cross-center u-gap-8">
-                                                <p class="text">
-                                                    Card ending in {paymentMethod.last4}
-                                                </p>
-                                                <CreditCardBrandImage
-                                                    brand={paymentMethod?.brand} />
-                                            </span>
-                                        </DropListItem>
-                                    {/each}
-                                {/if}
-                                <DropListItem on:click={() => (showPayment = true)}>
-                                    Add new payment method
-                                </DropListItem>
-                            </svelte:fragment>
-                        </DropList>
-                    </div>
+                                            Edit
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconSwitchHorizontal}
+                                        on:click={() => {
+                                            isSelectedBackup = true;
+                                            showReplace = true;
+                                        }}>
+                                        Replace
+                                    </ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconTrash}
+                                        on:click={() => {
+                                            isSelectedBackup = true;
+                                            showDelete = true;
+                                        }}>
+                                        Remove
+                                    </ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </Popover>
+                        </Table.Cell>
+                    </Table.Row.Base>
                 {/if}
-            </div>
+            </Table.Root>
+            {#if !$organization?.backupPaymentMethodId}
+                {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
+                    (o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
+                )}
+                <div>
+                    <Popover let:toggle placement="bottom-start" padding="none">
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            <Button
+                                secondary
+                                on:click={(e) => {
+                                    if (filteredPaymentMethods.length) {
+                                        toggle(e);
+                                    } else {
+                                        isSelectedBackup = true;
+                                        showPayment = true;
+                                    }
+                                }}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Add a backup payment method
+                            </Button>
+                            <Tooltip>
+                                <Icon icon={IconInfo} />
+                                <Typography.Text slot="tooltip">
+                                    If your default payment fails, your backup method will be
+                                    charged automatically.
+                                </Typography.Text>
+                            </Tooltip>
+                        </Layout.Stack>
+                        <ActionMenu.Root slot="tooltip" let:toggle>
+                            {#if $paymentMethods.total}
+                                {#each filteredPaymentMethods as paymentMethod}
+                                    <ActionMenu.Item.Button
+                                        on:click={() => addBackupPaymentMethod(paymentMethod?.$id)}>
+                                        <Layout.Stack direction="row" alignItems="center" gap="xs">
+                                            <CreditCardBrandImage brand={paymentMethod?.brand} />
+                                            Card ending in {paymentMethod.last4}
+                                        </Layout.Stack>
+                                    </ActionMenu.Item.Button>
+                                {/each}
+                            {/if}
+                            <Divider />
+                            <ActionMenu.Item.Button
+                                leadingIcon={IconPlus}
+                                on:click={(e) => {
+                                    toggle(e);
+                                    showPayment = true;
+                                }}>
+                                Add new payment method
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </Popover>
+                </div>
+            {/if}
+        {:else}
+            {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
+                (o) => !!o.last4 && o.$id !== $organization?.backupPaymentMethodId
+            )}
+            <Card.Base>
+                <Layout.Stack justifyContent="center" alignItems="center" gap="m">
+                    <Popover let:toggle padding="none" placement="bottom-start">
+                        <Button secondary icon on:click={toggle}>
+                            <Icon icon={IconPlus} size="s" />
+                        </Button>
+                        <ActionMenu.Root slot="tooltip" let:toggle>
+                            {#if $paymentMethods.total}
+                                {#each filteredPaymentMethods as paymentMethod}
+                                    <ActionMenu.Item.Button
+                                        on:click={() => addPaymentMethod(paymentMethod?.$id)}>
+                                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                                            <CreditCardBrandImage brand={paymentMethod?.brand} />
+                                            Card ending in {paymentMethod.last4}
+                                        </Layout.Stack>
+                                    </ActionMenu.Item.Button>
+                                {/each}
+                            {/if}
+                            <Divider />
+                            <ActionMenu.Item.Button
+                                leadingIcon={IconPlus}
+                                on:click={(e) => {
+                                    toggle(e);
+                                    showPayment = true;
+                                }}>
+                                Add new payment method
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </Popover>
+                    <span>Add a payment method</span>
+                </Layout.Stack>
+            </Card.Base>
         {/if}
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index 1e08e5190..3c9900e80 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Card, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
     import { plansInfo, upgradeURL } from '$lib/stores/billing';
@@ -9,8 +9,17 @@
     import { abbreviateNumber, formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { BillingPlan } from '$lib/constants';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import {
+        Accordion,
+        Card,
+        Divider,
+        Icon,
+        Layout,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconInfo, IconTag } from '@appwrite.io/pink-icons-svelte';
     import CancelDowngradeModel from './cancelDowngradeModal.svelte';
 
     export let currentPlan: Plan;
@@ -26,186 +35,195 @@
         new Date($organization?.billingStartDate).getTime() - today.getTime() > 0 &&
         $plansInfo.get($organization.billingPlan)?.trialDays;
     const extraUsage = currentInvoice ? currentInvoice.amount - currentPlan?.price : 0;
+
+    function usageNameToLabel(name: string): string {
+        switch (name) {
+            case 'executions':
+                return 'Executions';
+            case 'storage':
+                return 'Storage';
+            case 'users':
+                return 'Users';
+            case 'bandwidth':
+                return 'Bandwidth';
+            default:
+                return '';
+        }
+    }
 </script>
 
 {#if $organization}
     <CardGrid>
-        <Heading tag="h2" size="6">Payment estimates</Heading>
-
-        <p class="text">
-            A breakdown of your estimated upcoming payment for the current billing period. Totals
-            displayed exclude accumulated credits and applicable taxes.
-        </p>
+        <svelte:fragment slot="title">Payment estimates</svelte:fragment>
+        A breakdown of your estimated upcoming payment for the current billing period. Totals displayed
+        exclude accumulated credits and applicable taxes.
         <svelte:fragment slot="aside">
             <p class="text u-bold">
                 Due at: {toLocaleDate($organization?.billingNextInvoiceDate)}
             </p>
-            <Card isTile style="--p-card-padding: 1.5rem;" class="card-only-on-desktop">
-                <Collapsible>
-                    <div class="u-flex-vertical u-gap-8">
-                        <div class="u-flex">
-                            <span class="body-text-2">{currentPlan.name} plan</span>
-                            <div class="body-text-2 u-margin-inline-start-auto">
-                                {isTrial ||
-                                $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
-                                    ? formatCurrency(0)
-                                    : currentPlan
-                                      ? formatCurrency(currentPlan?.price)
-                                      : ''}
-                            </div>
-                        </div>
+            <Card.Base variant="secondary" padding="s">
+                <Layout.Stack>
+                    <Layout.Stack direction="row" justifyContent="space-between">
+                        <Typography.Text color="--fgcolor-neutral-primary">
+                            {currentPlan.name} plan
+                        </Typography.Text>
+                        <Typography.Text>
+                            {isTrial || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
+                                ? formatCurrency(0)
+                                : currentPlan
+                                  ? formatCurrency(currentPlan?.price)
+                                  : ''}
+                        </Typography.Text>
+                    </Layout.Stack>
 
-                        {#if currentPlan.budgeting && extraUsage > 0}
-                            <CollapsibleItem gap={8}>
-                                <svelte:fragment slot="beforetitle">
-                                    <span class="body-text-2"><b>Add-ons</b></span><span
-                                        class="inline-tag"
-                                        >{currentAggregation.additionalMembers > 0
-                                            ? currentInvoice.usage.length + 1
-                                            : currentInvoice.usage.length}</span>
-                                    <div class="icon">
-                                        <span class="icon-cheveron-down" aria-hidden="true"></span>
-                                    </div>
-                                </svelte:fragment>
-                                <svelte:fragment slot="end">
-                                    <div class="body-text-2 u-margin-inline-start-auto">
-                                        <b>
-                                            {formatCurrency(extraUsage >= 0 ? extraUsage : 0)}
-                                        </b>
-                                    </div>
-                                </svelte:fragment>
+                    {#if currentPlan.budgeting && extraUsage > 0}
+                        <Accordion
+                            hideDivider
+                            title="Add-ons"
+                            badge={(currentAggregation.additionalMembers > 0
+                                ? currentInvoice.usage.length + 1
+                                : currentInvoice.usage.length
+                            ).toString()}>
+                            <svelte:fragment slot="end">
+                                {formatCurrency(extraUsage >= 0 ? extraUsage : 0)}
+                            </svelte:fragment>
+                            <Layout.Stack gap="xs">
+                                {#if currentAggregation.additionalMembers}
+                                    <Layout.Stack gap="xxxs">
+                                        <Layout.Stack
+                                            direction="row"
+                                            justifyContent="space-between">
+                                            <Typography.Text color="--fgcolor-neutral-primary"
+                                                >Additional members</Typography.Text>
+                                            <Typography.Text>
+                                                {formatCurrency(
+                                                    currentAggregation.additionalMemberAmount
+                                                )}
+                                            </Typography.Text>
+                                        </Layout.Stack>
+                                        <Layout.Stack direction="row">
+                                            <Typography.Text
+                                                >{currentAggregation.additionalMembers}</Typography.Text>
+                                        </Layout.Stack>
+                                    </Layout.Stack>
+                                {/if}
+                                {#if currentInvoice?.usage}
+                                    {#each currentInvoice.usage as excess, i}
+                                        {#if i > 0 || currentAggregation.additionalMembers}
+                                            <Divider />
+                                        {/if}
+                                        {#if ['storage', 'bandwidth'].includes(excess.name)}
+                                            {@const excessValue = humanFileSize(excess.value)}
+                                            <Layout.Stack gap="xxxs">
+                                                <Layout.Stack
+                                                    direction="row"
+                                                    justifyContent="space-between">
+                                                    <Typography.Text
+                                                        color="--fgcolor-neutral-primary"
+                                                        >{usageNameToLabel(
+                                                            excess.name
+                                                        )}</Typography.Text>
+                                                    <Typography.Text
+                                                        >{formatCurrency(
+                                                            excess.amount
+                                                        )}</Typography.Text>
+                                                </Layout.Stack>
+                                                <Layout.Stack direction="row">
+                                                    <Layout.Stack direction="row">
+                                                        <Tooltip
+                                                            placement="bottom"
+                                                            disabled={excess.value <=
+                                                                1_000_000_000}>
+                                                            <svelte:fragment slot="tooltip">
+                                                                {formatNumberWithCommas(
+                                                                    excess.value ?? 0
+                                                                )} bytes
+                                                            </svelte:fragment>
+                                                            <span
+                                                                >{excessValue.value ??
+                                                                    0}{excessValue.unit}</span>
+                                                        </Tooltip>
+                                                    </Layout.Stack>
+                                                </Layout.Stack>
+                                            </Layout.Stack>
+                                        {/if}
+                                        {#if ['users', 'executions'].includes(excess.name)}
+                                            <Layout.Stack gap="xxxs">
+                                                <Layout.Stack
+                                                    direction="row"
+                                                    justifyContent="space-between">
+                                                    <Typography.Text
+                                                        color="--fgcolor-neutral-primary"
+                                                        >{usageNameToLabel(
+                                                            excess.name
+                                                        )}</Typography.Text>
+                                                    <Typography.Text
+                                                        >{formatCurrency(
+                                                            excess.amount
+                                                        )}</Typography.Text>
+                                                </Layout.Stack>
+                                                <Layout.Stack direction="row">
+                                                    <Tooltip
+                                                        placement="bottom"
+                                                        disabled={excess.value <= 1000}>
+                                                        <svelte:fragment slot="tooltip">
+                                                            {formatNumberWithCommas(excess.value)}
+                                                        </svelte:fragment>
+                                                        <span
+                                                            >{abbreviateNumber(excess.value)}</span>
+                                                    </Tooltip>
+                                                </Layout.Stack>
+                                            </Layout.Stack>
+                                        {/if}
+                                    {/each}
+                                {/if}
+                            </Layout.Stack>
+                        </Accordion>
+                    {/if}
 
-                                <ul>
-                                    {#if currentAggregation.additionalMembers}
-                                        <li class="u-flex-vertical u-gap-4 u-padding-block-8">
-                                            <div class="u-flex u-gap-4">
-                                                <h5 class="body-text-2 u-stretch">
-                                                    Additional members
-                                                </h5>
-                                                <div>
-                                                    {formatCurrency(
-                                                        currentAggregation.additionalMemberAmount
-                                                    )}
-                                                </div>
-                                            </div>
-                                            <div class="u-flex u-gap-4">
-                                                <h5
-                                                    class="body-text-2 u-stretch u-color-text-offline">
-                                                    {currentAggregation.additionalMembers}
-                                                </h5>
-                                            </div>
-                                        </li>
-                                    {/if}
-                                    {#if currentInvoice?.usage}
-                                        {#each currentInvoice.usage as excess, i}
-                                            <li
-                                                class="u-flex-vertical u-gap-4 {currentAggregation.additionalMembers >
-                                                0
-                                                    ? 'u-padding-block-8'
-                                                    : 'u-padding-block-start-8'}"
-                                                class:u-sep-block-start={i > 0 ||
-                                                    currentAggregation.additionalMembers > 0}>
-                                                {#if ['storage', 'bandwidth'].includes(excess.name)}
-                                                    {@const excessValue = humanFileSize(
-                                                        excess.value
-                                                    )}
-                                                    <div class="u-flex u-main-space-between">
-                                                        <h5
-                                                            class="body-text-2 u-stretch u-capitalize">
-                                                            {excess.name}
-                                                        </h5>
-                                                        {formatCurrency(excess.amount)}
-                                                    </div>
-                                                    <h5
-                                                        class="body-text-2 u-stretch u-color-text-offline"
-                                                        title={formatNumberWithCommas(
-                                                            excess.value ?? 0
-                                                        ) + 'bytes'}>
-                                                        {excessValue.value ?? 0}{excessValue.unit}
-                                                    </h5>
-                                                {:else if excess.name !== 'member'}
-                                                    <div class="u-flex u-main-space-between">
-                                                        <h5
-                                                            class="body-text-2 u-stretch u-capitalize">
-                                                            {excess.name}
-                                                        </h5>
-                                                        {formatCurrency(excess.amount)}
-                                                    </div>
-                                                    <h5
-                                                        class="body-text-2 u-stretch u-color-text-offline"
-                                                        title={formatNumberWithCommas(
-                                                            excess.value
-                                                        )}>
-                                                        {abbreviateNumber(excess.value)}
-                                                    </h5>
-                                                {/if}
-                                            </li>
-                                        {/each}
-                                    {/if}
-                                </ul>
-                            </CollapsibleItem>
-                        {/if}
+                    {#if currentPlan.supportsCredits && availableCredit > 0}
+                        <Layout.Stack direction="row" justifyContent="space-between">
+                            <Layout.Stack direction="row" alignItems="center" gap="xxs">
+                                <Icon size="s" icon={IconTag} color="--fgcolor-success" />
+                                <Typography.Text color="--fgcolor-neutral-primary"
+                                    >Credits to be applied</Typography.Text>
+                            </Layout.Stack>
+                            <Typography.Text color="--fgcolor-success">
+                                -{formatCurrency(
+                                    Math.min(availableCredit, currentInvoice?.amount ?? 0)
+                                )}
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {/if}
 
-                        {#if currentPlan.supportsCredits && availableCredit > 0}
-                            <CollapsibleItem noContent gap={4}>
-                                <span class="body-text-2 u-flex u-cross-center u-gap-2"
-                                    ><svg
-                                        width="16"
-                                        height="17"
-                                        viewBox="0 0 16 17"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fill-rule="evenodd"
-                                            clip-rule="evenodd"
-                                            d="M14.166 7.93434C14.4784 8.24676 14.4784 8.75329 14.166 9.06571L8.56603 14.6657C8.25361 14.9781 7.74708 14.9781 7.43466 14.6657L1.83466 9.06571C1.67842 8.90947 1.60032 8.70469 1.60034 8.49992V4.50002C1.60034 3.17454 2.67486 2.10002 4.00034 2.10002H8.00056C8.20523 2.10008 8.40987 2.17818 8.56603 2.33434L14.166 7.93434ZM4.00034 5.30002C4.44217 5.30002 4.80034 4.94185 4.80034 4.50002C4.80034 4.05819 4.44217 3.70002 4.00034 3.70002C3.55851 3.70002 3.20034 4.05819 3.20034 4.50002C3.20034 4.94185 3.55851 5.30002 4.00034 5.30002Z"
-                                            fill="#00BC5D" />
-                                    </svg>
-                                    Credits to be applied</span>
-
-                                <div
-                                    class="body-text-2 u-margin-inline-start-auto"
-                                    style="color: var(--web-green-500, #10B981)">
-                                    -{formatCurrency(
-                                        Math.min(availableCredit, currentInvoice?.amount ?? 0)
-                                    )}
-                                </div>
-                            </CollapsibleItem>
-                        {/if}
-
-                        {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
-                            <CollapsibleItem
-                                noContent
-                                gap={4}
-                                style="margin-block-start: 1rem; padding-block: unset;"
-                                wrapperStyle="padding-block: unset; padding-inline: unset;">
-                                <span class="body-text-2">Current total (USD)</span>
-                                <span class="tooltip u-cross-center" aria-label="total info">
-                                    <span
-                                        class="icon-info"
-                                        aria-hidden="true"
-                                        use:tooltip={{
-                                            content:
-                                                'Totals displayed are estimates updated every 24 hours and may not accurately reflect your invoice.'
-                                        }}></span>
-                                </span>
-                                <div class="body-text-2 u-margin-inline-start-auto">
-                                    {formatCurrency(
-                                        Math.max(
-                                            (currentInvoice?.amount ?? 0) -
-                                                Math.min(
-                                                    availableCredit,
-                                                    currentInvoice?.amount ?? 0
-                                                ),
-                                            0
-                                        )
-                                    )}
-                                </div>
-                            </CollapsibleItem>
-                        {/if}
-                    </div>
-                </Collapsible>
-            </Card>
+                    {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
+                        <Divider />
+                        <Layout.Stack direction="row" justifyContent="space-between">
+                            <Typography.Text color="--fgcolor-neutral-primary" variant="m-500">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    Current total (USD)
+                                    <Tooltip>
+                                        <Icon icon={IconInfo} />
+                                        <svelte:fragment slot="tooltip">
+                                            Estimates are updated daily and may differ from your
+                                            final invoice.
+                                        </svelte:fragment>
+                                    </Tooltip>
+                                </Layout.Stack>
+                            </Typography.Text>
+                            <Typography.Text color="--fgcolor-neutral-primary" variant="m-500">
+                                {formatCurrency(
+                                    Math.max(
+                                        (currentInvoice?.amount ?? 0) -
+                                            Math.min(availableCredit, currentInvoice?.amount ?? 0),
+                                        0
+                                    )
+                                )}
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </Card.Base>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
@@ -218,7 +236,7 @@
                         disabled={$organization?.markedForDeletion}
                         href={$upgradeURL}
                         on:click={() =>
-                            trackEvent('click_organization_upgrade', {
+                            trackEvent(Click.OrganizationClickUpgrade, {
                                 from: 'button',
                                 source: 'billing_tab'
                             })}>
@@ -251,6 +269,7 @@
         </svelte:fragment>
     </CardGrid>
 {/if}
+
 <CancelDowngradeModel bind:showCancel />
 
 <style>
diff --git a/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte b/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
index ae83c7399..72d8eb100 100644
--- a/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
@@ -29,14 +29,7 @@
     }
 </script>
 
-<Modal
-    bind:show
-    bind:error
-    onSubmit={removeAddress}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    title="Remove billing address">
+<Modal bind:show bind:error onSubmit={removeAddress} title="Remove billing address">
     <p data-private>
         Are you sure you want to remove the billing address from <b>{$organization?.name}</b>?
     </p>
diff --git a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
index 2ad7605a7..4d5fa0577 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Alert, Modal, RadioBoxes } from '$lib/components';
-    import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Button, InputSelect, InputText } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
@@ -9,11 +9,12 @@
     import type { AddressesList } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Pill } from '$lib/elements';
-    import { page } from '$app/stores';
     import { base } from '$app/paths';
+    import { Alert, Badge, Card, Layout, Skeleton } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     export let show = false;
+    let loading = true;
     let addresses: AddressesList;
     let selectedAddress: string;
     let error: string;
@@ -31,6 +32,7 @@
     ];
 
     onMount(async () => {
+        loading = true;
         addresses = await sdk.forConsole.billing.listAddresses();
 
         const firstNonCurrentAddress = addresses?.billingAddresses?.find(
@@ -42,12 +44,12 @@
                 : null
             : null;
 
-        const locale = await sdk.forProject($page.params.region, $page.params.project).locale.get();
+        const locale = await sdk.forProject(page.params.region, page.params.project).locale.get();
         if (locale?.countryCode) {
             country = locale.countryCode;
         }
         const countryList = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .locale.listCountries();
         options = countryList.countries.map((country) => {
             return {
@@ -55,12 +57,14 @@
                 label: country.name
             };
         });
+        loading = false;
     });
+
     async function handleSubmit() {
         try {
             if (selectedAddress === $organization.billingAddressId) {
                 show = false;
-            } else if (selectedAddress === null) {
+            } else if (selectedAddress === '$new') {
                 const address = await sdk.forConsole.billing.createAddress(
                     country,
                     streetAddress,
@@ -106,104 +110,92 @@
     }
 </script>
 
-<Modal
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    size="big"
-    headerDivider={false}
-    title="Replace billing address">
+<Modal bind:show bind:error onSubmit={handleSubmit} title="Replace billing address">
     <p class="text">Replace the existing billing address for your organization.</p>
-    {#if addresses?.total}
-        <FormList>
-            <RadioBoxes
-                total={addresses?.total}
-                name="payment"
-                bind:group={selectedAddress}
-                elements={addresses.billingAddresses}
-                disabledCondition={$organization.billingAddressId}>
-                <svelte:fragment slot="element" let:element>
-                    <div class="u-flex u-gap-4" style="padding-inline:0.25rem">
-                        <div
-                            class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2"
-                            style="padding-inline:0.25rem">
-                            <p class="text">{element.streetAddress}</p>
-                            {#if element?.addressLine2}
-                                <p class="text">{element.addressLine2}</p>
-                            {/if}
-                            <p class="text">{element.city}</p>
-                            <p class="text">{element.state}</p>
-                            <p class="text">{element.postalCode}</p>
-                            <p class="text">{element.country}</p>
-                        </div>
-                        {#if $organization.billingAddressId === element.$id}
-                            <Pill>Current</Pill>
+    {#if loading}
+        <Layout.Stack>
+            <Skeleton variant="line" width="100%" height={128} />
+            <Skeleton variant="line" width="100%" height={45} />
+        </Layout.Stack>
+    {:else if addresses?.total}
+        <Layout.Stack>
+            {#each addresses.billingAddresses as address}
+                <Card.Selector
+                    title={address.streetAddress}
+                    name={address.$id}
+                    value={address.$id}
+                    bind:group={selectedAddress}
+                    disabled={$organization.billingAddressId === address.$id}>
+                    <div slot="action">
+                        {#if $organization.billingAddressId === address.$id}
+                            <Badge variant="secondary" size="xs" content="Current" />
                         {/if}
                     </div>
-                </svelte:fragment>
-                <svelte:fragment slot="new">
-                    <span style="padding-inline:0.25rem">Add a new billing address</span>
-                </svelte:fragment>
-                <FormList gap={16} class="u-margin-block-start-24">
-                    <InputSelect
-                        bind:value={country}
-                        {options}
-                        label="Country or region"
-                        placeholder="Select country or region"
-                        id="country"
-                        required />
-                    <InputText
-                        bind:value={streetAddress}
-                        id="address"
-                        label="Street address"
-                        placeholder="Enter street address"
-                        required />
-                    <InputText
-                        bind:value={addressLine2}
-                        id="address2"
-                        label="Address line 2"
-                        placeholder="Unit number, floor, etc." />
-                    <InputText
-                        bind:value={city}
-                        id="city"
-                        label="City or suburb"
-                        placeholder="Enter your city"
-                        required />
-                    <FormItem isMultiple>
-                        <InputText
-                            isMultiple
-                            fullWidth
-                            bind:value={state}
-                            id="state"
-                            label="State"
-                            placeholder="Enter your state"
-                            required />
-                        <InputText
-                            isMultiple
-                            fullWidth
-                            bind:value={postalCode}
-                            id="zip"
-                            label="Postal code"
-                            placeholder="Enter postal code" />
-                    </FormItem>
-                </FormList>
-            </RadioBoxes>
-        </FormList>
+                    {#if address?.addressLine2}
+                        <p class="text">{address.addressLine2}</p>
+                    {/if}
+                    <p class="text">{address.city}</p>
+                    <p class="text">{address.state}</p>
+                    <p class="text">{address.postalCode}</p>
+                    <p class="text">{address.country}</p>
+                </Card.Selector>
+            {/each}
+            <Card.Selector
+                title="Add a new billing address"
+                name="$new"
+                bind:group={selectedAddress}
+                value="$new" />
+            {#if selectedAddress === '$new'}
+                <InputSelect
+                    bind:value={country}
+                    {options}
+                    label="Country or region"
+                    placeholder="Select country or region"
+                    id="country"
+                    required />
+                <InputText
+                    bind:value={streetAddress}
+                    id="address"
+                    label="Street address"
+                    placeholder="Enter street address"
+                    required />
+                <InputText
+                    bind:value={addressLine2}
+                    id="address2"
+                    label="Address line 2"
+                    placeholder="Unit number, floor, etc." />
+                <InputText
+                    bind:value={city}
+                    id="city"
+                    label="City or suburb"
+                    placeholder="Enter your city"
+                    required />
+                <InputText
+                    bind:value={state}
+                    id="state"
+                    label="State"
+                    placeholder="Enter your state"
+                    required />
+                <InputText
+                    bind:value={postalCode}
+                    id="zip"
+                    label="Postal code"
+                    placeholder="Enter postal code" />
+            {/if}
+        </Layout.Stack>
     {:else}
-        <Alert
-            buttons={[
-                {
-                    slot: 'Add address',
-                    href: `${base}/account/payments`
-                }
-            ]}>There are no billing addresses linked to your account.</Alert>
+        <Alert.Inline>
+            <Button secondary href={`${base}/account/payments`} slot="actions">Add address</Button>
+            There are no billing addresses linked to your account.</Alert.Inline>
     {/if}
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button
             secondary
             submit
-            disabled={selectedAddress === $organization.billingAddressId || !addresses?.total}>
+            disabled={loading ||
+                selectedAddress === $organization.billingAddressId ||
+                !addresses?.total}>
             Save
         </Button>
     </svelte:fragment>
diff --git a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
index bf0f62916..0b5d7e7a1 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
@@ -5,7 +5,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
-    import { initializeStripe, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
+    import { submitStripeCard } from '$lib/stores/stripe';
     import { onMount } from 'svelte';
     import type { PaymentList } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
@@ -40,7 +40,7 @@
 
     async function handleSubmit() {
         try {
-            if (!selectedPaymentMethodId) {
+            if (selectedPaymentMethodId === '$new') {
                 const method = await submitStripeCard(name, $organization.$id);
                 selectedPaymentMethodId = method.$id;
             }
@@ -89,27 +89,9 @@
     }
 
     $: filteredMethods = methods?.paymentMethods.filter((method) => !!method?.last4);
-
-    $: if (selectedPaymentMethodId === null && !$isStripeInitialized) {
-        initializeStripe();
-    }
-
-    $: if (selectedPaymentMethodId) {
-        isStripeInitialized.set(false);
-    }
-
-    $: if (!show) {
-        selectedPaymentMethodId = null;
-    }
 </script>
 
-<FakeModal
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    size="big"
-    headerDivider={false}
-    title="Replace payment method">
+<FakeModal bind:show bind:error onSubmit={handleSubmit} size="big" title="Replace payment method">
     <p class="text">Replace the existing payment method for your organization.</p>
 
     <PaymentBoxes
diff --git a/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
index 7f5194be5..c2aaa4542 100644
--- a/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
@@ -6,13 +6,8 @@
     import type { Invoice } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
-    import {
-        confirmPayment,
-        initializeStripe,
-        isStripeInitialized,
-        submitStripeCard
-    } from '$lib/stores/stripe';
+    import { page } from '$app/state';
+    import { confirmPayment, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
     import { organization } from '$lib/stores/organization';
     import { toLocaleDate } from '$lib/helpers/date';
     import { PaymentBoxes } from '$lib/components/billing';
@@ -106,15 +101,10 @@
         }
     }
 
-    $: if (paymentMethodId === null && !$isStripeInitialized) {
-        initializeStripe();
-    }
-
+    $: filteredMethods = $paymentMethods?.paymentMethods.filter((method) => !!method?.last4);
     $: if (paymentMethodId) {
         isStripeInitialized.set(false);
     }
-    $: filteredMethods = $paymentMethods?.paymentMethods.filter((method) => !!method?.last4);
-
     $: if (!show) {
         invoice = null;
     }
@@ -126,7 +116,6 @@
     state="warning"
     onSubmit={handleSubmit}
     size="big"
-    headerDivider={false}
     title="Retry payment">
     <!-- TODO: format currency -->
     <p class="text">
@@ -137,8 +126,7 @@
 
     <Button
         external
-        link
-        href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}>
+        href={`${endpoint}/organizations/${page.params.organization}/invoices/${invoice.$id}/view`}>
         View invoice
     </Button>
 
diff --git a/src/routes/(console)/organization-[organization]/billing/store.ts b/src/routes/(console)/organization-[organization]/billing/store.ts
index ca081c291..30d9b1c3c 100644
--- a/src/routes/(console)/organization-[organization]/billing/store.ts
+++ b/src/routes/(console)/organization-[organization]/billing/store.ts
@@ -1,5 +1,5 @@
 import { page } from '$app/stores';
-import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
 import type { AggregationList, Invoice } from '$lib/sdk/billing';
 import { derived, writable } from 'svelte/store';
 
diff --git a/src/routes/(console)/organization-[organization]/billing/taxId.svelte b/src/routes/(console)/organization-[organization]/billing/taxId.svelte
index 003012cbb..bbdb66479 100644
--- a/src/routes/(console)/organization-[organization]/billing/taxId.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/taxId.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -36,16 +36,10 @@
 
 <Form onSubmit={updateTaxId}>
     <CardGrid>
-        <Heading tag="h2" size="6">Tax ID</Heading>
+        <svelte:fragment slot="title">Tax ID</svelte:fragment>
         Add a tax identification number to your organization.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    label="Tax ID"
-                    placeholder="Enter tax ID"
-                    id="taxId"
-                    bind:value={taxId} />
-            </FormList>
+            <InputText label="Tax ID" placeholder="Enter tax ID" id="taxId" bind:value={taxId} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte b/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte
index 8a142ac57..fdbeb39a5 100644
--- a/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { FormList } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { onMount } from 'svelte';
     import type { PaymentList } from '$lib/sdk/billing';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { initializeStripe, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
+    import { isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
     import { sdk } from '$lib/stores/sdk';
     import { PaymentBoxes } from '$lib/components/billing';
     import { addCreditWizardStore } from '../store';
@@ -30,10 +29,6 @@
         }
     }
 
-    $: if ($addCreditWizardStore.paymentMethodId === null && !$isStripeInitialized) {
-        initializeStripe();
-    }
-
     $: if ($addCreditWizardStore.paymentMethodId) {
         isStripeInitialized.set(false);
     }
@@ -49,10 +44,8 @@
     </svelte:fragment>
 
     <p class="text"><b>Payment method</b></p>
-    <FormList class="u-margin-block-start-8">
-        <PaymentBoxes
-            methods={filteredMethods}
-            bind:name
-            bind:group={$addCreditWizardStore.paymentMethodId} />
-    </FormList>
+    <PaymentBoxes
+        methods={filteredMethods}
+        bind:name
+        bind:group={$addCreditWizardStore.paymentMethodId} />
 </WizardStep>
diff --git a/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte b/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte
index 2d1e25a46..ca84dbf21 100644
--- a/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
@@ -10,7 +10,7 @@
     $: redirectUrl = `${base}/organization-${$organization.$id}/billing#update-budget`;
 </script>
 
-{#if $showBudgetAlert && $organization?.$id && $organization?.billingPlan !== BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $showBudgetAlert && $organization?.$id && $organization?.billingPlan !== BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert type="error" title="Budget limit reached">
         <svelte:fragment>
             This organization has reached its budget limit and is now blocked. To continue using
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index bae622f70..2f63c5532 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -1,87 +1,67 @@
 <script lang="ts">
     import { afterNavigate, goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert } from '$lib/components';
-    import { PlanComparisonBox, SelectPaymentMethod } from '$lib/components/billing';
-    import EstimatedTotal from '$lib/components/billing/estimatedTotal.svelte';
+    import { PlanComparisonBox, PlanSelection, SelectPaymentMethod } from '$lib/components/billing';
     import PlanExcess from '$lib/components/billing/planExcess.svelte';
-    import SelectPlan from '$lib/components/billing/selectPlan.svelte';
     import ValidateCreditModal from '$lib/components/billing/validateCreditModal.svelte';
-    import Default from '$lib/components/roles/default.svelte';
     import { BillingPlan, Dependencies, feedbackDowngradeOptions } from '$lib/constants';
-    import {
-        Button,
-        Form,
-        FormList,
-        InputSelect,
-        InputTags,
-        InputTextarea,
-        Label
-    } from '$lib/elements/forms';
-    import { toLocaleDate } from '$lib/helpers/date.js';
-    import { formatCurrency } from '$lib/helpers/numbers';
-    import {
-        WizardSecondaryContainer,
-        WizardSecondaryContent,
-        WizardSecondaryFooter
-    } from '$lib/layout';
-    import { type Coupon, type PaymentList } from '$lib/sdk/billing';
-    import { isOrganization, plansInfo, type Tier, tierToPlan } from '$lib/stores/billing';
+    import { Button, Form, InputSelect, InputTags, InputTextarea } from '$lib/elements/forms';
+    import { formatCurrency } from '$lib/helpers/numbers.js';
+    import { Wizard } from '$lib/layout';
+    import { type Coupon } from '$lib/sdk/billing';
+    import { isOrganization, plansInfo, tierToPlan } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import {
-        currentPlan,
-        organization,
-        type Organization,
-        organizationList
-    } from '$lib/stores/organization';
+    import { currentPlan, organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { confirmPayment } from '$lib/stores/stripe';
     import { user } from '$lib/stores/user';
     import { VARS } from '$lib/system';
-    import { onMount } from 'svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Alert,
+        Divider,
+        Fieldset,
+        Icon,
+        Layout,
+        Link,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import { writable } from 'svelte/store';
+    import { onMount } from 'svelte';
+    import EstimatedTotalBox from '$lib/components/billing/estimatedTotalBox.svelte';
 
     export let data;
 
-    $: anyOrgFree = $organizationList.teams?.find(
-        (org) => (org as Organization)?.billingPlan === BillingPlan.FREE
-    );
-    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/i;
+    let selectedPlan: BillingPlan = data.plan as BillingPlan;
+    let selectedCoupon: Partial<Coupon> | null = data.coupon;
     let previousPage: string = base;
     let showExitModal = false;
-    afterNavigate(({ from }) => {
-        previousPage = from?.url?.pathname || previousPage;
-    });
-
     let formComponent: Form;
     let isSubmitting = writable(false);
-    let methods: PaymentList;
-    let billingPlan: Tier = $currentPlan?.$id as Tier;
-    let paymentMethodId: string;
+    let paymentMethodId: string =
+        data.organization.paymentMethodId ??
+        data.paymentMethods.paymentMethods.find((method) => !!method?.last4)?.$id;
     let collaborators: string[] =
         data?.members?.memberships
             ?.map((m) => {
                 if (m.userEmail !== $user.email) return m.userEmail;
             })
             ?.filter(Boolean) ?? [];
-    let couponData: Partial<Coupon> = {
-        code: null,
-        status: null,
-        credits: null
-    };
     let taxId: string;
     let billingBudget: number;
     let showCreditModal = false;
-
     let feedbackDowngradeReason: string;
     let feedbackMessage: string;
-    let selfService: boolean;
+    let couponData: Partial<Coupon> = data.coupon;
 
+    afterNavigate(({ from }) => {
+        previousPage = from?.url?.pathname || previousPage;
+    });
     onMount(async () => {
-        if ($page.url.searchParams.has('code')) {
-            const coupon = $page.url.searchParams.get('code');
+        if (page.url.searchParams.has('code')) {
+            const coupon = page.url.searchParams.get('code');
             try {
                 couponData = await sdk.forConsole.billing.getCouponAccount(coupon);
             } catch (e) {
@@ -92,39 +72,28 @@
                 };
             }
         }
-        if ($page.url.searchParams.has('plan')) {
-            const plan = $page.url.searchParams.get('plan');
+        if (page.url.searchParams.has('plan')) {
+            const plan = page.url.searchParams.get('plan');
             if (plan && plan in BillingPlan) {
-                billingPlan = plan as BillingPlan;
+                selectedPlan = plan as BillingPlan;
             }
         }
 
-        if ($page.url.searchParams.has('type')) {
-            const type = $page.url.searchParams.get('type');
+        if (page.url.searchParams.has('type')) {
+            const type = page.url.searchParams.get('type');
             if (type === 'payment_confirmed') {
-                const organizationId = $page.url.searchParams.get('id');
-                const invites = $page.url.searchParams.get('invites').split(',');
+                const organizationId = page.url.searchParams.get('id');
+                const invites = page.url.searchParams.get('invites').split(',');
                 await validate(organizationId, invites);
             }
         }
         if ($currentPlan?.$id === BillingPlan.SCALE) {
-            billingPlan = BillingPlan.SCALE;
+            selectedPlan = BillingPlan.SCALE;
         } else {
-            billingPlan = BillingPlan.PRO;
+            selectedPlan = BillingPlan.PRO;
         }
-
-        selfService = $currentPlan?.selfService ?? true;
     });
 
-    async function loadPaymentMethods() {
-        methods = await sdk.forConsole.billing.listPaymentMethods();
-
-        paymentMethodId =
-            $organization?.paymentMethodId ??
-            methods.paymentMethods.find((method) => !!method?.last4)?.$id ??
-            null;
-    }
-
     async function handleSubmit() {
         if (isDowngrade) {
             await downgrade();
@@ -136,8 +105,8 @@
     async function downgrade() {
         try {
             await sdk.forConsole.billing.updatePlan(
-                selectedOrg.$id,
-                billingPlan,
+                data.organization.$id,
+                selectedPlan,
                 paymentMethodId,
                 null
             );
@@ -148,14 +117,14 @@
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
-                    from: tierToPlan($currentPlan?.$id as Tier).name,
-                    to: tierToPlan(billingPlan).name,
-                    email: $user.email,
+                    from: tierToPlan(data.organization.billingPlan).name,
+                    to: tierToPlan(selectedPlan).name,
+                    email: data.account.email,
                     reason: feedbackDowngradeOptions.find(
                         (option) => option.value === feedbackDowngradeReason
                     )?.label,
-                    orgId: selectedOrg.$id,
-                    userId: $user.$id,
+                    orgId: data.organization.$id,
+                    userId: data.account.$id,
                     message: feedbackMessage ?? ''
                 })
             });
@@ -166,12 +135,11 @@
             addNotification({
                 type: 'success',
                 isHtml: true,
-                message: `
-                        <b>${selectedOrg.name}</b> plan has been successfully updated.`
+                message: `<b>${$organization.name}</b> plan has been successfully updated.`
             });
 
             trackEvent(Submit.OrganizationDowngrade, {
-                plan: tierToPlan(billingPlan)?.name
+                plan: tierToPlan(selectedPlan)?.name
             });
         } catch (e) {
             addNotification({
@@ -196,7 +164,7 @@
                 });
 
                 trackEvent(Submit.OrganizationUpgrade, {
-                    plan: tierToPlan(billingPlan)?.name
+                    plan: tierToPlan(selectedPlan)?.name
                 });
             }
         } catch (e) {
@@ -219,8 +187,8 @@
                 );
             }
             const org = await sdk.forConsole.billing.updatePlan(
-                selectedOrg.$id,
-                billingPlan,
+                data.organization.$id,
+                selectedPlan,
                 paymentMethodId,
                 null,
                 couponData?.code,
@@ -232,7 +200,7 @@
             if (!isOrganization(org) && org.status == 402) {
                 let clientSecret = org.clientSecret;
                 let params = new URLSearchParams();
-                for (const [key, value] of $page.url.searchParams.entries()) {
+                for (const [key, value] of page.url.searchParams.entries()) {
                     if (key !== 'type' && key !== 'id') {
                         params.append(key, value);
                     }
@@ -240,7 +208,7 @@
                 params.append('type', 'payment_confirmed');
                 params.append('id', org.teamId);
                 params.append('invites', collaborators.join(','));
-                params.append('plan', billingPlan);
+                params.append('plan', selectedPlan);
                 await confirmPayment(
                     '',
                     clientSecret,
@@ -261,7 +229,7 @@
                 });
 
                 trackEvent(Submit.OrganizationUpgrade, {
-                    plan: tierToPlan(billingPlan)?.name
+                    plan: tierToPlan(selectedPlan)?.name
                 });
             }
         } catch (e) {
@@ -273,129 +241,140 @@
         }
     }
 
-    $: selectedOrg =
-        $organization ??
-        ($organizationList.teams.find(
-            (team) => team.$id === $page.params.organization
-        ) as Organization);
-    $: currentOrgPlan = $currentPlan ?? $plansInfo.get(selectedOrg?.billingPlan);
-    $: isSamePlan = billingPlan === currentOrgPlan.$id;
-    $: isUpgrade = isSamePlan ? false : $plansInfo.get(billingPlan)?.order > currentOrgPlan.order;
-    $: isDowngrade = isSamePlan ? false : $plansInfo.get(billingPlan)?.order < currentOrgPlan.order;
-    $: if (billingPlan !== BillingPlan.FREE) {
-        loadPaymentMethods();
-    }
+    $: isUpgrade = $plansInfo.get(selectedPlan).order > $currentPlan.order;
+    $: isDowngrade = $plansInfo.get(selectedPlan).order < $currentPlan.order;
+    $: isButtonDisabled = $organization.billingPlan === selectedPlan;
 </script>
 
 <svelte:head>
     <title>Change plan - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer bind:showExitModal href={previousPage} confirmExit>
-    <svelte:fragment slot="title">Change plan</svelte:fragment>
-    <WizardSecondaryContent>
-        <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
-            <Label class="label u-margin-block-start-16">Select plan</Label>
-            <p class="text">
-                For more details on our plans, visit our
-                <Button href="https://appwrite.io/pricing" external link>pricing page</Button>.
-            </p>
-            {#if !selfService}
-                <Alert class="u-position-relative u-margin-block-start-16" type="info"
-                    >Your contract is not eligible for manual changes. Please reach out to schedule
-                    a call or setup a dialog.</Alert>
-            {/if}
-            <SelectPlan bind:billingPlan anyOrgFree={!!anyOrgFree} class="u-margin-block-16" />
+<Wizard
+    title="Change plan"
+    href={`${base}/organization-${page.params.organization}`}
+    bind:showExitModal
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Select plan">
+                <Layout.Stack gap="l">
+                    <Typography.Text>
+                        For more details on our plans, visit our
+                        <Link.Anchor
+                            href="https://appwrite.io/pricing"
+                            target="_blank"
+                            rel="noopener noreferrer">pricing page</Link.Anchor
+                        >.
+                    </Typography.Text>
+
+                    {#if !data.selfService}
+                        <Alert.Inline status="info">
+                            Your contract is not eligible for manual changes. Please reach out to
+                            schedule a call or setup a dialog.
+                        </Alert.Inline>
+                    {/if}
+
+                    <PlanSelection
+                        bind:billingPlan={selectedPlan}
+                        selfService={data.selfService}
+                        anyOrgFree={data.hasFreeOrgs} />
+
+                    {#if isDowngrade}
+                        {#if selectedPlan === BillingPlan.FREE}
+                            <PlanExcess tier={BillingPlan.FREE} />
+                        {:else if selectedPlan === BillingPlan.PRO && data.organization.billingPlan === BillingPlan.SCALE && collaborators?.length > 0}
+                            {@const extraMembers = collaborators?.length ?? 0}
+                            {@const price = formatCurrency(
+                                extraMembers *
+                                    ($plansInfo?.get(selectedPlan)?.addons?.seats?.price ?? 0)
+                            )}
+                            <Alert.Inline status="error">
+                                <svelte:fragment slot="title">
+                                    Your monthly payments will be adjusted for the Pro plan
+                                </svelte:fragment>
+                                After switching plans,
+                                <b
+                                    >you will be charged {price} monthly for {extraMembers} team members.</b>
+                                This will be reflected in your next invoice.
+                            </Alert.Inline>
+                        {/if}
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
 
-            {#if isDowngrade}
-                {#if billingPlan === BillingPlan.FREE}
-                    <PlanExcess
-                        tier={BillingPlan.FREE}
-                        class="u-margin-block-start-24"
-                        members={data?.members?.total ?? 0} />
-                {:else}
-                    {@const extraMembers = collaborators?.length ?? 0}
-                    <Alert type="warning" class="u-margin-block-start-24">
-                        <svelte:fragment slot="title">
-                            Your organization will switch to {tierToPlan(billingPlan).name} plan on {toLocaleDate(
-                                selectedOrg.billingNextInvoiceDate
-                            )}.
-                        </svelte:fragment>
-                        You will retain access to {tierToPlan(selectedOrg.billingPlan).name} plan features
-                        until your billing period ends. {#if extraMembers > 0}After that,
-                            <b
-                                >you will be charged {formatCurrency(
-                                    extraMembers *
-                                        ($plansInfo?.get(billingPlan)?.addons?.seats?.price ?? 0)
-                                )} per month for {extraMembers} team members.</b
-                            >{/if}
-                    </Alert>
-                {/if}
-            {/if}
             <!-- Show email input if upgrading from free plan -->
-            {#if billingPlan !== BillingPlan.FREE && selectedOrg.billingPlan !== billingPlan && selectedOrg.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
-                <FormList class="u-margin-block-start-16">
+            {#if selectedPlan !== BillingPlan.FREE && data.organization.billingPlan === BillingPlan.FREE}
+                <Fieldset legend="Payment">
+                    <SelectPaymentMethod
+                        methods={data.paymentMethods}
+                        bind:value={paymentMethodId}
+                        bind:taxId>
+                        <svelte:fragment slot="actions">
+                            {#if !selectedCoupon?.code}
+                                <Divider vertical style="height: 2rem" />
+                                <Button compact on:click={() => (showCreditModal = true)}>
+                                    <Icon icon={IconPlus} slot="start" size="s" />
+                                    Add credits
+                                </Button>
+                            {/if}
+                        </svelte:fragment>
+                    </SelectPaymentMethod>
+                </Fieldset>
+                <Fieldset legend="Invite members">
                     <InputTags
                         bind:tags={collaborators}
                         label="Invite members by email"
-                        popover={Default}
                         placeholder="Enter email address(es)"
-                        validityRegex={emailRegex}
-                        validityMessage="Invalid email address"
                         id="members" />
-                    <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId />
-                </FormList>
-                {#if !couponData?.code}
-                    <Button
-                        text
-                        noMargin
-                        class="u-margin-block-start-16"
-                        on:click={() => (showCreditModal = true)}>
-                        <span class="icon-plus"></span> <span class="text">Add credits</span>
-                    </Button>
-                {/if}
+                </Fieldset>
             {/if}
-            {#if isDowngrade && billingPlan === BillingPlan.FREE}
-                <FormList class="u-margin-block-start-24">
-                    <InputSelect
-                        id="reason"
-                        label="Reason for plan change"
-                        placeholder="Select one"
-                        required
-                        options={feedbackDowngradeOptions}
-                        bind:value={feedbackDowngradeReason} />
-                    <InputTextarea
-                        id="comment"
-                        required
-                        label="If you need to elaborate, please do so here"
-                        placeholder="Enter feedback"
-                        bind:value={feedbackMessage} />
-                </FormList>
+            {#if isDowngrade && selectedPlan === BillingPlan.FREE}
+                <Fieldset legend="Feedback">
+                    <Layout.Stack gap="xl">
+                        <InputSelect
+                            id="reason"
+                            label="Reason for plan change"
+                            placeholder="Select one"
+                            required
+                            options={feedbackDowngradeOptions}
+                            bind:value={feedbackDowngradeReason} />
+                        <InputTextarea
+                            id="comment"
+                            required
+                            label="If you need to elaborate, please do so here"
+                            placeholder="Enter feedback"
+                            bind:value={feedbackMessage} />
+                    </Layout.Stack>
+                </Fieldset>
             {/if}
-        </Form>
-        <svelte:fragment slot="aside">
-            {#if billingPlan !== BillingPlan.FREE && selectedOrg.billingPlan !== billingPlan && selectedOrg.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
-                <EstimatedTotal
-                    bind:billingBudget
-                    bind:couponData
-                    organizationId={selectedOrg.$id}
-                    {billingPlan}
-                    {collaborators} />
-            {:else if selectedOrg.billingPlan !== BillingPlan.CUSTOM}
-                <PlanComparisonBox downgrade={isDowngrade} />
-            {/if}
-        </svelte:fragment>
-    </WizardSecondaryContent>
-
-    <WizardSecondaryFooter>
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        {#if selectedPlan !== BillingPlan.FREE && data.organization.billingPlan !== selectedPlan && data.organization.billingPlan !== BillingPlan.CUSTOM}
+            <EstimatedTotalBox
+                {collaborators}
+                {isDowngrade}
+                plans={data.plansInfo}
+                billingPlan={selectedPlan}
+                bind:couponData={selectedCoupon}
+                bind:billingBudget />
+        {:else if data.organization.billingPlan !== BillingPlan.CUSTOM}
+            <PlanComparisonBox downgrade={isDowngrade} />
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="footer">
         <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
         <Button
             fullWidthMobile
             on:click={() => formComponent.triggerSubmit()}
-            disabled={$isSubmitting || isSamePlan || !selfService}>
+            disabled={$isSubmitting || isButtonDisabled || !data.selfService}>
             Change plan
         </Button>
-    </WizardSecondaryFooter>
-</WizardSecondaryContainer>
+    </svelte:fragment>
+</Wizard>
 
-<ValidateCreditModal bind:show={showCreditModal} bind:couponData />
+<ValidateCreditModal
+    bind:show={showCreditModal}
+    bind:couponData={selectedCoupon}
+    isNewOrg={false} />
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.ts b/src/routes/(console)/organization-[organization]/change-plan/+page.ts
index e14b3d468..e3d79c69e 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.ts
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.ts
@@ -1,11 +1,58 @@
-import { Dependencies } from '$lib/constants';
+import { BillingPlan, Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
+import type { Coupon } from '$lib/sdk/billing';
+import type { Organization } from '$lib/stores/organization';
 
-export const load: PageLoad = async ({ depends, parent }) => {
-    const { members } = await parent();
+export const load: PageLoad = async ({ depends, parent, url }) => {
+    const { members, organization, currentPlan, organizations } = await parent();
+    depends(Dependencies.UPGRADE_PLAN);
+
+    const [coupon, paymentMethods] = await Promise.all([
+        getCoupon(url),
+        sdk.forConsole.billing.listPaymentMethods()
+    ]);
+
+    let plan = getPlanFromUrl(url);
+
+    if (organization?.billingPlan === BillingPlan.SCALE) {
+        plan = BillingPlan.SCALE;
+    } else {
+        plan = BillingPlan.PRO;
+    }
+
+    const selfService = currentPlan?.selfService ?? true;
+    const hasFreeOrgs = organizations.teams?.some(
+        (org) => (org as Organization)?.billingPlan === BillingPlan.FREE
+    );
 
-    depends(Dependencies.ORGANIZATION);
     return {
-        members
+        members,
+        plan,
+        coupon,
+        selfService,
+        hasFreeOrgs,
+        paymentMethods
     };
 };
+
+function getPlanFromUrl(url: URL): BillingPlan | null {
+    if (url.searchParams.has('plan')) {
+        const plan = url.searchParams.get('plan');
+        if (plan && plan in BillingPlan) {
+            return plan as BillingPlan;
+        }
+    }
+}
+
+async function getCoupon(url: URL): Promise<Coupon | null> {
+    if (url.searchParams.has('code')) {
+        const coupon = url.searchParams.get('code');
+        try {
+            return sdk.forConsole.billing.getCoupon(coupon);
+        } catch (e) {
+            return null;
+        }
+    }
+    return null;
+}
diff --git a/src/routes/(console)/organization-[organization]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte
index 683501c13..3d9bbd0fe 100644
--- a/src/routes/(console)/organization-[organization]/createMember.svelte
+++ b/src/routes/(console)/organization-[organization]/createMember.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Modal } from '$lib/components';
-    import { InputText, InputEmail, Button, FormList } from '$lib/elements/forms';
+    import { InputText, InputEmail, Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -14,6 +14,9 @@
     import { roles } from '$lib/stores/billing';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import Roles from '$lib/components/roles/roles.svelte';
+    import { Icon, Popover } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let showCreate = false;
 
@@ -32,7 +35,7 @@
                 email,
                 undefined,
                 undefined,
-                `${$page.url.origin}${base}/invite`,
+                `${page.url.origin}${base}/invite`,
                 name || undefined
             );
             await invalidate(Dependencies.ACCOUNT);
@@ -59,24 +62,27 @@
     }
 </script>
 
-<Modal title="Invite member" {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <FormList>
-        <InputEmail
-            required
-            id="email"
-            label="Email"
-            placeholder="Enter email"
-            autofocus={true}
-            bind:value={email} />
-        <InputText
-            id="member-name"
-            label="Name (optional)"
-            placeholder="Enter name"
-            bind:value={name} />
-        {#if isCloud}
-            <InputSelect popover={Roles} id="role" label="Role" options={roles} bind:value={role} />
-        {/if}
-    </FormList>
+<Modal title="Invite member" {error} bind:show={showCreate} onSubmit={create}>
+    <InputEmail
+        required
+        id="email"
+        label="Email"
+        placeholder="Enter email"
+        autofocus={true}
+        bind:value={email} />
+    <InputText id="member-name" label="Name" placeholder="Enter name" bind:value={name} />
+    {#if isCloud}
+        <InputSelect required id="role" label="Role" options={roles} bind:value={role}>
+            <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
+                <Popover let:toggle>
+                    <Button extraCompact size="s" on:click={toggle}>
+                        <Icon size="s" icon={IconInfo} />
+                    </Button>
+                    <svelte:component this={Roles} slot="tooltip" />
+                </Popover>
+            </Layout.Stack>
+        </InputSelect>
+    {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit submissionLoader>Send invite</Button>
diff --git a/src/routes/(console)/organization-[organization]/createProject.svelte b/src/routes/(console)/organization-[organization]/createProject.svelte
index 1f6ba1917..95b7741e2 100644
--- a/src/routes/(console)/organization-[organization]/createProject.svelte
+++ b/src/routes/(console)/organization-[organization]/createProject.svelte
@@ -3,11 +3,12 @@
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, Button, FormList } from '$lib/elements/forms';
+    import { InputText, Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let show = false;
@@ -16,10 +17,10 @@
     const dispatch = createEventDispatcher();
 
     let id: string;
-    let name: string;
-    let showCustomId = false;
     let error: string;
+    let showCustomId = false;
     let disabled: boolean = false;
+    let name: string = 'Appwrite project';
 
     async function create() {
         try {
@@ -44,21 +45,21 @@
     }
 </script>
 
-<Modal title="Create project" {error} onSubmit={create} size="big" bind:show>
-    <FormList>
+<Modal title="Create project" {error} onSubmit={create} bind:show>
+    <Layout.Stack gap="l">
         <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>
+            <span>
+                <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                    <Icon icon={IconPencil} slot="start" size="s" />
+                    Project ID
+                </Tag>
+            </span>
         {:else}
             <CustomId autofocus bind:show={showCustomId} name="Project" isProject bind:id />
         {/if}
-    </FormList>
+    </Layout.Stack>
+
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit {disabled}>Create</Button>
diff --git a/src/routes/(console)/organization-[organization]/createProjectCloud.svelte b/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
index 90a7c620d..6ec2dd268 100644
--- a/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
+++ b/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-    import { Wizard } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onDestroy } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { ID, Region } from '@appwrite.io/console';
+    import { ID, Region as ConsoleRegion, type Models } from '@appwrite.io/console';
     import { createProject } from './wizard/store';
-    import { wizard } from '$lib/stores/wizard';
+    import { Button } from '@appwrite.io/pink-svelte';
     import { base } from '$app/paths';
+    import CreateProject from '$lib/layout/createProject.svelte';
+    import { Modal } from '$lib/components';
 
-    const teamId = $page.params.organization;
+    const teamId = page.params.organization;
+    export let regions: Array<Models.ConsoleRegion> = [];
+    export let showCreateProjectCloud: boolean;
 
     async function onFinish() {
         await invalidate(Dependencies.FUNCTIONS);
@@ -28,7 +28,7 @@
                 $createProject?.id ?? ID.unique(),
                 $createProject.name,
                 teamId,
-                $createProject.region as Region
+                $createProject.region as ConsoleRegion
             );
             trackEvent(Submit.ProjectCreate, {
                 customId: !!$createProject?.id,
@@ -39,8 +39,8 @@
                 type: 'success',
                 message: `${$createProject.name} has been created`
             });
+            await onFinish();
             await goto(`${base}/project-${project.region}-${project.$id}`);
-            wizard.hide();
         } catch (e) {
             addNotification({
                 type: 'error',
@@ -57,16 +57,17 @@
             region: 'fra'
         };
     });
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Details',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Region',
-        component: Step2
-    });
 </script>
 
-<Wizard title="Create project" steps={stepsComponents} finalMethod={create} on:exit={onFinish} />
+<Modal bind:show={showCreateProjectCloud} title={'Create project'} onSubmit={create}>
+    <CreateProject
+        showTitle={false}
+        bind:id={$createProject.id}
+        bind:projectName={$createProject.name}
+        bind:region={$createProject.region}
+        {regions}>
+    </CreateProject>
+    <svelte:fragment slot="footer">
+        <Button.Button type="submit" variant="primary" size="s">Create</Button.Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/deleteMember.svelte b/src/routes/(console)/organization-[organization]/deleteMember.svelte
index c2b446335..f1f1f997a 100644
--- a/src/routes/(console)/organization-[organization]/deleteMember.svelte
+++ b/src/routes/(console)/organization-[organization]/deleteMember.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
-    import { logout } from '$lib/helpers/logout';
-    import { checkForUsageLimit } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
-    import { user } from '$lib/stores/user';
-    import { isCloud } from '$lib/system';
     import type { Models } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
+    import { user } from '$lib/stores/user';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { checkForUsageLimit } from '$lib/stores/billing';
+    import { isCloud } from '$lib/system';
+    import { organization } from '$lib/stores/organization';
+    import { logout } from '$lib/helpers/logout';
+    import Confirm from '$lib/components/confirm.svelte';
 
     const dispatch = createEventDispatcher();
 
     export let showDelete = false;
     export let selectedMember: Models.Membership;
 
+    let error: string;
+
     const deleteMembership = async () => {
         try {
             await sdk.forConsole.teams.deleteMembership(selectedMember.teamId, selectedMember.$id);
@@ -39,34 +40,22 @@
                 message: `${selectedMember.userName || 'User'} was deleted from ${selectedMember.teamName}`
             });
             trackEvent(Submit.MemberDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MemberDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MemberDelete);
         }
     };
 
     $: isUser = selectedMember?.userId === $user?.$id;
 </script>
 
-<Modal
-    bind:show={showDelete}
+<Confirm
     onSubmit={deleteMembership}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <svelte:fragment slot="title">
-        {isUser ? 'Leave organization' : 'Delete member'}
-    </svelte:fragment>
-    <p data-private>
-        {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>
+    title={isUser ? 'Leave organization' : 'Delete member'}
+    bind:open={showDelete}
+    action={isUser ? 'Leave' : 'Delete'}
+    bind:error>
+    {isUser
+        ? `Are you sure you want to leave '${selectedMember?.teamName}'?`
+        : `Are you sure you want to delete ${selectedMember?.userName} from '${selectedMember?.teamName}'?`}
+</Confirm>
diff --git a/src/routes/(console)/organization-[organization]/domains/+page.svelte b/src/routes/(console)/organization-[organization]/domains/+page.svelte
new file mode 100644
index 000000000..a4b6699d9
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/+page.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { EmptySearch, PaginationWithLimit, ViewSelector } from '$lib/components/index.js';
+    import { Button } from '$lib/elements/forms';
+    import Link from '$lib/elements/link.svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import Container from '$lib/layout/container.svelte';
+    import { protocol } from '$routes/(console)/store.js';
+    import {
+        IconDotsHorizontal,
+        IconPlus,
+        IconRefresh,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import DeleteDomainModal from './deleteDomainModal.svelte';
+    import RetryDomainModal from './retryDomainModal.svelte';
+    import { queries } from '$lib/components/filters';
+    import SearchQuery from '$lib/components/searchQuery.svelte';
+    import { app } from '$lib/stores/app';
+    import type { Domain } from '$lib/sdk/domains';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { columns } from './store';
+    import { View } from '$lib/helpers/load';
+
+    export let data;
+
+    let showDelete = false;
+    let showRetry = false;
+    let selectedDomain: Domain = null;
+</script>
+
+<Container>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery placeholder="Search domains" />
+        <Layout.Stack direction="row" gap="m" inline>
+            <ViewSelector view={View.Table} {columns} hideView />
+            <Button
+                on:click={() => {
+                    trackEvent(Click.DomainCreateClick, {
+                        source: 'organization_domain_overview'
+                    });
+                }}
+                href={`${base}/organization-${page.params.organization}/domains/add-domain`}>
+                <Icon icon={IconPlus} size="s" />
+                Add domain
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
+
+    {#if data.domains.total}
+        <Table.Root let:root columns={[...$columns, { id: 'actions', width: 40 }]}>
+            <svelte:fragment slot="header" let:root>
+                {#each $columns as { id, title }}
+                    <Table.Header.Cell column={id} {root}>
+                        {title}
+                    </Table.Header.Cell>
+                {/each}
+                <Table.Header.Cell {root} column="actions"></Table.Header.Cell>
+            </svelte:fragment>
+            {#each data.domains.domains as domain}
+                <Table.Row.Link
+                    {root}
+                    href={`${base}/organization-${page.params.organization}/domains/domain-${domain.$id}`}>
+                    {#each $columns as column}
+                        <Table.Cell column={column.id} {root}>
+                            <Typography.Text truncate>
+                                {#if column.id === 'domain'}
+                                    <Link
+                                        external
+                                        icon
+                                        href={`${$protocol}${domain.domain}`}
+                                        variant="quiet">
+                                        {domain.domain}
+                                    </Link>
+                                {:else if column.id === 'registrar'}
+                                    {domain.registrar || '-'}
+                                {:else if column.id === 'nameservers'}
+                                    {domain.nameservers || '-'}
+                                {:else if column.id === 'expiry_date'}
+                                    {domain?.expiry ? toLocaleDateTime(domain.expiry) : '-'}
+                                {:else if column.id === 'renewal'}
+                                    {domain?.renewal ? toLocaleDateTime(domain.renewal) : '-'}
+                                {:else if column.id === 'auto_renewal'}
+                                    {domain?.autoRenewal ? 'On' : 'Off'}
+                                {/if}
+                            </Typography.Text>
+                        </Table.Cell>
+                    {/each}
+
+                    <Table.Cell column="actions" {root}>
+                        <Layout.Stack direction="row" justifyContent="flex-end">
+                            <Popover let:toggle placement="bottom-end" padding="none">
+                                <Button
+                                    text
+                                    icon
+                                    on:click={(e) => {
+                                        e.preventDefault();
+                                        toggle(e);
+                                    }}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+
+                                <svelte:fragment slot="tooltip" let:toggle>
+                                    <ActionMenu.Root>
+                                        {#if domain.nameservers !== 'Appwrite'}
+                                            <ActionMenu.Item.Button
+                                                leadingIcon={IconRefresh}
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    selectedDomain = domain;
+                                                    showRetry = true;
+                                                    toggle(e);
+                                                    trackEvent(
+                                                        Click.DomainRetryDomainVerificationClick,
+                                                        {
+                                                            source: 'organization_domain_overview'
+                                                        }
+                                                    );
+                                                }}>
+                                                Retry
+                                            </ActionMenu.Item.Button>
+                                        {/if}
+                                        <ActionMenu.Item.Button
+                                            status="danger"
+                                            leadingIcon={IconTrash}
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                selectedDomain = domain;
+                                                showDelete = true;
+                                                toggle(e);
+                                                trackEvent(Click.DomainDeleteClick, {
+                                                    source: 'organization_domain_overview'
+                                                });
+                                            }}>
+                                            Delete
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                </svelte:fragment>
+                            </Popover>
+                        </Layout.Stack>
+                    </Table.Cell>
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
+
+        <PaginationWithLimit
+            name="Domains"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.domains.total} />
+    {:else if data?.query}
+        <EmptySearch hidePages bind:search={data.search} target="domains">
+            <svelte:fragment slot="actions">
+                <Button
+                    secondary
+                    on:click={() => {
+                        queries.clearAll();
+                        queries.apply();
+                    }}>Clear filters</Button>
+            </svelte:fragment>
+        </EmptySearch>
+    {:else}
+        <Card.Base padding="none">
+            <Empty
+                src={$app.themeInUse === 'dark'
+                    ? `${base}/images/domains/empty-domain-dark.svg`
+                    : `${base}/images/domains/empty-domain-light.svg`}
+                title="Add your first domain"
+                description="Connect a domain you own to get your project up and running.">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        href="#/"
+                        text
+                        event="empty_documentation"
+                        size="s"
+                        ariaLabel="add domain">Documentation</Button>
+
+                    <Button
+                        secondary
+                        on:click={() => {
+                            trackEvent(Click.DomainCreateClick, {
+                                source: 'organization_domain_overview'
+                            });
+                        }}
+                        href={`${base}/organization-${page.params.organization}/domains/add-domain`}
+                        size="s">
+                        Add domain
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
+    {/if}
+</Container>
+
+{#if showDelete}
+    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
+{/if}
+
+{#if showRetry}
+    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
+{/if}
diff --git a/src/routes/(console)/organization-[organization]/domains/+page.ts b/src/routes/(console)/organization-[organization]/domains/+page.ts
new file mode 100644
index 000000000..d51738731
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/+page.ts
@@ -0,0 +1,30 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { queries, queryParamToMap } from '$lib/components/filters';
+
+export const load = async ({ depends, url, route }) => {
+    depends(Dependencies.DOMAINS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+    const search = getSearch(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    return {
+        offset,
+        limit,
+        query,
+        search,
+        domains: await sdk.forConsole.domains.list([
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            ...parsedQueries.values()
+        ])
+    };
+};
diff --git a/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
new file mode 100644
index 000000000..327151445
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Button, Form } from '$lib/elements/forms';
+    import { InputDomain } from '$lib/elements/forms/index.js';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Divider, Fieldset, Layout } from '@appwrite.io/pink-svelte';
+    import RecordsCard from '../recordsCard.svelte';
+    import { afterNavigate, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Domain } from '$lib/sdk/domains';
+
+    let backPage = `${base}/organization-${page.params.organization}/domains`;
+
+    let domainName = '';
+    let domain: Domain;
+
+    async function addDomain() {
+        try {
+            domain = await sdk.forConsole.domains.create(page.params.organization, domainName);
+            console.log(domain);
+            invalidate(Dependencies.DOMAINS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    afterNavigate(({ from }) => {
+        backPage = from.url?.pathname ?? `${base}/`;
+    });
+</script>
+
+<Wizard title="Add domain" href={backPage} column columnSize="s" hideFooter>
+    {#if domain}
+        <RecordsCard {domain} />
+    {:else}
+        <Fieldset legend="Configuration">
+            <Form onSubmit={addDomain}>
+                <Layout.Stack gap="xl">
+                    <InputDomain
+                        label="Domain"
+                        id="domain"
+                        name="domain"
+                        bind:value={domainName}
+                        required
+                        placeholder="example.com" />
+
+                    <Divider />
+                    <Layout.Stack alignItems="flex-end">
+                        <Button submit>Add</Button>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Form>
+        </Fieldset>
+    {/if}
+</Wizard>
diff --git a/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte b/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte
new file mode 100644
index 000000000..cdbb00b8c
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Confirm } from '$lib/components';
+    import type { Domain } from '$lib/sdk/domains';
+
+    export let show = false;
+    export let selectedDomain: Domain;
+
+    let error = '';
+
+    async function deleteDomain() {
+        try {
+            await sdk.forConsole.domains.delete(selectedDomain.$id);
+            await invalidate(Dependencies.DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `${selectedDomain.domain} has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+</script>
+
+<Confirm onSubmit={deleteDomain} title="Delete domain" bind:open={show} bind:error>
+    <p data-private>Are you sure you want to delete <b>{selectedDomain?.domain}</b>?</p>
+    <p>Your site will no longer be available at this domain. This action is irreversible.</p>
+</Confirm>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/certificateInfoModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/certificateInfoModal.svelte
new file mode 100644
index 000000000..98029a467
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/certificateInfoModal.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { Button, InputText, InputTextarea } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+    export let selectedCertificate; //TODO: add type
+</script>
+
+<Modal title="Advanced information" bind:show>
+    <Layout.Stack gap="xxl">
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-600">Issued to</Typography.Text>
+            <Layout.Stack gap="l">
+                <InputText readonly id="cn" label="Common Name (CN)" value={selectedCertificate} />
+                <Layout.Stack direction="row" gap="l">
+                    <InputText
+                        readonly
+                        id="org"
+                        label="Organization (O)"
+                        value={selectedCertificate} />
+                    <InputText
+                        readonly
+                        id="cn"
+                        label="Organization Unit (OU)"
+                        value={selectedCertificate} />
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-600">Issued by</Typography.Text>
+            <Layout.Stack gap="l">
+                <InputText readonly id="cn" label="Common Name (CN)" value={selectedCertificate} />
+                <Layout.Stack direction="row" gap="l">
+                    <InputText
+                        readonly
+                        id="byo"
+                        label="Organization (O)"
+                        value={selectedCertificate} />
+                    <InputText
+                        readonly
+                        id="byou"
+                        label="Organization Unit (OU)"
+                        value={selectedCertificate} />
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-600">Validity period</Typography.Text>
+            <Layout.Stack direction="row" gap="l">
+                <InputText readonly id="issued" label="Issued on" value={selectedCertificate} />
+                <InputText readonly id="expires" label="Expires on" value={selectedCertificate} />
+            </Layout.Stack>
+        </Layout.Stack>
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-600">SHA-256 fingerprints</Typography.Text>
+            <Layout.Stack gap="l">
+                <InputTextarea
+                    readonly
+                    id="cetificate"
+                    label="Certificate"
+                    value={selectedCertificate} />
+                <InputTextarea readonly id="pb" label="Public key" value={selectedCertificate} />
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit danger>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/deleteCertificateModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/deleteCertificateModal.svelte
new file mode 100644
index 000000000..b0e10d38a
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/deleteCertificateModal.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Confirm } from '$lib/components';
+
+    export let show = false;
+    export let selectedCertificate; //TODO: add type
+
+    let error = '';
+
+    async function deleteCertificate() {
+        // not marked as unused.
+        console.log(selectedCertificate);
+
+        try {
+            //TODO: add method
+            await invalidate(Dependencies.DOMAIN);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Certificate has been deleted`
+            });
+            trackEvent(Submit.CertificateDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.CertificateDelete);
+        }
+    }
+</script>
+
+<Confirm title="Delete certificate" bind:open={show} onSubmit={deleteCertificate} bind:error>
+    Are you sure you want to delete this SSL certificate? This action is irreversible.
+</Confirm>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte
new file mode 100644
index 000000000..06b7fe9b1
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+    import { EmptySearch, Id, PaginationWithLimit } from '$lib/components/index.js';
+    import { Button } from '$lib/elements/forms';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import Container from '$lib/layout/container.svelte';
+    import { IconDotsHorizontal, IconInfo, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import SearchQuery from '$lib/components/searchQuery.svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import CertificateInfoModal from './certificateInfoModal.svelte';
+    import DeleteCertificateModal from './deleteCertificateModal.svelte';
+
+    export let data;
+
+    let showDelete = false;
+    let showAdvancedInfo = false;
+    let selectedCertificate = null; //TODO: add type
+
+    const now = new Date();
+</script>
+
+<Container>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery placeholder="Search by ID" />
+    </Layout.Stack>
+
+    {#if data.certificates.total}
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'id' },
+                { id: 'renewal' },
+                { id: 'expiry' },
+                { id: 'actions', width: 40 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="id" {root}>ID</Table.Header.Cell>
+                <Table.Header.Cell column="renewal" {root}>Renewal</Table.Header.Cell>
+                <Table.Header.Cell column="expiry" {root}>Expiry date</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each data.certificates.certificates as certificate}
+                {@const isExpired = new Date(certificate.expiresAt) < now}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="id" {root}>
+                        <Id value={certificate.$id}>{certificate.$id}</Id>
+                    </Table.Cell>
+                    <Table.Cell column="renewal" {root}>
+                        {#if certificate?.renewAt && !isExpired}
+                            <Layout.Stack direction="row" gap="xs">
+                                {certificate.autoRenewal ? 'Auto' : ''}
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    content={`Next renewal in ${toLocaleDate(certificate.renewAt)}`}
+                                    type="success" />
+                            </Layout.Stack>
+                        {:else}
+                            -
+                        {/if}
+                    </Table.Cell>
+                    <Table.Cell column="expiry" {root}>
+                        {#if isExpired}
+                            <Tooltip>
+                                <Badge
+                                    variant="secondary"
+                                    content="Expired"
+                                    type="warning"
+                                    size="xs" />
+                                <span slot="tooltip">
+                                    {toLocaleDateTime(certificate?.expiresAt)}
+                                </span>
+                            </Tooltip>
+                        {:else}
+                            {toLocaleDate(certificate?.expiresAt)}
+                        {/if}
+                    </Table.Cell>
+
+                    <Table.Cell column="actions" {root}>
+                        <Layout.Stack direction="row" justifyContent="flex-end">
+                            <Popover let:toggle placement="bottom-start" padding="none">
+                                <Button
+                                    text
+                                    icon
+                                    on:click={(e) => {
+                                        e.preventDefault();
+                                        toggle(e);
+                                    }}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+
+                                <svelte:fragment slot="tooltip" let:toggle>
+                                    <ActionMenu.Root>
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconInfo}
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                selectedCertificate = certificate;
+                                                showAdvancedInfo = true;
+                                                toggle(e);
+                                            }}>
+                                            Advanced information
+                                        </ActionMenu.Item.Button>
+                                        <ActionMenu.Item.Button
+                                            status="danger"
+                                            leadingIcon={IconTrash}
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                selectedCertificate = certificate;
+                                                showDelete = true;
+                                                toggle(e);
+                                            }}>
+                                            Delete
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                </svelte:fragment>
+                            </Popover>
+                        </Layout.Stack>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
+
+        <PaginationWithLimit
+            name="Domains"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.certificates.total} />
+    {:else if data?.search}
+        <EmptySearch hidePages bind:search={data.search} target="certificates">
+            <svelte:fragment slot="actions">
+                <Button
+                    secondary
+                    href={`${base}/organization-${page.params.organization}/domains/domain-${page.params.domain}/certificates`}>
+                    Clear search
+                </Button>
+            </svelte:fragment>
+        </EmptySearch>
+    {:else}
+        <Card.Base padding="none">
+            <Empty
+                type="secondary"
+                title="No certificates found"
+                description="You don't have any certificates yet.">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        href="#/"
+                        text
+                        event="empty_documentation"
+                        size="s"
+                        ariaLabel="add domain">Documentation</Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
+    {/if}
+</Container>
+
+{#if showAdvancedInfo}
+    <CertificateInfoModal {selectedCertificate} bind:show={showAdvancedInfo} />
+{/if}
+{#if showDelete}
+    <DeleteCertificateModal {selectedCertificate} bind:show={showDelete} />
+{/if}
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.ts b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.ts
new file mode 100644
index 000000000..0e7b2089e
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.ts
@@ -0,0 +1,62 @@
+import { PAGE_LIMIT, Dependencies } from '$lib/constants';
+import { getSearch, pageToOffset, getLimit, getPage } from '$lib/helpers/load';
+
+export const load = async ({ parent, depends, url, route }) => {
+    depends(Dependencies.DOMAIN);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const search = getSearch(url);
+    const { domain } = await parent();
+
+    //TODO: fetch certificates
+    return {
+        domain,
+        certificates: mockCertificates,
+        offset,
+        limit,
+        search
+    };
+};
+
+const mockCertificates = {
+    total: 3,
+    certificates: [
+        {
+            $id: 'cert_123abc',
+            domain: 'example.com',
+            renewAt: '2023-01-15T10:30:00Z',
+            autoRenewal: true,
+            issuedAt: '2023-01-15T10:30:00Z',
+            expiresAt: '2026-01-15T10:30:00Z',
+            issuer: "Let's Encrypt",
+            status: 'active',
+            type: 'SSL/TLS',
+            algorithm: 'RSA 2048'
+        },
+        {
+            $id: 'cert_456def',
+            domain: '*.example.com',
+            renewAt: '2023-03-20T14:15:00Z',
+            autoRenewal: false,
+            issuedAt: '2023-03-20T14:15:00Z',
+            expiresAt: '2024-03-20T14:15:00Z',
+            issuer: "Let's Encrypt",
+            status: 'active',
+            type: 'SSL/TLS',
+            algorithm: 'RSA 2048'
+        },
+        {
+            $id: 'cert_789ghi',
+            domain: 'api.example.com',
+            renewAt: '2023-06-01T09:00:00Z',
+            autoRenewal: false,
+            issuedAt: '2023-06-01T09:00:00Z',
+            expiresAt: '2023-12-01T09:00:00Z',
+            issuer: "Let's Encrypt",
+            status: 'expired',
+            type: 'SSL/TLS',
+            algorithm: 'RSA 2048'
+        }
+    ]
+};
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+layout.ts b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+layout.ts
new file mode 100644
index 000000000..fed93acca
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+layout.ts
@@ -0,0 +1,14 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ depends, params }) => {
+    depends(Dependencies.DOMAIN);
+
+    return {
+        domain: await sdk.forConsole.domains.get(params.domain),
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
new file mode 100644
index 000000000..1cf76a521
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import {
+        ActionMenu,
+        Card,
+        Empty,
+        Icon,
+        InlineCode,
+        Layout,
+        Button as PinkButton,
+        Popover,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import DomainMetrics from './domainMetrics.svelte';
+    import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import { Button } from '$lib/elements/forms';
+    import { IconDownload, IconPlus, IconUpload } from '@appwrite.io/pink-icons-svelte';
+    import { ViewSelector } from '$lib/components';
+    import { View } from '$lib/helpers/load';
+    import { columns, presets } from './store';
+    import CreateRecordModal from './createRecordModal.svelte';
+    import Table from './table.svelte';
+    import AddPresetModal from './addPresetModal.svelte';
+    import ImportRecordModal from './importRecordModal.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+
+    export let data;
+
+    let showCreate = false;
+    let showPresetModal = false;
+    let showImportModal = false;
+    let selectedPreset = '';
+
+    async function downloadRecords() {
+        try {
+            const zone = await sdk.forConsole.domains.getZone(data.domain.$id);
+
+            if ('message' in zone) {
+                const blob = new Blob([zone.message as string], { type: 'text/plain' });
+
+                const downloadLink = document.createElement('a');
+                downloadLink.href = URL.createObjectURL(blob);
+                downloadLink.download = `${data.domain.domain}.txt`;
+
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                document.body.removeChild(downloadLink);
+                URL.revokeObjectURL(downloadLink.href);
+            } else {
+                throw new Error('Failed to download records');
+            }
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<Container>
+    <Layout.Stack gap="xxxl">
+        <DomainMetrics domain={data.domain} />
+
+        <Layout.Stack gap="l">
+            {#if data.recordList.total}
+                <Layout.Stack direction="row" justifyContent="space-between">
+                    <Layout.Stack direction="row" gap="s" inline>
+                        <Button secondary on:click={() => (showImportModal = true)}>
+                            <Icon icon={IconUpload} size="s" slot="start" />
+                            Import zone file
+                        </Button>
+                        <Tooltip>
+                            <PinkButton.Button variant="secondary" icon on:click={downloadRecords}>
+                                <Icon icon={IconDownload} size="s" />
+                            </PinkButton.Button>
+                            <svelte:fragment slot="tooltip">Export as .txt</svelte:fragment>
+                        </Tooltip>
+                    </Layout.Stack>
+                    <Layout.Stack direction="row" gap="s" inline>
+                        <ViewSelector view={View.Table} {columns} hideView />
+                        <Popover let:toggle padding="none">
+                            <Button secondary on:click={toggle}>Add preset</Button>
+                            <svelte:fragment slot="tooltip" let:toggle>
+                                <ActionMenu.Root>
+                                    {#each presets as preset}
+                                        <ActionMenu.Item.Button
+                                            on:click={(e) => {
+                                                toggle(e);
+                                                selectedPreset = preset;
+                                                showPresetModal = true;
+                                            }}>{preset}</ActionMenu.Item.Button>
+                                    {/each}
+                                </ActionMenu.Root>
+                            </svelte:fragment>
+                        </Popover>
+                        <Button size="s" on:click={() => (showCreate = true)}>
+                            <Icon size="s" icon={IconPlus} slot="start" />
+                            Create record
+                        </Button>
+                    </Layout.Stack>
+                </Layout.Stack>
+                <Table {data} />
+            {:else}
+                <Card.Base padding="none">
+                    <Empty
+                        src={$app.themeInUse === 'dark'
+                            ? `${base}/images/domains/empty-records-dark.svg`
+                            : `${base}/images/domains/empty-records-light.svg`}
+                        title="Get started with Appwrite DNS">
+                        <span slot="description">
+                            Navigate to your domain provider and update the nameservers to <InlineCode
+                                code="ns1.appwrite-dns.com"
+                                size="s" /> and <InlineCode code="ns2.appwrite-dns.com" size="s" />.
+                            Note that DNS changes may take time to propagate fully.
+                        </span>
+                        <svelte:fragment slot="actions">
+                            <Button
+                                external
+                                href="#"
+                                text
+                                event="empty_documentation"
+                                size="s"
+                                ariaLabel="add domain">Documentation</Button>
+
+                            <Button secondary size="s">Verify DNS setup</Button>
+                        </svelte:fragment>
+                    </Empty>
+                </Card.Base>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Container>
+
+{#if showCreate}
+    <CreateRecordModal bind:show={showCreate} />
+{/if}
+
+{#if showPresetModal}
+    <AddPresetModal bind:show={showPresetModal} {selectedPreset} />
+{/if}
+
+{#if showImportModal}
+    <ImportRecordModal bind:show={showImportModal} />
+{/if}
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.ts b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.ts
new file mode 100644
index 000000000..6c3990efa
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.ts
@@ -0,0 +1,22 @@
+import { PAGE_LIMIT } from '$lib/constants';
+import { Dependencies } from '$lib/constants';
+import { pageToOffset } from '$lib/helpers/load';
+import { getLimit } from '$lib/helpers/load';
+import { getPage } from '$lib/helpers/load';
+import { sdk } from '$lib/stores/sdk.js';
+
+export const load = async ({ parent, depends, url, route }) => {
+    depends(Dependencies.DOMAIN);
+
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const { domain } = await parent();
+
+    return {
+        domain,
+        recordList: await sdk.forConsole.domains.listRecords(domain.$id),
+        offset,
+        limit
+    };
+};
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/addPresetModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/addPresetModal.svelte
new file mode 100644
index 000000000..5305ee2b7
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/addPresetModal.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Skeleton, Table } from '@appwrite.io/pink-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { sdk } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import type { DnsRecordsList } from '$lib/sdk/domains';
+    import { presets } from './store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { createRecord } from '$lib/helpers/domains';
+
+    export let show = false;
+    export let selectedPreset: (typeof presets)[number];
+    let records: DnsRecordsList;
+    let error = '';
+    async function fetchPreset() {
+        switch (selectedPreset.toLowerCase()) {
+            case 'zoho':
+                return await sdk.forConsole.domains.getPresetZoho(page.params.domain);
+            case 'mailgun':
+                return await sdk.forConsole.domains.getPresetMailgun(page.params.domain);
+            case 'outlook':
+                return await sdk.forConsole.domains.getPresetOutlook(page.params.domain);
+            case 'proton mail':
+                return await sdk.forConsole.domains.getPresetProtonMail(page.params.domain);
+            case 'icloud':
+                return await sdk.forConsole.domains.getPresetICloud(page.params.domain);
+            case 'google workspace':
+                return await sdk.forConsole.domains.getPresetGoogleWorkspace(page.params.domain);
+        }
+    }
+
+    async function handleSubmit() {
+        try {
+            if (records.total) {
+                const promises = records.dnsRecords.map(
+                    async (record) => await createRecord(record, page.params.domain)
+                );
+                await Promise.all(promises);
+            }
+            invalidate(Dependencies.DOMAIN);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Preset has been added`
+            });
+            trackEvent(Submit.RecordCreate, {
+                preset: selectedPreset
+            });
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.RecordCreate);
+        }
+    }
+</script>
+
+<Modal
+    title={`Add ${capitalize(selectedPreset)} DNS record`}
+    bind:show
+    bind:error
+    onSubmit={handleSubmit}>
+    <span slot="description">
+        Forward emails to your domain using the following {capitalize(selectedPreset)} DNS records.
+    </span>
+
+    <Table.Root columns={5} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Type</Table.Header.Cell>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Value</Table.Header.Cell>
+            <Table.Header.Cell {root}>TTL</Table.Header.Cell>
+            <Table.Header.Cell {root}>Priority</Table.Header.Cell>
+        </svelte:fragment>
+        {#await fetchPreset()}
+            {#each Array(2) as _}
+                <Table.Row.Base {root}>
+                    {#each Array(5) as _}
+                        <Table.Cell {root}>
+                            <Skeleton variant="line" width={70} height={15} />
+                        </Table.Cell>
+                    {/each}
+                </Table.Row.Base>
+            {/each}
+        {:then presetData}
+            {#each presetData.dnsRecords as record}
+                <Table.Row.Base {root}>
+                    <Table.Cell {root}>{record.type}</Table.Cell>
+                    <Table.Cell {root}>{record.name}</Table.Cell>
+                    <Table.Cell {root}>{record.value}</Table.Cell>
+                    <Table.Cell {root}>{record.ttl}</Table.Cell>
+                    <Table.Cell {root}>{record.priority}</Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        {/await}
+    </Table.Root>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button size="s" submit>Add</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/breadcrumbs.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/breadcrumbs.svelte
new file mode 100644
index 000000000..19c789a0f
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/breadcrumbs.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
new file mode 100644
index 000000000..644732c58
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+    import {
+        Button,
+        InputNumber,
+        InputSelect,
+        InputText,
+        InputTextarea
+    } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Icon, Layout, Tooltip, Input } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
+    import { recordTypes } from './store';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import type { RecordType } from '$lib/stores/domains';
+    import { createRecord } from '$lib/helpers/domains';
+
+    export let show = false;
+
+    let name: string;
+    let type: RecordType = 'A';
+    let value: string;
+    let ttl = 3600;
+    let priority: number;
+    let comment: string;
+    let error = '';
+    let weight: number;
+    let port: number;
+
+    async function handleSubmit() {
+        const record = {
+            name,
+            type,
+            value,
+            ttl,
+            priority,
+            comment,
+            weight,
+            port
+        };
+        try {
+            await createRecord(record, page.params.domain);
+            name = '';
+            type = 'A';
+            value = '';
+            ttl = 3600;
+            priority = undefined;
+            comment = '';
+            error = '';
+            show = false;
+            invalidate(Dependencies.DOMAINS);
+            addNotification({
+                type: 'success',
+                message: `Record has been created`
+            });
+            trackEvent(Submit.RecordCreate);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.RecordCreate);
+        }
+    }
+</script>
+
+<Modal title="Create DNS record" bind:show bind:error onSubmit={handleSubmit}>
+    <span slot="description">
+        DNS records map domain names to IP addresses or other resources.
+    </span>
+    <Layout.Stack gap="l">
+        <InputText id="name" label="Name" placeholder="subdomain" bind:value={name} required />
+        <Layout.Stack gap="xs">
+            <InputSelect options={recordTypes} bind:value={type} id="type" label="Type" required />
+            <Input.Helper state="default">
+                {recordTypes.find((option) => option.value === type)?.helper}
+            </Input.Helper>
+        </Layout.Stack>
+
+        <InputText id="value" label="Value" placeholder="76.75.21.21" bind:value>
+            <Tooltip slot="info">
+                <Icon icon={IconInfo} size="s" />
+                <span slot="tooltip">
+                    Enter the target or destination for this DNS record (e.g., IP address, hostname,
+                    or other required data)
+                </span>
+            </Tooltip>
+        </InputText>
+        <Layout.Stack direction="row" gap="l">
+            <InputNumber id="ttl" label="TTL" placeholder="Enter number" bind:value={ttl}>
+                <Tooltip slot="info">
+                    <Icon icon={IconInfo} size="s" />
+                    <span slot="tooltip">
+                        TTL defines how long DNS information is cached. Lower values update faster;
+                        higher values reduce server load.
+                    </span>
+                </Tooltip>
+            </InputNumber>
+            {#if type === 'MX'}
+                <InputNumber
+                    id="priority"
+                    label="Priority"
+                    placeholder="Enter number"
+                    bind:value={priority}>
+                    <Tooltip slot="info">
+                        <Icon icon={IconInfo} size="s" />
+                        <span slot="tooltip">
+                            Sets the priority for this DNS record. Lower numbers indicate higher
+                            priority (e.g., 10 is higher than 20).
+                        </span>
+                    </Tooltip>
+                </InputNumber>
+            {/if}
+        </Layout.Stack>
+        {#if type === 'SRV'}
+            <Layout.Stack direction="row" gap="l">
+                <InputNumber id="port" label="Port" placeholder="Enter port" bind:value={port} />
+                <InputNumber
+                    id="weight"
+                    label="Weight"
+                    placeholder="Enter weight"
+                    bind:value={weight} />
+            </Layout.Stack>
+        {/if}
+
+        <InputTextarea
+            id="comment"
+            label="Comment"
+            placeholder="Provide an explanation of this DNS record's purpose"
+            bind:value={comment} />
+    </Layout.Stack>
+
+    <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)/organization-[organization]/domains/domain-[domain]/deleteRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/deleteRecordModal.svelte
new file mode 100644
index 000000000..e2ab20c38
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/deleteRecordModal.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Confirm } from '$lib/components';
+    import { page } from '$app/state';
+    import type { DnsRecord } from '$lib/sdk/domains';
+
+    export let show = false;
+    export let selectedRecord: DnsRecord;
+
+    let error = '';
+
+    async function deleteDomain() {
+        try {
+            await sdk.forConsole.domains.deleteRecord(page.params.domain, selectedRecord.$id);
+            await invalidate(Dependencies.DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Record has been deleted'
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+</script>
+
+<Confirm onSubmit={deleteDomain} title="Delete domain" bind:open={show} bind:error>
+    <p>Are you sure you want to delete this record? This action is irreversible.</p>
+</Confirm>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte
new file mode 100644
index 000000000..c3029bf68
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Trim, UsageCard } from '$lib/components';
+    import { toLocaleDate } from '$lib/helpers/date';
+    import type { Domain } from '$lib/sdk/domains';
+    import { Link } from '$lib/elements';
+    import { protocol } from '$routes/(console)/store';
+
+    export let domain: Domain;
+    let metrics = [
+        {
+            value: domain.domain,
+            description: 'Domain'
+        },
+        {
+            value: domain?.registrar || '-',
+            description: 'Registrar'
+        },
+        {
+            value: domain?.nameservers ? domain?.nameservers : '-',
+            description: 'Nameservers'
+        },
+        {
+            value: domain?.expiry ? toLocaleDate(domain?.expiry) : '-',
+            description: 'Exipiry date'
+        },
+        {
+            value: domain?.autoRenewal ? 'On' : 'Off',
+            description: 'Auto renewal'
+        },
+        {
+            value: domain?.renewalPrice || '-',
+            description: 'Renewal price'
+        }
+    ];
+</script>
+
+<Layout.Grid gap="m" columnsL={2} columns={1}>
+    <Layout.Stack direction="row" gap="m">
+        {#each metrics.slice(0, 3) as metric}
+            {#if metric.description === 'Domain'}
+                <UsageCard description={metric.description}>
+                    <Link external href={`${$protocol}/${metric.value}`} variant="quiet">
+                        <Trim alternativeTrim>
+                            {metric.value}
+                        </Trim>
+                    </Link>
+                </UsageCard>
+            {:else}
+                <UsageCard description={metric.description} bind:value={metric.value} />
+            {/if}
+        {/each}
+    </Layout.Stack>
+    <Layout.Stack direction="row" gap="m">
+        {#each metrics.slice(3) as metric}
+            <UsageCard description={metric.description} bind:value={metric.value} />
+        {/each}
+    </Layout.Stack>
+</Layout.Grid>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte
new file mode 100644
index 000000000..313e69e80
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Id, Tab } from '$lib/components';
+    import Tabs from '$lib/components/tabs.svelte';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { domain } from './store';
+
+    const path = `${base}/organization-${page.params.organization}/domains/domain-${page.params.domain}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'DNS records',
+            event: 'dns-records'
+        },
+        // {
+        //     href: `${path}/certificates`,
+        //     title: 'Certificates',
+        //     event: 'certificates'
+        // },
+        {
+            href: `${path}/settings`,
+            title: 'Settings',
+            event: 'settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`${base}/organization-${page.params.organization}/domains`}>
+            {$domain.domain}
+        </CoverTitle>
+        <Id value={$domain.$id}>{$domain.$id}</Id>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab
+                href={tab.href}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/importRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/importRecordModal.svelte
new file mode 100644
index 000000000..c9c47ebba
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/importRecordModal.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { removeFile } from '$lib/helpers/files';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+    let files: FileList;
+    let error = '';
+
+    async function handleSubmit() {
+        try {
+            if (!files?.length) return;
+
+            const file = files[0];
+            const content = await file.text();
+
+            await sdk.forConsole.domains.updateZone(page.params.domain, content);
+            invalidate(Dependencies.DOMAIN);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `DNS records have been imported successfully`
+            });
+            trackEvent(Submit.RecordCreate);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.RecordCreate);
+        }
+    }
+
+    $: filesList = files?.length
+        ? Array.from(files).map((f) => {
+              return {
+                  ...f,
+                  extension: f.type,
+                  removable: true
+              };
+          })
+        : [];
+</script>
+
+<Modal title="Import zone file" bind:show bind:error onSubmit={handleSubmit}>
+    <span slot="description">
+        Import DNS zone file to apply its records to your domain. <b
+            >If conflicts arise, the upload will be blocked</b
+        >.
+    </span>
+
+    <Layout.Stack gap="xl">
+        <Layout.Stack gap="s">
+            <Typography.Text color="--fgcolor-neutral-primary">
+                Upload a .txt file with your DNS records
+            </Typography.Text>
+            <Upload.Dropzone bind:files extensions={['txt']}>
+                <Layout.Stack alignItems="center" gap="s">
+                    <Layout.Stack alignItems="center" gap="s">
+                        <Layout.Stack
+                            alignItems="center"
+                            justifyContent="center"
+                            direction="row"
+                            gap="s">
+                            <Typography.Text variant="l-500">
+                                Drag and drop file here or click to upload
+                            </Typography.Text>
+                            <Tooltip>
+                                <Layout.Stack alignItems="center" justifyContent="center" inline>
+                                    <Icon icon={IconInfo} size="s" />
+                                </Layout.Stack>
+                                <svelte:fragment slot="tooltip"
+                                    >Only .txt files allowed</svelte:fragment>
+                            </Tooltip>
+                        </Layout.Stack>
+                        <Typography.Caption variant="400">Max file size 10MB</Typography.Caption>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Upload.Dropzone>
+        </Layout.Stack>
+        {#if files?.length}
+            <Upload.List
+                bind:files={filesList}
+                on:remove={(e) => (files = removeFile(e.detail, files))} />
+        {/if}
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button size="s" submit disabled={!files?.length}>Import</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte
new file mode 100644
index 000000000..fc70514a7
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import ChangeOrganization from './changeOrganization.svelte';
+    import DeleteDomain from './deleteDomain.svelte';
+    import type { OrganizationList } from '$lib/stores/organization';
+
+    export let data;
+    // cloud only, so OrganizationList is returned!
+    let organizations: OrganizationList = data.organizations as OrganizationList;
+</script>
+
+<Container>
+    <ChangeOrganization domain={data.domain} {organizations} />
+    <DeleteDomain domain={data.domain} />
+</Container>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.ts b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.ts
new file mode 100644
index 000000000..af454f6d5
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.ts
@@ -0,0 +1,17 @@
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import { isCloud } from '$lib/system';
+
+export const load = async ({ parent, depends }) => {
+    depends(Dependencies.DOMAINS);
+
+    const organizations = !isCloud
+        ? await sdk.forConsole.teams.list()
+        : await sdk.forConsole.billing.listOrganization();
+
+    const { domain } = await parent();
+    return {
+        domain,
+        organizations
+    };
+};
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/changeOrganization.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/changeOrganization.svelte
new file mode 100644
index 000000000..d1300c351
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/changeOrganization.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputSelect } from '$lib/elements/forms';
+    import type { Domain } from '$lib/sdk/domains';
+    import { addNotification } from '$lib/stores/notifications';
+    import type { OrganizationList } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
+
+    export let domain: Domain;
+    export let organizations: OrganizationList;
+    let selectedOrg: string = null;
+
+    async function moveDomain() {
+        try {
+            await sdk.forConsole.domains.updateTeam(domain.$id, selectedOrg);
+            addNotification({
+                type: 'success',
+                message: 'Domain moved successfully'
+            });
+            await goto(`/console/organization-${selectedOrg}/domains/`);
+            await invalidate(Dependencies.ORGANIZATION);
+            await invalidate(Dependencies.DOMAINS);
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        }
+    }
+
+    $: options = organizations.total
+        ? organizations.teams
+              .map((org) => ({ label: org.name, value: org.$id }))
+              .filter((org) => org.value !== page.params.organization)
+        : [];
+</script>
+
+<CardGrid>
+    <svelte:fragment slot="title">Change organization</svelte:fragment>
+    Select an organization to move this domain. Project rules will remain unchanged to prevent disruptions.
+    <svelte:fragment slot="aside">
+        <InputSelect
+            id="orgs"
+            label="Move to"
+            required
+            placeholder="Select destination"
+            disabled={options?.length === 0}
+            {options}
+            bind:value={selectedOrg} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button on:click={moveDomain} disabled={!selectedOrg || options?.length === 0}>Move</Button>
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/deleteDomain.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/deleteDomain.svelte
new file mode 100644
index 000000000..49fbc915e
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/deleteDomain.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { BoxAvatar, CardGrid } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import Delete from '../../deleteDomainModal.svelte';
+    import type { Domain } from '$lib/sdk/domains';
+
+    export let domain: Domain;
+    let show = false;
+</script>
+
+<CardGrid>
+    <svelte:fragment slot="title">Delete domain</svelte:fragment>
+    Deleting this domain will remove the domain from all associated projects.
+    <svelte:fragment slot="aside">
+        <BoxAvatar>
+            <svelte:fragment slot="title">
+                <h6 class="u-bold u-trim-1">{domain.domain}</h6>
+            </svelte:fragment>
+            <p>Last updated: {toLocaleDateTime(domain.$updatedAt)}</p>
+        </BoxAvatar>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button secondary on:click={() => (show = true)}>Delete</Button>
+    </svelte:fragment>
+</CardGrid>
+
+<Delete bind:show selectedDomain={domain} />
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/store.ts b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/store.ts
new file mode 100644
index 000000000..b427b2c64
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/store.ts
@@ -0,0 +1,70 @@
+import { page } from '$app/stores';
+import type { Column } from '$lib/helpers/types';
+import type { Domain } from '$lib/sdk/domains';
+import { derived, writable } from 'svelte/store';
+
+export const domain = derived(page, ($page) => $page.data.domain as Domain);
+export const columns = writable<Column[]>([
+    { id: 'name', title: 'Name', type: 'string' },
+    { id: 'type', title: 'Type', type: 'string' },
+    { id: 'value', title: 'Value', type: 'string' },
+    { id: 'ttl', title: 'TTL', type: 'integer' },
+    { id: 'priority', title: 'Priority', type: 'integer', hide: true },
+    { id: 'comment', title: 'Comment', type: 'string', hide: true },
+    { id: '$createdAt', title: 'Created', type: 'datetime' }
+]);
+
+export const recordTypes = [
+    {
+        value: 'A',
+        label: 'A ',
+        helper: 'A records map a domain to an IPv4 address, allowing browsers to find your website by translating the domain name to an IP address.'
+    },
+    {
+        value: 'AAAA',
+        label: 'AAAA ',
+        helper: 'AAAA records map a domain to an IPv6 address, providing the same function as A records but for IPv6-enabled devices.'
+    },
+    {
+        value: 'CNAME',
+        label: 'CNAME',
+        helper: 'CNAME records alias one domain name to another, allowing you to point subdomains or other domain names to an existing domain.'
+    },
+    {
+        value: 'MX',
+        label: 'MX ',
+        helper: 'MX records specify mail servers responsible for receiving emails for a domain, helping route email traffic to the correct mail server.'
+    },
+    {
+        value: 'TXT',
+        label: 'TXT',
+        helper: 'TXT records store arbitrary text data in DNS, commonly used for verification purposes, such as domain ownership or email security settings.'
+    },
+    {
+        value: 'NS',
+        label: 'NS',
+        helper: "NS records define the authoritative DNS servers for a domain, directing queries to the servers that manage the domain's DNS settings."
+    },
+    {
+        value: 'SRV',
+        label: 'SRV',
+        helper: 'SRV records specify the location (hostname and port number) of servers for specific services, directing traffic to particular servers based on service types.'
+    },
+    {
+        value: 'CAA',
+        label: 'CAA',
+        helper: 'CAA records define which certificate authorities can issue SSL certificates for your domain. To avoid setup issues, make sure certainly.com is authorized.'
+    },
+    {
+        value: 'HTTPS',
+        label: 'HTTPS',
+        helper: 'HTTPS records define which service or endpoint handles secure HTTPS traffic for your domain, typically used in SSL/TLS configurations.'
+    },
+    {
+        value: 'ALIAS',
+        label: 'ALIAS',
+        helper: 'ALIAS records are similar to CNAMEs but can be used for the root domain, allowing you to point your domain to another domain or server.'
+    }
+];
+
+export const presets = ['Zoho', 'Mailgun', 'Outlook', 'Proton Mail', 'iCloud', 'Google Workspace'];
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
new file mode 100644
index 000000000..ee9fba69a
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+    import { PaginationWithLimit } from '$lib/components';
+    import {
+        ActionMenu,
+        Button,
+        InteractiveText,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconDotsHorizontal, IconPencil, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import { columns } from './store';
+    import DeleteRecordModal from './deleteRecordModal.svelte';
+    import EditRecordModal from './updateRecordModal.svelte';
+    import type { DnsRecord } from '$lib/sdk/domains';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+
+    export let data;
+
+    let showEdit = false;
+    let showDelete = false;
+    let selectedRecord: DnsRecord = null;
+</script>
+
+<Layout.Stack>
+    <Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+        <svelte:fragment slot="header" let:root>
+            {#each $columns as { id, title } (id)}
+                <Table.Header.Cell column={id} {root}>
+                    {title}
+                </Table.Header.Cell>
+            {/each}
+            <Table.Header.Cell column="actions" {root} />
+        </svelte:fragment>
+
+        {#each data.recordList.dnsRecords as record}
+            <Table.Row.Base {root}>
+                {#each $columns as column}
+                    <Table.Cell column={column.id} {root}>
+                        {#if column.id === 'name'}
+                            <Typography.Code>
+                                {record.name}
+                            </Typography.Code>
+                        {:else if column.id === 'type'}
+                            <Typography.Text>
+                                {record.type}
+                            </Typography.Text>
+                        {:else if column.id === 'value'}
+                            <InteractiveText variant="copy" text={record.value} isVisible />
+                        {:else if column.id === 'ttl'}
+                            <Typography.Text>
+                                {record.ttl}
+                            </Typography.Text>
+                        {:else if column.id === 'priority'}
+                            <Typography.Text>
+                                {record?.priority ?? '-'}
+                            </Typography.Text>
+                        {:else if column.id === 'comment'}
+                            <Typography.Text>
+                                {record?.comment ?? '-'}
+                            </Typography.Text>
+                        {:else if column.id === '$createdAt'}
+                            <DualTimeView time={record.$createdAt} />
+                        {/if}
+                    </Table.Cell>
+                {/each}
+                <Table.Cell column="actions" {root}>
+                    <Layout.Stack direction="row" justifyContent="flex-end">
+                        <Popover let:toggle placement="bottom-start" padding="none">
+                            <Button.Button
+                                variant="text"
+                                icon
+                                size="s"
+                                on:click={(e) => {
+                                    e.preventDefault();
+                                    toggle(e);
+                                }}>
+                                <Icon icon={IconDotsHorizontal} size="s" />
+                            </Button.Button>
+
+                            <svelte:fragment slot="tooltip" let:toggle>
+                                <ActionMenu.Root>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconPencil}
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedRecord = record;
+                                            showEdit = true;
+                                            toggle(e);
+                                        }}>
+                                        Update
+                                    </ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        status="danger"
+                                        leadingIcon={IconTrash}
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedRecord = record;
+                                            showDelete = true;
+                                            toggle(e);
+                                        }}>
+                                        Delete
+                                    </ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </svelte:fragment>
+                        </Popover>
+                    </Layout.Stack>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
+
+    <PaginationWithLimit
+        name="Domains"
+        limit={data.limit}
+        offset={data.offset}
+        total={data.recordList.total} />
+</Layout.Stack>
+
+{#if showDelete}
+    <DeleteRecordModal bind:show={showDelete} {selectedRecord} />
+{/if}
+{#if showEdit}
+    <EditRecordModal bind:show={showEdit} {selectedRecord} />
+{/if}
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/updateRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/updateRecordModal.svelte
new file mode 100644
index 000000000..a559d79be
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/updateRecordModal.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+    import {
+        Button,
+        InputNumber,
+        InputSelect,
+        InputText,
+        InputTextarea
+    } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Icon, Input, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { deepClone } from '$lib/helpers/object';
+    import type { DnsRecord } from '$lib/sdk/domains';
+    import { sdk } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import { recordTypes } from './store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+    export let selectedRecord: DnsRecord;
+
+    let record = deepClone(selectedRecord);
+    let error = '';
+
+    async function handleSubmit() {
+        try {
+            switch (record.type) {
+                case 'A':
+                    await sdk.forConsole.domains.updateRecordA(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+                case 'AAAA':
+                    await sdk.forConsole.domains.updateRecordAAAA(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+                case 'CNAME':
+                    await sdk.forConsole.domains.updateRecordCNAME(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+                case 'MX':
+                    await sdk.forConsole.domains.updateRecordMX(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.priority,
+                        record.comment
+                    );
+
+                    break;
+                case 'TXT':
+                    await sdk.forConsole.domains.updateRecordTXT(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+                case 'NS':
+                    await sdk.forConsole.domains.updateRecordNS(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+
+                case 'CAA':
+                    await sdk.forConsole.domains.updateRecordCAA(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+                case 'HTTPS':
+                    await sdk.forConsole.domains.updateRecordHTTPS(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+                case 'ALIAS':
+                    await sdk.forConsole.domains.updateRecordAlias(
+                        page.params.domain,
+                        record.$id,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.comment
+                    );
+
+                    break;
+
+                default:
+                    break;
+            }
+            show = false;
+            invalidate(Dependencies.DOMAINS);
+            addNotification({
+                type: 'success',
+                message: `Record has been updated`
+            });
+            trackEvent(Submit.RecordUpdate);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.RecordUpdate);
+        }
+    }
+
+    $: if (!show) {
+        selectedRecord = null;
+    }
+
+    $: isDisabled = !symmetricDifference(Object.values(record), Object.values(selectedRecord))
+        ?.length;
+</script>
+
+<Modal title="Update DNS record" bind:show bind:error onSubmit={handleSubmit}>
+    <span slot="description">
+        DNS records map domain names to IP addresses or other resources.
+    </span>
+    <Layout.Stack gap="l">
+        <InputText
+            id="name"
+            required
+            label="Name"
+            placeholder="subdomain"
+            bind:value={record.name} />
+        <Layout.Stack gap="xs">
+            <InputSelect options={recordTypes} bind:value={record.type} id="type" label="Type" />
+            <Input.Helper state="default">
+                {recordTypes.find((option) => option.value === record.type)?.helper}
+            </Input.Helper>
+        </Layout.Stack>
+
+        <InputText id="value" label="Value" placeholder="76.75.21.21" bind:value={record.value}>
+            <Tooltip slot="info">
+                <Icon icon={IconInfo} size="s" />
+                <span slot="tooltip">
+                    {recordTypes.find((option) => option.value === record.type)?.helper}
+                </span>
+            </Tooltip>
+        </InputText>
+        <Layout.Stack direction="row" gap="l">
+            <InputNumber id="ttl" label="TTL" placeholder="Enter number" bind:value={record.ttl}>
+                <Tooltip slot="info">
+                    <Icon icon={IconInfo} size="s" />
+                    <span slot="tooltip">
+                        TTL defines how long DNS information is cached. Lower values update faster;
+                        higher values reduce server load.
+                    </span>
+                </Tooltip>
+            </InputNumber>
+            <InputNumber
+                id="priority"
+                label="Priority"
+                placeholder="Enter number"
+                bind:value={record.priority}>
+                <Tooltip slot="info">
+                    <Icon icon={IconInfo} size="s" />
+                    <span slot="tooltip">
+                        Sets the priority for this DNS record. Lower numbers indicate higher
+                        priority (e.g., 10 is higher than 20).
+                    </span>
+                </Tooltip>
+            </InputNumber>
+        </Layout.Stack>
+
+        <InputTextarea
+            id="comment"
+            label="Comment"
+            placeholder="Provide an explanation of this DNS record's purpose"
+            bind:value={record.comment} />
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit disabled={isDisabled}>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
new file mode 100644
index 000000000..17183c1e9
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import type { Domain } from '$lib/sdk/domains';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { consoleVariables } from '$routes/(console)/store';
+    import {
+        Badge,
+        Layout,
+        Typography,
+        Table,
+        Fieldset,
+        Divider,
+        Tabs,
+        Input,
+        InteractiveText
+    } from '@appwrite.io/pink-svelte';
+
+    export let domain: Domain;
+
+    let verified = undefined;
+
+    // TODO: split _APP_DOMAINS_NAMESERVERS?
+    let nameservers = $consoleVariables?._APP_DOMAINS_NAMESERVERS.split(',') ?? [
+        'ns1.appwrite.io',
+        'ns2.appwrite.io'
+    ];
+
+    async function verifyStatus() {
+        try {
+            domain = await sdk.forConsole.domains.updateNameservers(domain.$id);
+            verified = domain.nameservers === 'Appwrite';
+            console.log(domain);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    $: console.log($consoleVariables._APP_DOMAINS_NAMESERVERS);
+</script>
+
+<Fieldset legend="Verification">
+    <Layout.Stack gap="xl">
+        <div>
+            <Tabs.Root variant="secondary" let:root>
+                <Tabs.Item.Button {root} active>Nameservers</Tabs.Item.Button>
+            </Tabs.Root>
+            <Divider />
+        </div>
+        <Layout.Stack gap="s">
+            <Layout.Stack gap="s" direction="row" alignItems="center">
+                <Typography.Text variant="l-500" color="--fgcolor-neutral-primary"
+                    >{domain.domain}</Typography.Text>
+
+                {#if verified === false}
+                    <Badge
+                        variant="secondary"
+                        type="error"
+                        size="xs"
+                        content="Verification failed" />
+                {:else}
+                    <Badge
+                        variant="secondary"
+                        type="warning"
+                        size="xs"
+                        content="Pending verification" />
+                {/if}
+            </Layout.Stack>
+            <Typography.Text variant="m-400">
+                Add the following nameservers on your DNS provider. Note that DNS changes may take
+                time to propagate fully.
+            </Typography.Text>
+        </Layout.Stack>
+
+        <Table.Root columns={[{ id: 'type' }, { id: 'value' }]} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+                <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+            </svelte:fragment>
+            {#each nameservers as nameserver}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="type" {root}>NS</Table.Cell>
+                    <Table.Cell column="value" {root}>
+                        <InteractiveText variant="copy-code" isVisible text={nameserver} />
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
+        <Input.Helper state="default">
+            A list of all domain providers and their DNS setting is available <Link
+                variant="muted"
+                external
+                href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+            >.
+        </Input.Helper>
+        <Divider />
+        <Layout.Stack direction="row" justifyContent="flex-end">
+            <Button on:click={verifyStatus}>Verify</Button>
+        </Layout.Stack>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte b/src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte
new file mode 100644
index 000000000..5f4853a3e
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import type { Domain } from '$lib/sdk/domains';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Input, InteractiveText, Layout, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { consoleVariables } from '$routes/(console)/store';
+
+    export let show = false;
+    export let selectedDomain: Domain;
+    let nameservers = $consoleVariables?._APP_DOMAINS_NAMESERVERS.split(',') ?? [
+        'ns1.appwrite.io',
+        'ns2.appwrite.io'
+    ];
+
+    let error = null;
+    async function retryDomain() {
+        try {
+            const domain = await sdk.forConsole.domains.updateNameservers(selectedDomain.$id);
+            show = false;
+            if (domain.nameservers === 'Appwrite') {
+                addNotification({
+                    type: 'error',
+                    message: `${selectedDomain.domain} has been verified`
+                });
+            } else {
+                addNotification({
+                    type: 'error',
+                    message: `Domain verification failed. Please check your domain settings or try again later`
+                });
+            }
+            await invalidate(Dependencies.DOMAINS);
+            trackEvent(Submit.DomainUpdateVerification);
+        } catch (e) {
+            error = e;
+            trackError(e, Submit.DomainUpdateVerification);
+        }
+    }
+
+    $: if (!show) {
+        error = null;
+    }
+</script>
+
+<Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary"
+                >{selectedDomain.domain}</Typography.Text>
+        </Layout.Stack>
+        <Typography.Text variant="m-400">
+            Add the following nameservers on your DNS provider. Note that DNS changes may take time
+            to propagate fully.
+        </Typography.Text>
+    </Layout.Stack>
+
+    <Table.Root let:root columns={2}>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Type</Table.Header.Cell>
+            <Table.Header.Cell {root}>Value</Table.Header.Cell>
+        </svelte:fragment>
+        {#each nameservers as nameserver}
+            <Table.Row.Base {root}>
+                <Table.Cell {root} column="ns">NS</Table.Cell>
+                <Table.Cell {root} column="action">
+                    <InteractiveText variant="copy" isVisible text={nameserver} />
+                </Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
+    <Input.Helper state="default">
+        A list of all domain providers and their DNS setting is available <Link
+            variant="muted"
+            external
+            href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+        >.
+    </Input.Helper>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Retry</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/domains/store.ts b/src/routes/(console)/organization-[organization]/domains/store.ts
new file mode 100644
index 000000000..87872c277
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/domains/store.ts
@@ -0,0 +1,11 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    { id: 'domain', title: 'Domain', type: 'string', width: { min: 300 } },
+    { id: 'registrar', title: 'Registrar', type: 'string', width: { min: 120 } },
+    { id: 'nameservers', title: 'Nameservers', type: 'string', width: { min: 120 } },
+    { id: 'expiry_date', title: 'Expiry Date', type: 'datetime', width: { min: 120 } },
+    { id: 'renewal', title: 'Renewal', type: 'datetime', width: { min: 120 } },
+    { id: 'auto_renewal', title: 'Auto Renewal', type: 'boolean', width: { min: 80 } }
+]);
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index c2438d1f3..9af8b5823 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -1,45 +1,25 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
-    import {
-        AvatarGroup,
-        DropList,
-        DropListItem,
-        DropListLink,
-        Heading,
-        Tab,
-        Tabs
-    } from '$lib/components';
+    import { page } from '$app/state';
+    import { AvatarGroup, Tab, Tabs } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
-    import {
-        daysLeftInTrial,
-        getServiceLimit,
-        plansInfo,
-        readOnly,
-        tierToPlan
-    } from '$lib/stores/billing';
-    import {
-        members,
-        newMemberModal,
-        newOrgModal,
-        organization,
-        organizationList
-    } from '$lib/stores/organization';
+    import { daysLeftInTrial, getServiceLimit, plansInfo, readOnly } from '$lib/stores/billing';
+    import { members, newMemberModal, organization } from '$lib/stores/organization';
     import {
         canSeeBilling,
+        canSeeDomains,
         canSeeProjects,
         canSeeTeams,
         isBilling,
         isOwner
     } from '$lib/stores/roles';
-    import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
+    import { GRACE_PERIOD_OVERRIDE, isCloud, SHOW_INIT_FEATURES } from '$lib/system';
+    import { IconGithub, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tooltip, Typography, Layout, Badge } from '@appwrite.io/pink-svelte';
 
     let areMembersLimited: boolean;
     $: organization.subscribe(() => {
@@ -49,17 +29,9 @@
             isCloud &&
             (($readOnly && !GRACE_PERIOD_OVERRIDE) || (isLimited && $members?.total >= limit));
     });
-    let showDropdown = false;
-
-    function createOrg() {
-        showDropdown = false;
-        if (isCloud) {
-            goto(`${base}/create-organization`);
-        } else newOrgModal.set(true);
-    }
 
     $: avatars = $members.memberships?.map((m) => m.userName || m.userEmail) ?? [];
-    $: organizationId = $page.params.organization;
+    $: organizationId = page.params.organization;
     $: path = `${base}/organization-${organizationId}`;
     $: tabs = [
         {
@@ -69,6 +41,12 @@
             hasChildren: true,
             disabled: !$canSeeProjects
         },
+        {
+            href: `${path}/domains`,
+            event: 'domains',
+            title: 'Domains',
+            disabled: !isCloud || !$canSeeDomains || !SHOW_INIT_FEATURES
+        },
         {
             href: `${path}/members`,
             title: 'Members',
@@ -101,93 +79,54 @@
 {#if $organization?.$id}
     <Cover>
         <svelte:fragment slot="header">
-            <DropList bind:show={showDropdown} placement="bottom-end" noArrow scrollable>
-                <button
-                    class="button is-text u-padding-inline-0 u-max-width-100-percent"
-                    on:click={() => (showDropdown = !showDropdown)}>
-                    <Heading tag="h1" size="4" class="u-flex u-cross-center u-gap-8">
-                        <span class="u-flex u-cross-center u-gap-8 u-min-width-0">
-                            <span class="u-trim">
-                                {$organization.name}
-                            </span>
-                            {#if isCloud && $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
-                                <Pill class="eyebrow-heading-3" style="--p-tag-content-height:2rem">
-                                    <span class="icon-github" aria-hidden="true" />EDUCATION
-                                </Pill>
-                            {:else if isCloud && $organization?.billingPlan === BillingPlan.FREE}
-                                <Pill class="eyebrow-heading-3" style="--p-tag-content-height:2rem"
-                                    >FREE</Pill>
-                            {/if}
-                            {#if isCloud && $organization?.billingTrialStartDate && $daysLeftInTrial > 0 && $organization.billingPlan !== BillingPlan.FREE && $plansInfo.get($organization.billingPlan)?.trialDays}
-                                <div
-                                    class="u-flex u-cross-center"
-                                    use:tooltip={{
-                                        content: `Your trial ends on ${toLocaleDate(
-                                            $organization.billingStartDate
-                                        )}. ${$daysLeftInTrial} days remaining.`
-                                    }}>
-                                    <Pill
-                                        class="eyebrow-heading-3"
-                                        style="--p-tag-content-height:2rem">TRIAL</Pill>
-                                </div>
-                            {/if}
-                        </span>
-                        <span
-                            class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
-                            aria-hidden="true" />
-                    </Heading>
-                </button>
-                <div data-sveltekit-preload-data="false" slot="list">
-                    {#each $organizationList.teams as org}
-                        <DropListLink
-                            href={`${base}/organization-${org.$id}`}
-                            on:click={() => (showDropdown = false)}>
-                            {org.name}
-                        </DropListLink>
-                    {/each}
-                </div>
-                <svelte:fragment slot="other">
-                    <section class="drop-section">
-                        <ul class="drop-list">
-                            <DropListItem icon="plus" on:click={createOrg}>
-                                New Organization
-                            </DropListItem>
-                        </ul>
-                    </section></svelte:fragment>
-            </DropList>
+            <span class="u-flex u-cross-center u-gap-8 u-min-width-0">
+                <Typography.Title color="--fgcolor-neutral-primary" size="xl" truncate>
+                    {$organization.name}
+                </Typography.Title>
+                {#if isCloud && $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
+                    <Badge variant="secondary" content="Education">
+                        <Icon icon={IconGithub} size="s" slot="start" />
+                    </Badge>
+                {:else if isCloud && $organization?.billingPlan === BillingPlan.FREE}
+                    <Badge variant="secondary" content="Free"></Badge>
+                {/if}
+                {#if isCloud && $organization?.billingTrialStartDate && $daysLeftInTrial > 0 && $organization.billingPlan !== BillingPlan.FREE && $plansInfo.get($organization.billingPlan)?.trialDays}
+                    <Tooltip>
+                        <Badge variant="secondary" content="Trial" />
+                        <svelte:fragment slot="tooltip">
+                            {`Your trial ends on ${toLocaleDate(
+                                $organization.billingStartDate
+                            )}. ${$daysLeftInTrial} days remaining.`}
+                        </svelte:fragment>
+                    </Tooltip>
+                {/if}
+            </span>
             <div class="u-margin-inline-start-auto">
-                <div class="u-flex u-gap-16 u-cross-center">
-                    <a href={`${path}/members`} class="is-not-mobile">
-                        <AvatarGroup size={40} {avatars} total={$members?.total ?? 0} />
-                    </a>
-                    <div
-                        use:tooltip={{
-                            content:
-                                $organization?.billingPlan === BillingPlan.FREE
-                                    ? `Upgrade to add more members`
-                                    : `You've reached the members limit for the ${
-                                          tierToPlan($organization?.billingPlan)?.name
-                                      } plan`,
-                            disabled: !areMembersLimited
-                        }}>
-                        {#if $isOwner}
-                            <Button
-                                secondary
-                                on:click={() => newMemberModal.set(true)}
-                                disabled={areMembersLimited}>
-                                <span class="icon-plus" aria-hidden="true" />
-                                <span class="text">Invite</span>
-                            </Button>
-                        {/if}
-                    </div>
-                </div>
+                <Layout.Stack direction="row" alignItems="center" gap="xl">
+                    {#if $members.total > 1}
+                        <a href={`${path}/members`} class="is-not-mobile">
+                            <AvatarGroup size="xs" {avatars} total={$members?.total ?? 0} />
+                        </a>
+                    {/if}
+
+                    {#if $isOwner}
+                        <Button
+                            secondary
+                            size="s"
+                            on:click={() => newMemberModal.set(true)}
+                            disabled={areMembersLimited}>
+                            <Icon icon={IconPlus} size="s" slot="start" />
+                            Invite
+                        </Button>
+                    {/if}
+                </Layout.Stack>
             </div>
         </svelte:fragment>
         <Tabs>
             {#each tabs as tab}
                 <Tab
                     href={tab.href}
-                    selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                     event={tab.event}>
                     {tab.title}
                 </Tab>
diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index 2982da1fd..e943c7158 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -1,43 +1,44 @@
 <script lang="ts">
+    import { page } from '$app/state';
+    import { AvatarInitials, PaginationWithLimit } from '$lib/components';
+    import { Button as ConsoleButton } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import {
-        AvatarInitials,
-        Drop,
-        DropList,
-        DropListItem,
-        PaginationWithLimit
-    } from '$lib/components';
     import Upgrade from '$lib/components/roles/upgrade.svelte';
-    import { Pill } from '$lib/elements';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { Container, ContainerHeader } from '$lib/layout';
     import { getRoleLabel } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { currentPlan, newMemberModal, organization } from '$lib/stores/organization';
+    import { newMemberModal, organization } from '$lib/stores/organization';
     import { isOwner } from '$lib/stores/roles';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import Delete from '../deleteMember.svelte';
-    import type { PageData } from './$types';
     import Edit from './edit.svelte';
+    import {
+        IconDotsHorizontal,
+        IconInfo,
+        IconPencil,
+        IconPlus,
+        IconRefresh,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Layout,
+        Table,
+        Badge,
+        Button,
+        Icon,
+        Typography,
+        Popover,
+        ActionMenu
+    } from '@appwrite.io/pink-svelte';
 
-    export let data: PageData;
+    export let data;
 
     let selectedMember: Models.Membership;
     let showDelete = false;
     let showEdit = false;
     let showDropdown = [];
-    let showPopover = false;
 
     const resend = async (member: Models.Membership) => {
         try {
@@ -47,7 +48,7 @@
                 member.userEmail,
                 undefined,
                 undefined,
-                `${$page.url.origin}${base}/invite`,
+                `${page.url.origin}${base}/invite`,
                 member.userName || undefined
             );
             addNotification({
@@ -66,147 +67,114 @@
 </script>
 
 <Container>
-    {#if data.organizationMembers.total}
-        <ContainerHeader
-            title="Members"
-            level="organization"
-            total={data.organizationMembers.total}
-            buttonText={$isOwner ? 'Invite' : ''}
-            buttonMethod={() => newMemberModal.set(true)}
-            customPillText="Members limited"
-            showPillMessage={!$currentPlan?.addons?.seats?.supported}
-            buttonDisabled={!$currentPlan?.addons?.seats?.supported} />
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Typography.Title>Members</Typography.Title>
+        <ConsoleButton on:mousedown={() => newMemberModal.set(true)} event="create_user" size="s">
+            <Icon size="s" icon={IconPlus} slot="start" />
+            <span class="text">Invite</span>
+        </ConsoleButton>
+    </Layout.Stack>
 
-        <TableScroll>
-            <TableHeader>
-                <TableCellHead width={160}>Name</TableCellHead>
-                <TableCellHead width={120}>Email</TableCellHead>
-                <div style:--p-col-width={120} class="table-thead-col" role="columnheader">
-                    <span class="u-flex u-cross-baseline">
-                        <span class="eyebrow-heading-3"> Role </span>
-                        <Drop isPopover bind:show={showPopover} display="inline-block">
-                            &nbsp;<button
-                                type="button"
-                                on:click={() => (showPopover = !showPopover)}
-                                class="tooltip"
-                                aria-label="input tooltip">
-                                <span
-                                    class="icon-info"
-                                    aria-hidden="true"
-                                    style="font-size: var(--icon-size-small)" />
-                            </button>
-                            <svelte:fragment slot="list">
-                                <div
-                                    class="dropped card u-max-width-300 u-break-word"
-                                    style:--card-border-radius="var(--border-radius-small)"
-                                    style:--p-card-padding=".75rem"
-                                    style:box-shadow="var(--shadow-large)">
-                                    <svelte:component this={Upgrade} />
-                                </div>
-                            </svelte:fragment>
-                        </Drop>
-                    </span>
-                </div>
-
-                <TableCellHead width={90}>2FA</TableCellHead>
-                {#if $isOwner}
-                    <TableCellHead width={30} />
-                {/if}
-            </TableHeader>
-            <TableBody
-                service="members"
-                total={data.organizationMembers.total}
-                event="members_list">
-                {#each data.organizationMembers.memberships as member, index}
-                    <TableRow>
-                        <TableCell title="Name">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                <AvatarInitials
-                                    size={40}
-                                    name={member.userName || member.userEmail} />
-                                <span class="text u-trim">
-                                    {member.userName || 'n/a'}
-                                </span>
-                                {#if member.invited && !member.joined}
-                                    <Pill warning>Pending</Pill>
-                                {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText title="Email">{member.userEmail}</TableCellText>
-                        <TableCellText title="Role"
-                            >{member.roles
-                                .map((role) => getRoleLabel(role))
-                                .join(', ')}</TableCellText>
-                        <TableCellText title="2FA">
-                            <Pill success={member.mfa}>
-                                {#if member.mfa}
-                                    <span
-                                        class="icon-check-circle u-color-text-success"
-                                        aria-hidden="true" />
-                                    <p class="text">enabled</p>
-                                {:else}
-                                    <p class="text">disabled</p>
-                                {/if}
-                            </Pill>
-                        </TableCellText>
-                        {#if $isOwner}
-                            <TableCell showOverflow right>
-                                <DropList
-                                    bind:show={showDropdown[index]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <button
-                                        class="button is-only-icon is-text"
-                                        aria-label="More options"
-                                        on:click|preventDefault={() => {
-                                            showDropdown[index] = !showDropdown[index];
-                                        }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                                    </button>
-                                    <svelte:fragment slot="list">
-                                        <DropListItem
-                                            icon="pencil"
-                                            on:click={() => {
-                                                selectedMember = member;
-                                                showEdit = true;
-                                                showDropdown[index] = false;
-                                            }}>
-                                            Edit role
-                                        </DropListItem>
-                                        {#if member.invited && !member.joined}
-                                            <DropListItem
-                                                icon="refresh"
-                                                on:click={() => {
-                                                    resend(member);
-                                                    showDropdown[index] = false;
-                                                }}>
-                                                Resend
-                                            </DropListItem>
-                                        {/if}
-                                        <DropListItem
-                                            icon="trash"
-                                            on:click={() => {
-                                                selectedMember = member;
-                                                showDelete = true;
-                                                showDropdown[index] = false;
-                                            }}>
-                                            Remove
-                                        </DropListItem>
-                                    </svelte:fragment>
-                                </DropList>
-                            </TableCell>
+    <Table.Root
+        let:root
+        columns={[
+            { id: 'name', width: { min: 200 } },
+            { id: 'email', width: { min: 200 } },
+            { id: 'roles', width: { min: 200 } },
+            { id: 'mfa', width: { min: 80 } },
+            { id: 'actions', hide: !$isOwner, width: 40 }
+        ]}>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell column="email" {root}>Email</Table.Header.Cell>
+            <Table.Header.Cell column="roles" {root}>
+                <Layout.Stack direction="row" gap="xxxs" alignItems="center">
+                    Roles
+                    <Popover let:toggle>
+                        <Button.Button icon variant="extra-compact" size="s" on:click={toggle}>
+                            <Icon size="s" icon={IconInfo} />
+                        </Button.Button>
+                        <svelte:component this={Upgrade} slot="tooltip" />
+                    </Popover>
+                </Layout.Stack>
+            </Table.Header.Cell>
+            <Table.Header.Cell column="mfa" {root}>2FA</Table.Header.Cell>
+            <Table.Header.Cell column="actions" {root} />
+        </svelte:fragment>
+        {#each data.organizationMembers.memberships as member, index}
+            <Table.Row.Base {root}>
+                <Table.Cell column="name" {root}>
+                    <Layout.Stack direction="row" alignItems="center" gap="s">
+                        <AvatarInitials size="xs" name={member.userName} />
+                        <Typography.Text truncate>
+                            {member.userName ? member.userName : 'n/a'}
+                        </Typography.Text>
+                        {#if member.invited && !member.joined}
+                            <Badge type="warning" variant="secondary" content="Pending" size="xs" />
                         {/if}
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </TableScroll>
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell column="email" {root}>
+                    <Typography.Text truncate>
+                        {member.userEmail}
+                    </Typography.Text>
+                </Table.Cell>
+                <Table.Cell column="roles" {root}>
+                    {member.roles.map((role) => getRoleLabel(role)).join(', ')}
+                </Table.Cell>
+                <Table.Cell column="mfa" {root}>
+                    <Badge
+                        size="xs"
+                        type={member.mfa ? 'success' : undefined}
+                        variant="secondary"
+                        content={member.mfa ? 'Enabled' : 'Disabled'} />
+                </Table.Cell>
+                <Table.Cell column="actions" {root}>
+                    <Popover let:toggle padding="none" placement="bottom-end">
+                        <Button.Button icon variant="ghost" size="s" on:click={toggle}>
+                            <Icon size="s" icon={IconDotsHorizontal} />
+                        </Button.Button>
+                        <div style:min-width="232px" slot="tooltip">
+                            <ActionMenu.Root>
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconPencil}
+                                    on:click={() => {
+                                        selectedMember = member;
+                                        showEdit = true;
+                                        showDropdown[index] = false;
+                                    }}>
+                                    Edit role
+                                </ActionMenu.Item.Button>
+                                {#if member.invited && !member.joined}
+                                    <ActionMenu.Item.Button
+                                        trailingIcon={IconRefresh}
+                                        on:click={() => {
+                                            resend(member);
+                                        }}>
+                                        Resend
+                                    </ActionMenu.Item.Button>
+                                {/if}
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconTrash}
+                                    on:click={() => {
+                                        selectedMember = member;
+                                        showDelete = true;
+                                    }}>
+                                    Remove
+                                </ActionMenu.Item.Button>
+                            </ActionMenu.Root>
+                        </div>
+                    </Popover>
+                </Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
 
-        <PaginationWithLimit
-            name="Members"
-            limit={data.limit}
-            offset={data.offset}
-            total={data.members.total} />
-    {/if}
+    <PaginationWithLimit
+        name="Members"
+        limit={data.limit}
+        offset={data.offset}
+        total={data.members.total} />
 </Container>
 
 <Delete {selectedMember} bind:showDelete />
diff --git a/src/routes/(console)/organization-[organization]/members/+page.ts b/src/routes/(console)/organization-[organization]/members/+page.ts
index 2ca1102a7..6f03ce677 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.ts
+++ b/src/routes/(console)/organization-[organization]/members/+page.ts
@@ -1,5 +1,5 @@
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
@@ -8,15 +8,18 @@ export const load: PageLoad = async ({ url, params, route, depends }) => {
     depends(Dependencies.ORGANIZATION);
     depends(Dependencies.MEMBERS);
     const page = getPage(url);
-    const limit = getLimit('console', url, route, PAGE_LIMIT);
+    const search = getSearch(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
         offset,
         limit,
-        organizationMembers: await sdk.forConsole.teams.listMemberships(params.organization, [
-            Query.limit(limit),
-            Query.offset(offset)
-        ])
+        search,
+        organizationMembers: await sdk.forConsole.teams.listMemberships(
+            params.organization,
+            [Query.limit(limit), Query.offset(offset)],
+            search
+        )
     };
 };
diff --git a/src/routes/(console)/organization-[organization]/members/edit.svelte b/src/routes/(console)/organization-[organization]/members/edit.svelte
index 687404c74..1ca97f1e4 100644
--- a/src/routes/(console)/organization-[organization]/members/edit.svelte
+++ b/src/routes/(console)/organization-[organization]/members/edit.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, FormList } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -11,6 +11,8 @@
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import type { Models } from '@appwrite.io/console';
     import Roles from '$lib/components/roles/roles.svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
 
     export let showEdit = false;
     export let selectedMember: Models.Membership;
@@ -77,16 +79,18 @@
     }
 </script>
 
-<Modal title="Edit role" {error} size="big" bind:show={showEdit} onSubmit={submit}>
-    <FormList>
-        <InputSelect
-            popover={Roles}
-            id="role"
-            label="Role"
-            required
-            options={roles}
-            bind:value={role} />
-    </FormList>
+<Modal title="Edit role" {error} size="s" bind:show={showEdit} onSubmit={submit}>
+    <InputSelect id="role" label="Role" required options={roles} bind:value={role}>
+        <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
+            <Popover let:toggle>
+                <Button extraCompact size="s" on:click={toggle}>
+                    <Icon size="s" icon={IconInfo} />
+                </Button>
+                <svelte:component this={Roles} slot="tooltip" />
+            </Popover>
+        </Layout.Stack>
+    </InputSelect>
+
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
         <Button submit submissionLoader>Update</Button>
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/settings/+page.svelte
index 03f3b7c4d..caf4aa612 100644
--- a/src/routes/(console)/organization-[organization]/settings/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, AvatarGroup, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar, AvatarGroup } from '$lib/components';
     import { InputText, Form, Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
@@ -16,6 +16,7 @@
     import Baa from './BAA.svelte';
     import Soc2 from './Soc2.svelte';
 
+    export let data;
     let name: string;
     let showDelete = false;
 
@@ -50,17 +51,15 @@
     {#if $organization}
         <Form onSubmit={updateName}>
             <CardGrid>
-                <Heading tag="h6" size="7">Name</Heading>
-
+                <svelte:fragment slot="title">Name</svelte:fragment>
                 <svelte:fragment slot="aside">
-                    <ul>
-                        <InputText
-                            id="name"
-                            label="Name"
-                            placeholder="Enter name"
-                            autocomplete={false}
-                            bind:value={name} />
-                    </ul>
+                    <InputText
+                        required
+                        id="name"
+                        label="Name"
+                        placeholder="Enter name"
+                        autocomplete={false}
+                        bind:value={name} />
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
@@ -75,14 +74,10 @@
             <Soc2 />
         {/if}
 
-        <CardGrid danger>
-            <div>
-                <Heading tag="h6" size="7">Delete organization</Heading>
-            </div>
-            <p>
-                The organization will be permanently deleted, including all projects and data
-                associated with this organization. This action is irreversible.
-            </p>
+        <CardGrid>
+            <svelte:fragment slot="title">Delete organization</svelte:fragment>
+            The organization will be permanently deleted, including all projects and data associated
+            with this organization. This action is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="image">
@@ -105,4 +100,4 @@
     {/if}
 </Container>
 
-<Delete bind:showDelete />
+<Delete bind:showDelete invoices={data.invoices} />
diff --git a/src/routes/(console)/organization-[organization]/settings/BAA.svelte b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
index 970735832..40c799874 100644
--- a/src/routes/(console)/organization-[organization]/settings/BAA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import BaaModal from './BAAModal.svelte';
 
@@ -7,10 +7,8 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">BAA</Heading>
-    </div>
-    <p class="text">After requesting a BAA, we will contact you via email for the next steps.</p>
+    <svelte:fragment slot="title">BAA</svelte:fragment>
+    After requesting a BAA, we will contact you via email for the next steps.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
diff --git a/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte b/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
index 9c189d7f9..8db35ca64 100644
--- a/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { Button, FormList, InputEmail, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, InputEmail, InputSelect, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -95,37 +95,30 @@
     }
 </script>
 
-<Modal
-    bind:error
-    bind:show
-    onSubmit={handleSubmit}
-    size="big"
-    title="Request BAA"
-    headerDivider={false}>
-    <FormList>
-        <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
-        <InputSelect
-            label="Number of employees"
-            id="employees"
-            placeholder="Select number of employees"
-            required
-            options={employeesOptions}
-            bind:value={employees} />
-        <InputSelect
-            label="Country"
-            id="country"
-            options={countryOptions}
-            placeholder="Select country"
-            required
-            bind:value={country} />
-        <InputText
-            label="Your role"
-            placeholder="Enter your role"
-            id="role"
-            bind:value={role}
-            required />
-        <InputText label="Website" placeholder="Enter website" id="website" bind:value={website} />
-    </FormList>
+<Modal bind:error bind:show onSubmit={handleSubmit} title="Request BAA">
+    <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
+    <InputSelect
+        label="Number of employees"
+        id="employees"
+        placeholder="Select number of employees"
+        required
+        options={employeesOptions}
+        bind:value={employees} />
+    <InputSelect
+        label="Country"
+        id="country"
+        options={countryOptions}
+        placeholder="Select country"
+        required
+        bind:value={country} />
+    <InputText
+        label="Your role"
+        placeholder="Enter your role"
+        id="role"
+        bind:value={role}
+        required />
+    <InputText label="Website" placeholder="Enter website" id="website" bind:value={website} />
+
     <svelte:fragment slot="footer">
         <Button submit>
             <span class="text">Send request</span>
diff --git a/src/routes/(console)/organization-[organization]/settings/Soc2.svelte b/src/routes/(console)/organization-[organization]/settings/Soc2.svelte
index 9f91a25a2..b1ea65377 100644
--- a/src/routes/(console)/organization-[organization]/settings/Soc2.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/Soc2.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import Soc2Modal from './Soc2Modal.svelte';
 
@@ -7,10 +7,8 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">SOC-2</Heading>
-    </div>
-    <p class="text">After requesting SOC-2, we will contact you via email for the next steps.</p>
+    <svelte:fragment slot="title">SOC-2</svelte:fragment>
+    After requesting SOC-2, we will contact you via email for the next steps.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
diff --git a/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte b/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte
index 0e9253ddc..e10085705 100644
--- a/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { FormList, InputEmail, InputSelect, InputText } from '$lib/elements/forms';
+    import { InputEmail, InputSelect, InputText } from '$lib/elements/forms';
     import Button from '$lib/elements/forms/button.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
@@ -97,37 +97,30 @@
     }
 </script>
 
-<Modal
-    bind:error
-    bind:show
-    onSubmit={handleSubmit}
-    size="big"
-    headerDivider={false}
-    title="Request SOC-2">
-    <FormList>
-        <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
-        <InputSelect
-            label="Number of employees"
-            id="employees"
-            placeholder="Select number of employees"
-            required
-            options={employeesOptions}
-            bind:value={employees} />
-        <InputSelect
-            label="Country"
-            id="country"
-            options={countryOptions}
-            placeholder="Select country"
-            required
-            bind:value={country} />
-        <InputText
-            label="Your role"
-            placeholder="Enter your role"
-            id="role"
-            bind:value={role}
-            required />
-        <InputText label="Website" placeholder="Enter website" id="website" bind:value={website} />
-    </FormList>
+<Modal bind:error bind:show onSubmit={handleSubmit} title="Request SOC-2">
+    <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
+    <InputSelect
+        label="Number of employees"
+        id="employees"
+        placeholder="Select number of employees"
+        required
+        options={employeesOptions}
+        bind:value={employees} />
+    <InputSelect
+        label="Country"
+        id="country"
+        options={countryOptions}
+        placeholder="Select country"
+        required
+        bind:value={country} />
+    <InputText
+        label="Your role"
+        placeholder="Enter your role"
+        id="role"
+        bind:value={role}
+        required />
+    <InputText label="Website" placeholder="Enter website" id="website" bind:value={website} />
+
     <svelte:fragment slot="footer">
         <Button submit>
             <span class="text">Send request</span>
diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
index 22fba4379..9f86c87ed 100644
--- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Modal, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { members, organization, organizationList } from '$lib/stores/organization';
@@ -11,31 +11,21 @@
     import { projects } from '../store';
     import { toLocaleDate } from '$lib/helpers/date';
     import { isCloud } from '$lib/system';
-    import type { EstimationDeleteOrganization } from '$lib/sdk/billing';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { onMount } from 'svelte';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import { tierToPlan } from '$lib/stores/billing';
+    import { Table, Tabs, Alert } from '@appwrite.io/pink-svelte';
     import DeleteOrganizationEstimation from './deleteOrganizationEstimation.svelte';
-    import { billingURL } from '$lib/stores/billing';
+    import { onMount } from 'svelte';
+    import type { EstimationDeleteOrganization, InvoiceList } from '$lib/sdk/billing';
 
     export let showDelete = false;
+    export let invoices: InvoiceList;
     let error: string = null;
 
     let selectedTab = 'projects';
     let organizationName: string = null;
-
     let estimation: EstimationDeleteOrganization;
 
-    /* enable overflow-x */
-    const columnWidth = 120;
-    const columnWidthSmall = columnWidth / 4;
-
     async function deleteOrg() {
         try {
             if (isCloud) {
@@ -49,7 +39,7 @@
             if ($organizationList?.total > 1) {
                 await goto(`${base}/account/organizations`);
             } else {
-                await goto(`${base}/onboarding`);
+                await goto(`${base}/onboarding/create-project`);
             }
             await invalidate(Dependencies.ACCOUNT);
             await invalidate(Dependencies.ORGANIZATION);
@@ -80,20 +70,7 @@
         }
     ];
 
-    $: tabData =
-        selectedTab === 'projects'
-            ? {
-                  headers: ['Project', '', 'Last Updated'],
-                  rows: $projects.projects.map((project) => ({
-                      cells: [project.name, '', toLocaleDate(project.$updatedAt)]
-                  }))
-              }
-            : {
-                  headers: ['Member', '', 'Last Activity'],
-                  rows: $members.memberships.map((member) => ({
-                      cells: [member.userName, '', toLocaleDate(member.$updatedAt)]
-                  }))
-              };
+    $: upcomingInvoice = invoices?.invoices.find((i) => i.status === 'upcoming' && i.amount > 0);
 
     $: if (!showDelete) {
         // reset on close.
@@ -114,128 +91,91 @@
     }
 </script>
 
-<div class="max-height-dialog">
-    <Modal
-        title="Delete organization"
-        onSubmit={deleteOrg}
-        bind:show={showDelete}
-        bind:error
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}>
-        {#if estimation && (estimation.unpaidInvoices.length > 0 || estimation.grossAmount > 0)}
-            <DeleteOrganizationEstimation {estimation} />
+<Modal title="Delete organization" onSubmit={deleteOrg} bind:show={showDelete} bind:error>
+    {#if upcomingInvoice}
+        <Alert.Inline
+            status="warning"
+            title={`You have a pending ${formatCurrency(upcomingInvoice.grossAmount)} invoice for your
+        ${tierToPlan(upcomingInvoice.plan).name} plan`}>
+            By proceeding, your invoice will be processed within the hour. Upon successful payment,
+            your organization will be deleted.
+        </Alert.Inline>
+    {/if}
+
+    <p slot="description">
+        {#if $projects.total > 0}
+            The following projects and all data associated with <b>{$organization.name}</b> will be
+            permanently deleted. <b>This action is irreversible</b>.
         {:else}
-            <p data-private>
-                {#if $projects.total > 0}
-                    The following projects and all data associated with <b>{$organization.name}</b>
-                    will be permanently deleted. <b>This action is irreversible</b>.
-                {:else}
-                    All data associated with <b>{$organization.name}</b> will be permanently
-                    deleted.
-                    <b>This action is irreversible</b>.
-                {/if}
-            </p>
-
-            {#if $projects.total > 0}
-                <div class="box is-only-desktop">
-                    <SecondaryTabs large stretch class="u-sep-block-end u-padding-8">
-                        {#each tabs as { name, label, total }}
-                            <SecondaryTabsItem
-                                center
-                                fullWidth
-                                disabled={selectedTab === name}
-                                on:click={() => (selectedTab = name)}>
-                                {label.desktop} ({total})
-                            </SecondaryTabsItem>
-                        {/each}
-                    </SecondaryTabs>
-
-                    <TableScroll dense noMargin>
-                        <TableHeader>
-                            {#each tabData.headers as header}
-                                <TableCellHead width={columnWidth}>{header}</TableCellHead>
-                            {/each}
-                        </TableHeader>
-                        <TableBody>
-                            {#each tabData.rows as row}
-                                <TableRow>
-                                    {#each row.cells as cell}
-                                        <TableCell width={columnWidth}>{cell}</TableCell>
-                                    {/each}
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </TableScroll>
-                </div>
-                <div class="box is-not-desktop">
-                    <SecondaryTabs large stretch class="u-sep-block-end u-padding-8">
-                        {#each tabs as { name, label, total }}
-                            <SecondaryTabsItem
-                                center
-                                fullWidth
-                                disabled={selectedTab === name}
-                                on:click={() => (selectedTab = name)}>
-                                {label.mobile} ({total})
-                            </SecondaryTabsItem>
-                        {/each}
-                    </SecondaryTabs>
-
-                    <TableScroll dense noMargin>
-                        <TableHeader>
-                            {#each tabData.headers as header, index}
-                                <TableCellHead width={index === 1 ? columnWidthSmall : columnWidth}
-                                    >{header}</TableCellHead>
-                            {/each}
-                        </TableHeader>
-                        <TableBody>
-                            {#each tabData.rows as row}
-                                <TableRow>
-                                    {#each row.cells as cell, index}
-                                        <TableCell
-                                            width={index === 1 ? columnWidthSmall : columnWidth}
-                                            >{cell}</TableCell>
-                                    {/each}
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </TableScroll>
-                </div>
-            {/if}
-
-            <FormList>
-                <InputText
-                    label={`Confirm the organization name to continue`}
-                    placeholder="Enter {$organization.name} to continue"
-                    id="organization-name"
-                    required
-                    bind:value={organizationName} />
-            </FormList>
+            All data associated with <b>{$organization.name}</b> will be permanently deleted.
+            <b>This action is irreversible</b>.
         {/if}
-
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            {#if estimation && estimation.unpaidInvoices.length > 0}
-                <Button href={$billingURL} secondary>View invoices</Button>
+    </p>
+    {#if estimation && (estimation.unpaidInvoices.length > 0 || estimation.grossAmount > 0)}
+        <DeleteOrganizationEstimation {estimation} />
+    {:else}
+        {#if $projects.total > 0}
+            <Tabs.Root let:root stretch>
+                {#each tabs as { name, label, total }}
+                    <Tabs.Item.Button
+                        {root}
+                        on:click={() => (selectedTab = name)}
+                        active={selectedTab === name}>
+                        {label.desktop} ({total})
+                    </Tabs.Item.Button>
+                {/each}
+            </Tabs.Root>
+            {#if selectedTab === 'projects'}
+                <Table.Root columns={[{ id: 'projects' }, { id: 'lastUpdated' }]} let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="projects" {root}>Projects</Table.Header.Cell>
+                        <Table.Header.Cell column="lastUpdated" {root}
+                            >Last updated</Table.Header.Cell>
+                    </svelte:fragment>
+                    {#each $projects.projects as project}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="projects" {root}>{project.name}</Table.Cell>
+                            <Table.Cell column="lastUpdated" {root}
+                                >{toLocaleDate(project.$updatedAt)}</Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
             {:else}
-                <Button
-                    secondary
-                    submit
-                    disabled={!error &&
-                        (!organizationName || organizationName !== $organization.name)}>
-                    Delete
-                </Button>
+                <Table.Root columns={[{ id: 'member' }, { id: 'lastUpdated' }]} let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="member" {root}>Members</Table.Header.Cell>
+                        <Table.Header.Cell column="lastUpdated" {root}
+                            >Last updated</Table.Header.Cell>
+                    </svelte:fragment>
+                    {#each $members.memberships as membership}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="member" {root}>{membership.userName}</Table.Cell>
+                            <Table.Cell column="lastUpdated" {root}
+                                >{toLocaleDate(membership.$updatedAt)}</Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
             {/if}
-        </svelte:fragment>
-    </Modal>
-</div>
+        {/if}
+        <InputText
+            label={`Confirm the organization name to continue`}
+            placeholder="Enter {$organization.name} to continue"
+            id="organization-name"
+            required
+            bind:value={organizationName} />
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button
+            secondary
+            submit
+            disabled={!error && (!organizationName || organizationName !== $organization.name)}>
+            Delete
+        </Button>
+    </svelte:fragment>
+</Modal>
 
 <style>
-    .box {
-        padding: unset;
-        border-radius: var(--border-radius-medium, 8px);
-    }
-
     :global(.max-height-dialog dialog) {
         max-height: 650px;
     }
diff --git a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
index 39ce1ce82..7b83d3c9d 100644
--- a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';
@@ -15,16 +15,10 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">DPA</Heading>
-    </div>
-    <p class="text">
-        After downloading, have the DPA signed by your organization's compliance authority, such as
-        your CEO or Compliance Manager, and submit it to <a
-            class="link"
-            href="mailto:privacy@appwrite.io">privacy@appwrite.io</a
-        >.
-    </p>
+    <svelte:fragment slot="title">DPA</svelte:fragment>
+    After downloading, have the DPA signed by your organization's compliance authority, such as your
+    CEO or Compliance Manager, and submit it to
+    <a class="link" href="mailto:privacy@appwrite.io">privacy@appwrite.io</a>.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
@@ -46,7 +40,7 @@
                 on:click={downloadPdf}
                 href="{base}/legal/dpa.pdf"
                 event="download_dpa">
-                <span class="icon-download" aria-hidden="true" />
+                <span class="icon-download" aria-hidden="true"></span>
                 <span class="text">Download</span>
             </Button>
         </Box>
diff --git a/src/routes/(console)/organization-[organization]/settings/invoicesTable.svelte b/src/routes/(console)/organization-[organization]/settings/invoicesTable.svelte
index cbf881c3f..84b7ca609 100644
--- a/src/routes/(console)/organization-[organization]/settings/invoicesTable.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/invoicesTable.svelte
@@ -1,25 +1,20 @@
 <script lang="ts">
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { Pill } from '$lib/elements';
-    import { DropList, DropListItem, DropListLink } from '$lib/components';
     import type { Invoice } from '$lib/sdk/billing';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import { selectedInvoice, showRetryModal } from '../billing/store';
     import { toLocaleDate } from '$lib/helpers/date';
     import { Button } from '$lib/elements/forms';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
-    let showDropdown = [];
-    let showFailedError = false;
+    import { ActionMenu, Badge, Icon, Link, Popover, Table } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconDownload,
+        IconExternalLink,
+        IconRefresh
+    } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
+
     const endpoint = getApiEndpoint();
 
     export let invoices: Invoice[];
@@ -31,112 +26,112 @@
     }
 </script>
 
-<TableScroll noMargin transparent noStyles>
-    <TableHeader>
-        <TableCellHead width={100}>Due Date</TableCellHead>
-        <TableCellHead width={80}>Status</TableCellHead>
-        <TableCellHead width={100}>Amount Due</TableCellHead>
+<Table.Root
+    columns={[
+        { id: 'date', width: { min: 100 } },
+        { id: 'status', width: { min: 80 } },
+        { id: 'amount_due', width: { min: 100 } },
+        showActions && { id: 'action', width: 40 }
+    ]}
+    let:root>
+    <svelte:fragment slot="header" let:root>
+        <Table.Header.Cell {root}>Due Date</Table.Header.Cell>
+        <Table.Header.Cell {root}>Status</Table.Header.Cell>
+        <Table.Header.Cell {root}>Amount Due</Table.Header.Cell>
         {#if showActions}
-            <TableCellHead width={40} />
+            <Table.Header.Cell {root} />
         {/if}
-    </TableHeader>
-    <TableBody>
-        {#each invoices as invoice, i}
-            {@const status = invoice.status}
-            <TableRow>
-                <TableCellText title="date">
-                    {toLocaleDate(invoice.dueAt)}
-                </TableCellText>
-                <TableCell title="status">
-                    {#if invoice?.lastError}
-                        <DropList bind:show={showFailedError}>
-                            <Pill
-                                danger={status === 'overdue' ||
-                                    status === 'failed' ||
-                                    status === 'requires_authentication'}
-                                success={status === 'paid' || status === 'succeeded'}
-                                warning={status === 'pending'}
-                                button>
-                                {status === 'requires_authentication' ? 'failed' : status}
-                            </Pill>
-                            <svelte:fragment slot="list">
-                                <li>
-                                    The scheduled payment has failed.
-                                    <Button
-                                        link
-                                        on:click={() => {
-                                            retryPayment(invoice);
-                                        }}
-                                        >Try again
-                                    </Button>
-                                    .
-                                </li>
-                            </svelte:fragment>
-                        </DropList>
-                    {:else}
-                        <Pill
-                            danger={status === 'overdue' ||
+    </svelte:fragment>
+    {#each invoices as invoice (invoice.$id)}
+        {@const status = invoice.status}
+        <Table.Row.Base {root}>
+            <Table.Cell column="date" {root}>
+                {toLocaleDate(invoice.dueAt)}
+            </Table.Cell>
+            <Table.Cell column="status" {root}>
+                {#if invoice?.lastError}
+                    <Popover let:toggle>
+                        <div>
+                            <Badge
+                                on:click={toggle}
+                                variant="secondary"
+                                type={status === 'overdue' ||
                                 status === 'failed' ||
-                                status === 'requires_authentication'}
-                            success={status === 'paid' || status === 'succeeded'}
-                            warning={status === 'pending'}>
-                            {status === 'requires_authentication' ? 'failed' : status}
-                        </Pill>
-                    {/if}
-                </TableCell>
-                <TableCellText title="due">
-                    {formatCurrency(invoice.grossAmount)}
-                </TableCellText>
-                {#if showActions}
-                    <TableCell showOverflow right>
-                        <DropList bind:show={showDropdown[i]} placement="bottom-start" noArrow>
-                            <Button
-                                round
-                                text
-                                noMargin
-                                ariaLabel="More options"
-                                on:click={() => {
-                                    showDropdown[i] = !showDropdown[i];
-                                }}>
-                                <span class="icon-dots-horizontal" aria-hidden="true" />
-                            </Button>
-                            <svelte:fragment slot="list">
-                                <DropListLink
-                                    icon="external-link"
-                                    external
-                                    href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}
-                                    on:click={() => (showDropdown[i] = !showDropdown[i])}
-                                    event="view_invoice">
-                                    View invoice
-                                </DropListLink>
-                                <DropListLink
-                                    icon="download"
-                                    href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/download`}
+                                status === 'requires_authentication'
+                                    ? 'error'
+                                    : status === 'paid' || status === 'succeeded'
+                                      ? 'success'
+                                      : 'warning'}
+                                content={status === 'requires_authentication' ? 'failed' : status}>
+                            </Badge>
+                        </div>
+                        <svelte:fragment slot="list">
+                            <p>
+                                The scheduled payment has failed.
+                                <Link.Button
                                     on:click={() => {
-                                        showDropdown[i] = !showDropdown[i];
+                                        retryPayment(invoice);
                                     }}
-                                    event="download_invoice">
+                                    >Try again
+                                </Link.Button>
+                                .
+                            </p>
+                        </svelte:fragment>
+                    </Popover>
+                {:else}
+                    <Badge
+                        variant="secondary"
+                        type={status === 'overdue' ||
+                        status === 'failed' ||
+                        status === 'requires_authentication'
+                            ? 'error'
+                            : status === 'paid' || status === 'succeeded'
+                              ? 'success'
+                              : 'warning'}
+                        content={status === 'requires_authentication' ? 'failed' : status}>
+                    </Badge>
+                {/if}
+            </Table.Cell>
+            <Table.Cell column="due" {root}>
+                {formatCurrency(invoice.grossAmount)}
+            </Table.Cell>
+            {#if showActions}
+                <Table.Cell {root}>
+                    <Popover let:toggle>
+                        <Button text ariaLabel="More options" on:click={toggle}>
+                            <Icon icon={IconDotsHorizontal} />
+                        </Button>
+                        <svelte:fragment slot="tooltip">
+                            <ActionMenu.Root>
+                                <ActionMenu.Item.Anchor
+                                    trailingIcon={IconExternalLink}
+                                    external
+                                    href={`${endpoint}/organizations/${page.params.organization}/invoices/${invoice.$id}/view`}>
+                                    View invoice
+                                </ActionMenu.Item.Anchor>
+                                <ActionMenu.Item.Anchor
+                                    trailingIcon={IconDownload}
+                                    href={`${endpoint}/organizations/${page.params.organization}/invoices/${invoice.$id}/download`}>
                                     Download PDF
-                                </DropListLink>
+                                </ActionMenu.Item.Anchor>
                                 {#if status === 'overdue' || status === 'failed'}
-                                    <DropListItem
-                                        icon="refresh"
+                                    <ActionMenu.Item.Button
+                                        trailingIcon={IconRefresh}
                                         on:click={() => {
                                             retryPayment(invoice);
-                                            showDropdown[i] = !showDropdown[i];
                                             trackEvent(`click_retry_payment`, {
                                                 from: 'button',
                                                 source: 'billing_invoice_menu'
                                             });
                                         }}>
                                         Retry payment
-                                    </DropListItem>
+                                    </ActionMenu.Item.Button>
                                 {/if}
-                            </svelte:fragment>
-                        </DropList>
-                    </TableCell>
-                {/if}
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </Table.Cell>
+            {/if}
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
diff --git a/src/routes/(console)/organization-[organization]/teamReadonlyAlert.svelte b/src/routes/(console)/organization-[organization]/teamReadonlyAlert.svelte
index 19fc2bf37..f3e44e97f 100644
--- a/src/routes/(console)/organization-[organization]/teamReadonlyAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/teamReadonlyAlert.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { HeaderAlert } from '$lib/layout';
@@ -14,7 +14,7 @@
     $: redirectUrl = `${base}/organization-${$organization?.$id}/billing#payment-history`;
 </script>
 
-{#if $organization?.$id && $organization?.status === teamStatusReadonly && $organization?.remarks === billingLimitOutstandingInvoice && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $organization?.$id && $organization?.status === teamStatusReadonly && $organization?.remarks === billingLimitOutstandingInvoice && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert type="error" title="Access restricted">
         <svelte:fragment>
             Your organization’s access to resources has been restricted due to unpaid invoices.
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index d98372f5d..e719b1ab6 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { BarChart, Legend } from '$lib/charts';
-    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
-    import { BillingPlan } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
-    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
-    import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
-    import { formatNum } from '$lib/helpers/string';
     import { Container } from '$lib/layout';
-    import { accumulateFromEndingTotal, total } from '$lib/layout/usage.svelte';
-    import type { OrganizationUsage } from '$lib/sdk/billing';
+    import { Card, CardGrid, ProgressBarBig } from '$lib/components';
+    import { BarChart, Legend } from '$lib/charts';
+    import { Button } from '$lib/elements/forms';
+    import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
     import {
         getServiceLimit,
         showUsageRatesModal,
@@ -19,7 +12,15 @@
     } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import ProjectBreakdown from './ProjectBreakdown.svelte';
+    import { formatNum } from '$lib/helpers/string';
+    import { accumulateFromEndingTotal, total } from '$lib/layout/usage.svelte';
+    import type { OrganizationUsage } from '$lib/sdk/billing';
+    import { BillingPlan } from '$lib/constants';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import TotalMembers from './totalMembers.svelte';
+    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Icon, Layout, Link, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconChartSquareBar, IconInfo } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -50,13 +51,13 @@
 
 <Container>
     <div class="u-flex u-cross-center u-main-space-between">
-        <Heading tag="h2" size="5">Usage</Heading>
+        <Typography.Title>Usage</Typography.Title>
 
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Button
                 href={$upgradeURL}
                 on:click={() => {
-                    trackEvent('click_organization_upgrade', {
+                    trackEvent(Click.OrganizationClickUpgrade, {
                         from: 'button',
                         source: 'organization_usage'
                     });
@@ -65,39 +66,30 @@
             </Button>
         {/if}
     </div>
-    <div class="u-flex u-main-space-between common-section u-cross-center">
-        {#if $organization.billingPlan === BillingPlan.SCALE}
-            <p class="text">
-                On the Scale plan, you'll be charged only for any usage that exceeds the thresholds
-                per resource listed below. <button
-                    on:click={() => ($showUsageRatesModal = true)}
-                    class="link"
-                    type="button">Learn more about plan usage limits.</button>
-            </p>
-        {:else if $organization.billingPlan === BillingPlan.PRO}
-            <p class="text">
-                On the Pro plan, you'll be charged only for any usage that exceeds the thresholds
-                per resource listed below. <button
-                    on:click={() => ($showUsageRatesModal = true)}
-                    class="link"
-                    type="button">Learn more about plan usage limits.</button>
-            </p>
-        {:else if $organization.billingPlan === BillingPlan.FREE}
-            <p class="text">
-                If you exceed the limits of the Free plan, services for your organization's projects
-                may be disrupted.
-                <a href={$upgradeURL} class="link">Upgrade for greater capacity</a>.
-            </p>
-        {/if}
-    </div>
-
-    <CardGrid>
-        <Heading tag="h6" size="7">Bandwidth</Heading>
-
+    {#if $organization.billingPlan === BillingPlan.SCALE}
         <p class="text">
-            Calculated for all bandwidth used across all projects in your organization. Resets at
-            the start of each billing cycle.
+            On the Scale plan, you'll be charged only for any usage that exceeds the thresholds per
+            resource listed below. <Link.Button on:click={() => ($showUsageRatesModal = true)}
+                >Learn more</Link.Button>
         </p>
+    {:else if $organization.billingPlan === BillingPlan.PRO}
+        <p class="text">
+            On the Pro plan, you'll be charged only for any usage that exceeds the thresholds per
+            resource listed below. <Link.Button on:click={() => ($showUsageRatesModal = true)}
+                >Learn more</Link.Button>
+        </p>
+    {:else if $organization.billingPlan === BillingPlan.FREE}
+        <p class="text">
+            If you exceed the limits of the Free plan, services for your organization's projects may
+            be disrupted.
+            <Link.Anchor href={$upgradeURL}>Upgrade for greater capacity</Link.Anchor>.
+        </p>
+    {/if}
+
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Bandwidth</svelte:fragment>
+        Calculated for all bandwidth used across all projects in your organization. Resets at the start
+        of each billing cycle.
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.bandwidth}
@@ -107,74 +99,65 @@
                 <ProgressBarBig
                     currentUnit={currentHumanized.unit}
                     currentValue={currentHumanized.value}
-                    maxValue={`of ${max.toString()} GB used`}
+                    maxValue={`/ ${max.toString()} GB used`}
                     progressValue={bytesToSize(current, 'GB')}
                     progressMax={max}
                     showBar={false} />
-                <div style:margin-top="-1.5em">
-                    <BarChart
-                        options={{
-                            yAxis: {
-                                axisLabel: {
-                                    formatter: (value) =>
-                                        value
-                                            ? `${humanFileSize(+value).value} ${
-                                                  humanFileSize(+value).unit
-                                              }`
-                                            : '0'
-                                }
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: (value) =>
+                                    value
+                                        ? `${humanFileSize(+value).value} ${
+                                              humanFileSize(+value).unit
+                                          }`
+                                        : '0'
                             }
-                        }}
-                        series={[
-                            {
-                                name: 'Bandwidth',
-                                data: [
-                                    ...data.organizationUsage.bandwidth.map((e) => [
-                                        e.date,
-                                        e.value
-                                    ])
-                                ],
-                                tooltip: {
-                                    valueFormatter: (value) =>
-                                        `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
-                                }
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Bandwidth',
+                            data: [
+                                ...data.organizationUsage.bandwidth.map((e) => [e.date, e.value])
+                            ],
+                            tooltip: {
+                                valueFormatter: (value) =>
+                                    `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
                             }
-                        ]} />
-                </div>
+                        }
+                    ]} />
                 {#if projects?.length > 0}
                     <ProjectBreakdown {projects} metric="bandwidth" {data} />
                 {/if}
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">Users</Heading>
-
-        <p class="text">The total number of users across all projects in your organization.</p>
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Users</svelte:fragment>
+        The total number of users across all projects in your organization.
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.users}
                 {@const current = data.organizationUsage.usersTotal}
                 {@const max = getServiceLimit('users', tier, plan)}
-                <ProgressBarBig
-                    currentUnit="Users"
-                    currentValue={formatNum(current)}
-                    maxUnit="users"
-                    maxValue={`out of ${formatNum(max)}`}
-                    progressValue={current}
-                    progressMax={max}
-                    showBar={false} />
-                <div style:margin-top="-1.5em">
+                <Layout.Stack>
+                    <ProgressBarBig
+                        currentUnit="Users"
+                        currentValue={formatNum(current)}
+                        maxUnit="users"
+                        maxValue={`/ ${formatNum(max)}`}
+                        progressValue={current}
+                        progressMax={max}
+                        showBar={false} />
                     <BarChart
                         options={{
                             yAxis: {
@@ -193,33 +176,27 @@
                                 )
                             }
                         ]} />
-                </div>
-                {#if projects?.length > 0}
-                    <ProjectBreakdown {projects} metric="users" {data} />
-                {/if}
+                    {#if projects?.length > 0}
+                        <ProjectBreakdown {projects} metric="users" {data} />
+                    {/if}
+                </Layout.Stack>
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">Database reads and writes</Heading>
-
-        <p class="text">
-            The total number of database reads and writes across all projects in your organization.
-        </p>
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Database reads and writes</svelte:fragment>
+        The total number of database reads and writes across all projects in your organization.
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.databasesReads || data.organizationUsage.databasesWrites}
-                <div style:margin-top="-1.5em" style:margin-bottom="-1em">
+                <Layout.Stack>
                     <BarChart
                         options={{
                             yAxis: {
@@ -248,33 +225,30 @@
                                 ]
                             }
                         ]} />
-                </div>
 
-                <Legend {legendData} numberFormat="abbreviate" decimalsForAbbreviate={2} />
+                    <Legend {legendData} numberFormat="abbreviate" decimalsForAbbreviate={2} />
 
-                {#if projects?.length > 0}
-                    <ProjectBreakdown
-                        {data}
-                        {projects}
-                        databaseOperationMetric={['databasesReads', 'databasesWrites']} />
-                {/if}
+                    {#if projects?.length > 0}
+                        <ProjectBreakdown
+                            {data}
+                            {projects}
+                            databaseOperationMetric={['databasesReads', 'databasesWrites']} />
+                    {/if}
+                </Layout.Stack>
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">Image transformations</Heading>
-
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Image transformations</svelte:fragment>
+        Calculated for all functions that are executed in all projects in your organization.
         <p class="text">
             The total number of unique image transformations across all projects in your
             organization. <a
@@ -318,7 +292,7 @@
                         <span
                             class="icon-chart-square-bar text-large"
                             aria-hidden="true"
-                            style="font-size: 32px;" />
+                            style="font-size: 32px;"></span>
                         <p class="u-bold">No data to show</p>
                     </div>
                 </Card>
@@ -326,25 +300,21 @@
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">Executions</Heading>
-
-        <p class="text">
-            Calculated for all functions that are executed in all projects in your organization.
-        </p>
-
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Executions</svelte:fragment>
+        Calculated for all functions that are executed in all projects in your organization.
         <svelte:fragment slot="aside">
-            {#if data.organizationUsage.executionsTotal}
+            {#if data.organizationUsage.executions}
                 {@const current = data.organizationUsage.executionsTotal}
                 {@const max = getServiceLimit('executions', tier, plan)}
-                <ProgressBarBig
-                    currentUnit="Executions"
-                    currentValue={formatNum(current)}
-                    maxValue={`of ${formatNum(max)} executions used`}
-                    progressValue={current}
-                    progressMax={max}
-                    showBar={false} />
-                <div style:margin-top="-1.5em">
+                <Layout.Stack>
+                    <ProgressBarBig
+                        currentUnit="Executions"
+                        currentValue={formatNum(current)}
+                        maxValue={`/ ${formatNum(max)} executions used`}
+                        progressValue={current}
+                        progressMax={max}
+                        showBar={false} />
                     <BarChart
                         options={{
                             yAxis: {
@@ -364,31 +334,24 @@
                                 ]
                             }
                         ]} />
-                </div>
-                {#if projects?.length > 0}<ProjectBreakdown
-                        {projects}
-                        metric="executions"
-                        {data} />{/if}
+                    {#if projects?.length > 0}
+                        <ProjectBreakdown {projects} metric="executions" {data} />
+                    {/if}
+                </Layout.Stack>
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">Storage</Heading>
-
-        <p class="text">
-            Calculated for all your files, deployments, builds, databases and backups.
-        </p>
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Storage</svelte:fragment>
+        Calculated for all your files, deployments, builds, databases and backups.
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.storageTotal}
@@ -429,38 +392,33 @@
                         }
                     }
                 ]}
-                <ProgressBarBig
-                    currentUnit={currentHumanized.unit}
-                    currentValue={currentHumanized.value}
-                    maxValue={`of ${max.toString()} GB used`}
-                    progressValue={bytesToSize(current, 'GB')}
-                    progressMax={max}
-                    progressBarData={progressBarStorageDate} />
-                {#if projects?.length > 0}<ProjectBreakdown
-                        {projects}
-                        metric="storage"
-                        {data} />{/if}
+                <Layout.Stack>
+                    <ProgressBarBig
+                        currentUnit={currentHumanized.unit}
+                        currentValue={currentHumanized.value}
+                        maxValue={`/ ${max.toString()} GB used`}
+                        progressValue={bytesToSize(current, 'GB')}
+                        progressMax={max}
+                        progressBarData={progressBarStorageDate} />
+                    {#if projects?.length > 0}
+                        <ProjectBreakdown {projects} metric="storage" {data} />
+                    {/if}
+                </Layout.Stack>
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">GB hours</Heading>
-
-        <p class="text">
-            GB hours represent the memory usage (in gigabytes) of your function executions and
-            builds, multiplied by the total execution time (in hours).
-        </p>
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">GB hours</svelte:fragment>
+        GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied
+        by the total execution time (in hours).
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.storageTotal}
@@ -503,65 +461,66 @@
                     progressBarData={progressBarStorageDate} />
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <Heading tag="h6" size="7">Phone OTP</Heading>
-        <p class="text">
-            OTPs are billed per SMS message, with rates varying by recipient country. For a detailed
-            cost breakdown, see the <a
-                href="https://appwrite.io/docs/advanced/platform/phone-otp"
-                class="link">pricing page</a
-            >.
-        </p>
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Phone OTP</svelte:fragment>
+        OTPs are billed per SMS message, with rates varying by recipient country. For a detailed cost
+        breakdown, see the
+        <Link.Anchor href="https://appwrite.io/docs/advanced/platform/phone-otp"
+            >pricing page</Link.Anchor
+        >.
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.authPhoneTotal}
-                <div class="u-flex u-main-space-between">
-                    <p>
-                        <span class="heading-level-4"
-                            >{formatNumberWithCommas(data.organizationUsage.authPhoneTotal)}</span>
-                        <span class="body-text-1 u-bold">OTPs</span>
-                    </p>
-                    <p class="u-flex u-gap-8 u-cross-center">
-                        <span class="u-color-text-offline">Estimated cost</span>
-                        <span class="body-text-2">
-                            {formatCurrency(data.organizationUsage.authPhoneEstimate)}
-                            <span
-                                class="icon-info u-color-text-offline"
-                                use:tooltip={{
-                                    content:
-                                        'The first 10 messages each month are provided at no cost. Pricing may vary as it depends on telecom rates and vendor agreements.'
-                                }} />
-                        </span>
-                    </p>
-                </div>
+                <Layout.Stack>
+                    <Layout.Stack direction="row">
+                        <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                            <Typography.Title>
+                                {formatNumberWithCommas(data.organizationUsage.authPhoneTotal)}
+                            </Typography.Title>
+                            <Typography.Text>OTPs</Typography.Text>
+                        </Layout.Stack>
+                        <Layout.Stack
+                            gap="xs"
+                            direction="row"
+                            alignItems="center"
+                            justifyContent="flex-end">
+                            <Typography.Text>Estimated cost</Typography.Text>
+                            <Typography.Text color="--fgcolor-neutral-primary">
+                                {formatCurrency(data.organizationUsage.authPhoneEstimate)}
+                            </Typography.Text>
+                            <Tooltip maxWidth="200px">
+                                <Icon icon={IconInfo} />
+                                <svelte:fragment slot="tooltip">
+                                    The first 10 messages each month are provided at no cost.
+                                    Pricing may vary as it depends on telecom rates and vendor
+                                    agreements.
+                                </svelte:fragment>
+                            </Tooltip>
+                        </Layout.Stack>
+                    </Layout.Stack>
 
-                {#if projects?.length > 0}
-                    <ProjectBreakdown
-                        {projects}
-                        metric="authPhoneTotal"
-                        estimate="authPhoneEstimate"
-                        {data} />
-                {/if}
+                    {#if projects?.length > 0}
+                        <ProjectBreakdown
+                            {projects}
+                            metric="authPhoneTotal"
+                            estimate="authPhoneEstimate"
+                            {data} />
+                    {/if}
+                </Layout.Stack>
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
index 29e9ac275..0debe2645 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
@@ -52,7 +52,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const [invoices, usage, organizationMembers, plan] = await Promise.all([
         sdk.forConsole.billing.listInvoices(org.$id, [Query.orderDesc('from')]),
         sdk.forConsole.billing.listUsage(params.organization, startDate, endDate),
-        sdk.forConsole.teams.listMemberships(params.organization),
+        sdk.forConsole.teams.listMemberships(params.organization, [Query.limit(100)]),
         sdk.forConsole.billing.getOrganizationPlan(org.$id)
     ]);
 
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
index 4ca930a15..fb9ff7a82 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -1,21 +1,11 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { Collapsible, CollapsibleItem } from '$lib/components';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { abbreviateNumber, formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import type { OrganizationUsage } from '$lib/sdk/billing';
     import { canSeeProjects } from '$lib/stores/roles';
     import { onMount } from 'svelte';
-    import type { PageData } from './$types';
+    import { Accordion, Table } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
 
     type Metric =
         | 'users'
@@ -31,7 +21,7 @@
 
     type DatabaseOperationMetric = Extract<Metric, 'databasesReads' | 'databasesWrites'>;
 
-    export let data: PageData;
+    export let data;
     export let projects: OrganizationUsage['projects'];
     export let metric: Metric | undefined = undefined;
     export let estimate: Estimate | undefined = undefined;
@@ -51,9 +41,9 @@
         return `${base}/project-${region}-${projectId}/settings/usage`;
     }
 
-    function getProjectName(projectId: string): string {
-        return data.projects[projectId]?.name ?? 'Unknown';
-    }
+    // function getProjectName(projectId: string): string {
+    //     return data.projects[projectId]?.name ?? 'Unknown';
+    // }
 
     function groupByProject(
         metric: Metric | undefined,
@@ -121,94 +111,67 @@
 </script>
 
 {#if projects.some((project) => project[metric]) || projects.some( (project) => databaseOperationMetric?.some((metric) => project[metric]) )}
-    <Collapsible>
-        <CollapsibleItem>
-            <svelte:fragment slot="title">Project breakdown</svelte:fragment>
-            <TableScroll dense noStyles noMargin style="table-layout: auto">
-                <TableHeader>
-                    <TableCellHead>Project</TableCellHead>
-                    {#if databaseOperationMetric}
-                        <TableCellHead>Reads</TableCellHead>
-                        <TableCellHead>Writes</TableCellHead>
-                    {:else}
-                        <TableCellHead>{getMetricTitle(metric)}</TableCellHead>
-                    {/if}
-
-                    {#if estimate}
-                        <TableCellHead>Estimated cost</TableCellHead>
-                    {/if}
-                    {#if $canSeeProjects}
-                        <TableCellHead />
-                    {/if}
-                </TableHeader>
-                <TableBody>
-                    {#each groupByProject(metric, estimate, databaseOperationMetric).sort( (a, b) => {
-                            const aValue = a.usage ?? a.databasesReads ?? 0;
-                            const bValue = b.usage ?? b.databasesReads ?? 0;
-                            return bValue - aValue;
-                        } ) as project}
-                        {#if !$canSeeProjects}
-                            <TableRow>
-                                <TableCell title="Project">
-                                    {getProjectName(project.projectId)}
-                                </TableCell>
-                                {#if databaseOperationMetric}
-                                    <TableCell title="Reads">
-                                        {format(project.databasesReads ?? 0)}
-                                    </TableCell>
-                                    <TableCell title="Writes">
-                                        {format(project.databasesWrites ?? 0)}
-                                    </TableCell>
-                                {:else}
-                                    <TableCell>
-                                        {format(project.usage)}
-                                    </TableCell>
-                                {/if}
-
-                                {#if project.estimate}
-                                    <TableCell title="Estimated cost">
-                                        {formatCurrency(project.estimate)}
-                                    </TableCell>
-                                {/if}
-                            </TableRow>
-                        {:else}
-                            <TableRowLink href={getProjectUsageLink(project.projectId)}>
-                                <TableCell title="Project">
-                                    {getProjectName(project.projectId)}
-                                </TableCell>
-                                {#if databaseOperationMetric}
-                                    <TableCell title="Reads">
-                                        {format(project.databasesReads ?? 0)}
-                                    </TableCell>
-                                    <TableCell title="Writes">
-                                        {format(project.databasesWrites ?? 0)}
-                                    </TableCell>
-                                {:else}
-                                    <TableCell>
-                                        {format(project.usage)}
-                                    </TableCell>
-                                {/if}
-
-                                {#if project.estimate}
-                                    <TableCell title="Estimated cost">
-                                        {formatCurrency(project.estimate)}
-                                    </TableCell>
-                                {/if}
-                                <TableCell right={true}>
-                                    <span
-                                        class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
-                                </TableCell>
-                            </TableRowLink>
-                        {/if}
-                    {/each}
-                </TableBody>
-            </TableScroll>
-        </CollapsibleItem>
-    </Collapsible>
+    <Accordion title="Project breakdown" hideDivider>
+        <Table.Root
+            columns={[
+                { id: 'project' },
+                { id: 'reads', hide: !databaseOperationMetric },
+                { id: 'writes', hide: !databaseOperationMetric },
+                { id: 'metric', hide: !!databaseOperationMetric },
+                { id: 'costs' }
+            ]}
+            let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="project" {root}>Project</Table.Header.Cell>
+                <Table.Header.Cell column="reads" {root}>Reads</Table.Header.Cell>
+                <Table.Header.Cell column="writes" {root}>Writes</Table.Header.Cell>
+                <Table.Header.Cell column="metric" {root}
+                    >{getMetricTitle(metric)}</Table.Header.Cell>
+                <Table.Header.Cell column="costs" {root}>Estimated cost</Table.Header.Cell>
+            </svelte:fragment>
+            {#each groupByProject(metric, estimate, databaseOperationMetric).sort((a, b) => {
+                const aValue = a.usage ?? a.databasesReads ?? 0;
+                const bValue = b.usage ?? b.databasesReads ?? 0;
+                return bValue - aValue;
+            }) as project}
+                {#if !$canSeeProjects}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="project" {root}>
+                            {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                        </Table.Cell>
+                        <Table.Cell column="reads" {root}>
+                            {format(project.databasesReads ?? 0)}
+                        </Table.Cell>
+                        <Table.Cell column="writes" {root}>
+                            {format(project.databasesWrites ?? 0)}
+                        </Table.Cell>
+                        <Table.Cell column="metric" {root}>
+                            {format(project.usage)}
+                        </Table.Cell>
+                        <Table.Cell column="costs" {root}>
+                            {formatCurrency(project.estimate ?? 0)}
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {:else}
+                    <Table.Row.Link href={getProjectUsageLink(project.projectId)} {root}>
+                        <Table.Cell column="project" {root}>
+                            {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                        </Table.Cell>
+                        <Table.Cell column="reads" {root}>
+                            {format(project.databasesReads ?? 0)}
+                        </Table.Cell>
+                        <Table.Cell column="writes" {root}>
+                            {format(project.databasesWrites ?? 0)}
+                        </Table.Cell>
+                        <Table.Cell column="metric" {root}>
+                            {format(project.usage)}
+                        </Table.Cell>
+                        <Table.Cell column="costs" {root}>
+                            {formatCurrency(project.estimate ?? 0)}
+                        </Table.Cell>
+                    </Table.Row.Link>
+                {/if}
+            {/each}
+        </Table.Root>
+    </Accordion>
 {/if}
-
-<style>
-    .ignore-icon-rotate {
-        rotate: unset !important;
-    }
-</style>
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
index 87c7b1903..1609ddbf6 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
@@ -1,23 +1,15 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
-    import { AvatarInitials, CardGrid, Heading, Paginator } from '$lib/components';
+    import { AvatarInitials, CardGrid, Paginator } from '$lib/components';
     import { EmptyCardCloud } from '$lib/components/billing';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { toLocaleDate } from '$lib/helpers/date';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { plansInfo, tierToPlan } from '$lib/stores/billing';
     import { newMemberModal, organization } from '$lib/stores/organization';
     import type { Models } from '@appwrite.io/console';
+    import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Table, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
 
     export let members: Models.MembershipList;
 
@@ -26,61 +18,72 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Members</Heading>
-
-    <p class="text">The number of members in your organization.</p>
+    <svelte:fragment slot="title">Members</svelte:fragment>
+    The number of members in your organization.
     <svelte:fragment slot="aside">
         {#if $organization.billingPlan !== BillingPlan.FREE}
             <div class="u-flex u-flex-vertical">
-                <div class="u-flex u-main-space-between">
-                    <p>
-                        <span class="heading-level-4">{total}</span>
-                        <span class="body-text-1 u-bold">Members</span>
-                    </p>
+                <Layout.Stack direction="row" justifyContent="space-between">
+                    <Layout.Stack gap="s" direction="row" alignItems="center">
+                        <Typography.Title>
+                            {total}
+                        </Typography.Title>
+                        <Typography.Text>Members</Typography.Text>
+                        <Typography.Text color="--fgcolor-neutral-tertiary">/</Typography.Text>
+                        <Layout.Stack gap="xxxs" direction="row" alignItems="center">
+                            <Typography.Text color="--fgcolor-neutral-tertiary">
+                                unlimited
+                            </Typography.Text>
+                            <Tooltip maxWidth="200px">
+                                <Icon icon={IconInfo} size="s" />
+                                <svelte:fragment slot="tooltip">
+                                    You can add unlimited organization members on the {tierToPlan(
+                                        $organization.billingPlan
+                                    ).name} plan {$organization.billingPlan === BillingPlan.PRO
+                                        ? `for ${formatCurrency(plan.addons.seats.price)} each per billing period.`
+                                        : '.'}
+                                </svelte:fragment>
+                            </Tooltip>
+                        </Layout.Stack>
+                    </Layout.Stack>
                     <Button secondary on:click={() => newMemberModal.set(true)}>
-                        <span class="icon-plus"></span> <span class="text">Invite</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Invite
                     </Button>
-                </div>
-                <p class="body-text-2">
-                    Unlimited
-                    <span
-                        class="icon-info"
-                        use:tooltip={{
-                            content: `You can add unlimited organization members on the ${tierToPlan($organization.billingPlan).name} plan ${$organization.billingPlan === BillingPlan.PRO ? `for ${formatCurrency(plan.addons.seats.price)} each per billing period.` : '.'}`
-                        }}></span>
-                </p>
+                </Layout.Stack>
             </div>
-            <Paginator
-                items={members.memberships}
-                let:paginatedItems
-                hideFooter={members?.total <= 5}>
-                <TableScroll noMargin noStyles>
-                    <TableHeader>
-                        <TableCellHead>Members</TableCellHead>
-                        <TableCellHead>Joined</TableCellHead>
-                    </TableHeader>
-                    <TableBody>
+            <Paginator items={members.memberships} hideFooter={members?.total <= 5}>
+                {#snippet children(paginatedItems: typeof members.memberships)}
+                    <Table.Root columns={2} let:root>
+                        <svelte:fragment slot="header" let:root>
+                            <Table.Header.Cell {root}>Members</Table.Header.Cell>
+                            <Table.Header.Cell {root}>Joined</Table.Header.Cell>
+                        </svelte:fragment>
                         {#each paginatedItems as member}
-                            <TableRow>
-                                <TableCell title="name">
-                                    <div class="u-flex u-gap-12 u-cross-center">
+                            <Table.Row.Base {root}>
+                                <Table.Cell {root}>
+                                    <Layout.Stack direction="row" alignItems="center" gap="s">
                                         <AvatarInitials
-                                            size={32}
-                                            name={member.userName || member.userEmail} />
-                                        <span class="text u-trim">
-                                            {member.userName || member.userEmail}
-                                        </span>
-                                    </div>
-                                </TableCell>
-                                <TableCellText title="joined">
-                                    {member.joined
-                                        ? toLocaleDate(member.joined)
-                                        : toLocaleDate(member.$createdAt)}
-                                </TableCellText>
-                            </TableRow>
+                                            size="xs"
+                                            name={member.userName
+                                                ? member.userName
+                                                : member.userEmail} />
+                                        <Layout.Stack gap="none">
+                                            <Typography.Text>
+                                                {member.userName
+                                                    ? member.userName
+                                                    : member.userEmail}
+                                            </Typography.Text>
+                                        </Layout.Stack>
+                                    </Layout.Stack>
+                                </Table.Cell>
+                                <Table.Cell {root}>
+                                    <DualTimeView time={member.joined ?? member.$createdAt} />
+                                </Table.Cell>
+                            </Table.Row.Base>
                         {/each}
-                    </TableBody>
-                </TableScroll>
+                    </Table.Root>
+                {/snippet}
             </Paginator>
         {:else}
             <EmptyCardCloud service="members" eventSource="organization_usage" />
diff --git a/src/routes/(console)/organization-[organization]/wizard/step1.svelte b/src/routes/(console)/organization-[organization]/wizard/step1.svelte
deleted file mode 100644
index f76557a35..000000000
--- a/src/routes/(console)/organization-[organization]/wizard/step1.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, FormList } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { createProject } from './store';
-    import { regionFlagUrls } from '../store';
-    import { organization, regions } from '$lib/stores/organization';
-    import { loadAvailableRegions } from '$routes/(console)/regions';
-
-    let showCustomId = false;
-
-    if (!$regions?.regions) {
-        loadAvailableRegions($organization.$id);
-    }
-</script>
-
-<svelte:head>
-    {#each $regionFlagUrls as image}
-        <link rel="preload" as="image" href={image} />
-    {/each}
-</svelte:head>
-
-<WizardStep>
-    <svelte:fragment slot="title">Details</svelte:fragment>
-    <FormList>
-        <InputText
-            label="Name"
-            id="name"
-            placeholder="Project name"
-            bind:value={$createProject.name}
-            autofocus
-            required />
-
-        {#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
-                autofocus
-                bind:show={showCustomId}
-                name="Project"
-                isProject={true}
-                bind:id={$createProject.id}
-                fullWidth />
-        {/if}
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/organization-[organization]/wizard/step2.svelte b/src/routes/(console)/organization-[organization]/wizard/step2.svelte
deleted file mode 100644
index c7aaa763f..000000000
--- a/src/routes/(console)/organization-[organization]/wizard/step2.svelte
+++ /dev/null
@@ -1,150 +0,0 @@
-<script lang="ts">
-    import { RegionCard } from '$lib/components';
-    import { Flag, Pill } from '$lib/elements';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { createProject } from './store';
-    import { addNotification } from '$lib/stores/notifications';
-    import type { Models } from '@appwrite.io/console';
-    import { page } from '$app/stores';
-    import { regions } from '$lib/stores/organization';
-    // import { goto } from '$app/navigation';
-    // import { upgradeURL } from '$lib/stores/billing';
-
-    let prefs: Models.Preferences;
-
-    onMount(async () => {
-        prefs = $page.data.account.prefs;
-    });
-
-    async function notifyRegion(selectedRegion: Models.ConsoleRegion) {
-        try {
-            let newPrefs = { ...prefs };
-            newPrefs.notifications ??= [];
-            newPrefs.notifications = [...newPrefs.notifications, selectedRegion.$id];
-            const response = await sdk.forConsole.account.updatePrefs(newPrefs);
-            prefs = response.prefs;
-            addNotification({
-                type: 'success',
-                isHtml: true,
-                message: `You will be notified via email when <b>${selectedRegion.name}</b> region is available`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: 'Something went wrong, please try again later'
-            });
-        }
-    }
-
-    async function unNotifyRegion(selectedRegion: Models.ConsoleRegion) {
-        try {
-            let newPrefs = { ...prefs };
-            newPrefs.notifications = newPrefs.notifications ?? [];
-            newPrefs.notifications = [...newPrefs.notifications, selectedRegion.$id];
-            newPrefs.notifications = newPrefs.notifications.filter(
-                (region: string) => region !== selectedRegion.$id
-            );
-            const response = await sdk.forConsole.account.updatePrefs(newPrefs);
-            prefs = response.prefs;
-            addNotification({
-                type: 'info',
-                isHtml: true,
-                message: `You will no longer be notified when the <b>${selectedRegion.name}</b> region is available`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: 'Something went wrong, please try again later'
-            });
-        }
-    }
-
-    $: notifications = prefs?.notifications ?? [];
-
-    const sortedRegions = $regions.regions.sort((regionA, regionB) => {
-        if (regionA.disabled >= regionB.disabled) {
-            return 1;
-        }
-        return -1;
-    });
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Regions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose a deployment region for your project. This region cannot be changed.
-    </svelte:fragment>
-    {#if $regions}
-        <ul
-            class="grid-box u-margin-block-start-16"
-            style="--p-grid-item-size:12em; --p-grid-item-size-small-screens:12rem; --grid-gap: 1rem;">
-            {#each sortedRegions as region, index (region.$id)}
-                <li>
-                    <RegionCard
-                        name="region"
-                        bind:group={$createProject.region}
-                        value={region.$id}
-                        disabled={!region.available || region.disabled}
-                        autofocus={index === 0}>
-                        <div
-                            class="u-flex u-flex-vertical u-gap-8 u-justify-main-center u-cross-center u-margin-inline-auto">
-                            {#if region.disabled || !region.available}
-                                <Flag
-                                    width={40}
-                                    height={30}
-                                    class={region.disabled || !region.available
-                                        ? 'u-opacity-50'
-                                        : ''}
-                                    flag={region.flag}
-                                    name={region.name} />
-                                <p class:u-opacity-50={region.disabled || !region.available}>
-                                    {region.name}
-                                </p>
-                                {#if !notifications.includes(region.$id)}
-                                    <Pill
-                                        button
-                                        event="region_notify"
-                                        on:click={() => {
-                                            notifyRegion(region);
-                                        }}>
-                                        <span class="icon-bell" aria-hidden="true" />
-                                        <span class="text">Notify me</span>
-                                    </Pill>
-                                {:else}
-                                    <Pill
-                                        selected
-                                        button
-                                        event="region_notify"
-                                        on:click={() => {
-                                            unNotifyRegion(region);
-                                        }}>
-                                        <span class="icon-check" aria-hidden="true" />
-                                        <span class="text">Notify me</span>
-                                    </Pill>
-                                {/if}
-                            {:else}
-                                <Flag
-                                    width={40}
-                                    height={30}
-                                    flag={region.flag}
-                                    name={region.name} />
-                                {region.name}
-
-                                <!-- {#if !region.available}
-                                    <Pill
-                                        button
-                                        event="upgrade_from_region_chooser"
-                                        on:click={() => goto($upgradeURL)}>
-                                        <span class="text">Upgrade</span>
-                                    </Pill>
-                                {/if} -->
-                            {/if}
-                        </div>
-                    </RegionCard>
-                </li>
-            {/each}
-        </ul>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/organization-[organization]/wizard/store.ts b/src/routes/(console)/organization-[organization]/wizard/store.ts
index d79bd1ded..0ff9a6351 100644
--- a/src/routes/(console)/organization-[organization]/wizard/store.ts
+++ b/src/routes/(console)/organization-[organization]/wizard/store.ts
@@ -6,6 +6,6 @@ export const createProject = writable<{
     region: string;
 }>({
     id: null,
-    name: null,
+    name: 'Appwrite project',
     region: 'fra'
 });
diff --git a/src/routes/(console)/project-[region]-[project]/+error.svelte b/src/routes/(console)/project-[region]-[project]/+error.svelte
index be0053176..9ef91393f 100644
--- a/src/routes/(console)/project-[region]-[project]/+error.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+error.svelte
@@ -1,10 +1,13 @@
 <script>
-    import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { page } from '$app/state';
     import { Container } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
-    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
-    <p class="body-text-2 u-bold u-margin-block-start-4">{$page.error.message}</p>
+    <Typography.Title size="xl"
+        >{'status' in page.error
+            ? page.error.status || 'Invalid Argument'
+            : 'Invalid Argument'}</Typography.Title>
+    <p class="body-text-2 u-bold u-margin-block-start-4">{page.error.message}</p>
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/+layout.svelte
index 8e0bdba63..0254a8cdc 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+layout.svelte
@@ -14,19 +14,21 @@
         teamSearcher,
         userSearcher
     } from '$lib/commandCenter/searchers';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { base } from '$app/paths';
     import {
         canSeeBuckets,
         canSeeDatabases,
         canSeeFunctions,
         canSeeMessages,
-        canWriteProjects
+        canWriteProjects,
+        canWriteSites
     } from '$lib/stores/roles';
+    import CsvImportBox from '$lib/components/csvImportBox.svelte';
 
     onMount(() => {
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe(['project', 'console'], (response) => {
                 if (response.events.includes('stats.connections')) {
                     for (const [projectId, value] of Object.entries(response.payload)) {
@@ -69,7 +71,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/messaging`);
             },
             keys: ['g', 'm'],
-            disabled: $page.url.pathname.endsWith('messaging') || !$canSeeMessages,
+            disabled: page.url.pathname.endsWith('messaging') || !$canSeeMessages,
             group: 'navigation'
         },
         {
@@ -90,6 +92,15 @@
             group: 'navigation',
             disabled: !$canWriteProjects
         },
+        {
+            label: 'Go to Sites',
+            callback: () => {
+                goto(`${base}/project-${$project.region}-${$project.$id}/sites`);
+            },
+            keys: ['g', 'i'],
+            group: 'navigation',
+            disabled: !$canWriteSites
+        },
         {
             label: 'Go to Overview',
             callback: () => {
@@ -109,11 +120,13 @@
     <UploadBox />
     <MigrationBox />
     <BackupRestoreBox />
+    <CsvImportBox />
 </div>
 
 <style>
     .layout-level-progress-bars {
         gap: 1rem;
+        z-index: 1;
         display: flex;
         flex-direction: column;
 
diff --git a/src/routes/(console)/project-[region]-[project]/+page.ts b/src/routes/(console)/project-[region]-[project]/+page.ts
index 4662cf330..9aaf5f079 100644
--- a/src/routes/(console)/project-[region]-[project]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/+page.ts
@@ -1,7 +1,11 @@
 import { redirect } from '@sveltejs/kit';
 import { base } from '$app/paths';
 import type { PageLoad } from './$types';
+import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
 
 export const load: PageLoad = async ({ params }) => {
-    redirect(302, `${base}/project-${params.region}-${params.project}/overview`);
+    if (hasOnboardingDismissed(params.project)) {
+        redirect(302, `${base}/project-${params.region}-${params.project}/overview`);
+    }
+    redirect(302, `${base}/project-${params.region}-${params.project}/get-started`);
 };
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte
index b95fcf2ac..0257a5dd4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import { Link, Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -41,35 +42,36 @@
     $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Modal {error} onSubmit={update} size="big" bind:show on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
-                visit the docs.
-            </a>
-        </p>
-        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
-        <InputText
-            id="servicesID"
-            label="Services 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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} onSubmit={update} bind:show on:close title={`${provider.name} OAuth2 settings`}>
+    <p slot="description">
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <Link.Anchor
+            class="link"
+            href={oAuthProvider?.docs}
+            target="_blank"
+            rel="noopener noreferrer">
+            visit the docs.
+        </Link.Anchor>
+    </p>
+    <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+    <InputText
+        id="servicesID"
+        label="Services 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.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte
index 484970c75..9ef4f9097 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
-    import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
+    import { Link, Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
-
+    const projectId = page.params.project;
     export let provider: Models.AuthProvider;
     export let show = false;
 
@@ -43,43 +43,39 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" bind:show onSubmit={update} on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
+    <svelte:fragment slot="description">
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <Link.Anchor href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
+            >visit the docs.</Link.Anchor>
+    </svelte:fragment>
+    <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}
+        bind:value={clientSecret} />
+    <InputText
+        id="domain"
+        label="Auth0 Domain"
+        placeholder="Your Auth0 domain"
+        bind:value={auth0Domain} />
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte
index 64c8cf11f..49fb81c40 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
-    import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
+    import { Link, Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -43,43 +44,42 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" bind:show onSubmit={update} on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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="Authentik Base-Domain"
-            placeholder="Your Authentik domain"
-            bind:value={authentikDomain} />
-        <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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
+    <p slot="description">
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <Link.Anchor
+            class="link"
+            href={oAuthProvider?.docs}
+            target="_blank"
+            rel="noopener noreferrer">visit the docs.</Link.Anchor>
+    </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}
+        bind:value={clientSecret} />
+    <InputText
+        id="domain"
+        label="Authentik Base-Domain"
+        placeholder="Your Authentik domain"
+        bind:value={authentikDomain} />
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte
index 2debd500d..481ce1e60 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
-    import { getApiEndpoint } from '$lib/stores/sdk';
-    import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
+    import { Link, Alert } from '@appwrite.io/pink-svelte';
+    import { getApiEndpoint } from '$lib/stores/sdk';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -41,43 +42,39 @@
         clientSecret && endpoint ? JSON.stringify({ clientSecret, endpoint }) : provider.secret;
 </script>
 
-<Modal {error} size="big" bind:show onSubmit={update} on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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={clientSecret} />
-        <InputText
-            id="endpoint"
-            label="Endpoint (optional)"
-            placeholder="Your endpoint"
-            bind:value={endpoint} />
-        <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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
+    <p slot="description">
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <Link.Anchor href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
+            >visit the docs.</Link.Anchor>
+    </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}
+        bind:value={clientSecret} />
+    <InputText
+        id="endpoint"
+        label="Endpoint (optional)"
+        placeholder="Your endpoint"
+        bind:value={endpoint} />
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte
index a9dad9828..82109ee1b 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -38,39 +39,38 @@
     };
 </script>
 
-<Modal {error} size="big" bind:show onSubmit={update} on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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 the setup, create an OAuth2 client ID with "Web application" as the
-            application type, then add this redirect URI to your {provider.name} configuration.
-        </Alert>
-        <div>
-            <p>URI</p>
-            <CopyInput
-                value={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} size="l" bind:show onSubmit={update} on:close>
+    <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
+
+    <p>
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <a class="link" href={oAuthProvider?.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}
+        bind:value={secret} />
+    <Alert.Inline status="info">
+        To complete the setup, create an OAuth2 client ID with "Web application" as the application
+        type, then add this redirect URI to your {provider.name} configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
+
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte
index b5f0a2253..1e318f3ce 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
-    import { getApiEndpoint } from '$lib/stores/sdk';
-    import type { Models } from '@appwrite.io/console';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
+    import { Link, Alert } from '@appwrite.io/pink-svelte';
+    import { getApiEndpoint } from '$lib/stores/sdk';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -38,38 +39,37 @@
     };
 </script>
 
-<Modal {error} size="big" bind:show onSubmit={update} on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
+    <p slot="description">
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <Link.Anchor
+            class="link"
+            href={oAuthProvider?.docs}
+            target="_blank"
+            rel="noopener noreferrer">visit the docs.</Link.Anchor>
+    </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}
+        bind:value={secret} />
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte
index ba7565938..3d874ab27 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -41,44 +42,41 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Modal {error} onSubmit={update} size="big" bind:show on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+<Modal {error} onSubmit={update} bind:show on:close>
+    <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
+    <p>
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <a class="link" href={oAuthProvider?.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"
+        minlength={0}
+        bind:value={clientSecret} />
+    <InputText
+        id="tenant"
+        label="Target Tenant"
+        placeholder="'common','organizations','consumers' or your TenantID"
+        bind:value={tenantID} />
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte
index 85c363a74..f5d9b9683 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -64,59 +65,56 @@
         : provider.secret;
 </script>
 
-<Modal {error} onSubmit={update} size="big" bind:show on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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="well-known-endpoint"
-            label="Well-Known Endpoint"
-            placeholder="https://example.com/.well-known/openid-configuration"
-            bind:value={wellKnownEndpoint} />
-        <InputText
-            id="authorization-endpoint"
-            label="Authorization Endpoint"
-            placeholder="https://example.com/authorize"
-            bind:value={authorizationEndpoint} />
-        <InputText
-            id="token-endpoint"
-            label="Token Endpoint"
-            placeholder="https://example.com/token"
-            bind:value={tokenEndpoint} />
-        <InputText
-            id="userinfo-endpoint"
-            label="User Info Endpoint"
-            placeholder="https://example.com/userinfo"
-            bind:value={userinfoEndpoint} />
+<Modal {error} onSubmit={update} size="l" bind:show on:close>
+    <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
+    <p>
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <a class="link" href={oAuthProvider?.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}
+        bind:value={clientSecret} />
+    <InputText
+        id="well-known-endpoint"
+        label="Well-Known Endpoint"
+        placeholder="https://example.com/.well-known/openid-configuration"
+        bind:value={wellKnownEndpoint} />
+    <InputText
+        id="authorization-endpoint"
+        label="Authorization Endpoint"
+        placeholder="https://example.com/authorize"
+        bind:value={authorizationEndpoint} />
+    <InputText
+        id="token-endpoint"
+        label="Token Endpoint"
+        placeholder="https://example.com/token"
+        bind:value={tokenEndpoint} />
+    <InputText
+        id="userinfo-endpoint"
+        label="User Info Endpoint"
+        placeholder="https://example.com/userinfo"
+        bind:value={userinfoEndpoint} />
 
-        <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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte
index a8ec617aa..9df850423 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert, CopyInput, Modal } from '$lib/components';
-    import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
     import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { getApiEndpoint } from '$lib/stores/sdk';
-    import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     export let provider: Models.AuthProvider;
     export let show = false;
@@ -46,49 +47,46 @@
             : provider.secret;
 </script>
 
-<Modal {error} onSubmit={update} size="big" bind:show on:close>
-    <svelte:fragment slot="title">{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={oAuthProvider?.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} />
+<Modal {error} onSubmit={update} size="l" bind:show on:close>
+    <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
+    <p>
+        To use {provider.name} authentication in your application, first fill in this form. For more
+        info you can
+        <a class="link" href={oAuthProvider?.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}
+        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={`${getApiEndpoint($page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
-        </div>
-    </FormList>
+    <Alert.Inline status="info">
+        To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+    </Alert.Inline>
+    <div>
+        <p>URI</p>
+        <CopyInput
+            value={`${getApiEndpoint(page.params.region)}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
+    </div>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte b/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte
index b679c32a6..674167aa3 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { TeamsPanel, UsersPanel } from '$lib/commandCenter/panels';
     import { readOnly } from '$lib/stores/billing';
@@ -10,35 +10,36 @@
     import { project } from '../store';
     import { showCreateUser } from './+page.svelte';
     import { showCreateTeam } from './teams/+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
             label: 'Create user',
             callback: async () => {
-                if (!$page.url.pathname.endsWith('auth')) {
+                if (!page.url.pathname.endsWith('auth')) {
                     await goto(`${base}/project-${$project.region}-${$project.$id}/auth`);
                 }
                 showCreateUser.set(true);
             },
-            keys: $page.url.pathname.endsWith('auth') ? ['c'] : ['c', 'u'],
+            keys: page.url.pathname.endsWith('auth') ? ['c'] : ['c', 'u'],
             group: 'users',
-            icon: 'plus',
-            rank: $page.url.pathname.endsWith('auth') ? 10 : 0,
+            icon: IconPlus,
+            rank: page.url.pathname.endsWith('auth') ? 10 : 0,
             disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteUsers
         },
         {
             label: 'Create team',
             callback: async () => {
-                if (!$page.url.pathname.endsWith('teams')) {
+                if (!page.url.pathname.endsWith('teams')) {
                     await goto(`${base}/project-${$project.region}-${$project.$id}/auth/teams`);
                 }
                 showCreateTeam.set(true);
             },
-            keys: $page.url.pathname.endsWith('teams') ? ['c'] : ['c', 't'],
+            keys: page.url.pathname.endsWith('teams') ? ['c'] : ['c', 't'],
 
             group: 'teams',
-            icon: 'plus',
-            rank: $page.url.pathname.endsWith('teams') ? 10 : 0,
+            icon: IconPlus,
+            rank: page.url.pathname.endsWith('teams') ? 10 : 0,
             disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteTeams
         },
         {
@@ -49,7 +50,7 @@
             },
             group: 'navigation',
             rank: 1,
-            disabled: $page.url.pathname.endsWith('teams')
+            disabled: page.url.pathname.endsWith('teams')
         },
         {
             label: 'Go to usage',
@@ -59,7 +60,7 @@
             },
             group: 'navigation',
             rank: 1,
-            disabled: $page.url.pathname.endsWith('usage')
+            disabled: page.url.pathname.endsWith('usage')
         },
         {
             label: 'Go to security',
@@ -69,7 +70,7 @@
             },
             group: 'navigation',
             rank: 1,
-            disabled: $page.url.pathname.endsWith('security') || !$canWriteUsers
+            disabled: page.url.pathname.endsWith('security') || !$canWriteUsers
         },
         {
             label: 'Go to settings',
@@ -79,7 +80,7 @@
             },
             group: 'navigation',
             rank: 1,
-            disabled: $page.url.pathname.endsWith('settings') || !$canWriteUsers
+            disabled: page.url.pathname.endsWith('settings') || !$canWriteUsers
         },
         {
             label: 'Find users',
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
index 04c306f15..aa4f5702c 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import {
         AvatarInitials,
         Copy,
@@ -14,130 +14,146 @@
         PaginationWithLimit,
         SearchQuery
     } from '$lib/components';
-    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRowLink
-    } from '$lib/elements/table';
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
-    import type { PageData } from './$types';
     import Create from './createUser.svelte';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Badge, Icon, Table, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Tag } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { canWriteUsers } from '$lib/stores/roles';
+    import type { Column } from '$lib/helpers/types';
+    import ViewSelector from '$lib/components/viewSelector.svelte';
+    import { View } from '$lib/helpers/load';
 
-    export let data: PageData;
+    export let data;
+
+    const columns = writable<Column[]>([
+        { id: '$id', title: 'User ID', type: 'string', width: 200 },
+        { id: 'name', title: 'Name', type: 'string', width: { min: 260 } },
+        { id: 'identifiers', title: 'Identifiers', type: 'string', width: { min: 260 } },
+        { id: 'status', title: 'Status', type: 'string', width: { min: 140 } },
+        { id: 'labels', title: 'Labels', type: 'string', hide: true, width: { min: 140 } },
+        { id: 'joined', title: 'Joined', type: 'string', width: { min: 140 } },
+        {
+            id: 'lastActivity',
+            title: 'Last activity',
+            type: 'string',
+            hide: true,
+            width: { min: 140 }
+        }
+    ]);
 
-    $: region = $page.params.region;
-    $: projectId = $page.params.project;
     async function userCreated(event: CustomEvent<Models.User<Record<string, unknown>>>) {
-        await goto(`${base}/project-${region}-${projectId}/auth/user-${event.detail.$id}`);
+        await goto(
+            `${base}/project-${page.params.region}-${page.params.project}/auth/user-${event.detail.$id}`
+        );
     }
 </script>
 
 <Container>
-    <ContainerHeader title="Users" isFlex={false} total={data.users.total} let:isButtonDisabled>
-        <SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID">
-            {#if $canWriteUsers}
-                <div
-                    use:tooltip={{
-                        content: `Upgrade to add more users`,
-                        disabled: !isButtonDisabled
-                    }}>
-                    <Button
-                        on:click={() => ($showCreateUser = true)}
-                        event="create_user"
-                        disabled={isButtonDisabled}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create user</span>
-                    </Button>
-                </div>
-            {/if}
-        </SearchQuery>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name, email, phone, or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector view={View.Table} {columns} hideView />
+            <Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
+                <Icon size="s" icon={IconPlus} slot="start" />
+                <span class="text">Create user</span>
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.users.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Identifiers</TableCellHead>
-                <TableCellHead onlyDesktop width={130}>Status</TableCellHead>
-                <TableCellHead onlyDesktop width={100}>ID</TableCellHead>
-                <TableCellHead onlyDesktop width={100}>Labels</TableCellHead>
-                <TableCellHead onlyDesktop>Joined</TableCellHead>
-                <TableCellHead onlyDesktop>Last Activity</TableCellHead>
-            </TableHeader>
-            <TableBody>
-                {#each data.users.users as user}
-                    <TableRowLink
-                        href={`${base}/project-${region}-${projectId}/auth/user-${user.$id}`}>
-                        <TableCell title="Name">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                {#if user.email || user.phone}
-                                    {#if user.name}
-                                        <AvatarInitials size={32} name={user.name} />
-                                        <span class="text u-trim">{user.name}</span>
+        <Table.Root columns={$columns} let:root>
+            <svelte:fragment slot="header" let:root>
+                {#each $columns as { id, title } (id)}
+                    <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
+                {/each}
+            </svelte:fragment>
+            {#each data.users.users as user}
+                <Table.Row.Link
+                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/user-${user.$id}`}
+                    {root}>
+                    {#each $columns as { id } (id)}
+                        <Table.Cell column={id} {root}>
+                            {#if id === '$id'}
+                                <Copy value={user.$id} event="user">
+                                    <Tag size="xs" variant="code">
+                                        <Icon size="s" icon={IconDuplicate} slot="start" />
+                                        {user.$id}
+                                    </Tag>
+                                </Copy>
+                            {:else if id === 'name'}
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    {#if user.email || user.phone}
+                                        {#if user.name}
+                                            <AvatarInitials size="xs" name={user.name} />
+                                            <Typography.Text truncate>
+                                                {user.name}
+                                            </Typography.Text>
+                                        {:else}
+                                            <div class="avatar is-size-small">
+                                                <span class="icon-minus-sm" aria-hidden="true"
+                                                ></span>
+                                            </div>
+                                        {/if}
                                     {:else}
                                         <div class="avatar is-size-small">
-                                            <span class="icon-minus-sm" aria-hidden="true" />
+                                            <span class="icon-anonymous" aria-hidden="true"></span>
                                         </div>
+                                        <Typography.Text truncate>
+                                            {user.name}
+                                        </Typography.Text>
                                     {/if}
+                                </Layout.Stack>
+                            {:else if id === 'identifiers'}
+                                <Typography.Text truncate>
+                                    {user.email && user.phone
+                                        ? [user.email, user.phone].join(',')
+                                        : user.email || user.phone}
+                                </Typography.Text>
+                            {:else if id === 'status'}
+                                {#if user.status}
+                                    {@const success =
+                                        user.emailVerification || user.phoneVerification}
+                                    <Badge
+                                        size="xs"
+                                        variant="secondary"
+                                        type={success ? 'success' : undefined}
+                                        content={user.emailVerification && user.phoneVerification
+                                            ? 'Verified'
+                                            : user.emailVerification
+                                              ? 'Verified email'
+                                              : user.phoneVerification
+                                                ? 'Verified phone'
+                                                : 'Unverified'} />
                                 {:else}
-                                    <div class="avatar is-size-small">
-                                        <span class="icon-anonymous" aria-hidden="true" />
-                                    </div>
-                                    <span class="text u-trim">{user.name}</span>
+                                    <Badge
+                                        size="xs"
+                                        variant="secondary"
+                                        type="error"
+                                        content="blocked" />
                                 {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Identifiers">
-                            {user.email && user.phone
-                                ? [user.email, user.phone].join(',')
-                                : user.email || user.phone}
-                        </TableCellText>
-                        <TableCell onlyDesktop title="Status">
-                            {#if user.status}
-                                <Pill success={user.emailVerification || user.phoneVerification}>
-                                    {user.emailVerification && user.phoneVerification
-                                        ? 'verified'
-                                        : user.emailVerification
-                                          ? 'verified email'
-                                          : user.phoneVerification
-                                            ? 'verified phone'
-                                            : 'unverified'}
-                                </Pill>
+                            {:else if id === 'labels'}
+                                <Typography.Text truncate>
+                                    {user.labels.join(', ')}
+                                </Typography.Text>
+                            {:else if id === 'joined'}
+                                {toLocaleDateTime(user.registration)}
+                            {:else if id === 'lastActivity'}
+                                {user.accessedAt ? toLocaleDate(user.accessedAt) : 'never'}
                             {:else}
-                                <Pill danger>blocked</Pill>
+                                {user[id]}
                             {/if}
-                        </TableCell>
-                        <TableCell onlyDesktop showOverflow title="ID">
-                            <Copy value={user.$id} event="user">
-                                <Pill button>
-                                    <span class="icon-duplicate" aria-hidden="true" />
-                                    <span class="text">User ID</span>
-                                </Pill>
-                            </Copy>
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Labels">
-                            {user.labels.join(', ')}
-                        </TableCellText>
-                        <TableCellText onlyDesktop title="Joined">
-                            {toLocaleDateTime(user.registration)}
-                        </TableCellText>
-                        <TableCellText onlyDesktop title="Last Activity">
-                            {user.accessedAt ? toLocaleDate(user.accessedAt) : 'never'}
-                        </TableCellText>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </Table>
+                        </Table.Cell>
+                    {/each}
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit
             name="Users"
@@ -145,13 +161,11 @@
             offset={data.offset}
             total={data.users.total} />
     {:else if data.search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find '{data.search}'</b>
-                <p>There are no users that match your search.</p>
-            </div>
-            <Button href={`${base}/project-${region}-${projectId}/auth`} secondary
-                >Clear Search</Button>
+        <EmptySearch target="users" hidePagination>
+            <Button
+                href={`${base}/project-${page.params.region}-${page.params.project}/auth`}
+                size="s"
+                secondary>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty
@@ -159,7 +173,7 @@
             href="https://appwrite.io/docs/references/cloud/server-nodejs/users"
             target="user"
             allowCreate={$canWriteUsers}
-            on:click={() => showCreateUser.set(true)} />
+            on:mousedown={() => showCreateUser.set(true)} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/+page.ts
index db6ad38c7..74ce23f31 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.ts
@@ -8,7 +8,7 @@ import { showCreateUser } from './+page.svelte';
 export const load: PageLoad = async ({ url, route, params }) => {
     const page = getPage(url);
     const search = getSearch(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     if (typeof url.searchParams.get('create') === 'string') {
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createTeam.svelte b/src/routes/(console)/project-[region]-[project]/auth/createTeam.svelte
index 53153edc5..dc7bd0cdc 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/createTeam.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/createTeam.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, Button, FormList } from '$lib/elements/forms';
+    import { InputText, Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let showCreate = false;
@@ -19,7 +20,7 @@
     const create = async () => {
         try {
             const team = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .teams.create(id ?? ID.unique(), name);
             name = '';
             showCreate = false;
@@ -44,26 +45,22 @@
     }
 </script>
 
-<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <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 autofocus bind:show={showCustomId} name="Team" bind:id />
-        {/if}
-    </FormList>
+<Modal title="Create team" {error} size="m" bind:show={showCreate} onSubmit={create}>
+    <InputText
+        id="name"
+        label="Name"
+        placeholder="Enter name"
+        autofocus={true}
+        required
+        bind:value={name} />
+    {#if !showCustomId}
+        <div>
+            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}
+                ><Icon icon={IconPencil} /> Team ID</Tag>
+        </div>
+    {:else}
+        <CustomId autofocus bind:show={showCustomId} name="Team" bind:id />
+    {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
index cdee4d41d..ac687b508 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
@@ -1,19 +1,13 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements/';
-    import {
-        Button,
-        InputPassword,
-        InputEmail,
-        InputText,
-        InputPhone,
-        FormList
-    } from '$lib/elements/forms';
+    import { Button, InputPassword, InputEmail, InputText, InputPhone } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let showCreate = false;
@@ -27,7 +21,7 @@
     const create = async () => {
         try {
             const user = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.create(
                     id ?? ID.unique(),
                     mail || undefined,
@@ -61,37 +55,24 @@
     }
 </script>
 
-<Modal title="Create user" {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="Enter name"
-            autofocus={true}
-            bind:value={name} />
-        <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
-        <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
-        <InputPassword
-            id="password"
-            label="Password"
-            placeholder="Enter password"
-            showPasswordButton={true}
-            bind:value={pass} />
+<Modal title="Create user" {error} bind:show={showCreate} onSubmit={create}>
+    <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" 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 autofocus bind:show={showDropdown} name="User" bind:id />
-        {/if}
-    </FormList>
+    {#if !showDropdown}
+        <div>
+            <Tag
+                size="s"
+                on:click={() => {
+                    showDropdown = true;
+                }}><Icon icon={IconPencil} /> User ID</Tag>
+        </div>
+    {/if}
+    <CustomId bind:show={showDropdown} name="User" bind:id />
     <svelte:fragment slot="footer">
-        <Button text on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button text on:mousedown={() => (showCreate = false)}>Cancel</Button>
         <Button submit>Create</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/header.svelte b/src/routes/(console)/project-[region]-[project]/auth/header.svelte
index 4f537dcf2..bb425c2b5 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/header.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
     import { canWriteProjects } from '$lib/stores/roles';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const path = `${base}/project-${$page.params.region}-${$page.params.project}/auth`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/auth`;
     const tabs = [
         {
             href: path,
@@ -50,14 +51,14 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle>Auth</CoverTitle>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
             <Tab
                 href={tab.href}
                 event={tab.event}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateMembershipPrivacy.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateMembershipPrivacy.svelte
index e479e4081..ef5647767 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateMembershipPrivacy.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateMembershipPrivacy.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, InputChoice } from '$lib/elements/forms';
-    import { FormList } from '$lib/elements/forms';
+    import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Selector } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
 
     let authMembershipsUserName = $project?.authMembershipsUserName ?? true;
@@ -39,28 +39,24 @@
 
 <Form onSubmit={updateMembershipsPrivacy}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Memberships privacy</Heading>
-        <p>
-            Set privacy preferences to manage which details team members can view about one another.
-        </p>
+        <svelte:fragment slot="title">Memberships privacy</svelte:fragment>
+        Set privacy preferences to manage which details team members can view about one another.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputChoice
-                    bind:value={authMembershipsUserName}
-                    id="membershipsUserName"
-                    label="Name">
-                    Display team members' names to other team members
-                </InputChoice>
-                <InputChoice
-                    bind:value={authMembershipsUserEmail}
-                    id="membershipsUserEmail"
-                    label="Email">
-                    Allow team members to view each other's email addresses
-                </InputChoice>
-                <InputChoice bind:value={authMembershipsMfa} id="membershipsMfa" label="MFA status">
-                    Show if team members have multi-factor authentication enabled
-                </InputChoice>
-            </FormList>
+            <Selector.Checkbox
+                id="membershipsUserName"
+                label="Name"
+                description="Display team members' names to other team members"
+                bind:checked={authMembershipsUserName} />
+            <Selector.Checkbox
+                id="membershipsUserEmail"
+                label="Email"
+                description="Allow team members to view each other's email addresses"
+                bind:checked={authMembershipsUserEmail} />
+            <Selector.Checkbox
+                id="membershipsMfa"
+                label="MFA status"
+                description="Show if team members have multi-factor authentication enabled"
+                bind:checked={authMembershipsMfa} />
         </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte
index cd1830a26..a9ed632c9 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
     import { InputPhone, InputOTP } from '$lib/elements/forms';
-    import { Button, Form, FormItem, FormItemPart } from '$lib/elements/forms';
+    import { Button, Form } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
     import { upgradeURL } from '$lib/stores/billing';
@@ -17,7 +17,8 @@
     import { app } from '$lib/stores/app';
     import Empty from '$lib/components/empty.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Icon, Input, Layout, Link, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus, IconRefresh } from '@appwrite.io/pink-icons-svelte';
 
     let numbers: Models.MockNumber[] = $project?.authMockNumbers ?? [];
     let initialNumbers = [];
@@ -81,20 +82,17 @@
 
 <Form onSubmit={updateMockNumbers}>
     <CardGrid hideFooter={isComponentDisabled}>
-        <Heading tag="h6" size="7" id="variables">Mock phone numbers</Heading>
-        <p>
-            Generate <b>fictional</b> numbers to simulate phone verification when testing demo
-            accounts for submitting your application to the App Store or Google Play.
-            <a
-                href="https://appwrite.io/docs/products/auth/security#mock-phone-numbers"
-                target="_blank"
-                class="u-underline"
-                rel="noopener noreferrer">
-                Learn more</a>
-        </p>
+        <svelte:fragment slot="title">Mock phone numbers</svelte:fragment>
+        Generate <b>fictional</b> numbers to simulate phone verification when testing demo accounts
+        for submitting your application to the App Store or Google Play.
+        <Link.Anchor
+            href="https://appwrite.io/docs/products/auth/security#mock-phone-numbers"
+            target="_blank"
+            rel="noopener noreferrer">
+            Learn more</Link.Anchor>
         <svelte:fragment slot="aside">
             {#if isComponentDisabled}
-                <EmptyCardImageCloud source="email_signature_card" noAspectRatio>
+                <EmptyCardImageCloud source="email_signature_card">
                     <svelte:fragment slot="image">
                         <div class=" is-only-mobile u-width-full-line u-height-100-percent">
                             {#if $app.themeInUse === 'dark'}
@@ -109,37 +107,36 @@
                                     alt="Mock Numbers Example" />
                             {/if}
                         </div>
-                        <div class="is-not-mobile u-width-full-line u-height-100-percent">
-                            {#if $app.themeInUse === 'dark'}
-                                <img
-                                    src={MockNumbersDark}
-                                    width="266"
-                                    height="171"
-                                    class="u-image-object-fit-contain u-block u-only-dark u-width-full-line u-height-100-percent"
-                                    style:object-position="top"
-                                    alt="Mock Numbers Example" />
-                            {:else}
-                                <img
-                                    src={MockNumbersLight}
-                                    width="266"
-                                    height="171"
-                                    class="u-image-object-fit-contain u-only-light u-width-full-line u-height-100-percent"
-                                    style:object-position="top"
-                                    alt="Mock Numbers Example" />
-                            {/if}
+                        <div
+                            class="is-not-mobile"
+                            style:background-color="var(--bgcolor-neutral-default)">
+                            <Layout.Stack justifyContent="center" direction="row">
+                                {#if $app.themeInUse === 'dark'}
+                                    <img
+                                        src={MockNumbersDark}
+                                        width="266"
+                                        style:object-position="top"
+                                        alt="Mock Numbers Example" />
+                                {:else}
+                                    <img
+                                        src={MockNumbersLight}
+                                        width="266"
+                                        style:object-position="top"
+                                        alt="Mock Numbers Example" />
+                                {/if}
+                            </Layout.Stack>
                         </div>
                     </svelte:fragment>
                     <svelte:fragment slot="title">{emptyStateTitle}</svelte:fragment>
                     {emptyStateDescription}
                     <svelte:fragment let:source slot="cta">
                         <Button
-                            class="u-margin-block-start-32"
                             secondary
                             fullWidth
                             external={isSelfHosted}
                             href={isCloud ? $upgradeURL : 'https://cloud.appwrite.io/register'}
                             on:click={() => {
-                                trackEvent('click_cloud_signup', {
+                                trackEvent(Click.CloudSignupClick, {
                                     from: 'button',
                                     source
                                 });
@@ -147,78 +144,66 @@
                     </svelte:fragment>
                 </EmptyCardImageCloud>
             {:else if numbers?.length > 0}
-                <ul class="form-list u-gap-8">
-                    {#each numbers as number, index}
-                        <FormItem isMultiple>
-                            <InputPhone
-                                id={`key-${index}`}
-                                bind:value={number.phone}
-                                fullWidth
-                                placeholder="Enter phone number"
-                                label="Phone number"
-                                showLabel={index === 0}
-                                minlength={9}
-                                maxlength={16}
-                                required>
-                                <button
-                                    slot="options"
-                                    use:tooltip={{ content: 'Regenerate', placement: 'bottom' }}
-                                    on:click={() => (number.phone = generateNumber())}
-                                    class="options-list-button"
-                                    aria-label="regenerate text"
-                                    type="button">
-                                    <span class="icon-refresh" aria-hidden="true"></span>
-                                </button>
-                            </InputPhone>
+                {#each numbers as number, index}
+                    <Layout.Stack direction="row" alignItems="flex-end">
+                        <InputPhone
+                            id={`key-${index}`}
+                            bind:value={number.phone}
+                            placeholder="Enter phone number"
+                            label={index === 0 ? 'Phone number' : undefined}
+                            minlength={9}
+                            maxlength={16}
+                            required>
+                            <Tooltip slot="end">
+                                <Input.Action
+                                    icon={IconRefresh}
+                                    on:click={() => (number.phone = generateNumber())} />
+                                <span slot="tooltip">Regenerate</span>
+                            </Tooltip>
+                        </InputPhone>
+                        <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
                             <InputOTP
                                 id={`value-${index}`}
                                 bind:value={number.otp}
-                                fullWidth
                                 placeholder="Enter value"
-                                label="Verification code"
+                                label={index === 0 ? 'Verification code' : undefined}
                                 maxlength={6}
                                 pattern={'^[0-9]{6}$'}
                                 patternError="The value must contain 6 digits"
-                                showLabel={index === 0}
                                 required>
-                                <button
-                                    slot="options"
-                                    use:tooltip={{ content: 'Regenerate', placement: 'bottom' }}
-                                    on:click={() => (number.otp = generateOTP())}
-                                    class="options-list-button"
-                                    aria-label="regenerate text"
-                                    type="button">
-                                    <span class="icon-refresh" aria-hidden="true"></span>
-                                </button>
+                                <Tooltip slot="end">
+                                    <Input.Action
+                                        icon={IconRefresh}
+                                        on:click={() => (number.otp = generateOTP())} />
+                                    <span slot="tooltip">Regenerate</span>
+                                </Tooltip>
                             </InputOTP>
-                            <FormItemPart>
-                                <Button
-                                    text
-                                    disabled={numbers.length === 0}
-                                    class={'u-padding-4 ' +
-                                        (index === 0 ? 'u-margin-block-start-24' : '')}
-                                    on:click={() => {
-                                        deletePhoneNumber(index);
-                                    }}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </Button>
-                            </FormItemPart>
-                        </FormItem>
-                    {/each}
-                </ul>
+                            <Button
+                                icon
+                                compact
+                                disabled={numbers.length === 0}
+                                on:click={() => {
+                                    deletePhoneNumber(index);
+                                }}>
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                {/each}
                 {#if numbers?.length < 10}
-                    <Button
-                        noMargin
-                        text
-                        on:click={() =>
-                            addPhoneNumber({
-                                phone: generateNumber(),
-                                otp: generateOTP()
-                            })}
-                        disabled={numbers.length >= 10}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Add number</span>
-                    </Button>
+                    <div>
+                        <Button
+                            secondary
+                            on:click={() =>
+                                addPhoneNumber({
+                                    phone: generateNumber(),
+                                    otp: generateOTP()
+                                })}
+                            disabled={numbers.length >= 10}>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add number
+                        </Button>
+                    </div>
                 {/if}
             {:else}
                 <Empty
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordDictionary.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordDictionary.svelte
index 67b9ad5a6..e388deb41 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordDictionary.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordDictionary.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputSwitch } from '$lib/elements/forms';
+    import { Button, Form, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography, Link } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
 
     let passwordDictionary = $project?.authPasswordDictionary ?? false;
@@ -34,29 +35,27 @@
 
 <Form onSubmit={updatePasswordDictionary}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="password-dictionary">Password dictionary</Heading>
-
+        <svelte:fragment slot="title">Password dictionary</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputSwitch
-                    bind:value={passwordDictionary}
-                    id="passwordDictionary"
-                    label="Password dictionary" />
-            </FormList>
-            <p class="text">
+            <InputSwitch
+                bind:value={passwordDictionary}
+                id="passwordDictionary"
+                label="Password dictionary" />
+            <Typography.Text>
                 Enabling this option prevent users from setting insecure passwords by comparing the
-                user's password with the <a
+                user's password with the <Link.Anchor
                     target="_blank"
                     rel="noopener noreferrer"
                     class="link"
                     href="https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10k-most-common.txt"
-                    >10k most commonly used passwords.</a>
-            </p>
+                    >10k most commonly used passwords.</Link.Anchor>
+            </Typography.Text>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={passwordDictionary === $project?.authPasswordDictionary} submit
-                >Update</Button>
+            <Button disabled={passwordDictionary === $project?.authPasswordDictionary} submit>
+                Update
+            </Button>
         </svelte:fragment>
     </CardGrid>
 </Form>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordHistory.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordHistory.svelte
index a2cc1db1b..058703aa8 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordHistory.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updatePasswordHistory.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputNumber, InputSwitch } from '$lib/elements/forms';
-    import FormList from '$lib/elements/forms/formList.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
     import { tick } from 'svelte';
 
@@ -47,31 +47,26 @@
 
 <Form onSubmit={updatePasswordHistoryLimit}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="password-history">Password history</Heading>
+        <svelte:fragment slot="title">Password history</svelte:fragment>
+        Set the maximum number of passwords saved per user.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputSwitch
-                    bind:value={passwordHistoryEnabled}
-                    id="passwordHistoryEnabled"
-                    label="Password history" />
-            </FormList>
-            <p class="text">
+            <InputSwitch
+                bind:value={passwordHistoryEnabled}
+                id="passwordHistoryEnabled"
+                label="Password history" />
+            <Typography.Text>
                 Enabling this option prevents users from reusing recent passwords by comparing the
                 new password with their password history.
-            </p>
-            <p class="text">
-                Set the maximum number of passwords saved per user. Maximum 20 passwords.
-            </p>
-            <FormList>
-                <InputNumber
-                    max={20}
-                    min={1}
-                    id="max-passwords"
-                    label="Limit"
-                    bind:this={maxPasswordInputField}
-                    disabled={!passwordHistoryEnabled}
-                    bind:value={passwordHistory} />
-            </FormList>
+            </Typography.Text>
+            <InputNumber
+                required
+                max={20}
+                min={1}
+                id="password-history"
+                label="Limit"
+                disabled={!passwordHistoryEnabled}
+                bind:value={passwordHistory}
+                helper="Maximum 20 passwords." />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updatePersonalDataCheck.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updatePersonalDataCheck.svelte
index 2bee05aed..320cce6c4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updatePersonalDataCheck.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updatePersonalDataCheck.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSwitch } from '$lib/elements/forms';
-    import { FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
 
     let authPersonalDataCheck = $project?.authPersonalDataCheck ?? false;
@@ -35,20 +35,19 @@
 
 <Form onSubmit={updatePersonalDataCheck}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Personal data</Heading>
+        <svelte:fragment slot="title">Personal data</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputSwitch
-                    bind:value={authPersonalDataCheck}
-                    id="personalDataCheck"
-                    label="Disallow personal data" />
-            </FormList>
-            <p class="text">
+            <InputSwitch
+                bind:value={authPersonalDataCheck}
+                id="personalDataCheck"
+                label="Disallow personal data" />
+            <Typography.Text>
                 Do not allow passwords that contain any part of the user's personal data. This
-                includes the user's <code>name</code>, <code>email</code>, or <code>phone</code>.
-            </p>
+                includes the user's <Typography.Code>name</Typography.Code>, <Typography.Code
+                    >email</Typography.Code
+                >, or <Typography.Code>phone</Typography.Code>.
+            </Typography.Text>
         </svelte:fragment>
-
         <svelte:fragment slot="actions">
             <Button disabled={authPersonalDataCheck === $project?.authPersonalDataCheck} submit
                 >Update</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionAlerts.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionAlerts.svelte
index c6f176ffa..447e2caa0 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionAlerts.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionAlerts.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSwitch } from '$lib/elements/forms';
-    import { FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
 
     let authSessionAlerts = $project?.authSessionAlerts ?? false;
@@ -32,19 +32,16 @@
 
 <Form onSubmit={updateSessionAlerts}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Session alerts</Heading>
+        <svelte:fragment slot="title">Session alerts</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputSwitch
-                    bind:value={authSessionAlerts}
-                    id="authSessionAlerts"
-                    label="Session alerts" />
-            </FormList>
-            <p class="text">
+            <InputSwitch
+                bind:value={authSessionAlerts}
+                id="authSessionAlerts"
+                label="Session alerts" />
+            <Typography.Text>
                 Enabling this option will send an email to the users when a new session is created.
-            </p>
+            </Typography.Text>
         </svelte:fragment>
-
         <svelte:fragment slot="actions">
             <Button disabled={authSessionAlerts === $project?.authSessionAlerts} submit>
                 Update
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionLength.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionLength.svelte
index cbac619cb..14edb541c 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionLength.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionLength.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { createTimeUnitPair } from '$lib/helpers/unit';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     const { value, unit, baseValue, units } = createTimeUnitPair($project?.authDuration);
     const options = units.map((v) => ({ label: v.name, value: v.name }));
@@ -33,27 +34,16 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7" id="session-length">Session length</Heading>
-
-    <p>
-        If you reduce the limit, users who are currently logged in will be logged out of the
-        application.
-    </p>
+    <svelte:fragment slot="title">Session length</svelte:fragment>
+    If you reduce the limit, users who are currently logged in will be logged out of the application.
     <svelte:fragment slot="aside">
-        <form class="form u-grid u-gap-16">
-            <ul class="form-list is-multiple">
-                <InputNumber id="length" label="Length" bind:value={$value} min={0} />
-                <InputSelect id="period" label="Time period" bind:value={$unit} {options} />
-            </ul>
-        </form>
+        <Layout.Stack direction="row">
+            <InputNumber required id="length" label="Length" bind:value={$value} min={0} />
+            <InputSelect required id="period" label="Time period" bind:value={$unit} {options} />
+        </Layout.Stack>
     </svelte:fragment>
-
     <svelte:fragment slot="actions">
-        <Button
-            disabled={$baseValue === $project.authDuration}
-            on:click={() => {
-                updateSessionLength();
-            }}>
+        <Button disabled={$baseValue === $project.authDuration} on:click={updateSessionLength}>
             Update
         </Button>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionsLimit.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionsLimit.svelte
index 2172756ba..06ef31dd0 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionsLimit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionsLimit.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
 
     let maxSessions = $project?.authSessionsLimit;
@@ -32,14 +33,18 @@
 
 <Form onSubmit={updateSessionsLimit}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="sessions-limit">Sessions limit</Heading>
-        <p>Maximum number of active sessions allowed per user.</p>
-        <svelte:fragment slot="aside">
-            <ul>
-                <InputNumber id="max-session" label="Limit" bind:value={maxSessions} />
-            </ul>
-        </svelte:fragment>
+        <svelte:fragment slot="title">Sessions limit</svelte:fragment>
+        <Typography.Text>Maximum number of active sessions allowed per user</Typography.Text>
 
+        <svelte:fragment slot="aside">
+            <InputNumber
+                required
+                min={1}
+                max={100}
+                id="max-session"
+                label="Limit"
+                bind:value={maxSessions} />
+        </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button disabled={maxSessions === $project?.authSessionsLimit} submit>Update</Button>
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateUsersLimit.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateUsersLimit.svelte
index 367216783..fc16a6a5d 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateUsersLimit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateUsersLimit.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import { clickOnEnter } from '$lib/helpers/a11y';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Layout, Selector, Input, Badge } from '@appwrite.io/pink-svelte';
     import { project } from '../../store';
     import { tick } from 'svelte';
 
-    let isLimited = $project?.authLimit !== 0;
+    let value = $project?.authLimit !== 0 ? 'limited' : 'unlimited';
+
+    $: isLimited = value === 'limited';
     let newLimit = isLimited ? $project?.authLimit : 100;
 
     $: btnDisabled = (function isBtnDisabled() {
@@ -53,63 +54,36 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7" id="users-limit">Users limit</Heading>
-    <p>
-        Limit new users from signing up for your project, regardless of authentication method. You
-        can still create users and team memberships from your Appwrite console.
-    </p>
-
+    <svelte:fragment slot="title">Users limit</svelte:fragment>
+    Limit new users from signing up for your project, regardless of authentication method. You can still
+    create users and team memberships from your Appwrite console.
     <svelte:fragment slot="aside">
-        <ul class="form-list">
-            <li class="form-item">
-                <label class="choice-item" for="unlimited">
-                    <input
-                        id="unlimited"
-                        name="authLimit"
-                        class="u-cross-child-center"
-                        required
-                        type="radio"
-                        bind:group={isLimited}
-                        value={false} />
-                    <div class="choice-item-content u-cross-child-center">
-                        <div class="choice-item-title">Unlimited</div>
-                    </div>
-                    <Pill>recommended</Pill>
-                </label>
-            </li>
-            <li class="form-item is-multiple u-cross-center">
-                <div class="input-text-wrapper">
-                    <label class="choice-item" for="limited">
-                        <input
-                            id="limited"
-                            name="authLimit"
-                            required
-                            type="radio"
-                            bind:group={isLimited}
-                            value={true} />
-                        <div class="choice-item-content u-padding-inline-end-16">
-                            <div class="choice-item-title">Limited</div>
-                        </div>
-                    </label>
-                </div>
-                <div
-                    class="input-text-wrapper u-stretch"
-                    on:click={() => (isLimited = true)}
-                    on:keyup|self={clickOnEnter}
-                    role="button"
-                    tabindex="0">
-                    <input
-                        type="number"
-                        name="limit"
-                        id="limit"
-                        class="input-text"
-                        max="10000"
-                        disabled={!isLimited}
-                        bind:value={newLimit}
-                        bind:this={maxUsersInputField} />
-                </div>
-            </li>
-        </ul>
+        <Layout.Stack>
+            <Layout.Stack direction="row" alignItems="center">
+                <Selector.Radio
+                    bind:group={value}
+                    name="authLimit"
+                    id="unlimited"
+                    label="Unlimited"
+                    value="unlimited" />
+                <Badge variant="secondary" content="Recommended" />
+            </Layout.Stack>
+            <Layout.Stack direction="row" alignItems="center">
+                <Selector.Radio
+                    bind:group={value}
+                    name="authLimit"
+                    id="limited"
+                    label="Limited"
+                    value="limited" />
+                <Input.Number
+                    name="limit"
+                    id="limit"
+                    class="input-text"
+                    max="10000"
+                    disabled={!isLimited}
+                    bind:value={newLimit} />
+            </Layout.Stack>
+        </Layout.Stack>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/settings/+page.svelte
index ccdb88d27..4a9eceee2 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/settings/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { CardGrid } from '$lib/components';
     import { InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
@@ -13,10 +12,11 @@
     import type { Models } from '@appwrite.io/console';
     import { project } from '../../store';
     import { base } from '$app/paths';
+    import { Avatar, Badge, Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let showProvider = false;
 
     let selectedProvider: Models.AuthProvider | null = null;
@@ -48,34 +48,34 @@
 
 {#if $authMethods && $project}
     <Container>
-        <CardGrid>
-            <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">
-                    <ul class="form-list is-multiple">
+        <Layout.Stack gap="xxl">
+            <CardGrid>
+                <svelte:fragment slot="title">Auth methods</svelte:fragment>
+                Enable the authentication methods you wish to use.
+                <svelte:fragment slot="aside">
+                    <Layout.Stack gap="l" direction="row" wrap="wrap">
                         {#each $authMethods.list as box}
-                            <InputSwitch
-                                label={box.label}
-                                id={box.method}
-                                bind:value={box.value}
-                                on:change={() => authUpdate(box)} />
+                            <div style="flex-basis: 45%;">
+                                <InputSwitch
+                                    label={box.label}
+                                    id={box.method}
+                                    bind:value={box.value}
+                                    on:change={() => authUpdate(box)} />
+                            </div>
                         {/each}
-                    </ul>
-                </form>
-            </svelte:fragment>
-        </CardGrid>
-        <section class="common-section">
-            <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
-            <ul class="grid-box common-section">
-                {#each $project.oAuthProviders
-                    .filter((p) => p.name !== 'Mock')
-                    .sort((a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1)) as provider}
-                    {@const oAuthProvider = oAuthProviders[provider.key]}
-                    {#if oAuthProvider}
-                        <li class="grid-box-item">
-                            <button
-                                class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
+                    </Layout.Stack>
+                </svelte:fragment>
+            </CardGrid>
+            <Layout.Stack>
+                <Typography.Title size="s">OAuth2 Providers</Typography.Title>
+                <ul class="grid-box" style:--grid-gap="1rem" style:--grid-item-size="15rem">
+                    {#each $project.oAuthProviders
+                        .filter((p) => p.name !== 'Mock')
+                        .sort( (a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1) ) as provider}
+                        {@const oAuthProvider = oAuthProviders[provider.key]}
+                        {#if oAuthProvider}
+                            <Card.Button
+                                padding="s"
                                 on:click={() => {
                                     selectedProvider = provider;
                                     showProvider = true;
@@ -83,25 +83,31 @@
                                         provider: provider.key.toLowerCase()
                                     });
                                 }}>
-                                <div class="avatar">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`${base}/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
-                                        alt={provider.name} />
-                                </div>
-                                <p class="u-margin-block-start-8">{provider.name}</p>
-                                <div class="u-margin-block-start-24">
-                                    <Pill success={provider.enabled}>
-                                        {provider.enabled ? 'enabled' : 'disabled'}
-                                    </Pill>
-                                </div>
-                            </button>
-                        </li>
-                    {/if}
-                {/each}
-            </ul>
-        </section>
+                                <Layout.Stack alignItems="flex-start" gap="xxl">
+                                    <Layout.Stack
+                                        direction="row"
+                                        justifyContent="flex-start"
+                                        alignItems="center">
+                                        <Avatar size="s">
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={`${base}/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
+                                                alt={provider.name} />
+                                        </Avatar>
+                                        <Typography.Text>{provider.name}</Typography.Text>
+                                    </Layout.Stack>
+                                    <Badge
+                                        type={provider.enabled ? 'success' : undefined}
+                                        variant="secondary"
+                                        content={provider.enabled ? 'enabled' : 'disabled'} />
+                                </Layout.Stack>
+                            </Card.Button>
+                        {/if}
+                    {/each}
+                </ul>
+            </Layout.Stack>
+        </Layout.Stack>
     </Container>
 {/if}
 
@@ -111,7 +117,7 @@
         this={oAuthProvider.component}
         bind:provider={selectedProvider}
         bind:show={showProvider}
-        on:close={() => {
+        onclose={() => {
             selectedProvider = null;
             showProvider = false;
         }} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte
index 6a56398ad..cbefb02fb 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte
@@ -3,16 +3,7 @@
 </script>
 
 <script lang="ts">
-    import { page } from '$app/stores';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell
-    } from '$lib/elements/table';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
@@ -23,78 +14,63 @@
     } from '$lib/components';
     import Create from '../createTeam.svelte';
     import { goto } from '$app/navigation';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
-    import { tooltip } from '$lib/actions/tooltip';
     import { writable } from 'svelte/store';
-    import { readOnly } from '$lib/stores/billing';
-    import { isCloud } from '$lib/system';
     import { canWriteTeams } from '$lib/stores/roles';
+    import { Icon, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
 
-    export let data: PageData;
+    export let data;
 
-    const project = $page.params.project;
-    const region = $page.params.region;
+    const region = page.params.region;
+    const project = page.params.project;
     const teamCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
         await goto(`${base}/project-${region}-${project}/auth/teams/team-${event.detail.$id}`);
     };
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Teams"
-        isFlex={false}
-        total={data.teams.total}
-        buttonDisabled={isCloud && $readOnly}
-        let:isButtonDisabled>
-        <SearchQuery search={data.search} placeholder="Search by name">
-            {#if $canWriteTeams}
-                <div
-                    use:tooltip={{
-                        content: `Upgrade to add more teams`,
-                        disabled: !isButtonDisabled
-                    }}>
-                    <Button
-                        on:click={() => ($showCreateTeam = true)}
-                        event="create_team"
-                        disabled={isButtonDisabled}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create team</span>
-                    </Button>
-                </div>
-            {/if}
-        </SearchQuery>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button on:mousedown={() => ($showCreateTeam = true)} event="create_user" size="s">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create team
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.teams.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Members</TableCellHead>
-                <TableCellHead onlyDesktop>Created</TableCellHead>
-            </TableHeader>
-            <TableBody service="teams" total={data.teams.total}>
-                {#each data.teams.teams as team}
-                    <TableRowLink
-                        href={`${base}/project-${region}-${project}/auth/teams/team-${team.$id}`}>
-                        <TableCell title="Name">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                <AvatarInitials size={32} name={team.name} />
-                                <span class="text u-trim">{team.name}</span>
-                            </div>
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Members"
-                            >{team.total} members</TableCellText>
-                        <TableCellText onlyDesktop title="Created">
-                            {toLocaleDateTime(team.$createdAt)}
-                        </TableCellText>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </Table>
+        <Table.Root columns={3} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell {root}>Name</Table.Header.Cell>
+                <Table.Header.Cell {root}>Members</Table.Header.Cell>
+                <Table.Header.Cell {root}>Created</Table.Header.Cell>
+            </svelte:fragment>
+            {#each data.teams.teams as team}
+                <Table.Row.Link
+                    {root}
+                    href={`${base}/project-${region}-${project}/auth/teams/team-${team.$id}`}>
+                    <Table.Cell {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            <AvatarInitials size="xs" name={team.name} />
+                            <span class="u-trim">{team.name}</span>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        {team.total} members
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        <DualTimeView time={team.$createdAt} />
+                    </Table.Cell>
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit
             name="Teams"
@@ -102,14 +78,8 @@
             offset={data.offset}
             total={data.teams.total} />
     {:else if data.search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find ‘{data.search}'</b>
-                <p>There are no teams that match your search.</p>
-            </div>
-            <Button
-                secondary
-                href={`${base}/project-${$page.params.region}-${$page.params.project}/auth/teams`}>
+        <EmptySearch target="teams" search={data.search} hidePagination={data.teams.total === 0}>
+            <Button secondary size="s" href={`${base}/project-${region}-${project}/auth/teams`}>
                 Clear Search
             </Button>
         </EmptySearch>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/teams/+page.ts
index d24fe0665..3f9e01793 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/+page.ts
@@ -7,7 +7,7 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ url, route, params }) => {
     const page = getPage(url);
     const search = getSearch(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/+page.svelte
index 68c4c6298..ba407edbd 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/+page.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
-    import { CardGrid, Heading, AvatarInitials } from '$lib/components';
+    import { CardGrid, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { team } from './store';
     import UpdatePrefs from './updatePrefs.svelte';
     import UpdateName from './updateName.svelte';
     import DangerZone from './dangerZone.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
     <CardGrid>
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-            <AvatarInitials size={48} name={$team.name} />
-            <div>
-                <Heading tag="h6" size="7">{$team.name}</Heading>
-            </div>
+            <AvatarInitials name={$team.name} />
+            <Typography.Title size="s" truncate>{$team.name}</Typography.Title>
         </div>
         <svelte:fragment slot="aside">
             <div>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/activity/+page.ts
index c5512bfd7..7b33b57e8 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
index 04e22dcac..3605cca75 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/auth`,
             title: 'Auth'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${$team?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${$team?.$id}`,
             title: $team?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
index ffa94d039..ab227bb65 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal, Alert } from '$lib/components';
-    import { Button, InputEmail, InputText, InputTags, FormList } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { Button, InputEmail, InputText, InputTags } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let showCreate = false;
@@ -19,14 +20,14 @@
     async function create() {
         try {
             const user = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .teams.createMembership(
                     teamId,
                     roles,
                     email || undefined,
                     undefined,
                     undefined,
-                    `${$page.url.origin}${base}/invite`,
+                    `${page.url.origin}${base}/invite`,
                     name || undefined
                 );
             addNotification({
@@ -45,22 +46,26 @@
     }
 </script>
 
-<Modal title="Create membership" {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <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>
+<Modal title="Create membership" {error} onSubmit={create} bind:show={showCreate}>
+    <InputEmail
+        id="email"
+        label="Email"
+        placeholder="Enter email"
+        required={true}
+        autofocus={true}
+        bind:value={email} />
+    <InputText id="name" label="Name" placeholder="Enter name" bind:value={name} />
+    <Alert.Inline status="info">
+        Roles are used to manage access permissions. You can create any role you want.
+    </Alert.Inline>
+
+    <InputTags
+        id="tags"
+        label="Roles"
+        placeholder="Add roles"
+        bind:tags={roles}
+        helper="Roles are used to manage access permissions. You can create any role you want." />
 
-        <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>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/dangerZone.svelte
index c89f13876..34370ffc8 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/dangerZone.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AvatarInitials, BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { AvatarInitials, BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import DeleteTeam from './deleteTeam.svelte';
     import { team } from './store';
@@ -7,19 +7,14 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete team</Heading>
-    </div>
-
-    <p>
-        The team will be permanently deleted, including all data associated with this team. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete team</svelte:fragment>
+    The team will be permanently deleted, including all data associated with this team. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
-                <AvatarInitials size={48} name={$team.name} />
+                <AvatarInitials name={$team.name} />
             </svelte:fragment>
             <svelte:fragment slot="title">
                 <h6 class="u-bold u-trim-1">{$team.name}</h6>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte
index 87c6625e2..9aa4e6685 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
+    import Confirm from '$lib/components/confirm.svelte';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     const dispatch = createEventDispatcher();
@@ -15,39 +14,29 @@
     export let showDelete = false;
     export let selectedMembership: Models.Membership;
 
-    const deleteMembership = async () => {
+    let error: string;
+
+    async function deleteMembership() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .teams.deleteMembership(selectedMembership.teamId, selectedMembership.$id);
             showDelete = false;
             dispatch('deleted');
             trackEvent(Submit.MemberDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${selectedMembership.teamId}/members`
+                `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${selectedMembership.teamId}/members`
             );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MemberDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MemberDelete);
         }
-    };
+    }
 </script>
 
-<Modal
-    title="Delete Member"
-    bind:show={showDelete}
-    onSubmit={deleteMembership}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
-        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>
+<Confirm onSubmit={deleteMembership} title="Delete member" bind:open={showDelete} bind:error>
+    <Typography.Text>
+        Are you sure you want to delete <b>{selectedMembership.userName}</b> from
+        <b>{selectedMembership.teamName}</b>?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte
index 673706207..ff875ffc5 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte
@@ -1,45 +1,33 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
+    import Confirm from '$lib/components/confirm.svelte';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let showDelete = false;
     export let team: Models.Team<Record<string, unknown>>;
 
-    const deleteTeam = async () => {
+    let error: string;
+
+    async function deleteTeam() {
         try {
-            await sdk.forProject($page.params.region, $page.params.project).teams.delete(team.$id);
+            await sdk.forProject(page.params.region, page.params.project).teams.delete(team.$id);
             showDelete = false;
             trackEvent(Submit.TeamDelete);
-            await goto(`${base}/project-${$page.params.region}-${$page.params.project}/auth/teams`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.TeamDelete);
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/auth/teams`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.TeamDelete);
         }
-    };
+    }
 </script>
 
-<Modal
-    title="Delete team"
-    bind:show={showDelete}
-    onSubmit={deleteTeam}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
+<Confirm onSubmit={deleteTeam} title="Delete team" bind:open={showDelete} bind:error>
+    <Typography.Text>
         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>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte
index 1d0dd8981..b6bab1f33 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { team } from './store';
 
-    const path = `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${$page.params.team}`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${page.params.team}`;
     const tabs = [
         {
             href: path,
@@ -31,7 +31,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            href={`${base}/project-${$page.params.region}-${$page.params.project}/auth/teams`}>
+            href={`${base}/project-${page.params.region}-${page.params.project}/auth/teams`}>
             {$team?.name}
         </CoverTitle>
         <Id value={$team?.$id} event="team">{$team?.$id}</Id>
@@ -41,7 +41,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte
index 4530e4f72..a7dba1d1f 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte
@@ -1,21 +1,6 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import {
-        Empty,
-        EmptySearch,
-        AvatarInitials,
-        SearchQuery,
-        PaginationWithLimit
-    } from '$lib/components';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell
-    } from '$lib/elements/table';
+    import { page } from '$app/state';
+    import { Empty, EmptySearch, AvatarInitials, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
@@ -26,7 +11,9 @@
     import CreateMember from '../createMembership.svelte';
     import DeleteMembership from '../deleteMembership.svelte';
     import { Dependencies } from '$lib/constants';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { Table, Layout, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -34,7 +21,8 @@
     let showDelete = false;
     let selectedMembership: Models.Membership;
 
-    const project = $page.params.project;
+    const region = page.params.region;
+    const project = page.params.project;
 
     async function memberCreated() {
         invalidate(Dependencies.MEMBERSHIPS);
@@ -42,51 +30,60 @@
 </script>
 
 <Container>
-    <SearchQuery search={data.search} placeholder="Search by ID">
-        <Button on:click={() => (showCreate = true)} event="create_membership">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create membership</span>
+    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+        <Button on:mousedown={() => (showCreate = true)} event="create_membership" size="s">
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create membership
         </Button>
-    </SearchQuery>
+    </Layout.Stack>
+
     {#if data.memberships.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Roles</TableCellHead>
-                <TableCellHead onlyDesktop>Joined</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-            <TableBody>
-                {#each data.memberships.memberships as membership}
-                    {@const username = membership.userName ? membership.userName : '-'}
-                    <TableRowLink
-                        href={`${base}/project-${$page.params.region}-${project}/auth/user-${membership.userId}`}>
-                        <TableCellText title="Name">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                <AvatarInitials size={32} name={username} />
-                                <span>{username}</span>
-                            </div>
-                        </TableCellText>
-                        <TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
-                        <TableCellText onlyDesktop title="Joined">
-                            {toLocaleDateTime(membership.joined)}
-                        </TableCellText>
-                        <TableCell>
-                            <button
-                                class="button is-only-icon is-text"
-                                aria-label="Delete item"
-                                on:click|preventDefault={() => {
-                                    selectedMembership = membership;
-                                    showDelete = true;
-                                    trackEvent('click_delete_membership');
-                                }}>
-                                <span class="icon-trash" aria-hidden="true" />
-                            </button>
-                        </TableCell>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </Table>
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'name' },
+                { id: 'roles' },
+                { id: 'joined' },
+                { id: 'actions', width: 40 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+                <Table.Header.Cell column="roles" {root}>Roles</Table.Header.Cell>
+                <Table.Header.Cell column="joined" {root}>Joined</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each data.memberships.memberships as membership}
+                {@const username = membership.userName ? membership.userName : '-'}
+                <Table.Row.Link
+                    {root}
+                    href={`${base}/project-${region}-${project}/auth/user-${membership.userId}`}>
+                    <Table.Cell column="name" {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            <AvatarInitials size="xs" name={username} />
+                            <span>{username}</span>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="roles" {root}>
+                        {membership.roles}
+                    </Table.Cell>
+                    <Table.Cell column="joined" {root}>
+                        {toLocaleDateTime(membership.joined)}
+                    </Table.Cell>
+                    <Table.Cell column="actions" {root}>
+                        <button
+                            class="button is-only-icon is-text"
+                            aria-label="Delete item"
+                            on:click|preventDefault={() => {
+                                selectedMembership = membership;
+                                showDelete = true;
+                                trackEvent(Click.MembershipDeleteClick);
+                            }}>
+                            <span class="icon-trash" aria-hidden="true"></span>
+                        </button>
+                    </Table.Cell>
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit
             name="Memberships"
@@ -116,7 +113,7 @@
     {/if}
 </Container>
 
-<CreateMember teamId={$page.params.team} bind:showCreate on:created={memberCreated} />
+<CreateMember teamId={page.params.team} bind:showCreate on:created={memberCreated} />
 <DeleteMembership
     {selectedMembership}
     bind:showDelete
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.ts
index 73a4cc029..aa1aceede 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.ts
@@ -6,10 +6,11 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.MEMBERSHIPS);
+
     const teamId = params.team;
     const page = getPage(url);
     const search = getSearch(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updateName.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updateName.svelte
index fe0325bde..7e1e63d01 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updateName.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -19,8 +19,8 @@
     async function updateName() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .teams.updateName($page.params.team, teamName);
+                .forProject(page.params.region, page.params.project)
+                .teams.updateName(page.params.team, teamName);
             await invalidate(Dependencies.TEAM);
             addNotification({
                 message: 'Name has been updated',
@@ -39,17 +39,15 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
-            <ul>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Enter team name"
-                    autocomplete={false}
-                    bind:value={teamName} />
-            </ul>
+            <InputText
+                required
+                id="name"
+                label="Name"
+                placeholder="Enter team name"
+                autocomplete={false}
+                bind:value={teamName} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte
index f3ddf58c5..0bdac50dd 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormItem, FormItemPart, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { team } from './store';
-    import { page } from '$app/stores';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($team.prefs))) {
@@ -37,7 +39,7 @@
             let updatedPrefs = Object.fromEntries(prefs);
 
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .teams.updatePrefs($team.$id, updatedPrefs);
             await invalidate(Dependencies.TEAM);
             arePrefsDisabled = true;
@@ -46,69 +48,60 @@
                 message: 'Preferences have been updated',
                 type: 'success'
             });
-            trackEvent(Submit.UserUpdatePreferences);
+            trackEvent(Submit.TeamUpdatePreferences);
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
-            trackError(error, Submit.UserUpdatePreferences);
+            trackError(error, Submit.TeamUpdatePreferences);
         }
     }
 </script>
 
 <Form onSubmit={updatePrefs}>
     <CardGrid>
-        <Heading tag="h6" size="7">Preferences</Heading>
-        <p>
-            You can update your team's preferences by storing shared information on the teams's
-            objects so they can easily be shared across members.
-        </p>
+        <svelte:fragment slot="title">Preferences</svelte:fragment>
+        You can update your team's preferences by storing shared information on the teams's objects so
+        they can easily be shared across members.
         <svelte:fragment slot="aside">
-            <form class="form u-grid u-gap-16">
-                <ul class="form-list">
-                    {#if prefs}
-                        {#each prefs as [key, value], index}
-                            <FormItem isMultiple>
-                                <InputText
-                                    id={`key-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value={key}
-                                    placeholder="Enter key"
-                                    label="Key"
-                                    required />
-
-                                <InputText
-                                    id={`value-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value
-                                    placeholder="Enter value"
-                                    label="Value"
-                                    required />
-                                <FormItemPart alignEnd>
-                                    <Button
-                                        text
-                                        disabled={(!key || !value) && index === 0}
-                                        on:click={() => {
-                                            if (index === 0) {
-                                                prefs = [['', '']];
-                                            } else {
-                                                prefs.splice(index, 1);
-                                                prefs = prefs;
-                                            }
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </FormItemPart>
-                            </FormItem>
-                        {/each}
-                    {/if}
-                </ul>
+            {#if prefs}
+                {#each prefs as [key, value], index}
+                    <Layout.Stack direction="row" alignItems="flex-end">
+                        <InputText
+                            id={`key-${index}`}
+                            bind:value={key}
+                            placeholder="Enter key"
+                            label={index === 0 ? 'Key' : undefined}
+                            required />
+                        <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                            <InputText
+                                id={`value-${index}`}
+                                bind:value
+                                placeholder="Enter value"
+                                label={index === 0 ? 'Value' : undefined}
+                                required />
+                            <Button
+                                icon
+                                compact
+                                disabled={(!key || !value) && index === 0}
+                                on:click={() => {
+                                    if (index === 0 && prefs?.length === 1) {
+                                        prefs = [['', '']];
+                                    } else {
+                                        prefs.splice(index, 1);
+                                        prefs = prefs;
+                                    }
+                                }}>
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                {/each}
+            {/if}
+            <div>
                 <Button
-                    noMargin
-                    text
+                    secondary
                     disabled={prefs?.length &&
                     prefs[prefs.length - 1][0] &&
                     prefs[prefs.length - 1][1]
@@ -120,10 +113,10 @@
                             prefs = prefs;
                         }
                     }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add Preference</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add preference
                 </Button>
-            </form>
+            </div>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte
index 120c6a5bd..d20c6c182 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte
@@ -33,11 +33,10 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Alert, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
     import EmailVerificationTemplate from './emailVerificationTemplate.svelte';
     import EmailMagicUrlTemplate from './emailMagicUrlTemplate.svelte';
     import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte';
@@ -59,6 +58,8 @@
         EmailTemplateType,
         EmailTemplateLocale
     } from '@appwrite.io/console';
+    import { Accordion, Alert, Badge, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     export let data;
 
@@ -71,204 +72,142 @@
     $: email2FAVerificationOpen = emailOpen === 'mfaChallenge';
     $: emailSessionAlertOpen = emailOpen === 'sessionAlert';
 
-    // let smsOpen = 'verification';
-    // $: smsVerificationOpen = smsOpen === 'verification';
-    // $: smsLoginOpen = smsOpen === 'login';
-    // $: smsInvitationOpen = smsOpen === 'invitation';
-
-    onMount(async () => {
-        openEmail('verification');
-        // openSms('verification');
-    });
+    openEmail('verification');
 
     async function openEmail(type: string) {
         type === emailOpen ? (emailOpen = null) : (emailOpen = type);
-        $emailTemplate = await loadEmailTemplate(data.project.$id, type, 'en');
+        $emailTemplate = await loadEmailTemplate(page.params.project, type, 'en');
         $baseEmailTemplate = { ...$emailTemplate };
     }
-
-    // async function openSms(type: string) {
-    //     type === smsOpen ? (smsOpen = null) : (smsOpen = type);
-    //     $smsTemplate = await loadSmsTemplate(projectId, type, 'en');
-    //     $baseSmsTemplate = { ...$smsTemplate };
-    // }
 </script>
 
 <Container>
-    <div class="u-flex u-gap-8 u-cross-center">
-        <Heading tag="h2" size="5">Templates</Heading>
-        <div class="tag eyebrow-heading-3">
-            <span class="text u-x-small">Experimental</span>
-        </div>
-    </div>
-
     {#if !data.project.smtpEnabled}
-        <div class="u-margin-block-start-24">
-            <Alert
-                isStandalone
-                dismissible={false}
-                type="info"
-                buttons={[
-                    {
-                        slot: 'SMTP settings',
-                        href: `${base}/project-${data.project.region}-${data.project.$id}/settings/smtp`
-                    }
-                ]}>
-                <svelte:fragment slot="title">
-                    Custom SMTP server is required for customizing emails
-                </svelte:fragment>
-                Configure a custom SMTP server to enable custom email templates and prevent emails from
-                being labeled as spam.
-            </Alert>
-        </div>
+        <Alert.Inline
+            dismissible={false}
+            status="info"
+            title="Custom SMTP server is required for customizing emails">
+            Configure a custom SMTP server to enable custom email templates and prevent emails from
+            being labeled as spam.
+            <Button
+                compact
+                slot="actions"
+                href={`${base}/project-${page.params.region}-${page.params.project}/settings/smtp`}>
+                SMTP settings
+            </Button>
+        </Alert.Inline>
     {/if}
 
     <CardGrid>
-        <Heading size="7" tag="h3">Email templates</Heading>
-        <p class="text">
-            Use templates to send and process account management emails. <a
-                href="https://appwrite.io/docs/advanced/platform/message-templates"
-                class="link">
-                Learn more about email templates.
-            </a>
-        </p>
-
+        <svelte:fragment slot="title">
+            Email templates <Badge variant="secondary" content="Experimental" />
+        </svelte:fragment>
+        Use templates to send and process account management emails.
+        <Link.Anchor
+            target="_blank"
+            href="https://appwrite.io/docs/advanced/platform/message-templates">
+            Learn more
+        </Link.Anchor>
         <svelte:fragment slot="aside">
-            <Collapsible>
-                <CollapsibleItem
+            <Layout.Stack gap="none">
+                <Accordion
+                    title="Verification"
                     bind:open={emailVerificationOpen}
-                    on:click={(e) => {
-                        // preventing default and propagation to open the collapsible correctly
-                        e.preventDefault();
-                        e.stopImmediatePropagation();
-                        openEmail('verification');
-                    }}>
-                    <svelte:fragment slot="title">Verification</svelte:fragment>
-                    <p class="text">
-                        Send a verification email to users that sign in with their email and
-                        password.
-                    </p>
-                    <EmailVerificationTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
+                    on:click={() => openEmail('verification')}>
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send a verification email to users that sign in with their email and
+                            password.
+                        </Typography.Text>
+                        <EmailVerificationTemplate />
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion
+                    title="Magic URL"
                     bind:open={emailMagicSessionOpen}
                     on:click={(e) => {
                         e.preventDefault();
                         openEmail('magicSession');
                     }}>
-                    <svelte:fragment slot="title">Magic URL</svelte:fragment>
-                    <p class="text">Send an email to users that sign in with a magic URL.</p>
-                    <EmailMagicUrlTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send an email to users that sign in with a magic URL.
+                        </Typography.Text>
+                        <EmailMagicUrlTemplate />
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion
+                    title="OTP session"
                     bind:open={emailOtpSessionOpen}
                     on:click={(e) => {
                         e.preventDefault();
                         openEmail('otpSession');
                     }}>
-                    <svelte:fragment slot="title">OTP Session</svelte:fragment>
-                    <p class="text">Send an email to users that sign in with a email OTP.</p>
-                    <EmailMagicUrlTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send an email to users that sign in with a email OTP.</Typography.Text>
+                        <EmailMagicUrlTemplate />
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion
+                    title="Reset password"
                     bind:open={emailResetPassword}
                     on:click={(e) => {
                         e.preventDefault();
                         openEmail('recovery');
                     }}>
-                    <svelte:fragment slot="title">Reset password</svelte:fragment>
-                    <p class="text">Send a recovery email to users that forget their password.</p>
-                    <EmailRecoveryTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send a recovery email to users that forget their password.</Typography.Text>
+                        <EmailRecoveryTemplate /></Layout.Stack>
+                </Accordion>
+                <Accordion
+                    title="Invite user"
                     bind:open={emailInviteUser}
                     on:click={(e) => {
                         e.preventDefault();
                         openEmail('invitation');
                     }}>
-                    <svelte:fragment slot="title">Invite user</svelte:fragment>
-                    <p class="text">Send an invitation email to become a member of your project.</p>
-                    <EmailInviteTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send an invitation email to become a member of your project.</Typography.Text>
+                        <EmailInviteTemplate />
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion
+                    title="2FA verification"
                     bind:open={email2FAVerificationOpen}
                     on:click={(e) => {
                         e.preventDefault();
                         openEmail('mfaChallenge');
                     }}>
-                    <svelte:fragment slot="title">2FA verification</svelte:fragment>
-                    <p class="text">Send a two-factor authentication email to a user.</p>
-                    <Email2FaTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send a two-factor authentication email to a user.</Typography.Text>
+                        <Email2FaTemplate /></Layout.Stack>
+                </Accordion>
+                <Accordion
+                    title="Session alert"
                     bind:open={emailSessionAlertOpen}
                     on:click={(e) => {
                         e.preventDefault();
                         openEmail('sessionAlert');
                     }}>
-                    <svelte:fragment slot="title">Session alert</svelte:fragment>
-                    <p class="text">Send an email to users when a new session is created.</p>
-                    <EmailSessionAlertTemplate />
-                </CollapsibleItem>
-            </Collapsible>
+                    <Layout.Stack>
+                        <Typography.Text>
+                            Send an email to users when a new session is created.</Typography.Text>
+                        <EmailSessionAlertTemplate /></Layout.Stack>
+                </Accordion>
+            </Layout.Stack>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button
-                href={`${base}/project-${data.project.region}-${data.project.$id}/settings/smtp`}
+                href={`${base}/project-${page.params.region}-${page.params.project}/settings/smtp`}
                 secondary>
                 SMTP settings
             </Button>
         </svelte:fragment>
     </CardGrid>
-
-    <!-- <CardGrid>
-        <Heading size="7" tag="h3">SMS templates</Heading>
-        <p class="text">
-            Use templates to send and process account management mobile messages. <a
-                href="https://appwrite.io/docs/advanced/platform/message-templates"
-                class="link">
-                Learn more about SMS templates</a
-        </p>
-
-        <svelte:fragment slot="aside">
-            <Collapsible>
-                <CollapsibleItem
-                    bind:open={smsVerificationOpen}
-                    on:click={(e) => {
-                        e.preventDefault();
-                        openSms('verification');
-                    }}>
-                    <svelte:fragment slot="title">Verification</svelte:fragment>
-                    <p class="text">
-                        Send a verification SMS to users that sign in with their phone
-                    </p>
-                    <SmsVerificationTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
-                    bind:open={smsLoginOpen}
-                    on:click={(e) => {
-                        e.preventDefault();
-                        openSms('login');
-                    }}>
-                    <svelte:fragment slot="title">Login</svelte:fragment>
-                    <p class="text">
-                        Send a one-time passcode to users' mobile phones to allow them to sign in.
-                    </p>
-                    <SmsLoginTemplate />
-                </CollapsibleItem>
-                <CollapsibleItem
-                    bind:open={smsInvitationOpen}
-                    on:click={(e) => {
-                        e.preventDefault();
-                        openSms('invitation');
-                    }}>
-                    <svelte:fragment slot="title">Invitation</svelte:fragment>
-                    <p class="text">Send an invitation SMS to become a member of your project.</p>
-                    <SmsLoginTemplate />
-                </CollapsibleItem>
-            </Collapsible>
-        </svelte:fragment>
-    </CardGrid>-->
     {#if isCloud && $currentPlan.emailBranding}
         <EmailSignature />
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/templates/+page.ts
index b742d9078..e759c57b4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/+page.ts
@@ -1,7 +1,6 @@
 import { sdk } from '$lib/stores/sdk';
-import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params }) => {
+export const load = async ({ params }) => {
     const codes = await sdk.forProject(params.region, params.project).locale.listCodes();
     return {
         localeCodes: codes.localeCodes
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/email2FATemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/email2FATemplate.svelte
index 094de917a..225df1882 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/email2FATemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/email2FATemplate.svelte
@@ -2,13 +2,14 @@
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import { loadEmailTemplate } from './+page.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { baseEmailTemplate, emailTemplate } from './store';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let locale = 'en';
     let loading = false;
 
@@ -34,11 +35,13 @@
     }
 </script>
 
-<div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate bind:loading>
-        <Id value={'{{user}}'}>{'{{user}}'}</Id>
-        <Id value={'{{project}}'}>{'{{project}}'}</Id>
-        <Id value={'{{otp}}'}>{'{{otp}}'}</Id>
-    </EmailTemplate>
-</div>
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack>
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate bind:loading>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{otp}}'}>{'{{otp}}'}</Id>
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailInviteTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailInviteTemplate.svelte
index 86aab0647..d645ec80d 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailInviteTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailInviteTemplate.svelte
@@ -2,13 +2,14 @@
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import { loadEmailTemplate } from './+page.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { baseEmailTemplate, emailTemplate } from './store';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let locale = 'en';
     let loading = false;
 
@@ -34,12 +35,14 @@
     }
 </script>
 
-<div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate bind:loading>
-        <Id value={'{{team}}'}>{'{{team}}'}</Id>
-        <Id value={'{{user}}'}>{'{{user}}'}</Id>
-        <Id value={'{{project}}'}>{'{{project}}'}</Id>
-        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
-    </EmailTemplate>
-</div>
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack>
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate bind:loading>
+            <Id value={'{{team}}'}>{'{{team}}'}</Id>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailMagicUrlTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailMagicUrlTemplate.svelte
index 0941013bf..56189ce42 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailMagicUrlTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailMagicUrlTemplate.svelte
@@ -3,12 +3,13 @@
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import { baseEmailTemplate, emailTemplate } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     let locale = 'en';
     let loading = false;
@@ -36,11 +37,13 @@
     }
 </script>
 
-<div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate bind:loading>
-        <Id value={'{{user}}'}>{'{{user}}'}</Id>
-        <Id value={'{{project}}'}>{'{{project}}'}</Id>
-        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
-    </EmailTemplate>
-</div>
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack>
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate bind:loading>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailRecoveryTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailRecoveryTemplate.svelte
index bba93231c..44c8fae42 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailRecoveryTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailRecoveryTemplate.svelte
@@ -3,12 +3,13 @@
     import LocaleOptions from './localeOptions.svelte';
     import { baseEmailTemplate, emailTemplate } from './store';
     import { loadEmailTemplate } from './+page.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     let locale = 'en';
     let loading = false;
@@ -35,11 +36,13 @@
     }
 </script>
 
-<div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate bind:loading>
-        <Id value={'{{user}}'}>{'{{user}}'}</Id>
-        <Id value={'{{project}}'}>{'{{project}}'}</Id>
-        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
-    </EmailTemplate>
-</div>
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack>
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate bind:loading>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailSessionAlertTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailSessionAlertTemplate.svelte
index 49fe9e299..c474f1a74 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailSessionAlertTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailSessionAlertTemplate.svelte
@@ -2,13 +2,14 @@
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import { loadEmailTemplate } from './+page.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { baseEmailTemplate, emailTemplate } from './store';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let locale = 'en';
     let loading = false;
 
@@ -34,13 +35,15 @@
     }
 </script>
 
-<div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate bind:loading>
-        <Id value={'{{user}}'}>{'{{user}}'}</Id>
-        <Id value={'{{project}}'}>{'{{project}}'}</Id>
-        <Id value={'{{device}}'}>{'{{device}}'}</Id>
-        <Id value={'{{ipAddress'}>{'{{ipAddress}}'}</Id>
-        <Id value={'{{country'}>{'{{country}}'}</Id>
-    </EmailTemplate>
-</div>
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack>
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate bind:loading>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{device}}'}>{'{{device}}'}</Id>
+            <Id value={'{{ipAddress'}>{'{{ipAddress}}'}</Id>
+            <Id value={'{{country'}>{'{{country}}'}</Id>
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte
index 718bf25a3..4c463b0c6 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, EmptyCardImageCloud, Heading } from '$lib/components';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, EmptyCardImageCloud } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import { app } from '$lib/stores/app';
     import { upgradeURL } from '$lib/stores/billing';
@@ -11,11 +11,11 @@
 </script>
 
 <CardGrid>
-    <Heading size="7" tag="h3">Email signature</Heading>
-    <p class="text">Enable or disable Appwrite branding in your email template signature.</p>
+    <svelte:fragment slot="title">Email signature</svelte:fragment>
+    Enable or disable Appwrite branding in your email template signature.
 
     <svelte:fragment slot="aside">
-        <EmptyCardImageCloud source="email_signature_card" let:nextTier noAspectRatio>
+        <EmptyCardImageCloud source="email_signature_card" let:nextTier>
             <svelte:fragment slot="image">
                 <div class=" is-only-mobile u-width-full-line u-height-100-percent">
                     {#if $app.themeInUse === 'dark'}
@@ -60,7 +60,7 @@
                     fullWidth
                     href={$upgradeURL}
                     on:click={() => {
-                        trackEvent('click_organization_upgrade', {
+                        trackEvent(Click.OrganizationClickUpgrade, {
                             from: 'button',
                             source
                         });
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailTemplate.svelte
index 16da07c66..d36351a95 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailTemplate.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
-    import {
-        Button,
-        Form,
-        FormList,
-        InputEmail,
-        InputText,
-        InputTextarea
-    } from '$lib/elements/forms';
+    import { Button, Form, InputEmail, InputText, InputTextarea } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
@@ -14,8 +7,9 @@
     import { baseEmailTemplate, emailTemplate } from './store';
     import deepEqual from 'deep-equal';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Box } from '$lib/components';
     import type { EmailTemplateLocale, EmailTemplateType } from '@appwrite.io/console';
+    import { Icon, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
 
     export let loading = false;
     let openResetModal = false;
@@ -86,75 +80,75 @@
     }
 
     $: isButtonDisabled = deepEqual($emailTemplate, $baseEmailTemplate);
-
     $: isSmtpEnabled = $project?.smtpEnabled;
 </script>
 
-<Box class="u-position-relative">
-    {#if loading}
-        <div
-            class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
-            style="inset-inline-start: 0;">
-            <div class="loader" />
-            <p class="text">Loading template...</p>
-        </div>
-    {/if}
-    <div class:u-opacity-0={loading} style={loading ? 'pointer-events: none' : ''}>
-        <Form onSubmit={saveEmailTemplate}>
-            <FormList gap={8}>
-                <InputText
-                    id="senderName"
-                    label="Sender name"
-                    bind:value={$emailTemplate.senderName}
-                    tooltip="Set up an SMTP server to edit the sender name"
-                    placeholder="Enter sender name"
-                    readonly={!isSmtpEnabled} />
-                <InputEmail
-                    bind:value={$emailTemplate.senderEmail}
-                    id="senderEmail"
-                    label="Sender email"
-                    tooltip="Set up an SMTP server to edit the sender email"
-                    placeholder="Enter sender email"
-                    readonly={!isSmtpEnabled} />
-                <InputEmail
-                    bind:value={$emailTemplate.replyTo}
-                    id="replyTo"
-                    label="Reply to"
-                    placeholder="noreply@appwrite.io" />
-                {#if $$slots.default}
-                    <li style="margin-block: 1rem;">
-                        <p class="text">
-                            Click to copy variables for the fields below. Learn more <a
-                                class="link"
-                                href="https://appwrite.io/docs/advanced/platform/message-templates"
-                                >here</a
-                            >.
-                        </p>
-                        <div class="u-margin-block-start-16 u-flex u-flex-wrap u-gap-8">
-                            <slot />
-                        </div>
-                    </li>
-                {/if}
-                <InputText
-                    bind:value={$emailTemplate.subject}
-                    id="subject"
-                    label="Subject"
-                    placeholder="Enter subject" />
-                <InputTextarea
-                    bind:value={$emailTemplate.message}
-                    id="message"
-                    label="Message"
-                    placeholder="Enter your message"
-                    tooltip="Set up an SMTP server to edit the message body"
-                    readonly={!isSmtpEnabled} />
-            </FormList>
-            <div class="u-sep-block-start u-margin-block-start-24" />
-            <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
-                <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
-                <Button submit disabled={isButtonDisabled}>Update</Button>
-            </div>
-        </Form>
+{#if loading}
+    <div
+        class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
+        style="inset-inline-start: 0;">
+        <div class="loader"></div>
+        <p class="text">Loading template...</p>
     </div>
-</Box>
+{/if}
+<div class:u-opacity-0={loading} style={loading ? 'pointer-events: none' : ''}>
+    <Form onSubmit={saveEmailTemplate}>
+        <Layout.Stack>
+            <InputText
+                id="senderName"
+                label="Sender name"
+                bind:value={$emailTemplate.senderName}
+                placeholder="Enter sender name"
+                disabled={!isSmtpEnabled} />
+            <InputEmail
+                bind:value={$emailTemplate.senderEmail}
+                id="senderEmail"
+                label="Sender email"
+                placeholder="Enter sender email"
+                disabled={!isSmtpEnabled} />
+            <InputEmail
+                bind:value={$emailTemplate.replyTo}
+                id="replyTo"
+                label="Reply to"
+                placeholder="noreply@appwrite.io" />
+            {#if $$slots.default}
+                <p class="text">
+                    Click to copy variables for the fields below. Learn more <a
+                        class="link"
+                        href="https://appwrite.io/docs/advanced/platform/message-templates">here</a
+                    >.
+                </p>
+                <Layout.Stack direction="row">
+                    <slot />
+                </Layout.Stack>
+            {/if}
+            <InputText
+                bind:value={$emailTemplate.subject}
+                id="subject"
+                label="Subject"
+                placeholder="Enter subject" />
+
+            <InputTextarea
+                bind:value={$emailTemplate.message}
+                id="message"
+                label="Message"
+                placeholder="Enter your message"
+                readonly={!isSmtpEnabled}
+                rows={8}>
+                <Tooltip slot="info" maxWidth="15rem">
+                    <Icon icon={IconInfo} size="s" />
+                    <Typography.Caption variant="400" slot="tooltip">
+                        Set up an SMTP server to edit the message body
+                    </Typography.Caption>
+                </Tooltip>
+            </InputTextarea>
+        </Layout.Stack>
+        <div class="u-sep-block-start u-margin-block-start-24"></div>
+        <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
+            <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
+            <Button submit disabled={isButtonDisabled}>Update</Button>
+        </div>
+    </Form>
+</div>
 
 <ResetEmail bind:show={openResetModal} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailVerificationTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailVerificationTemplate.svelte
index 6ac693b0a..0bc34c9b6 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailVerificationTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailVerificationTemplate.svelte
@@ -3,12 +3,13 @@
     import LocaleOptions from './localeOptions.svelte';
     import { loadEmailTemplate } from './+page.svelte';
     import { baseEmailTemplate, emailTemplate } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     let locale = 'en';
     let loading = false;
@@ -35,12 +36,13 @@
     }
 </script>
 
-<div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
-
-    <EmailTemplate bind:loading>
-        <Id value={'{{user}}'}>{'{{user}}'}</Id>
-        <Id value={'{{project}}'}>{'{{project}}'}</Id>
-        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
-    </EmailTemplate>
-</div>
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack gap="l">
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate bind:loading>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/localeOptions.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/localeOptions.svelte
index 084e6ec9c..4c4c334ca 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/localeOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/localeOptions.svelte
@@ -1,39 +1,21 @@
 <script lang="ts">
-    import { Box } from '$lib/components';
-    import { InputSelectSearch } from '$lib/elements/forms';
+    import { Input } from '@appwrite.io/pink-svelte';
     import { localeCodes } from './store';
 
     export let value = 'en';
 
-    let search = 'English';
-
-    $: options =
-        $localeCodes
-            ?.map((code) => ({
-                label: code.name,
-                value: code.code
-            }))
-            ?.filter((option) => option.label?.toLowerCase().startsWith(search?.toLowerCase())) ??
-        [];
+    const options = $localeCodes?.map((code) => ({
+        label: code.name,
+        value: code.code
+    }));
 </script>
 
-<Box radius="small" class="u-flex u-gap-16 u-cross-center">
-    <div class="u-un-break-text is-not-mobile">
-        <span class="icon-translate" />
-        <span class="text">Template language</span>
-    </div>
-    <InputSelectSearch
-        on:select
-        label="Language"
-        id="language"
-        placeholder="Select a language"
-        name="locale"
-        bind:value
-        bind:search
-        required
-        fullWidth
-        stretch={false}
-        showLabel={false}
-        interactiveOutput
-        {options} />
-</Box>
+<Input.ComboBox
+    label="Template language"
+    on:change
+    id="language"
+    placeholder="Select a language"
+    name="locale"
+    bind:value
+    required
+    {options} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/resetEmail.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/resetEmail.svelte
index 123a95df9..347b081db 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/resetEmail.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/resetEmail.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -8,6 +7,7 @@
     import { project } from '../../store';
     import { loadEmailTemplate } from './+page.svelte';
     import { baseEmailTemplate, emailTemplate } from './store';
+    import { Dialog, Layout, Alert } from '@appwrite.io/pink-svelte';
 
     export let show = false;
 
@@ -44,22 +44,24 @@
     }
 </script>
 
-<Modal
-    icon="exclamation"
-    state="warning"
-    onSubmit={reset}
-    size="big"
-    {error}
-    bind:show
-    headerDivider={false}>
-    <svelte:fragment slot="title">Reset Email Template?</svelte:fragment>
-    <p class="text">
-        Are you sure you want to reset the email template?
-        <b>Default values will be set in all inputs.</b>
-    </p>
+<Dialog bind:open={show} title="Reset changes">
+    <svelte:fragment slot="title">Reset email template?</svelte:fragment>
+
+    <Layout.Stack>
+        <p class="text">
+            Are you sure you want to reset the email template?
+            <b>Default values will be set in all inputs.</b>
+        </p>
+
+        {#if error}
+            <Alert.Inline status="warning">{error}</Alert.Inline>
+        {/if}
+    </Layout.Stack>
 
     <svelte:fragment slot="footer">
-        <Button text secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit>Reset</Button>
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text secondary on:click={() => (show = false)}>Cancel</Button>
+            <Button on:click={reset}>Reset</Button>
+        </Layout.Stack>
     </svelte:fragment>
-</Modal>
+</Dialog>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/resetSms.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/resetSms.svelte
index 3ee20b634..7bbed915a 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/resetSms.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/resetSms.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -39,15 +39,8 @@
     }
 </script>
 
-<Modal
-    icon="exclamation"
-    state="warning"
-    onSubmit={reset}
-    size="big"
-    {error}
-    bind:show
-    headerDivider={false}>
-    <svelte:fragment slot="title">Reset SMS Template?</svelte:fragment>
+<Modal onSubmit={reset} {error} bind:show>
+    <svelte:fragment slot="title">Reset SMS template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the SMS template?
         <b>Default values will be set in all inputs.</b>
@@ -57,4 +50,4 @@
         <Button text secondary on:click={() => (show = false)}>Cancel</Button>
         <Button secondary submit>Reset</Button>
     </svelte:fragment>
-</Modal>
+</Modal> -->
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/smsInvitationTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/smsInvitationTemplate.svelte
index 31419ba85..f6967df05 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/smsInvitationTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/smsInvitationTemplate.svelte
@@ -1,14 +1,14 @@
-<script lang="ts">
+<!-- <script lang="ts">
     import SmsTemplate from './smsTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import { baseSmsTemplate, smsTemplate } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { loadSmsTemplate } from './+page.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let locale = 'en';
     let loading = false;
 
@@ -35,11 +35,11 @@
 </script>
 
 <div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
+    <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
     <SmsTemplate bind:loading>
         <Id value={'{{team}}'}>{'{{team}}'}</Id>
         <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
         <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
     </SmsTemplate>
-</div>
+</div> -->
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/smsLoginTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/smsLoginTemplate.svelte
index 0d85c3be4..d3b4cf55e 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/smsLoginTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/smsLoginTemplate.svelte
@@ -1,14 +1,14 @@
-<script lang="ts">
+<!-- <script lang="ts">
     import SmsTemplate from './smsTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { loadSmsTemplate } from './+page.svelte';
     import { baseSmsTemplate, smsTemplate } from './store';
     import { addNotification } from '$lib/stores/notifications';
     import { Id } from '$lib/components';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let locale = 'en';
     let loading = false;
 
@@ -36,11 +36,11 @@
 </script>
 
 <div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
+    <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
     <SmsTemplate bind:loading>
         <Id value={'{{team}}'}>{'{{team}}'}</Id>
         <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
         <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
     </SmsTemplate>
-</div>
+</div> -->
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/smsTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/smsTemplate.svelte
index 326ae5555..6c14adec5 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/smsTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/smsTemplate.svelte
@@ -1,6 +1,6 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
+<!-- <script lang="ts">
+    import { page } from '$app/state';
+    import { Button, Form, InputTextarea } from '$lib/elements/forms';
     import ResetSms from './resetSms.svelte';
     import { baseSmsTemplate, smsTemplate } from './store';
     import { addNotification } from '$lib/stores/notifications';
@@ -11,7 +11,7 @@
     import type { SmsTemplateLocale, SmsTemplateType } from '@appwrite.io/console';
 
     export let loading = false;
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let openResetModal = false;
 
     let eventType = Submit.SmsUpdateInviteTemplate;
@@ -66,26 +66,24 @@
     $: isButtonDisabled = deepEqual($smsTemplate, $baseSmsTemplate);
 </script>
 
-<Box class="u-position-relative">
+<Box>
     {#if loading}
         <div
             class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
             style="inset-inline-start: 0;">
-            <div class="loader" />
+            <div class="loader"></div>
             <p class="text">Loading template...</p>
         </div>
     {/if}
     <div class:u-opacity-0={loading} style={loading ? 'pointer-events: none' : ''}>
         <Form onSubmit={saveSmsTemplate}>
-            <FormList gap={8}>
-                <InputTextarea
-                    bind:value={$smsTemplate.message}
-                    id="message"
-                    label="Message"
-                    placeholder="Enter your message" />
-            </FormList>
+            <InputTextarea
+                bind:value={$smsTemplate.message}
+                id="message"
+                label="Message"
+                placeholder="Enter your message" />
 
-            <div class="u-sep-block-start u-margin-block-start-24" />
+            <div class="u-sep-block-start u-margin-block-start-24"></div>
 
             <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
                 <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
@@ -95,4 +93,4 @@
     </div>
 </Box>
 
-<ResetSms bind:show={openResetModal} />
+<ResetSms bind:show={openResetModal} /> -->
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/smsVerificationTemplate.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/smsVerificationTemplate.svelte
index 3227df470..adcb0b519 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/smsVerificationTemplate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/smsVerificationTemplate.svelte
@@ -1,14 +1,14 @@
-<script lang="ts">
+<!-- <script lang="ts">
     import SmsTemplate from './smsTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { loadSmsTemplate } from './+page.svelte';
     import { baseSmsTemplate, smsTemplate } from './store';
     import { Id } from '$lib/components';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let locale = 'en';
     let loading = false;
 
@@ -35,11 +35,11 @@
 </script>
 
 <div class="boxes-wrapper u-margin-block-start-16">
-    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
+    <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
     <SmsTemplate bind:loading>
         <Id value={'{{team}}'}>{'{{team}}'}</Id>
         <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
         <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
     </SmsTemplate>
-</div>
+</div> -->
diff --git a/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte
index b3c55a742..9879c54e4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Usage } from '$lib/layout';
-    import type { PageData } from './$types';
+    import { page } from '$app/state';
+    import { Container, Usage } from '$lib/layout';
 
-    export let data: PageData;
+    export let data;
     $: total = data.usersTotal;
     $: count = data.users;
 </script>
 
-<Usage
-    title="Users"
-    path={`${base}/project-${$page.params.region}-${$page.params.project}/auth/usage`}
-    countMetadata={{
-        legend: 'Users',
-        title: 'Registered users'
-    }}
-    {total}
-    {count} />
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/auth/usage`}
+        countMetadata={{
+            legend: 'Users',
+            title: 'Registered users'
+        }}
+        {total}
+        {count} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.svelte
index 985496c75..0aa88a0c1 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.svelte
@@ -5,4 +5,4 @@
     export let data: PageData;
 </script>
 
-<Activity logs={data.logs} offset={data.offset} service="logs" />
+<Activity logs={data.logs} offset={data.offset} limit={data.limit} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.ts
index 4ef425126..29b004821 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     return {
         offset,
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
index 4217743d3..be68f127e 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/auth`,
             title: 'Auth'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${$user?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/auth/user-${$user?.$id}`,
             title: $user?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte
index 4be1852a2..97eda9f42 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading, AvatarInitials } from '$lib/components';
+    import { CardGrid, BoxAvatar, AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { writable } from 'svelte/store';
     import DeleteUser from './deleteUser.svelte';
@@ -22,28 +22,24 @@
     $: accessedAt = ($user as unknown as { accessedAt: string }).accessedAt;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete user</Heading>
-    </div>
-    <p>
-        The user will be permanently deleted, including all data associated with this user. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete user</svelte:fragment>
+    The user will be permanently deleted, including all data associated with this user. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
                 {#if $user.email || $user.phone}
                     {#if $user.name}
-                        <AvatarInitials size={48} name={$user.name} />
+                        <AvatarInitials size="l" name={$user.name} />
                     {:else}
                         <div class="avatar">
-                            <span class="icon-minus-sm" aria-hidden="true" />
+                            <span class="icon-minus-sm" aria-hidden="true"></span>
                         </div>
                     {/if}
                 {:else}
                     <div class="avatar">
-                        <span class="icon-anonymous" aria-hidden="true" />
+                        <span class="icon-anonymous" aria-hidden="true"></span>
                     </div>
                 {/if}
             </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteAllSessions.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteAllSessions.svelte
index 35c5ab972..d49156c53 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteAllSessions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteAllSessions.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import { page } from '$app/state';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
 
     export let showDeleteAll = false;
 
+    let error: string;
+
     async function deleteAllSessions() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .users.deleteSessions($page.params.user);
+                .forProject(page.params.region, page.params.project)
+                .users.deleteSessions(page.params.user);
             await invalidate(Dependencies.SESSIONS);
             showDeleteAll = false;
             addNotification({
@@ -23,28 +24,13 @@
                 message: 'All sessions have been deleted'
             });
             trackEvent(Submit.SessionDeleteAll);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.SessionDeleteAll);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SessionDeleteAll);
         }
     }
 </script>
 
-<Modal
-    title="Delete all sessions"
-    bind:show={showDeleteAll}
-    onSubmit={deleteAllSessions}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
-        Are you sure you want to delete <b>all of {$user.name || 'User'}'s sessions?</b>
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDeleteAll = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+<Confirm onSubmit={deleteAllSessions} title="Delete member" bind:open={showDeleteAll} bind:error>
+    Are you sure you want to delete <b>all of {$user?.name || 'User'}'s sessions?</b>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte
index 60ecfc271..88d2ebc1b 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte
@@ -1,22 +1,24 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let showDelete = false;
     export let selectedMembership: Models.Membership;
 
+    let error: string;
+
     async function deleteMembership() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .teams.deleteMembership(selectedMembership.teamId, selectedMembership.$id);
             await invalidate(Dependencies.MEMBERSHIPS);
             showDelete = false;
@@ -26,32 +28,18 @@
             });
             trackEvent(Submit.MemberDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${selectedMembership.userId}/memberships`
+                `${base}/project-${page.params.region}-${page.params.project}/auth/user-${selectedMembership.userId}/memberships`
             );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MemberDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MemberDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete member"
-    bind:show={showDelete}
-    onSubmit={deleteMembership}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    {#if selectedMembership}
-        <p data-private>
-            Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
-        </p>
-    {/if}
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+<Confirm onSubmit={deleteMembership} title="Delete member" bind:open={showDelete} bind:error>
+    <Typography.Text>
+        Are you sure you want to delete <b>{selectedMembership.userName}</b> from
+        <b>{selectedMembership.teamName}</b>?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMfa.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMfa.svelte
index 9f45e73cb..e27a832e2 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMfa.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMfa.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { AuthenticatorType } from '@appwrite.io/console';
     import { user } from './store';
-    import { page } from '$app/stores';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { page } from '$app/state';
 
     export let showDelete = false;
 
@@ -17,7 +16,7 @@
     async function deleteProvider() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.deleteMfaAuthenticator($user.$id, AuthenticatorType.Totp);
             await invalidate(Dependencies.USER);
             showDelete = false;
@@ -37,18 +36,11 @@
     }
 </script>
 
-<Modal
-    title="Delete authentication method"
-    bind:show={showDelete}
+<Confirm
     onSubmit={deleteProvider}
-    icon="exclamation"
-    state="warning"
-    bind:error
-    headerDivider={false}>
+    title="Delete authentication method"
+    bind:open={showDelete}
+    bind:error>
     <p>Are you sure you want to delete this authentication?</p>
     <p class="text u-bold">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>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteSession.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteSession.svelte
index 412670b0e..808e8d46a 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteSession.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteSession.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
 
     export let showDelete = false;
     export let selectedSessionId: string;
+    let error: string;
 
     async function deleteSession() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .users.deleteSession($page.params.user, selectedSessionId);
+                .forProject(page.params.region, page.params.project)
+                .users.deleteSession(page.params.user, selectedSessionId);
             await invalidate(Dependencies.SESSIONS);
             showDelete = false;
             addNotification({
@@ -23,26 +23,13 @@
                 message: 'Session has been deleted'
             });
             trackEvent(Submit.SessionDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.SessionDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SessionDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete sessions"
-    bind:show={showDelete}
-    onSubmit={deleteSession}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <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>
+<Confirm onSubmit={deleteSession} title="Delete session" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this session?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte
index 6456ddf4f..8c549865f 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { user } from './store';
 
     export let showDelete = false;
     let error: string;
     const deleteUser = async () => {
         try {
-            await sdk.forProject($page.params.region, $page.params.project).users.delete($user.$id);
+            await sdk.forProject(page.params.region, page.params.project).users.delete($user.$id);
             showDelete = false;
             addNotification({
                 type: 'success',
                 message: `${$user.name ? $user.name : 'User'} has been deleted`
             });
             trackEvent(Submit.UserDelete);
-            await goto(`${base}/project-${$page.params.region}-${$page.params.project}/auth`);
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/auth`);
         } catch (e) {
             error = e.message;
             trackError(e, Submit.UserDelete);
@@ -29,19 +29,8 @@
     };
 </script>
 
-<Modal
-    title="Delete user"
-    bind:show={showDelete}
-    onSubmit={deleteUser}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:error>
-    <p data-private>
-        Are you sure you want to delete <b>{$user.name || 'User'}</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>
+<Confirm onSubmit={deleteUser} title="Delete user" bind:open={showDelete} bind:error>
+    <Typography.Text>
+        Are you sure you want to delete <b>{$user.name || 'User'}</b> from <b>{$project.name}</b>?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte
index a928de0ac..f11425ba9 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { user } from './store';
 
-    const path = `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${$page.params.user}`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/auth/user-${page.params.user}`;
     const tabs = [
         {
             href: path,
@@ -44,7 +44,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${$page.params.project}/auth`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${page.params.project}/auth`}>
             {$user.name ? $user.name : '-'}
         </CoverTitle>
         <Id value={$user.$id} event="user">{$user.$id}</Id>
@@ -54,7 +54,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
index 978ca5ae4..c1d02a90f 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
@@ -1,38 +1,30 @@
 <script lang="ts">
-    import {
-        PaginationWithLimit,
-        Heading,
-        ViewSelector,
-        EmptyFilter,
-        EmptySearch,
-        DropList
-    } from '$lib/components';
+    import { PaginationWithLimit, ViewSelector, EmptyFilter } from '$lib/components';
     import { Container } from '$lib/layout';
-    import type { PageData } from './$types';
     import Table from './table.svelte';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
-    import { Pill } from '$lib/elements';
+    import { Card, Empty, Icon, Popover, Tag } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
 
-    export let data: PageData;
+    export let data;
 
-    let showMoreInfo = false;
     const columns = writable<Column[]>([
-        { id: '$id', title: 'Identity ID', type: 'string', show: true, width: 140 },
-        { id: 'provider', title: 'Provider', type: 'string', show: true, width: 80 },
-        { id: 'providerUid', title: 'Provider UID', type: 'string', show: false, width: 80 },
-        { id: 'providerEmail', title: 'Email', type: 'string', show: true, width: 80 },
+        { id: '$id', title: 'Identity ID', type: 'string', width: 200 },
+        { id: 'provider', title: 'Provider', type: 'string', width: 80 },
+        { id: 'providerUid', title: 'Provider UID', type: 'string', hide: true, width: 80 },
+        { id: 'providerEmail', title: 'Email', type: 'string', width: 80 },
         {
             id: 'providerAccessTokenExpiry',
             title: 'Expiry Date',
             type: 'datetime',
-            show: true,
             width: 60
         },
-        { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 80 },
-        { id: '$updatedAt', title: 'Updated', type: 'datetime', show: false, width: 80 }
+        { id: '$createdAt', title: 'Created', type: 'datetime', width: 80 },
+        { id: '$updatedAt', title: 'Updated', type: 'datetime', hide: true, width: 80 }
     ]);
 </script>
 
@@ -40,43 +32,28 @@
     <div class="u-flex u-flex-vertical">
         <div class="u-flex u-main-space-between u-cross-center">
             <div class="u-flex u-gap-16 u-cross-center">
-                <Heading tag="h2" size="5">Identities</Heading>
-                <DropList bind:show={showMoreInfo} width="16">
-                    <Pill button on:click={() => (showMoreInfo = !showMoreInfo)}>
-                        <span class="icon-info" />More info
-                    </Pill>
-                    <svelte:fragment slot="list">
-                        <slot name="tooltip">
-                            <p>
-                                User identities are the user's connected OAuth accounts. The user
-                                can sign in using these identities.
-                            </p>
-                        </slot>
-                    </svelte:fragment>
-                </DropList>
+                <Popover let:toggle placement="bottom-start">
+                    <Tag on:click={toggle}>
+                        <Icon slot="start" icon={IconInfo} size="s" />
+                        More info
+                    </Tag>
+                    <p slot="tooltip">
+                        User identities are the user's connected OAuth accounts. <br /> The user can
+                        sign in using these identities.
+                    </p>
+                </Popover>
             </div>
             <!-- TODO: Remove when searching is added -->
             <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                 <Filters query={data.query} {columns} />
                 <div>
-                    <ViewSelector
-                        view={View.Table}
-                        {columns}
-                        hideView
-                        allowNoColumns
-                        showColsTextMobile />
+                    <ViewSelector view={View.Table} {columns} hideView />
                 </div>
             </div>
         </div>
         <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
             <div class="u-flex-basis-50-percent">
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile
-                    fullWidthMobile />
+                <ViewSelector view={View.Table} {columns} hideView />
             </div>
             <div class="u-flex-basis-50-percent">
                 <Filters query={data.query} {columns} fullWidthMobile />
@@ -94,11 +71,17 @@
     {:else if $hasPageQueries}
         <EmptyFilter resource="identities" />
     {:else}
-        <EmptySearch hidePagination>
-            <div class="u-text-center">
-                <p>This user has no identities.</p>
-                <p>Once this user signs in via OAuth, you'll see it here.</p>
-            </div>
-        </EmptySearch>
+        <Card.Base padding="none">
+            <Empty
+                title="No identities available"
+                description="Once this user signs in via OAuth, you'll see it here."
+                type="secondary">
+                <svelte:fragment slot="actions">
+                    <Button external secondary href="https://appwrite.io/docs/products/auth/oauth2">
+                        Documentation
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.ts
index 252dceca5..475f950a5 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.USER_IDENTITIES);
 
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
     const search = getSearch(url);
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/table.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/table.svelte
index 89da1329b..fa8d43c06 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/table.svelte
@@ -1,17 +1,6 @@
 <script lang="ts">
-    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import type { PageData } from './$types';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdk } from '$lib/stores/sdk';
@@ -23,20 +12,21 @@
     import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { page } from '$app/state';
 
     export let columns: Column[];
     export let data: PageData;
 
     let selectedIds: string[] = [];
     let showDelete = false;
-    let deleting = false;
 
     async function handleDelete() {
         showDelete = false;
 
         const promises = selectedIds.map((id) =>
-            sdk.forProject($page.params.region, $page.params.project).users.deleteIdentity(id)
+            sdk.forProject(page.params.region, page.params.project).users.deleteIdentity(id)
         );
 
         try {
@@ -62,102 +52,69 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        <TableCellHeadCheck
-            bind:selected={selectedIds}
-            pageItemsIds={data.identities.identities.map((d) => d.$id)} />
-        {#each columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root {columns} allowSelection let:root bind:selectedRows={selectedIds}>
+    <svelte:fragment slot="header" let:root>
+        {#each columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.identities.identities as identity (identity.$id)}
-            <TableRow>
-                <TableCellCheck bind:selectedIds id={identity.$id} />
-
-                {#each columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key columns}
-                                <TableCell title={column.title}>
-                                    <Id value={identity[column.id]}>
-                                        {identity[column.id]}
-                                    </Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'provider'}
-                            {@const provider = oAuthProviders[identity[column.id]]}
-                            <TableCellText title={column.title} width={column.width}>
-                                <div class="u-inline-flex u-cross-center u-gap-8">
-                                    <div class="avatar is-size-small">
-                                        <img
-                                            style="--p-text-size: 1rem"
-                                            height="20"
-                                            width="20"
-                                            src={`${base}/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
-                                            alt={provider.name} />
-                                    </div>
-                                    {provider.name}
-                                </div>
-                            </TableCellText>
-                        {:else if column.type === 'datetime'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {#if !identity[column.id]}
-                                    -
-                                {:else}
-                                    {toLocaleDateTime(identity[column.id])}
-                                {/if}
-                            </TableCellText>
-                        {:else}
-                            <TableCellText title={column.title} width={column.width}>
+    </svelte:fragment>
+    {#each data.identities.identities as identity (identity.$id)}
+        <Table.Row.Base {root}>
+            {#each columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key columns}
+                            <Id value={identity[column.id]}>
                                 {identity[column.id]}
-                            </TableCellText>
+                            </Id>
+                        {/key}
+                    {:else if column.id === 'provider'}
+                        {@const provider = oAuthProviders[identity[column.id]]}
+                        <div class="u-inline-flex u-cross-center u-gap-8">
+                            <div class="avatar is-size-small">
+                                <img
+                                    style="--p-text-size: 1rem"
+                                    height="20"
+                                    width="20"
+                                    src={`${base}/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
+                                    alt={provider.name} />
+                            </div>
+                            {provider.name}
+                        </div>
+                    {:else if column.type === 'datetime'}
+                        {#if !identity[column.id]}
+                            -
+                        {:else}
+                            {toLocaleDateTime(identity[column.id])}
                         {/if}
+                    {:else}
+                        {identity[column.id]}
                     {/if}
-                {/each}
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
 
-<FloatingActionBar show={selectedIds.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedIds.length > 1 ? 'identities' : 'identity'}
-                </span>
+{#if selectedIds.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedIds.length.toString()} />
+            <span>
+                {selectedIds.length > 1 ? 'identities' : 'identity'}
                 selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
             <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-<Modal
-    title="Delete identity"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
+<Confirm title="Delete Identity" bind:open={showDelete} onSubmit={handleDelete}>
+    <Typography.Text>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'identities' : 'identity'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
index 81196ccc0..13ca40706 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
@@ -1,83 +1,86 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { base } from '$app/paths';
-    import { AvatarInitials, EmptySearch } from '$lib/components';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell
-    } from '$lib/elements/table';
+    import { AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import DeleteMembership from '../deleteMembership.svelte';
     import type { Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
     import { trackEvent } from '$lib/actions/analytics';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Table, Layout, Empty, Card } from '@appwrite.io/pink-svelte';
 
-    export let data: PageData;
+    export let data;
 
     let selectedMembership: Models.Membership;
     let showDelete = false;
 
-    const project = $page.params.project;
+    const project = page.params.project;
 </script>
 
 <Container>
     {#if data.memberships.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Roles</TableCellHead>
-                <TableCellHead onlyDesktop>Joined</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-            <TableBody>
-                {#each data.memberships.memberships as membership}
-                    <TableRowLink
-                        href={`${base}/project-${$page.params.region}-${project}/auth/teams/team-${membership.teamId}`}>
-                        <TableCellText title="Name">
-                            <div class="u-flex u-cross-center u-gap-12">
-                                <AvatarInitials size={32} name={membership.teamName} />
-                                <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
-                            </div>
-                        </TableCellText>
-                        <TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
-                        <TableCellText onlyDesktop title="Joined">
-                            {toLocaleDateTime(membership.joined)}
-                        </TableCellText>
-                        <TableCell width={30}>
-                            <button
-                                class="button is-only-icon is-text"
-                                aria-label="Delete item"
-                                on:click|preventDefault={() => {
-                                    selectedMembership = membership;
-                                    showDelete = true;
-                                    trackEvent('click_delete_membership');
-                                }}>
-                                <span class="icon-trash" aria-hidden="true" />
-                            </button>
-                        </TableCell>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </Table>
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'name' },
+                { id: 'roles' },
+                { id: 'joined' },
+                { id: 'actions', width: 40 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
+                <Table.Header.Cell column="roles" {root}>Roles</Table.Header.Cell>
+                <Table.Header.Cell column="joined" {root}>Joined</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each data.memberships.memberships as membership}
+                <Table.Row.Link
+                    {root}
+                    href={`${base}/project-${project}/auth/teams/team-${membership.teamId}`}>
+                    <Table.Cell column="name" {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            <AvatarInitials size="xs" name={membership.teamName} />
+                            <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="roles" {root}>
+                        {membership.roles}
+                    </Table.Cell>
+                    <Table.Cell column="joined" {root}>
+                        {toLocaleDateTime(membership.joined)}
+                    </Table.Cell>
+                    <Table.Cell column="actions" {root}>
+                        <button
+                            class="button is-only-icon is-text"
+                            aria-label="Delete item"
+                            on:click|preventDefault={() => {
+                                selectedMembership = membership;
+                                showDelete = true;
+                                trackEvent('click_delete_membership');
+                            }}>
+                            <span class="icon-trash" aria-hidden="true"></span>
+                        </button>
+                    </Table.Cell>
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
     {:else}
-        <EmptySearch>
-            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
-                <p class="text u-line-height-1-5">No memberships available</p>
-                <Button
-                    external
-                    secondary
-                    href="https://appwrite.io/docs/products/auth/teams#create-membership">
-                    Documentation
-                </Button>
-            </div>
-        </EmptySearch>
+        <Card.Base padding="none">
+            <Empty
+                title="No memberships available"
+                description="Need a hand? Learn more in our documentation."
+                type="secondary">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        secondary
+                        href="https://appwrite.io/docs/products/auth/teams#create-membership">
+                        Documentation
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.ts
index 6c8043158..6aa400532 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.ts
@@ -2,7 +2,9 @@ import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
+    const codes = await sdk.forProject(params.region, params.project).locale.listCodes();
     return {
+        localeCodes: codes.localeCodes,
         memberships: await sdk
             .forProject(params.region, params.project)
             .users.listMemberships(params.user)
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
index 8d15b3abd..55116fda4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
@@ -17,9 +17,8 @@
     import { Browser } from '@appwrite.io/console';
     import DeleteAllSessions from '../deleteAllSessions.svelte';
     import DeleteSessions from '../deleteSession.svelte';
-    import type { PageData } from './$types';
 
-    export let data: PageData;
+    export let data;
 
     let showDelete = false;
     let showDeleteAll = false;
@@ -68,7 +67,8 @@
                                         <span
                                             class="icon-globe-alt"
                                             style="--p-text-size: 1.25rem"
-                                            aria-hidden="true" />
+                                            aria-hidden="true">
+                                        </span>
                                     {/if}
                                 </div>
                                 <p class="text">
@@ -88,13 +88,13 @@
                         <TableCell>
                             <Button
                                 text
-                                round
+                                icon
                                 ariaLabel="Delete item"
                                 on:click={() => {
                                     selectedSessionId = session.$id;
                                     showDelete = true;
                                 }}>
-                                <span class="icon-trash" aria-hidden="true" />
+                                <span class="icon-trash" aria-hidden="true"></span>
                             </Button>
                         </TableCell>
                     </TableRow>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
index e840f0d63..28cdbeec4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
@@ -1,108 +1,44 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import {
-        PaginationWithLimit,
-        Heading,
-        ViewSelector,
-        EmptyFilter,
-        EmptySearch,
-        DropList
-    } from '$lib/components';
+    import { PaginationWithLimit, ViewSelector, EmptyFilter } from '$lib/components';
     import { Container } from '$lib/layout';
-    import type { PageData } from './$types';
     import Table from './table.svelte';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import { columns } from './store';
     import { View } from '$lib/helpers/load';
     import Create from './create.svelte';
-    import { Pill } from '$lib/elements';
+    import { Card, Empty, Icon, Popover, Tag } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
 
-    export let data: PageData;
+    export let data;
     let showAdd = false;
-    let showMoreInfo = false;
 </script>
 
 <Container>
     <div class="u-flex u-flex-vertical">
         <div class="u-flex u-main-space-between u-cross-center">
             <div class="u-flex u-gap-16 u-cross-center">
-                <Heading tag="h2" size="5">Targets</Heading>
-                <DropList bind:show={showMoreInfo} width="16">
-                    <Pill button on:click={() => (showMoreInfo = !showMoreInfo)}>
-                        <span class="icon-info" />More info
-                    </Pill>
-                    <svelte:fragment slot="list">
-                        <slot name="tooltip">
-                            <p>
-                                User targets include emails, phone numbers, and devices with your
-                                app installed. These targets can subscribe to a topic and receive
-                                messages published to it.
-                            </p>
-                        </slot>
-                    </svelte:fragment>
-                </DropList>
+                <Popover let:toggle placement="bottom-start">
+                    <Tag on:click={toggle}>
+                        <Icon slot="start" icon={IconInfo} size="s" />
+                        More info
+                    </Tag>
+                    <p slot="tooltip">
+                        User targets include emails, phone numbers, and devices with your app
+                        installed.<br /> These targets can subscribe to a topic and receive messages
+                        published to it.
+                    </p>
+                </Popover>
             </div>
 
-            <!-- TODO: Remove u-hide to add creating a target -->
-            <div class="is-only-mobile u-hide">
-                <Button on:click={() => (showAdd = true)} event="create_user_target">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add target</span>
-                </Button>
-            </div>
-            <!-- TODO: Remove when searching is added -->
             <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                 <Filters query={data.query} {columns} />
-                <div>
-                    <ViewSelector
-                        view={View.Table}
-                        {columns}
-                        hideView
-                        allowNoColumns
-                        showColsTextMobile />
-                    <div class="u-hide">
-                        <Button on:click={() => (showAdd = true)} event="create_user_target">
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add target</span>
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- TODO: Add searching when API supports it -->
-        <!-- <SearchQuery search={data.search} placeholder="Search by name">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                <Button on:click={() => (showAdd = true)} event="create_user_target">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add target</span>
-                </Button>
-            </div>
-        </SearchQuery> -->
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile
-                    fullWidthMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <Filters query={data.query} {columns} fullWidthMobile />
+                <ViewSelector view={View.Table} {columns} hideView />
             </div>
         </div>
     </div>
     {#if data.targets.total}
         <Table {data} />
-
         <PaginationWithLimit
             name="Targets"
             limit={data.limit}
@@ -110,33 +46,22 @@
             total={data.targets.total} />
     {:else if $hasPageQueries}
         <EmptyFilter resource="targets" />
-        <!-- {:else if data.search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find '{data.search}'</b>
-                <p>There are no targets that match your search.</p>
-            </div>
-            <Button
-                secondary
-                href={`/console/project-${$page.params.project}/auth/user-${$page.params.user}/targets`}>
-                Clear Search
-            </Button>
-        </EmptySearch> -->
     {:else}
-        <EmptySearch hidePagination>
-            <div class="u-text-center">
-                <p>No targets are assigned to this user. Messages can not be sent to them.</p>
-                <p>
-                    Need a hand? Check out our <Button
-                        link
+        <Card.Base padding="none">
+            <Empty
+                title="No targets available"
+                description="No targets are assigned to this user. Messages can not be sent to them."
+                type="secondary">
+                <svelte:fragment slot="actions">
+                    <Button
                         external
-                        href="https://appwrite.io/docs/products/messaging/targets"
-                        text>
-                        documentation</Button
-                    >.
-                </p>
-            </div>
-        </EmptySearch>
+                        secondary
+                        href="https://appwrite.io/docs/products/messaging/targets">
+                        Documentation
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.ts
index e7a6aa7fe..c3dab9c6a 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.USER_TARGETS);
 
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
index 3560f8b4d..90cd57c6e 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
-    import { Button, InputText, FormList, InputSelect, InputPhone } from '$lib/elements/forms';
+    import { Button, InputText, InputSelect, InputPhone } from '$lib/elements/forms';
     import InputEmail from '$lib/elements/forms/inputEmail.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -29,9 +29,9 @@
     const create = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.createTarget(
-                    $page.params.user,
+                    page.params.user,
                     id ? id : ID.unique(),
                     providerType,
                     identifier,
@@ -73,59 +73,58 @@
     }
 </script>
 
-<Modal title="Create target" size="big" bind:show onSubmit={create}>
-    <FormList>
-        <InputSelect
-            id="provider-type"
-            label="Provider Type"
-            bind:value={providerType}
-            options={providerTypeOptions} />
-        {#if providerType === MessagingProviderType.Push}
-            <InputText
-                id="provider-id"
-                label="Provider ID"
-                placeholder="Enter provider ID"
-                bind:value={providerId}
-                required />
-            <InputText
-                id="identifier"
-                label="Identifier"
-                placeholder="Enter push token"
-                bind:value={identifier}
-                required />
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Enter target name"
-                bind:value={name}
-                required />
-        {:else if providerType === MessagingProviderType.Email}
-            <InputEmail
-                id="identifier"
-                label="Identifier"
-                placeholder="Enter email"
-                bind:value={identifier}
-                required />
-        {:else if providerType === MessagingProviderType.Sms}
-            <InputPhone
-                id="identifier"
-                label="Identifier"
-                placeholder="Enter phone number"
-                bind:value={identifier}
-                required />
-        {/if}
+<Modal title="Create target" size="l" bind:show onSubmit={create}>
+    <InputSelect
+        id="provider-type"
+        label="Provider Type"
+        bind:value={providerType}
+        options={providerTypeOptions} />
+    {#if providerType === MessagingProviderType.Push}
+        <InputText
+            id="provider-id"
+            label="Provider ID"
+            placeholder="Enter provider ID"
+            bind:value={providerId}
+            required />
+        <InputText
+            id="identifier"
+            label="Identifier"
+            placeholder="Enter push token"
+            bind:value={identifier}
+            required />
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter target name"
+            bind:value={name}
+            required />
+    {:else if providerType === MessagingProviderType.Email}
+        <InputEmail
+            id="identifier"
+            label="Identifier"
+            placeholder="Enter email"
+            bind:value={identifier}
+            required />
+    {:else if providerType === MessagingProviderType.Sms}
+        <InputPhone
+            id="identifier"
+            label="Identifier"
+            placeholder="Enter phone number"
+            bind:value={identifier}
+            required />
+    {/if}
+
+    {#if !showCustomId}
+        <div>
+            <Pill button on:click={() => (showCustomId = !showCustomId)}
+                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
+                    Target ID
+                </span></Pill>
+        </div>
+    {:else}
+        <CustomId bind:show={showCustomId} name="Target" bind:id autofocus={false} />
+    {/if}
 
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}
-                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        Target ID
-                    </span></Pill>
-            </div>
-        {:else}
-            <CustomId bind:show={showCustomId} name="Target" bind:id autofocus={false} />
-        {/if}
-    </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/store.ts b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/store.ts
index d3b900a72..706105c3d 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/store.ts
@@ -2,9 +2,9 @@ import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Target ID', type: 'string', show: true, width: 140 },
-    { id: 'target', title: 'Target', type: 'string', show: true, filter: false, width: 140 },
-    { id: 'providerType', title: 'Type', type: 'string', show: true, filter: true, width: 80 },
-    { id: 'provider', title: 'Provider', type: 'string', show: true, filter: false, width: 80 },
-    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 100 }
+    { id: '$id', title: 'Target ID', type: 'string', width: 200 },
+    { id: 'target', title: 'Target', type: 'string', filter: false, width: { min: 140 } },
+    { id: 'providerType', title: 'Type', type: 'string', filter: true, width: { min: 80 } },
+    { id: 'provider', title: 'Provider', type: 'string', filter: false, width: { min: 80 } },
+    { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 100 } }
 ]);
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/table.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/table.svelte
index ef047b399..fcff7933c 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/table.svelte
@@ -1,43 +1,33 @@
 <script lang="ts">
-    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import type { PageData } from './$types';
     import { columns } from './store';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import ProviderType from '$routes/(console)/project-[region]-[project]/messaging/providerType.svelte';
     import Provider from '$routes/(console)/project-[region]-[project]/messaging/provider.svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import { MessagingProviderType } from '@appwrite.io/console';
+    import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let data: PageData;
 
     let selectedIds: string[] = [];
     let showDelete = false;
-    let deleting = false;
 
     async function handleDelete() {
         showDelete = false;
 
         const promises = selectedIds.map((id) =>
             sdk
-                .forProject($page.params.region, $page.params.project)
-                .users.deleteTarget($page.params.user, id)
+                .forProject(page.params.region, page.params.project)
+                .users.deleteTarget(page.params.user, id)
         );
 
         try {
@@ -63,102 +53,65 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        <TableCellHeadCheck
-            bind:selected={selectedIds}
-            pageItemsIds={data.targets.targets.map((d) => d.$id)} />
-        {#each $columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root columns={$columns} allowSelection let:root bind:selectedRows={selectedIds}>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.targets.targets as target (target.$id)}
-            {@const provider = data.providersById[target.providerId]}
-            <TableRow>
-                <TableCellCheck bind:selectedIds id={target.$id} />
-
-                {#each $columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key $columns}
-                                <TableCell title={column.title}>
-                                    <Id value={target[column.id]}>
-                                        {target[column.id]}
-                                    </Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'target'}
-                            <TableCell title={column.title}>
-                                {#if target.providerType === MessagingProviderType.Push}
-                                    {target.name}
-                                {:else}
-                                    {target.identifier}
-                                {/if}
-                            </TableCell>
-                        {:else if column.id === 'providerType'}
-                            <TableCellText title={column.title} width={column.width}>
-                                <ProviderType type={target.providerType} size="s" />
-                            </TableCellText>
-                        {:else if column.id === 'provider'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {#if provider}
-                                    <Provider provider={provider.provider} size="s" />
-                                {/if}
-                            </TableCellText>
-                        {:else if column.id === '$createdAt'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {toLocaleDateTime(target[column.id])}
-                            </TableCellText>
-                        {:else}
-                            <TableCellText title={column.title} width={column.width}>
+    </svelte:fragment>
+    {#each data.targets.targets as target (target.$id)}
+        {@const provider = data.providersById[target.providerId]}
+        <Table.Row.Base {root} id={target.$id}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key $columns}
+                            <Id value={target[column.id]}>
                                 {target[column.id]}
-                            </TableCellText>
+                            </Id>
+                        {/key}
+                    {:else if column.id === 'target'}
+                        {#if target.providerType === MessagingProviderType.Push}
+                            {target.name}
+                        {:else}
+                            {target.identifier}
                         {/if}
+                    {:else if column.id === 'providerType'}
+                        <ProviderType type={target.providerType} size="s" />
+                    {:else if column.id === 'provider'}
+                        {#if provider}
+                            <Provider provider={provider.provider} />
+                        {/if}
+                    {:else if column.id === '$createdAt'}
+                        {toLocaleDateTime(target[column.id])}
+                    {:else}
+                        {target[column.id]}
                     {/if}
-                {/each}
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
 
-<FloatingActionBar show={selectedIds.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}
-                </span>
+{#if selectedIds.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedIds.length.toString()} />
+            <span>
+                {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}
                 selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
             <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-<Modal
-    title="Delete target"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
+<Confirm title="Delete Identity" bind:open={showDelete} onSubmit={handleDelete}>
+    <Typography.Text>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'targets' : 'target'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateEmail.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateEmail.svelte
index 73c99688a..60be6fc0e 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateEmail.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateEmail.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputEmail } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let userEmail: string = null;
 
@@ -19,7 +19,7 @@
     async function updateEmail() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updateEmail($user.$id, userEmail);
             await invalidate(Dependencies.USER);
             addNotification({
@@ -39,21 +39,14 @@
 
 <Form onSubmit={updateEmail}>
     <CardGrid>
-        <Heading tag="h6" size="7">Email</Heading>
-        <p>
-            Update user's email. An Email should be formatted as: <span class="inline-code"
-                >name@example.com</span
-            >.
-        </p>
+        <svelte:fragment slot="title">Email</svelte:fragment>
         <svelte:fragment slot="aside">
-            <ul>
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder="Enter email"
-                    autocomplete={false}
-                    bind:value={userEmail} />
-            </ul>
+            <InputEmail
+                id="email"
+                label="Email"
+                placeholder="Enter email"
+                autocomplete={false}
+                bind:value={userEmail} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateLabels.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateLabels.svelte
index cb3a3a030..7f9c2b2ab 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateLabels.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateLabels.svelte
@@ -2,15 +2,16 @@
     import { onMount } from 'svelte';
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, Helper, InputTags } from '$lib/elements/forms';
+    import { Button, Form, InputTags } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
-    import { Pill } from '$lib/elements';
-    import { page } from '$app/stores';
+    import { Tag, Input, Layout, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     const alphaNumericRegExp = /^[a-zA-Z0-9]+$/;
     let suggestedLabels = ['admin', 'premium', 'mvp'];
@@ -24,7 +25,7 @@
     async function updateLabels() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updateLabels($user.$id, labels);
             await invalidate(Dependencies.USER);
             isDisabled = true;
@@ -42,7 +43,6 @@
             trackError(error, Submit.UserUpdateLabels);
         }
     }
-
     // TODO: Remove type cast when console SDK is updated
     $: isDisabled =
         !!error ||
@@ -66,23 +66,23 @@
 
 <Form onSubmit={updateLabels}>
     <CardGrid>
-        <Heading tag="h6" size="7">Labels</Heading>
-        <p class="text">
-            Categorize and manage your users based on specific criteria by assigning them
-            customizable labels. New label-based roles will be assigned.
-        </p>
+        <svelte:fragment slot="title">Labels</svelte:fragment>
+        Categorize and manage your users based on specific criteria by assigning them customizable labels.
+        New label-based roles will be assigned.
         <svelte:fragment slot="aside">
-            <ul class="common-section">
-                <InputTags
-                    id="user-labels"
-                    label="Labels"
-                    placeholder="Select or type user labels"
-                    bind:tags={labels} />
-                <li class="u-flex u-gap-12 u-margin-block-start-8">
+            <Layout.Stack gap="s">
+                {#key labels.length}
+                    <InputTags
+                        id="user-labels"
+                        label="Labels"
+                        placeholder="Select or type user labels"
+                        bind:tags={labels} />
+                {/key}
+                <Layout.Stack direction="row">
                     {#each suggestedLabels as suggestedLabel}
-                        <Pill
+                        <Tag
+                            size="s"
                             selected={labels.includes(suggestedLabel)}
-                            button
                             on:click={() => {
                                 if (!labels.includes(suggestedLabel)) {
                                     labels = [...labels, suggestedLabel];
@@ -90,16 +90,14 @@
                                     labels = labels.filter((e) => e !== suggestedLabel);
                                 }
                             }}>
-                            <span class="icon-plus" aria-hidden="true" />
+                            <Icon icon={IconPlus} size="s" slot="start" />
                             {suggestedLabel}
-                        </Pill>
+                        </Tag>
                     {/each}
-                </li>
-                <li>
-                    <Helper type={error ? 'warning' : 'neutral'}
-                        >{error ? error : 'Only alphanumeric characters are allowed'}</Helper>
-                </li>
-            </ul>
+                </Layout.Stack>
+                <Input.Helper state={error ? 'warning' : 'default'}
+                    >{error ? error : 'Only alphanumeric characters are allowed'}</Input.Helper>
+            </Layout.Stack>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateMfa.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateMfa.svelte
index a1f4b83de..b94606987 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateMfa.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateMfa.svelte
@@ -1,16 +1,6 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import EmptySearch from '$lib/components/emptySearch.svelte';
-    import { Form, Button, FormList, InputChoice } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
+    import { CardGrid } from '$lib/components';
+    import { Form, Button, InputChoice } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import DeleteMfa from './deleteMfa.svelte';
     import { userFactors } from './store';
@@ -20,7 +10,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
+    import { Card, Empty, Table } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     let showDelete = false;
     let userMfa: boolean = null;
@@ -32,69 +23,60 @@
     async function updateMfa() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updateMfa($user.$id, userMfa);
             await invalidate(Dependencies.USER);
             addNotification({
                 message: `Multi-factor authentication has been ${userMfa ? 'enabled' : 'disabled'}`,
                 type: 'success'
             });
-            trackEvent(Submit.UserUpdateEmail);
+            trackEvent(Submit.UserUpdateMfa);
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
-            trackError(error, Submit.UserUpdateEmail);
+            trackError(error, Submit.UserUpdateMfa);
         }
     }
 </script>
 
 <Form onSubmit={updateMfa}>
     <CardGrid>
-        <Heading tag="h6" size="7">Multi-factor authentication</Heading>
-        <p class="text">MFA allows users to enhance the security of their accounts in your app.</p>
+        <svelte:fragment slot="title">Multi-factor authentication</svelte:fragment>
+        MFA allows users to enhance the security of their accounts in your app.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputChoice
-                    type="switchbox"
-                    id="mfa"
-                    label="Multi-factor authentication"
-                    bind:value={userMfa} />
-            </FormList>
+            <InputChoice
+                type="switchbox"
+                id="mfa"
+                label="Multi-factor authentication"
+                bind:value={userMfa} />
             {#if $userFactors.totp}
-                <Table noMargin noStyles transparent>
-                    <TableHeader>
-                        <TableCellHead>Authenticator</TableCellHead>
-                        <TableCellHead width={40} />
-                    </TableHeader>
-                    <TableBody>
-                        <TableRow>
-                            <TableCellText title="Authenticator"
-                                >TOTP (One-time code)</TableCellText>
-                            <TableCell>
-                                <Button
-                                    on:click={() => (showDelete = true)}
-                                    round
-                                    text
-                                    ariaLabel="Delete authenticator">
-                                    <span class="icon-trash" aria-hidden="true" />
-                                </Button>
-                            </TableCell>
-                        </TableRow>
-                    </TableBody>
-                </Table>
-                <Button disabled text noMargin>
-                    <span class="icon-plus" />
-                    <span class="text">Add authentication factor</span>
-                </Button>
+                <Table.Root columns={[{ id: 'type' }, { id: 'actions', width: 40 }]} let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="type" {root}>Authenticator</Table.Header.Cell>
+                        <Table.Header.Cell column="actions" {root} />
+                    </svelte:fragment>
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="type" {root}>TOTP (One-time code)</Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <Button
+                                on:click={() => (showDelete = true)}
+                                icon
+                                text
+                                ariaLabel="Delete authenticator">
+                                <span class="icon-trash" aria-hidden="true"></span>
+                            </Button>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                </Table.Root>
             {:else}
-                <EmptySearch hidePagination hidePages>
-                    <p class="text u-text-center">
-                        No authenticators have been enabled.<br />Once the user adds an
-                        authenticator, you'll see it here.
-                    </p>
-                </EmptySearch>
+                <Card.Base variant="primary">
+                    <Empty
+                        type="secondary"
+                        title="No authenticators have been enabled."
+                        description="Once the user adds an authenticator, you'll see it here." />
+                </Card.Base>
             {/if}
         </svelte:fragment>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateName.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateName.svelte
index 67d36e73d..fdf428105 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateName.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let userName: string = null;
     onMount(async () => {
@@ -18,7 +18,7 @@
     async function updateName() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updateName($user.$id, userName);
             await invalidate(Dependencies.USER);
             addNotification({
@@ -38,8 +38,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul data-private>
                 <InputText
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePassword.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePassword.svelte
index 4c315e716..159c94186 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePassword.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePassword.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let newPassword: string = null;
 
     async function updatePassword() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updatePassword($user.$id, newPassword);
             newPassword = null;
             addNotification({
@@ -32,22 +32,15 @@
 
 <Form onSubmit={updatePassword}>
     <CardGrid>
-        <div>
-            <Heading tag="h6" size="7">Password</Heading>
-        </div>
-
-        <p>Enter a new password. A password must contain at least 8 characters.</p>
+        <svelte:fragment slot="title">Password</svelte:fragment>
+        A password must contain at least 8 characters.
         <svelte:fragment slot="aside">
-            <ul>
-                <InputPassword
-                    id="newPassword"
-                    label="New Password"
-                    placeholder="Enter new password"
-                    autocomplete={false}
-                    meter={false}
-                    showPasswordButton={true}
-                    bind:value={newPassword} />
-            </ul>
+            <InputPassword
+                id="newPassword"
+                label="New password"
+                placeholder="Enter new password"
+                autocomplete={false}
+                bind:value={newPassword} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePhone.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePhone.svelte
index 1a2e3d92b..567e1e9a3 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePhone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePhone.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputPhone } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let userPhone: string = null;
     onMount(async () => {
@@ -18,7 +18,7 @@
     async function updatePhone() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updatePhone($user.$id, userPhone);
             await invalidate(Dependencies.USER);
             addNotification({
@@ -38,20 +38,15 @@
 
 <Form onSubmit={updatePhone}>
     <CardGrid>
-        <Heading tag="h6" size="7">Phone</Heading>
-        <p>
-            Update user's phone. Phone number must start with '+' and maximum of 15 digits, for
-            example: +14155552671.
-        </p>
+        <svelte:fragment slot="title">Phone</svelte:fragment>
+        Phone number must start with '+' and maximum of 15 digits.
         <svelte:fragment slot="aside">
-            <ul>
-                <InputPhone
-                    id="phone"
-                    label="Phone"
-                    placeholder="Enter phone number"
-                    autocomplete={false}
-                    bind:value={userPhone} />
-            </ul>
+            <InputPhone
+                id="phone"
+                label="Phone"
+                placeholder="For example: +14155552671"
+                autocomplete={false}
+                bind:value={userPhone} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte
index 1819d8783..09084666c 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormItem, FormItemPart, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
-    import { page } from '$app/stores';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
@@ -33,7 +35,7 @@
             let updatedPrefs = Object.fromEntries(prefs);
 
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updatePrefs($user.$id, updatedPrefs);
             await invalidate(Dependencies.USER);
             arePrefsDisabled = true;
@@ -55,53 +57,46 @@
 
 <Form onSubmit={updatePrefs}>
     <CardGrid>
-        <Heading tag="h6" size="7">Preferences</Heading>
-        <p>Add custom user preferences to share them across devices and sessions.</p>
+        <svelte:fragment slot="title">Preferences</svelte:fragment>
+        Add custom user preferences to share them across devices and sessions.
         <svelte:fragment slot="aside">
-            <form class="form u-grid u-gap-16">
-                <ul class="form-list">
-                    {#if prefs}
-                        {#each prefs as [key, value], index}
-                            <FormItem isMultiple>
-                                <InputText
-                                    id={`key-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value={key}
-                                    placeholder="Enter key"
-                                    label="Key"
-                                    required />
-
-                                <InputText
-                                    id={`value-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value
-                                    placeholder="Enter value"
-                                    label="Value"
-                                    required />
-                                <FormItemPart alignEnd>
-                                    <Button
-                                        text
-                                        disabled={(!key || !value) && index === 0}
-                                        on:click={() => {
-                                            if (index === 0 && prefs?.length === 1) {
-                                                prefs = [['', '']];
-                                            } else {
-                                                prefs.splice(index, 1);
-                                                prefs = prefs;
-                                            }
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </FormItemPart>
-                            </FormItem>
-                        {/each}
-                    {/if}
-                </ul>
+            {#if prefs}
+                {#each prefs as [key, value], index}
+                    <Layout.Stack direction="row" alignItems="flex-end">
+                        <InputText
+                            id={`key-${index}`}
+                            bind:value={key}
+                            placeholder="Enter key"
+                            label={index === 0 ? 'Key' : undefined}
+                            required />
+                        <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                            <InputText
+                                id={`value-${index}`}
+                                bind:value
+                                placeholder="Enter value"
+                                label={index === 0 ? 'Value' : undefined}
+                                required />
+                            <Button
+                                icon
+                                compact
+                                disabled={(!key || !value) && index === 0}
+                                on:click={() => {
+                                    if (index === 0 && prefs?.length === 1) {
+                                        prefs = [['', '']];
+                                    } else {
+                                        prefs.splice(index, 1);
+                                        prefs = prefs;
+                                    }
+                                }}>
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                {/each}
+            {/if}
+            <div>
                 <Button
-                    noMargin
-                    text
+                    secondary
                     disabled={prefs?.length &&
                     prefs[prefs.length - 1][0] &&
                     prefs[prefs.length - 1][1]
@@ -113,10 +108,10 @@
                             prefs = prefs;
                         }
                     }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add preference</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add preference
                 </Button>
-            </form>
+            </div>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateStatus.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateStatus.svelte
index 927ec8f8f..229109f94 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateStatus.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateStatus.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { AvatarInitials, CardGrid, DropList, DropListItem, Heading } from '$lib/components';
+    import { AvatarInitials, CardGrid, DropList, DropListItem } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Badge, Icon, Typography } from '@appwrite.io/pink-svelte';
     import { user } from './store';
+    import Avatar from '$lib/components/avatar.svelte';
+    import { IconAnonymous, IconUser } from '@appwrite.io/pink-icons-svelte';
 
     let showVerificationDropdown = false;
 
@@ -17,7 +19,7 @@
         showVerificationDropdown = false;
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updateEmailVerification($user.$id, !$user.emailVerification);
             await invalidate(Dependencies.USER);
             addNotification({
@@ -39,7 +41,7 @@
         showVerificationDropdown = false;
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updatePhoneVerification($user.$id, !$user.phoneVerification);
             await invalidate(Dependencies.USER);
             addNotification({
@@ -60,7 +62,7 @@
     async function updateStatus() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .users.updateStatus($user.$id, !$user.status);
             await invalidate(Dependencies.USER);
             addNotification({
@@ -87,17 +89,17 @@
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         {#if $user.email || $user.phone}
             {#if $user.name}
-                <AvatarInitials size={48} name={$user.name} />
-                <Heading tag="h6" size="7">{$user.name}</Heading>
+                <AvatarInitials name={$user.name} />
+                <Typography.Title size="s" truncate>{$user.name}</Typography.Title>
             {:else}
-                <div class="avatar">
-                    <span class="icon-minus-sm" aria-hidden="true" />
-                </div>
+                <Avatar alt="avatar">
+                    <Icon icon={IconUser} size="s" />
+                </Avatar>
             {/if}
         {:else}
-            <div class="avatar">
-                <span class="icon-anonymous" aria-hidden="true" />
-            </div>
+            <Avatar alt="avatar">
+                <Icon icon={IconAnonymous} size="s" />
+            </Avatar>
         {/if}
     </div>
     <svelte:fragment slot="aside">
@@ -112,34 +114,39 @@
                 <p>Joined: {toLocaleDateTime($user.registration)}</p>
                 <p>Last activity: {accessedAt ? toLocaleDate(accessedAt) : 'never'}</p>
             </div>
-            {#if !$user.status}
-                <Pill danger>blocked</Pill>
-            {:else if $user.email && $user.phone}
-                <Pill success={$user.emailVerification || $user.phoneVerification}>
-                    {$user.emailVerification && $user.phoneVerification
-                        ? 'verified'
-                        : $user.emailVerification
-                          ? 'verified email'
-                          : $user.phoneVerification
-                            ? 'verified phone'
-                            : 'unverified'}
-                </Pill>
-            {:else}
-                <Pill success={$user.emailVerification || $user.phoneVerification}>
-                    {$user.emailVerification
-                        ? 'verified '
-                        : $user.phoneVerification
-                          ? 'verified '
-                          : 'unverified'}
-                </Pill>
-            {/if}
+            <div>
+                {#if !$user.status}
+                    <Badge content="blocked" variant="secondary" type="warning" />
+                {:else if $user.email && $user.phone}
+                    <Badge
+                        variant="secondary"
+                        type={$user.emailVerification || $user.phoneVerification
+                            ? 'success'
+                            : undefined}
+                        content={$user.emailVerification && $user.phoneVerification
+                            ? 'verified'
+                            : $user.emailVerification
+                              ? 'verified email'
+                              : $user.phoneVerification
+                                ? 'verified phone'
+                                : 'unverified'} />
+                {:else}
+                    <Badge
+                        variant="secondary"
+                        type={$user.emailVerification || $user.phoneVerification
+                            ? 'success'
+                            : undefined}
+                        content={$user.emailVerification
+                            ? 'verified '
+                            : $user.phoneVerification
+                              ? 'verified '
+                              : 'unverified'} />
+                {/if}
+            </div>
         </div>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button text={$user.status} secondary={!$user.status} on:click={() => updateStatus()}>
-            {$user.status ? 'Block account' : 'Unblock account'}
-        </Button>
         {#if $user.status}
             {#if $user.phone && $user.email}
                 <DropList bind:show={showVerificationDropdown} placement="top-start">
@@ -168,5 +175,8 @@
                 </Button>
             {/if}
         {/if}
+        <Button text={$user.status} secondary={!$user.status} on:click={() => updateStatus()}>
+            {$user.status ? 'Block account' : 'Unblock account'}
+        </Button>
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/(console)/project-[region]-[project]/createVariable.svelte b/src/routes/(console)/project-[region]-[project]/createVariable.svelte
deleted file mode 100644
index 864b8125e..000000000
--- a/src/routes/(console)/project-[region]-[project]/createVariable.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-    import { Button, InputSecret } from '$lib/elements/forms';
-    import { Modal } from '$lib/components';
-    import { InputText, FormList } from '$lib/elements/forms';
-    import { createEventDispatcher } from 'svelte';
-    import type { Models } from '@appwrite.io/console';
-    import Alert from '$lib/components/alert.svelte';
-    import { project } from './store';
-    import { base } from '$app/paths';
-
-    export let isGlobal: boolean;
-    export let showCreate = false;
-    export let selectedVar: Partial<Models.Variable> = null;
-
-    let pair = {
-        $id: selectedVar?.$id,
-        key: selectedVar?.key,
-        value: selectedVar?.value
-    };
-
-    const dispatch = createEventDispatcher();
-
-    function close() {
-        showCreate = false;
-        selectedVar = null;
-    }
-
-    function handleVariable() {
-        if (selectedVar) {
-            dispatch('updated', pair);
-        } else {
-            dispatch('created', pair);
-        }
-        close();
-    }
-</script>
-
-<Modal bind:show={showCreate} onSubmit={handleVariable} size="big">
-    <svelte:fragment slot="title">
-        {selectedVar ? 'Update' : 'Create'}
-        {isGlobal ? 'global' : 'environment'} variable
-    </svelte:fragment>
-    <div class="u-flex u-flex-vertical u-gap-24">
-        <p class="u-text">
-            Set the environment variables or secret keys that will be passed to {isGlobal
-                ? 'all functions within your project'
-                : 'your function'}.
-        </p>
-        {#if !isGlobal}
-            <Alert type="info">
-                <p class="text">
-                    When there is a naming conflict with a global variable in your <a
-                        href={`${base}/project-${$project.region}-${$project.$id}/settings/variables`}
-                        title="Project settings"
-                        class="link">
-                        project settings</a> and a function environment variable, the global variable
-                    will be ignored.
-                </p>
-            </Alert>
-        {/if}
-    </div>
-    <FormList>
-        <InputText
-            id="key"
-            label="Key"
-            placeholder="ENTER_KEY"
-            bind:value={pair.key}
-            required
-            autofocus
-            autocomplete={false} />
-        <InputSecret id="value" label="Value" placeholder="Enter value" bind:value={pair.value} />
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={close}>Cancel</Button>
-        <Button submit>{selectedVar ? 'Update' : 'Create'}</Button>
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte
new file mode 100644
index 000000000..0cf5fa213
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { Button, InputPassword } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputText } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { project } from './store';
+    import { base } from '$app/paths';
+    import { Alert, Layout, Selector, Button as PinkButton, Icon } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+
+    export let isGlobal: boolean;
+    export let product: 'function' | 'site' = 'function';
+    export let showCreate = false;
+    let newVariables: Partial<Models.Variable>[] = [{ key: '', value: '' }];
+    let secret = false;
+
+    const dispatch = createEventDispatcher();
+
+    function close() {
+        showCreate = false;
+    }
+
+    function handleVariable() {
+        if (secret) {
+            newVariables = newVariables.map((variable) => ({ ...variable, secret: true }));
+        }
+        newVariables.forEach((variable) => {
+            if (('' + variable.value).length > 8192) {
+                throw new Error(`Variable ${variable.key} is longer than 8192 allowed characters`);
+            }
+        });
+        dispatch('created', newVariables);
+        close();
+    }
+
+    function removeVariable(index: number) {
+        if (newVariables.length === 1) {
+            newVariables[0].key = '';
+            newVariables[0].value = '';
+        } else {
+            newVariables.splice(index, 1);
+            newVariables = [...newVariables];
+        }
+    }
+</script>
+
+<Modal
+    bind:show={showCreate}
+    onSubmit={handleVariable}
+    title={`Create' ${isGlobal ? 'global' : 'environment'} variable`}>
+    <svelte:fragment slot="description">
+        <span>
+            Set the environment variables or secret keys that will be passed to {!isGlobal
+                ? `your ${product}`
+                : `all functions and sites within your project`}.
+        </span>
+    </svelte:fragment>
+    <Layout.Stack>
+        {#if !isGlobal}
+            <Alert.Inline>
+                When there is a naming conflict with a global variable in your <Link
+                    href={`${base}/project-${$project.region}-${$project.$id}/settings/variables`}>
+                    project settings</Link>
+                and a {product} environment variable, the global variable will be ignored.
+            </Alert.Inline>
+        {/if}
+        <Layout.Stack gap="xs">
+            {#each newVariables as pair, i}
+                <Layout.Stack direction="row" gap="s" alignItems="flex-end" inline>
+                    <InputText
+                        id="key"
+                        label={`${i === 0 ? 'Key' : ''}`}
+                        placeholder="ENTER_KEY"
+                        bind:value={pair.key}
+                        autocomplete={false}
+                        autofocus />
+                    <InputPassword
+                        id="value"
+                        label={`${i === 0 ? 'Value' : ''}`}
+                        placeholder="Enter value"
+                        bind:value={pair.value}
+                        minlength={0} />
+                    <PinkButton.Button
+                        icon
+                        variant="secondary"
+                        type="button"
+                        size="s"
+                        disabled={newVariables.length === 1 && !pair.key && !pair.value}
+                        on:click={() => removeVariable(i)}>
+                        <Icon icon={IconX} />
+                    </PinkButton.Button>
+                </Layout.Stack>
+            {/each}
+            <div>
+                <Button
+                    text
+                    compact
+                    disabled={newVariables.some((pair) => !pair.key)}
+                    on:click={() => (newVariables = [...newVariables, { key: '', value: '' }])}>
+                    <Icon slot="start" icon={IconPlus} />Add variable</Button>
+            </div>
+        </Layout.Stack>
+        <Selector.Checkbox
+            id="secret"
+            label="Secret"
+            bind:checked={secret}
+            description="If selected, you and your team won't be able to read the values after creation." />
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={close}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte
index 4b48dc9dc..7e8347e4d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { DatabasesPanel } from '$lib/commandCenter/panels';
     import { project } from '../store';
@@ -14,7 +14,7 @@
             },
             keys: ['g', 'u'],
             disabled:
-                $page.url.pathname.includes('usage') || $page.url.pathname.includes('database-'),
+                page.url.pathname.includes('usage') || page.url.pathname.includes('database-'),
             group: 'databases'
         },
         {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index 775a1a7b9..df3e783aa 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Empty, PaginationWithLimit, ViewSelector } from '$lib/components';
+    import { page } from '$app/state';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
 
     import type { PageData } from './$types';
@@ -13,19 +13,21 @@
     import { columns } from './store';
     import Table from './table.svelte';
     import { registerCommands } from '$lib/commandCenter';
-    import { tooltip } from '$lib/actions/tooltip';
     import { canWriteDatabases } from '$lib/stores/roles';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import EmptySearch from '$lib/components/emptySearch.svelte';
 
     export let data: PageData;
 
     let showCreate = false;
     let isCreationDisabled = false;
-    const project = $page.params.project;
+    const project = page.params.project;
 
     async function handleCreate(event: CustomEvent<Models.Database>) {
         showCreate = false;
         await goto(
-            `${base}/project-${$page.params.region}-${project}/databases/database-${event.detail.$id}`
+            `${base}/project-${page.params.region}-${project}/databases/database-${event.detail.$id}`
         );
     }
 
@@ -37,7 +39,7 @@
             },
             keys: ['c'],
             disabled: showCreate || isCreationDisabled || !$canWriteDatabases,
-            icon: 'plus',
+            icon: IconPlus,
             group: 'databases',
             rank: 10
         }
@@ -45,37 +47,27 @@
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Databases"
-        total={data?.databases?.total}
-        on:data={(data) => {
-            isCreationDisabled = data.detail.isButtonDisabled;
-        }}>
-        <svelte:fragment>
-            <div class="u-flex u-gap-16 u-cross-center u-flex-wrap">
-                <ViewSelector
-                    {columns}
-                    view={data.view}
-                    hideColumns={!data.databases.total}
-                    hideView={!data.databases.total} />
-                {#if $canWriteDatabases}
-                    <div
-                        use:tooltip={{
-                            content: `Upgrade to add more databases`,
-                            disabled: !isCreationDisabled
-                        }}>
-                        <Button
-                            on:click={() => (showCreate = true)}
-                            event="create_database"
-                            disabled={isCreationDisabled}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create database</span>
-                        </Button>
-                    </div>
-                {/if}
-            </div>
-        </svelte:fragment>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector
+                {columns}
+                view={data.view}
+                hideColumns={!data.databases.total}
+                hideView={!data.databases.total} />
+            {#if $canWriteDatabases}
+                <Button
+                    on:click={() => (showCreate = true)}
+                    event="create_database"
+                    disabled={isCreationDisabled}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create database
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.databases.total}
         {#if data.view === 'grid'}
@@ -89,6 +81,13 @@
             limit={data.limit}
             offset={data.offset}
             total={data.databases.total} />
+    {:else if data.search}
+        <EmptySearch target="databases" hidePagination>
+            <Button
+                href={`${base}/project-${page.params.region}-${page.params.project}/databases`}
+                size="s"
+                secondary>Clear Search</Button>
+        </EmptySearch>
     {:else}
         <Empty
             single
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
index 76d53f026..6abcffdc5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
@@ -1,10 +1,11 @@
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
-import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { type Models, Query } from '@appwrite.io/console';
 import { timeFromNow } from '$lib/helpers/date';
 import type { PageLoad, RouteParams } from './$types';
 import type { BackupPolicy } from '$lib/sdk/backups';
+import { isSelfHosted } from '$lib/system';
 import { isCloud } from '$lib/system';
 import type { Plan } from '$lib/sdk/billing';
 
@@ -12,8 +13,9 @@ export const load: PageLoad = async ({ url, route, depends, params, parent }) =>
     depends(Dependencies.DATABASES);
 
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, CARD_LIMIT);
-    const view = getView(params.project, url, route, View.Grid);
+    const search = getSearch(url);
+    const limit = getLimit(url, route, CARD_LIMIT);
+    const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
 
     // already loaded by parent.
@@ -23,6 +25,7 @@ export const load: PageLoad = async ({ url, route, depends, params, parent }) =>
         limit,
         offset,
         params,
+        search,
         currentPlan
     );
 
@@ -30,6 +33,7 @@ export const load: PageLoad = async ({ url, route, depends, params, parent }) =>
         offset,
         limit,
         view,
+        search,
         policies,
         databases,
         lastBackups
@@ -40,13 +44,17 @@ async function fetchDatabasesAndBackups(
     limit: number,
     offset: number,
     params: RouteParams,
+    search?: string | undefined,
     currentPlan?: Plan
 ) {
     const backupsEnabled = currentPlan?.backupsEnabled ?? true;
 
     const databases = await sdk
         .forProject(params.region, params.project)
-        .databases.list([Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')]);
+        .databases.list(
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search || undefined
+        );
 
     let lastBackups: Record<string, string>, policies: Record<string, BackupPolicy[]>;
 
@@ -61,6 +69,8 @@ async function fetchDatabasesAndBackups(
 }
 
 async function fetchPolicies(databases: Models.DatabaseList, params: RouteParams) {
+    if (isSelfHosted) return {};
+
     const databasePolicies: Record<string, BackupPolicy[]> = {};
 
     await Promise.all(
@@ -88,6 +98,8 @@ async function fetchPolicies(databases: Models.DatabaseList, params: RouteParams
 }
 
 async function fetchLastBackups(databases: Models.DatabaseList, params: RouteParams) {
+    if (isSelfHosted) return {};
+
     const lastBackups: Record<string, string> = {};
 
     await Promise.all(
diff --git a/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
index ef7fa5361..056141e76 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
 
     $: breadcrumbs = [
         {
-            href: `${base}/organization-${$page.data.organization?.$id}`,
+            href: `${base}/organization-${page.data.organization?.$id}`,
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases`,
             title: 'Databases'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/create.svelte b/src/routes/(console)/project-[region]-[project]/databases/create.svelte
index 56443998d..05799fdd4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/create.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CustomId, Modal } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { CustomId, Modal } from '$lib/components';
+    import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
@@ -13,7 +12,9 @@
     import { upgradeURL } from '$lib/stores/billing';
     import CreatePolicy from './database-[database]/backups/createPolicy.svelte';
     import { cronExpression, type UserBackupPolicy } from '$lib/helpers/backups';
-    import { page } from '$app/stores';
+    import { Alert, Icon, Tag } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     export let showCreate = false;
     let totalPolicies: UserBackupPolicy[] = [];
@@ -61,7 +62,7 @@
             cronExpression(policy);
 
             return sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .backups.createPolicy(
                     ID.unique(),
                     ['databases'],
@@ -80,7 +81,7 @@
         try {
             const databaseId = id ? id : ID.unique();
             const database = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.create(databaseId, name);
             await createPolicies(databaseId);
 
@@ -108,54 +109,49 @@
     }
 </script>
 
-<Modal title="Create database" size="big" onSubmit={create} bind:show={showCreate}>
-    <FormList gap={8}>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="Enter database name"
-            bind:value={name}
-            autofocus
-            required />
+<Modal title="Create database" onSubmit={create} bind:show={showCreate}>
+    <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>
+    {#if !showCustomId}
+        <div>
+            <Tag
+                size="s"
+                on:click={() => {
+                    showCustomId = true;
+                }}><Icon icon={IconPencil} /> Database ID</Tag>
+        </div>
+    {/if}
+
+    <CustomId bind:show={showCustomId} name="Database" bind:id autofocus={false} />
+
+    {#if isCloud}
+        {#if $organization?.billingPlan === BillingPlan.FREE}
+            {#if showPlanUpgradeAlert}
+                <Alert.Inline
+                    dismissible
+                    title="This database won't be backed up"
+                    status="warning"
+                    on:dismiss={() => (showPlanUpgradeAlert = false)}>
+                    Upgrade your plan to ensure your data stays safe and backed up.
+                    <svelte:fragment slot="actions">
+                        <Button compact href={$upgradeURL}>Upgrade plan</Button>
+                    </svelte:fragment>
+                </Alert.Inline>
+            {/if}
         {:else}
-            <CustomId bind:show={showCustomId} name="Database" bind:id autofocus={false} />
+            <CreatePolicy
+                bind:totalPolicies
+                bind:isShowing={showCreate}
+                title="Backup policies"
+                subtitle="Protect your data and ensure quick recovery by adding backup policies." />
         {/if}
-
-        {#if isCloud}
-            <div class="u-flex-vertical u-gap-24 u-padding-block-start-24">
-                {#if $organization?.billingPlan === BillingPlan.FREE}
-                    {#if showPlanUpgradeAlert}
-                        <Alert
-                            type="warning"
-                            dismissible
-                            on:dismiss={() => (showPlanUpgradeAlert = false)}>
-                            <svelte:fragment slot="title"
-                                >This database won't be backed up
-                            </svelte:fragment>
-                            Upgrade your plan to ensure your data stays safe and backed up.
-                            <svelte:fragment slot="buttons">
-                                <Button href={$upgradeURL} text>Upgrade plan</Button>
-                            </svelte:fragment>
-                        </Alert>
-                    {/if}
-                {:else}
-                    <CreatePolicy
-                        bind:totalPolicies
-                        bind:isShowing={showCreate}
-                        title="Backup policies"
-                        subtitle="Protect your data and ensure quick recovery by adding backup policies." />
-                {/if}
-            </div>
-        {/if}
-    </FormList>
+    {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
index c4ba410ff..d743680f2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import {
         addSubPanel,
         registerCommands,
@@ -16,17 +16,18 @@
     import { CollectionsPanel } from '$lib/commandCenter/panels';
     import { canWriteCollections, canWriteDatabases } from '$lib/stores/roles';
     import { showCreateBackup, showCreatePolicy } from './backups/store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { currentPlan } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
 
-    const project = $page.params.project;
-    const databaseId = $page.params.database;
+    const project = page.params.project;
+    const databaseId = page.params.database;
 
     async function handleCreate(event: CustomEvent<Models.Collection>) {
         $showCreate = false;
         await invalidate(Dependencies.DATABASE);
         await goto(
-            `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/collection-${event.detail.$id}`
+            `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/collection-${event.detail.$id}`
         );
     }
 
@@ -35,59 +36,58 @@
             label: 'Create collection',
             callback() {
                 $showCreate = true;
-                if (!$page.url.pathname.endsWith(databaseId)) {
+                if (!page.url.pathname.endsWith(databaseId)) {
                     goto(
-                        `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}`
+                        `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}`
                     );
                 }
             },
-            keys: $page.url.pathname.endsWith(databaseId) ? ['c'] : ['c', 'c'],
-            disabled: $page.url.pathname.includes('collection-') || !$canWriteCollections,
+            keys: page.url.pathname.endsWith(databaseId) ? ['c'] : ['c', 'c'],
+            disabled: page.url.pathname.includes('collection-') || !$canWriteCollections,
             group: 'databases',
-            icon: 'plus'
+            icon: IconPlus
         },
         {
             label: 'Create backup policy',
             callback: async () => {
-                if (!$page.url.pathname.endsWith('backups')) {
+                if (!page.url.pathname.endsWith('backups')) {
                     goto(
-                        `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/backups`
+                        `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/backups`
                     );
                 }
                 showCreatePolicy.set(true);
             },
-            keys: $page.url.pathname.endsWith('backups') ? ['c'] : ['c', 'p'],
+            keys: page.url.pathname.endsWith('backups') ? ['c'] : ['c', 'p'],
             group: 'databases',
-            icon: 'plus',
-            rank: $page.url.pathname.endsWith('backups') ? 10 : 0,
+            icon: IconPlus,
+            rank: page.url.pathname.endsWith('backups') ? 10 : 0,
             disabled: !isCloud || !$currentPlan.backupsEnabled
         },
         {
             label: 'Create manual backup',
             callback: async () => {
-                if (!$page.url.pathname.endsWith('backups')) {
+                if (!page.url.pathname.endsWith('backups')) {
                     goto(
-                        `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/backups`
+                        `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/backups`
                     );
                 }
                 showCreateBackup.set(true);
             },
-            keys: $page.url.pathname.endsWith('backups') ? ['c'] : ['c', 'b'],
+            keys: page.url.pathname.endsWith('backups') ? ['c'] : ['c', 'b'],
             group: 'databases',
-            icon: 'plus',
-            rank: $page.url.pathname.endsWith('backups') ? 10 : 0,
+            icon: IconPlus,
+            rank: page.url.pathname.endsWith('backups') ? 10 : 0,
             disabled: !isCloud || !$currentPlan.backupsEnabled
         },
         {
             label: 'Go to collections',
             callback() {
                 goto(
-                    `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}`
+                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}`
                 );
             },
             disabled:
-                $page.url.pathname.endsWith(databaseId) ||
-                $page.url.pathname.includes('collection-'),
+                page.url.pathname.endsWith(databaseId) || page.url.pathname.includes('collection-'),
             keys: ['g', 'c'],
             group: 'databases'
         },
@@ -95,11 +95,11 @@
             label: 'Go to usage',
             callback() {
                 goto(
-                    `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/usage`
+                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/usage`
                 );
             },
             disabled:
-                $page.url.pathname.includes('/usage') || $page.url.pathname.includes('collection-'),
+                page.url.pathname.includes('/usage') || page.url.pathname.includes('collection-'),
             keys: ['g', 'u'],
             group: 'databases'
         },
@@ -107,12 +107,11 @@
             label: 'Go to backups',
             callback() {
                 goto(
-                    `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/backups`
+                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/backups`
                 );
             },
             disabled:
-                $page.url.pathname.includes('/backups') ||
-                $page.url.pathname.includes('collection-'),
+                page.url.pathname.includes('/backups') || page.url.pathname.includes('collection-'),
             keys: ['g', 'b'],
             group: 'databases'
         },
@@ -120,12 +119,12 @@
             label: 'Go to settings',
             callback() {
                 goto(
-                    `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/settings`
+                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/settings`
                 );
             },
             disabled:
-                $page.url.pathname.includes('/settings') ||
-                $page.url.pathname.includes('collection-') ||
+                page.url.pathname.includes('/settings') ||
+                page.url.pathname.includes('collection-') ||
                 !$canWriteDatabases,
             keys: ['g', 's'],
             group: 'databases'
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 22fb35e11..b7e886be5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -1,30 +1,37 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container, GridHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import { columns, showCreate } from './store';
     import Table from './table.svelte';
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 </script>
 
 <Container>
-    <GridHeader
-        title="Collections"
-        {columns}
-        view={data.view}
-        hideColumns={!data.collections.total}
-        hideView={!data.collections.total}>
-        {#if $canWriteCollections}
-            <Button on:click={() => ($showCreate = true)} event="create_collection">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create collection</span>
-            </Button>
-        {/if}
-    </GridHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector
+                {columns}
+                view={data.view}
+                hideColumns={!data.collections.total}
+                hideView={!data.collections.total} />
+            {#if $canWriteCollections}
+                <Button on:click={() => ($showCreate = true)} event="create_collection">
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create collection
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.collections.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
index c9e4ba10b..05c23e830 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
@@ -1,26 +1,28 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import type { PageLoad } from './$types';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
 export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.COLLECTIONS);
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, CARD_LIMIT);
-    const view = getView(params.project, url, route, View.Grid);
+    const search = getSearch(url);
+    const limit = getLimit(url, route, CARD_LIMIT);
+    const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
     const collections = await sdk
         .forProject(params.region, params.project)
-        .databases.listCollections(params.database, [
-            Query.limit(limit),
-            Query.offset(offset),
-            Query.orderDesc('')
-        ]);
+        .databases.listCollections(
+            params.database,
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+            search || undefined
+        );
 
     return {
         offset,
         limit,
+        search,
         view,
         collections
     };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/[[page]]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/[[page]]/store.ts
index 58d166cd2..f7b643627 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/[[page]]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/[[page]]/store.ts
@@ -2,8 +2,8 @@ import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
-    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
-    { id: '$createdAt', title: 'Created', type: 'string', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', type: 'string', show: true, width: 120 }
+    { id: '$id', title: 'Database ID', type: 'string', width: 200 },
+    { id: 'name', title: 'Name', type: 'string', width: 120 },
+    { id: '$createdAt', title: 'Created', type: 'string', width: 120 },
+    { id: '$updatedAt', title: 'Updated', type: 'string', width: 120 }
 ]);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
index 678651c5f..ef597992c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
@@ -21,7 +21,8 @@
     import { showCreateBackup, showCreatePolicy } from './store';
     import { getProjectId } from '$lib/helpers/project';
     import { trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     let policyCreateError: string;
     let totalPolicies: UserBackupPolicy[] = [];
@@ -65,7 +66,7 @@
     const createManualBackup = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .backups.createArchive(['databases'], data.database.$id);
             addNotification({
                 type: 'success',
@@ -118,7 +119,7 @@
             cronExpression(policy);
 
             return sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .backups.createPolicy(
                     ID.unique(),
                     ['databases'],
@@ -137,6 +138,7 @@
                     ? `Backup policies have been created`
                     : `<b>${totalPolicies[0].label}</b> policy has been created`;
 
+            // TODO: html isn't yet supported on Toast.
             addNotification({
                 isHtml: true,
                 type: 'success',
@@ -160,7 +162,7 @@
 
     onMount(() => {
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe(['project', 'console'], (response) => {
                 // fast path return.
                 if (!response.channels.includes(`projects.${getProjectId()}`)) return;
@@ -178,15 +180,15 @@
 <Container size="xxl">
     <div class="u-flex u-gap-32 u-flex-vertical-mobile">
         {#if !isDisabled}
-            <div class="u-flex-vertical policies-holder-card">
+            <div class="u-flex-vertical u-gap-16 policies-holder-card">
                 <ContainerHeader
                     title="Policies"
                     buttonText="Create policy"
                     buttonEvent="create_backup"
                     buttonType="secondary"
                     buttonDisabled={isDisabled}
-                    maxPolicies={$currentPlan.backupPolicies}
                     policiesCreated={data.policies.total}
+                    maxPolicies={$currentPlan.backupPolicies}
                     buttonMethod={() => {
                         $showCreatePolicy = true;
                         trackEvent('click_policy_create');
@@ -198,7 +200,7 @@
                     lastBackupDates={data.lastBackupDates} />
             </div>
 
-            <div class="u-flex-vertical u-width-full-line u-overflow-x-auto">
+            <div class="u-flex-vertical u-gap-16 u-width-full-line u-overflow-x-auto">
                 <ContainerHeader
                     title="Backups"
                     buttonText="Manual backup"
@@ -211,7 +213,7 @@
                     }} />
 
                 {#if data.backups.total}
-                    <div class="u-padding-block-start-8">
+                    <Layout.Stack gap="xxl">
                         <Table {data} />
 
                         {#if data.backups.total > 6}
@@ -221,11 +223,10 @@
                                 offset={data.offset}
                                 total={data.backups.total} />
                         {/if}
-                    </div>
+                    </Layout.Stack>
                 {:else}
                     <div class="u-flex u-flex-vertical u-gap-16">
-                        <article
-                            class="empty card u-width-full-line common-section u-margin-block-start-24">
+                        <article class="empty card u-width-full-line common-section">
                             No backups yet
                         </article>
                     </div>
@@ -241,7 +242,6 @@
 
 <Modal
     title="Create backup policy"
-    size="big"
     onSubmit={createPolicies}
     bind:show={$showCreatePolicy}
     bind:error={policyCreateError}>
@@ -253,12 +253,19 @@
     </svelte:fragment>
 </Modal>
 
-<Modal title="Create manual backup" bind:show={$showCreateBackup} onSubmit={createManualBackup}>
-    <p class="text" data-private>
-        Manual backups are <b>retained forever</b> unless manually deleted. Use for major data
-        changes or rollback safeguards.
+<Modal
+    size="s"
+    title="Create manual backup"
+    bind:show={$showCreateBackup}
+    onSubmit={createManualBackup}>
+    <Typography.Text variant="m-400">
+        Manual backups are <b>retained forever</b> unless manually deleted. Use for major data changes
+        or rollback safeguards.
+    </Typography.Text>
+
+    <Typography.Text variant="m-500">
         <b>Depending on the size of your data, this may take a while.</b>
-    </p>
+    </Typography.Text>
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => ($showCreateBackup = false)}>Cancel</Button>
@@ -275,7 +282,7 @@
 
     @media (min-width: 768px) {
         .policies-holder-card {
-            max-width: 21.5rem;
+            min-width: 330px;
         }
     }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.ts
index a278ec201..52d9e65c9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.ts
@@ -1,5 +1,5 @@
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
-import { CARD_LIMIT, Dependencies } from '$lib/constants';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { BackupArchive, BackupArchiveList, BackupPolicyList } from '$lib/sdk/backups';
@@ -7,9 +7,10 @@ import { isCloud } from '$lib/system';
 
 export const load = async ({ params, url, route, depends, parent }) => {
     depends(Dependencies.BACKUPS);
+
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, CARD_LIMIT);
-    const view = getView(params.project, url, route, View.Grid);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
 
     let backups: BackupArchiveList = { total: 0, archives: [] };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/components/Ellipse.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/components/Ellipse.svelte
new file mode 100644
index 000000000..20fad9807
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/components/Ellipse.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let size: 'm' | 's' = 'm';
+    export let color: string | undefined = 'currentColor';
+
+    const sizes = {
+        m: { width: 8, height: 8, cx: 4, cy: 4, r: 4 },
+        s: { width: 4, height: 4, cx: 2, cy: 2, r: 2 }
+    };
+
+    const { width, height, cx, cy, r } = sizes[size] || sizes.m;
+</script>
+
+<span class="ellipse" class:m={size === 'm'} class:s={size === 's'}>
+    <span class="ellipse-wrapper">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            {width}
+            {height}
+            viewBox={`0 0 ${width} ${height}`}
+            fill="none">
+            <circle {cx} {cy} {r} fill={color ?? 'currentColor'} />
+        </svg>
+    </span>
+</span>
+
+<style>
+    .ellipse {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .ellipse-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ellipse svg {
+        display: inline;
+        vertical-align: middle;
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
index d289bab62..9e529e857 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-    import { Button } from '$lib/elements/forms';
-    import { DropList } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '$routes/(console)/supportWizard.svelte';
+    import { DropList } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Badge, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { goto } from '$app/navigation';
+    import { upgradeURL } from '$lib/stores/billing';
 
     export let isFlex = true;
     export let title: string;
@@ -23,14 +25,27 @@
     class:is-disabled={buttonDisabled}
     class:u-flex={isFlex}
     class="u-gap-12 common-section u-main-space-between u-flex-wrap">
-    <div class="u-flex u-cross-child-center u-cross-center u-gap-12">
-        <div class="body-text-1 u-bold backups-title">{title}</div>
+    <Layout.Stack
+        direction="row"
+        gap="m"
+        alignContent="center"
+        alignItems="center"
+        justifyContent="space-between">
+        <Layout.Stack direction="row" gap="xs">
+            <Typography.Text variant="m-500">{title}</Typography.Text>
+            {#if title === 'Policies'}
+                <Badge size="xs" variant="secondary" content={policiesCreated.toString()} />
+            {/if}
+        </Layout.Stack>
 
         {#if title === 'Policies' && policiesCreated >= maxPolicies}
-            <div style="height: 40px; padding-block-start: 4px">
+            <div style:height="40px;" style:padding-block-start="4px">
                 <DropList bind:show={showDropdown} width="16">
-                    <Pill button on:click={() => (showDropdown = true)}>
-                        <span class="icon-info" />{policiesCreated}/{maxPolicies} created
+                    <Pill disabled={buttonDisabled} button on:click={() => (showDropdown = true)}>
+                        <Layout.Stack direction="row" gap="xs" alignItems="center" inline>
+                            <Icon icon={IconInfo} size="s" />
+                            {policiesCreated}/{maxPolicies} created
+                        </Layout.Stack>
                     </Pill>
                     <svelte:fragment slot="list">
                         <slot name="tooltip">
@@ -40,45 +55,31 @@
                                     class="u-underline"
                                     on:click={() => {
                                         showDropdown = !showDropdown;
-                                        wizard.start(SupportWizard);
-                                    }}>Contact support</button> to upgrade your plan and add customized
-                                backup policies.
+                                        goto($upgradeURL);
+                                    }}>Upgrade your plan</button> to add customized backup policies.
                             </span>
                         </slot>
                     </svelte:fragment>
                 </DropList>
             </div>
         {/if}
-    </div>
 
-    {#if title === 'Backups' || policiesCreated < maxPolicies}
-        <Button
-            event={buttonEvent}
-            on:click={buttonMethod}
-            disabled={buttonDisabled}
-            text={buttonType === 'text'}
-            secondary={buttonType === 'secondary'}>
-            <span class="icon-plus" aria-hidden="true" />
-            {buttonText}
-        </Button>
-    {/if}
+        {#if title === 'Backups' || policiesCreated < maxPolicies}
+            <Button
+                event={buttonEvent}
+                on:click={buttonMethod}
+                disabled={buttonDisabled}
+                text={buttonType === 'text'}
+                secondary={buttonType === 'secondary'}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                {buttonText}
+            </Button>
+        {/if}
+    </Layout.Stack>
 </header>
 
 <style>
     .is-disabled {
         opacity: 0.5;
     }
-
-    :global(.theme-light) .backups-title {
-        --p-body-text-color: #373b4d;
-        color: var(--p-body-text-color);
-    }
-
-    :global(.theme-dark) .backups-title {
-        color: hsl(var(--color-neutral-5));
-    }
-
-    :global(.small-radius-border-button) {
-        border-radius: var(--border-radius-small) !important;
-    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/createPolicy.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/createPolicy.svelte
index a04f02bf8..ca4dc48a9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/createPolicy.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/createPolicy.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import {
         Button,
-        FormList,
         Helper,
         InputCheckbox,
         InputSelect,
@@ -23,9 +22,11 @@
     import { InputNumber } from '$lib/elements/forms/index.js';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
-    import { Card } from '$lib/components';
-    import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '$routes/(console)/supportWizard.svelte';
+    import { Card, Icon, Layout, Link, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPencil, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { goto } from '$app/navigation';
+    import { upgradeURL } from '$lib/stores/billing';
 
     export let isShowing: boolean;
     export let isFromBackupsTab: boolean = false;
@@ -100,9 +101,8 @@
         showCustomPolicy = false;
     };
 
-    const markPolicyChecked = (event: Event, policy: UserBackupPolicy) => {
-        const isChecked = (event.target as HTMLInputElement).checked;
-
+    const markPolicyChecked = (event: CustomEvent, policy: UserBackupPolicy) => {
+        const isChecked = event.detail as boolean;
         presetPolicies.update((all) => {
             return all.map((p) => {
                 if (p.label === policy.label) {
@@ -113,7 +113,7 @@
         });
     };
 
-    $: customPolicyDescription = (policy: UserBackupPolicy) => {
+    const customPolicyDescription = (policy: UserBackupPolicy) => {
         return backupPolicyDescription(
             policy.plainTextFrequency,
             null,
@@ -123,7 +123,7 @@
         );
     };
 
-    $: formPolicyDescription = () => {
+    const formPolicyDescription = () => {
         return backupPolicyDescription(
             policyFrequency,
             selectedTime,
@@ -168,6 +168,11 @@
             customRetention = { ...selectedOption, number: customRetention.number };
         }
     }
+
+    let frequencyOptions = ['hourly', 'daily', 'weekly', 'monthly'].map((freq) => ({
+        value: freq,
+        label: freq.charAt(0).toUpperCase() + freq.slice(1)
+    }));
 </script>
 
 <div class="u-flex-vertical u-gap-16">
@@ -175,351 +180,347 @@
         {#if title || subtitle}
             <div class="body-text-2">
                 {#if title}
-                    <h3 class="u-bold">{title}</h3>
+                    <Typography.Text variant="m-600">
+                        {title}
+                    </Typography.Text>
                 {/if}
 
                 {#if subtitle}
-                    <span>{subtitle}</span>
+                    <Typography.Caption variant="400">
+                        {subtitle}
+                    </Typography.Caption>
                 {/if}
             </div>
         {/if}
     {/if}
 
-    <FormList>
-        <!-- because we show a set of pre-defined ones -->
-        {#if $organization.billingPlan === BillingPlan.PRO}
-            {@const dailyPolicy = $presetPolicies[1]}
+    <!-- because we show a set of pre-defined ones -->
+    {#if $organization.billingPlan === BillingPlan.PRO}
+        {@const dailyPolicy = $presetPolicies[1]}
 
-            {#if isFromBackupsTab}
-                <div class="u-flex-vertical u-gap-8">
-                    <Card
-                        isTile
-                        class="restore-modal-inner-card"
-                        style="border-radius: var(--border-radius-small, 8px); padding: 1rem;">
-                        <div class="u-flex u-flex-vertical u-gap-4">
-                            <span class="body-text-2 u-bold darker-neutral-color">
-                                Daily backup
-                            </span>
-                            <span>Runs every day and is retained for 7 days</span>
-                        </div>
-                    </Card>
-                    <span>
-                        <button
-                            type="button"
-                            class="u-underline cursor-pointer"
+        {#if isFromBackupsTab}
+            <Layout.Stack gap="m">
+                <Card.Base padding="s" radius="s">
+                    <Layout.Stack gap="xs">
+                        <Typography.Text variant="m-600">Daily backup</Typography.Text>
+                        Runs every day and is retained for 7 days
+                    </Layout.Stack>
+                </Card.Base>
+
+                <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                    <Button
+                        extraCompact
+                        class="u-underline cursor-pointer"
+                        on:click={() => {
+                            isShowing = false;
+                            $showCreatePolicy = false;
+                            goto($upgradeURL);
+                        }}>Upgrade your plan</Button> to add customized backup policies.
+                </Layout.Stack>
+            </Layout.Stack>
+        {:else}
+            <Layout.Stack gap="m">
+                <InputSwitch
+                    id="daily_backup"
+                    label="Daily backups"
+                    on:change={(event) => markPolicyChecked(event, dailyPolicy)}>
+                    <Typography.Text variant="m-400" slot="description">
+                        Daily backups are retained for 7 days.
+
+                        <Link.Button
                             on:click={() => {
                                 isShowing = false;
-                                $showCreatePolicy = false;
-                                wizard.start(SupportWizard);
-                            }}>Contact support</button> to upgrade your plan and add customized backup
-                        policies.
-                    </span>
-                </div>
-            {:else}
-                <div class="u-flex u-gap-8 body-text-2">
-                    <InputSwitch
-                        id="daily_backup"
-                        label="Daily backups"
-                        on:change={(event) => markPolicyChecked(event, dailyPolicy)}>
-                        <svelte:fragment slot="description">
-                            <span>
-                                Daily backups are retained for 7 days.
-                                <button
-                                    type="button"
-                                    class="u-underline cursor-pointer"
-                                    on:click={() => {
-                                        isShowing = false;
-                                        wizard.start(SupportWizard);
-                                    }}>Contact support</button>
-                                to upgrade your plan and add customized backup policies.
-                            </span>
-                        </svelte:fragment>
-                    </InputSwitch>
-                </div>
-            {/if}
-        {:else}
-            <!-- show 2 preset and create custom policy button on Scale & up -->
-            <div class="u-flex-vertical u-gap-12">
-                <div class="grid-1-1 u-gap-12">
-                    {#each $presetPolicies as policy, index (index)}
-                        <label for={index.toString()} class="card preset-label-card is-allow-focus">
-                            <div class="u-flex u-gap-8 body-text-2">
-                                <InputCheckbox
-                                    id={index.toString()}
-                                    on:change={(event) => markPolicyChecked(event, policy)} />
+                                goto($upgradeURL);
+                            }}>Upgrade your plan</Link.Button>
+                        to add customized backup policies.
+                    </Typography.Text>
+                </InputSwitch>
+            </Layout.Stack>
+        {/if}
+    {:else}
+        <!-- show 2 preset and create custom policy button on Scale & up -->
+        <Layout.Stack gap="m">
+            <div class="grid-1-1 u-gap-12">
+                {#each $presetPolicies as policy, index (index)}
+                    <label for={index.toString()} class="card preset-label-card is-allow-focus">
+                        <Layout.Stack gap="s" direction="row">
+                            <InputCheckbox
+                                id={index.toString()}
+                                on:change={(event) => markPolicyChecked(event, policy)} />
 
-                                <div class="u-flex-vertical u-gap-4">
-                                    <h3 class="u-bold">{policy.label}</h3>
-                                    {policy.description}
-                                </div>
-                            </div>
-                        </label>
-                    {/each}
-                </div>
+                            <Layout.Stack gap="xxs">
+                                <Typography.Text variant="m-600">{policy.label}</Typography.Text>
+                                {policy.description}
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </label>
+                {/each}
+            </div>
 
-                {#if listOfCustomPolicies.length}
-                    <div class="u-flex-vertical u-gap-8">
-                        {#each listOfCustomPolicies as policy}
-                            <div class="card custom-policy-card">
-                                <div class="u-flex-vertical u-gap-4 body-text-2">
-                                    <div class="u-flex u-main-space-between">
-                                        <h3 class="u-bold">{policy.label}</h3>
+            {#if listOfCustomPolicies.length}
+                <Layout.Stack gap="s">
+                    {#each listOfCustomPolicies as policy}
+                        <Card.Base padding="s">
+                            <Layout.Stack gap="xs">
+                                <Layout.Stack direction="row" justifyContent="space-between">
+                                    <Typography.Text style="width: inherit" variant="m-600"
+                                        >{policy.label}</Typography.Text>
 
-                                        <div class="u-flex u-gap-8">
-                                            <Button
-                                                text
-                                                noMargin
-                                                class="icon-pencil height-fit-content"
-                                                on:click={() => {
-                                                    policyInEdit = policy.id;
-                                                    backupPolicyName = policy.label;
-                                                    selectedTime = policy.selectedTime;
-                                                    policyFrequency = policy.plainTextFrequency;
-                                                    monthlyBackupFrequency =
-                                                        policy.monthlyBackupFrequency;
-                                                    daysSelectionArray = policy.weeklySelectedDays;
-                                                    policyRetention = !backupRetainingOptions.some(
-                                                        (option) => option.value === policy.retained
+                                    <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+                                        <Button
+                                            extraCompact
+                                            class="height-fit-content"
+                                            on:click={() => {
+                                                policyInEdit = policy.id;
+                                                backupPolicyName = policy.label;
+                                                selectedTime = policy.selectedTime;
+                                                policyFrequency = policy.plainTextFrequency;
+                                                monthlyBackupFrequency =
+                                                    policy.monthlyBackupFrequency;
+                                                daysSelectionArray = policy.weeklySelectedDays;
+                                                policyRetention = !backupRetainingOptions.some(
+                                                    (option) => option.value === policy.retained
+                                                )
+                                                    ? -1 // -1 is for custom policy
+                                                    : policy.retained;
+
+                                                // re-add if edit is cancelled
+                                                policyBeingEdited = policy;
+
+                                                // do not show in the list can cause confusion.
+                                                listOfCustomPolicies = [
+                                                    ...listOfCustomPolicies.filter(
+                                                        (p) => policy.id !== p.id
                                                     )
-                                                        ? -1 // -1 is for custom policy
-                                                        : policy.retained;
+                                                ];
+                                            }}>
+                                            <Icon icon={IconPencil} size="s" />
+                                        </Button>
 
-                                                    // re-add if edit is cancelled
-                                                    policyBeingEdited = policy;
+                                        <Button
+                                            extraCompact
+                                            class="height-fit-content"
+                                            on:click={() => {
+                                                listOfCustomPolicies = [
+                                                    ...listOfCustomPolicies.filter(
+                                                        (p) => policy.id !== p.id
+                                                    )
+                                                ];
+                                            }}>
+                                            <Icon icon={IconTrash} size="s" />
+                                        </Button>
+                                    </Layout.Stack>
+                                </Layout.Stack>
 
-                                                    // do not show in the list can cause confusion.
-                                                    listOfCustomPolicies = [
-                                                        ...listOfCustomPolicies.filter(
-                                                            (p) => policy.id !== p.id
-                                                        )
-                                                    ];
-                                                }} />
+                                <span>{customPolicyDescription(policy)}</span>
+                            </Layout.Stack>
+                        </Card.Base>
+                    {/each}
+                </Layout.Stack>
+            {/if}
 
-                                            <Button
-                                                text
-                                                noMargin
-                                                class="icon-trash height-fit-content"
-                                                on:click={() => {
-                                                    listOfCustomPolicies = [
-                                                        ...listOfCustomPolicies.filter(
-                                                            (p) => policy.id !== p.id
-                                                        )
-                                                    ];
-                                                }} />
-                                        </div>
-                                    </div>
-
-                                    <span>{customPolicyDescription(policy)}</span>
-                                </div>
+            {#if showCustomPolicy || policyInEdit}
+                <Card.Base
+                    variant="secondary"
+                    padding="s"
+                    --input-background-color="var(--bgcolor-neutral-primary)">
+                    <div>
+                        <div class="u-flex-vertical u-gap-24">
+                            <div class="u-flex-vertical u-gap-4">
+                                <Layout.Grid columns={4}>
+                                    {#each frequencyOptions as frequency}
+                                        <Tag
+                                            size="s"
+                                            selected={frequency.value === policyFrequency}
+                                            on:click={() => {
+                                                policyFrequency = frequency.value;
+                                            }}>
+                                            {frequency.label}
+                                        </Tag>
+                                    {/each}
+                                </Layout.Grid>
                             </div>
-                        {/each}
-                    </div>
-                {/if}
 
-                {#if showCustomPolicy || policyInEdit}
-                    <section
-                        bind:this={customPolicySection}
-                        class="modal is-inner-modal u-width-full-line">
-                        <div class="modal-form">
-                            <div class="u-flex-vertical u-gap-24">
-                                <div class="u-flex-vertical u-gap-4">
-                                    <InputSelect
-                                        label="Frequency"
-                                        id="policyFrequency"
-                                        placeholder="Select frequency"
-                                        bind:value={policyFrequency}
-                                        options={['hourly', 'daily', 'weekly', 'monthly'].map(
-                                            (freq) => ({
-                                                value: freq,
-                                                label: freq.charAt(0).toUpperCase() + freq.slice(1)
-                                            })
-                                        )}
-                                        required />
-                                    {#if policyFrequency === 'hourly'}
-                                        <span>{formPolicyDescription()}</span>
-                                    {/if}
-                                </div>
+                            {#if policyFrequency !== 'hourly'}
+                                <Layout.Stack gap="s">
+                                    <div class="time-holder">
+                                        {#if policyFrequency === 'monthly'}
+                                            <InputSelect
+                                                id="monthly"
+                                                label="Monthly timing"
+                                                bind:value={monthlyBackupFrequency}
+                                                placeholder="End of month (28th)"
+                                                options={backupFrequencies[policyFrequency]} />
+                                        {:else if policyFrequency === 'weekly'}
+                                            <Layout.Stack gap="s">
+                                                <Label class="timing-label">Timing</Label>
 
-                                {#if policyFrequency !== 'hourly'}
-                                    <div class="u-flex-vertical u-gap-8">
-                                        <div class="time-holder">
-                                            {#if policyFrequency === 'monthly'}
-                                                <InputSelect
-                                                    id="monthly"
-                                                    label="Monthly timing"
-                                                    bind:value={monthlyBackupFrequency}
-                                                    placeholder="End of month (28th)"
-                                                    fullWidth
-                                                    options={backupFrequencies[policyFrequency]} />
-                                            {:else if policyFrequency === 'weekly'}
-                                                <div class="u-flex-vertical u-width-full-line">
-                                                    <Label>Timing</Label>
-                                                    <InputSelectCheckbox
-                                                        name="Timing"
-                                                        bind:tags={daysSelectionArray}
-                                                        placeholder="Select weekdays"
-                                                        options={backupFrequencies[
-                                                            policyFrequency
-                                                        ].map((option) => ({
+                                                <InputSelectCheckbox
+                                                    name="Timing"
+                                                    bind:tags={daysSelectionArray}
+                                                    placeholder="Select weekdays"
+                                                    options={backupFrequencies[policyFrequency].map(
+                                                        (option) => ({
                                                             ...option,
                                                             checked: daysSelectionArray.includes(
                                                                 option.value
                                                             )
-                                                        }))} />
-                                                </div>
-                                            {/if}
-
-                                            <div
-                                                class="input-time"
-                                                class:hide={policyFrequency === 'monthly' ||
-                                                    policyFrequency === 'weekly'}
-                                                class:u-margin-block-start-4={policyFrequency ===
-                                                    'monthly' || policyFrequency === 'weekly'}>
-                                                <InputTime
-                                                    id="time"
-                                                    bind:value={selectedTime}
-                                                    label={['daily'].includes(policyFrequency)
-                                                        ? 'Timing'
-                                                        : ''} />
-                                            </div>
-                                        </div>
-
-                                        <span>{formPolicyDescription()}</span>
-                                    </div>
-                                {/if}
-
-                                <div class="u-flex-vertical u-gap-8">
-                                    <InputSelect
-                                        fullWidth
-                                        id="retention"
-                                        label="Keep for"
-                                        placeholder="3 months"
-                                        bind:value={policyRetention}
-                                        options={backupRetainingOptions} />
-                                    <span class="u-flex u-flex-vertical u-gap-8">
-                                        {#if customRetentionEnabled}
-                                            <div class="u-flex-vertical u-gap-2">
-                                                <div class="u-flex u-gap-8">
-                                                    <div class="u-width-150">
-                                                        <InputNumber
-                                                            min={1}
-                                                            id="number"
-                                                            placeholder="11"
-                                                            max={customRetention.max}
-                                                            bind:value={customRetention.number} />
-                                                    </div>
-
-                                                    <InputSelect
-                                                        fullWidth
-                                                        id="retention"
-                                                        placeholder="Months"
-                                                        options={customRetainingOptions}
-                                                        bind:value={customRetention.value} />
-                                                </div>
-                                                {#if policyInputError}
-                                                    <Helper type="warning"
-                                                        >Value should be between 1 and {customRetention.max}</Helper>
-                                                {/if}
-                                            </div>
+                                                        })
+                                                    )} />
+                                            </Layout.Stack>
                                         {/if}
-                                        <span>
-                                            {#if policyRetention === 365 * 100}
-                                                Every backup created under this policy will be
-                                                retained <b>forever</b>.
-                                            {:else}
-                                                {@const period =
-                                                    backupRetainingOptions.find(
-                                                        (option) => option.value === policyRetention
-                                                    )?.label ?? '3 months'}
 
-                                                {@const description =
-                                                    period === 'Custom'
-                                                        ? `${customRetention.number} ${
-                                                              customRetention.number === 1
-                                                                  ? customRetention.label.slice(
-                                                                        0,
-                                                                        -1
-                                                                    )
-                                                                  : customRetention.label
-                                                          }`
-                                                        : period}
+                                        <div
+                                            class="input-time"
+                                            class:hide={policyFrequency === 'monthly' ||
+                                                policyFrequency === 'weekly'}
+                                            class:u-margin-block-start-32={!$isSmallViewport &&
+                                                (policyFrequency === 'monthly' ||
+                                                    policyFrequency === 'weekly')}>
+                                            <InputTime
+                                                id="time"
+                                                step={null}
+                                                bind:value={selectedTime}
+                                                label={['daily'].includes(policyFrequency)
+                                                    ? 'Timing'
+                                                    : ''} />
+                                        </div>
+                                    </div>
 
-                                                {#if (period === 'Custom' && customRetention.number !== null && customRetention.number !== 0) || period !== 'Custom'}
-                                                    Every backup created under this policy will be
-                                                    retained for <b>
-                                                        {description}
-                                                    </b> before being automatically deleted.
-                                                {/if}
+                                    <Typography.Text>{formPolicyDescription()}</Typography.Text>
+                                </Layout.Stack>
+                            {/if}
+
+                            <div class="u-flex-vertical u-gap-8">
+                                <InputSelect
+                                    id="retention"
+                                    label="Keep for"
+                                    placeholder="3 months"
+                                    bind:value={policyRetention}
+                                    options={backupRetainingOptions} />
+                                <span class="u-flex u-flex-vertical u-gap-8">
+                                    {#if customRetentionEnabled}
+                                        <div class="u-flex-vertical u-gap-2">
+                                            <div class="u-flex u-gap-8">
+                                                <div class="u-width-150">
+                                                    <InputNumber
+                                                        min={1}
+                                                        id="number"
+                                                        placeholder="11"
+                                                        max={customRetention.max}
+                                                        bind:value={customRetention.number} />
+                                                </div>
+
+                                                <InputSelect
+                                                    id="retention"
+                                                    placeholder="Months"
+                                                    options={customRetainingOptions}
+                                                    bind:value={customRetention.value} />
+                                            </div>
+                                            {#if policyInputError}
+                                                <Helper type="warning"
+                                                    >Value should be between 1 and {customRetention.max}</Helper>
                                             {/if}
-                                        </span>
-                                    </span>
-                                </div>
-
-                                <div>
-                                    <InputText
-                                        id="name"
-                                        label="Policy name"
-                                        placeholder="{capitalize(policyFrequency)} backup"
-                                        autofocus
-                                        bind:value={backupPolicyName}
-                                        required />
-
-                                    {#if policyNameError}
-                                        <Helper type="warning">This field is required</Helper>
+                                        </div>
                                     {/if}
-                                </div>
+                                    <span>
+                                        {#if policyRetention === 365 * 100}
+                                            Every backup created under this policy will be retained <b
+                                                >forever</b
+                                            >.
+                                        {:else}
+                                            {@const period =
+                                                backupRetainingOptions.find(
+                                                    (option) => option.value === policyRetention
+                                                )?.label ?? '3 months'}
 
-                                <div class="button-container u-main-end u-flex u-gap-8">
-                                    <Button
-                                        text
-                                        on:click={() => {
-                                            policyInEdit = false;
-                                            showCustomPolicy = false;
+                                            {@const description =
+                                                period === 'Custom'
+                                                    ? `${customRetention.number} ${
+                                                          customRetention.number === 1
+                                                              ? customRetention.label.slice(0, -1)
+                                                              : customRetention.label
+                                                      }`
+                                                    : period}
 
-                                            if (policyBeingEdited) {
-                                                listOfCustomPolicies = [
-                                                    ...listOfCustomPolicies,
-                                                    policyBeingEdited
-                                                ];
-                                            }
-                                        }}
-                                        >Cancel
-                                    </Button>
+                                            {#if (period === 'Custom' && customRetention.number !== null && customRetention.number !== 0) || period !== 'Custom'}
+                                                Every backup created under this policy will be
+                                                retained for <b>
+                                                    {description}
+                                                </b> before being automatically deleted.
+                                            {/if}
+                                        {/if}
+                                    </span>
+                                </span>
+                            </div>
 
-                                    <Button
-                                        secondary
-                                        on:click={() => {
-                                            if (!backupPolicyName) {
-                                                policyNameError = true;
-                                                return;
-                                            }
+                            <div>
+                                <InputText
+                                    id="name"
+                                    label="Policy name"
+                                    placeholder="{capitalize(policyFrequency)} backup"
+                                    autofocus
+                                    bind:value={backupPolicyName}
+                                    required />
 
-                                            if (policyInputError) {
-                                                return;
-                                            }
+                                {#if policyNameError}
+                                    <Helper type="warning">This field is required</Helper>
+                                {/if}
+                            </div>
 
-                                            policyNameError = false;
-                                            handleSavePolicy();
-                                        }}>
-                                        {policyInEdit ? 'Update' : 'Save'}
-                                    </Button>
-                                </div>
+                            <div class="button-container u-main-end u-flex u-gap-8">
+                                <Button
+                                    text
+                                    size="xs"
+                                    on:click={() => {
+                                        policyInEdit = false;
+                                        showCustomPolicy = false;
+
+                                        if (policyBeingEdited) {
+                                            listOfCustomPolicies = [
+                                                ...listOfCustomPolicies,
+                                                policyBeingEdited
+                                            ];
+                                        }
+                                    }}
+                                    >Cancel
+                                </Button>
+
+                                <Button
+                                    size="xs"
+                                    secondary
+                                    on:click={() => {
+                                        if (!backupPolicyName) {
+                                            policyNameError = true;
+                                            return;
+                                        }
+
+                                        if (policyInputError) {
+                                            return;
+                                        }
+
+                                        policyNameError = false;
+                                        handleSavePolicy();
+                                    }}>
+                                    {policyInEdit ? 'Update' : 'Save'}
+                                </Button>
                             </div>
                         </div>
-                    </section>
-                {:else}
-                    <div class="custom-policy-wrapper u-padding-inline-4 u-width-full-line">
-                        <button
-                            type="button"
-                            class="custom-policy-text"
-                            on:click={() => (showCustomPolicy = true)}
-                            >Create custom policy
-                        </button>
                     </div>
-                {/if}
-            </div>
-        {/if}
-    </FormList>
+                </Card.Base>
+            {:else}
+                <div class="custom-policy-wrapper u-padding-inline-4 u-width-full-line">
+                    <Button
+                        size="s"
+                        extraCompact
+                        class="u-underline"
+                        on:click={() => (showCustomPolicy = true)}
+                        >Create custom policy
+                    </Button>
+                </div>
+            {/if}
+        </Layout.Stack>
+    {/if}
 </div>
 
 <style>
@@ -541,13 +542,14 @@
         border: solid 0.0625rem #d7d7da;
     }
 
-    .custom-policy-text {
-        color: #19191c;
-        text-decoration: underline;
-    }
-
-    .custom-policy-card {
-        background-color: #f9f9fa !important;
+    /* taken from pink 2 */
+    :global(.timing-label) {
+        font-style: normal;
+        font-weight: 500;
+        line-height: 140%;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
     }
 
     :global(.theme-dark) .preset-label-card {
@@ -558,39 +560,27 @@
         border: solid 0.0625rem #424248;
     }
 
-    :global(.theme-dark) .custom-policy-text {
-        color: #fff;
-    }
-
-    :global(.theme-dark) .custom-policy-card {
-        background: #2c2c2f !important;
-    }
-
     :global(.height-fit-content) {
         height: fit-content;
     }
 
+    :global(.time-holder .input-time input[type='time']) {
+        padding-block: 0.34rem !important;
+    }
+
     @media (max-width: 767.99px) {
         .time-holder {
-            gap: 0;
+            gap: 1rem;
             flex-direction: column;
         }
 
-        :global(.time-holder .input-time.hide > li label) {
-            display: none;
+        .input-time {
+            margin-block-start: 0 !important;
         }
-    }
 
-    /** the modal, for some reason has issues with inner padding on smaller devices. */
-    @media (max-width: 409px) {
-        .modal {
-            --p-modal-padding: 0.95rem;
-        }
-    }
-
-    @media (max-width: 315px) {
-        .modal {
-            --p-modal-padding: 0.9rem;
+        /* week days selector */
+        :global(.tags-input) {
+            padding-right: unset !important;
         }
     }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte
index 3a42618a6..e4af56e16 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Card from '$lib/components/card.svelte';
-    import { DropList, DropListItem, Modal } from '$lib/components';
-    import { Button, FormList, InputCheckbox } from '$lib/elements/forms/index';
+    import { Button } from '$lib/elements/forms/index';
+
     import { app } from '$lib/stores/app';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
@@ -9,20 +9,29 @@
     import { Dependencies } from '$lib/constants';
     import { parseExpression } from 'cron-parser';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
     import EmptyDark from '$lib/images/backups/backups-dark.png';
     import EmptyLight from '$lib/images/backups/backups-light.png';
     import type { BackupPolicy, BackupPolicyList } from '$lib/sdk/backups';
     import { backupFrequencies } from '$lib/helpers/backups';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import {
+        ActionMenu,
+        Divider,
+        Icon,
+        Layout,
+        Popover,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconDotsHorizontal, IconPlus, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import { Confirm } from '$lib/components/index.js';
+    import Ellipse from './components/Ellipse.svelte';
+    import { page } from '$app/state';
 
-    let showDropdown = [];
     let showDelete = false;
     let selectedPolicy: BackupPolicy = null;
 
     let showEveryPolicy = false;
-    let confirmedDeletion = false;
 
     export let showCreatePolicy = false;
     export let policies: BackupPolicyList;
@@ -31,7 +40,7 @@
     async function deletePolicy() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .backups.deletePolicy(selectedPolicy.$id);
             addNotification({
                 type: 'success',
@@ -47,7 +56,6 @@
         } finally {
             showDelete = false;
             selectedPolicy = null;
-            confirmedDeletion = false;
         }
     }
 
@@ -129,11 +137,9 @@
     };
 </script>
 
-<div class="u-flex u-flex-vertical u-gap-16">
-    <Card
-        class="backups-policy-list-card u-margin-block-start-24"
-        style="padding: 0; min-width: 21.5rem;">
-        <div class="inner-card u-flex-vertical-mobile">
+<Layout.Stack gap="l">
+    <Card class="backups-policy-list-card" style="padding: 0; min-width: 21.5rem;">
+        <div class="inner-card u-flex-vertical-mobile" class:empty={policies.total === 0}>
             {#each policies.policies as policy, index (policy.$id)}
                 {@const policyDescription = getPolicyDescription(policy.schedule)}
                 {@const policyDescriptionShort = getTruncatedPolicyDescription(policyDescription)}
@@ -146,78 +152,85 @@
                     class:opacity-gradient-bottom={index === 2}
                     class:u-padding-block-start-10={index !== 0}
                     class:u-padding-block-end-10={index === 0 && policies.policies.length > 1}>
-                    <div class="u-flex-vertical u-gap-2">
-                        <div class="u-flex u-main-space-between">
-                            <h3 class="body-text-2 u-bold darker-neutral-color">{policy.name}</h3>
-                            <DropList
-                                noArrow
-                                bind:show={showDropdown[index]}
-                                placement="bottom-end">
-                                <button
-                                    class="is-only-icon is-text"
-                                    aria-label="More options"
-                                    on:click|preventDefault={() => {
-                                        showDropdown[index] = !showDropdown[index];
-                                    }}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </button>
+                    <Layout.Stack direction="column" gap="xxxs">
+                        <Layout.Stack direction="row" justifyContent="space-between">
+                            <Typography.Text variant="m-500">{policy.name}</Typography.Text>
+                            <Popover let:toggle padding="none" placement="bottom-end">
+                                <Button extraCompact on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} />
+                                </Button>
 
-                                <svelte:fragment slot="list">
-                                    <DropListItem
-                                        on:click={() => {
-                                            showDelete = true;
-                                            selectedPolicy = policy;
-                                            showDropdown[index] = false;
-                                            trackEvent('click_policy_delete');
-                                        }}>
-                                        Delete
-                                    </DropListItem>
+                                <svelte:fragment slot="tooltip" let:toggle>
+                                    <ActionMenu.Root width="180px">
+                                        <ActionMenu.Item.Button
+                                            status="danger"
+                                            trailingIcon={IconTrash}
+                                            on:click={(e) => {
+                                                toggle(e);
+                                                showDelete = true;
+                                                selectedPolicy = policy;
+                                                trackEvent(Click.PolicyDeleteClick);
+                                            }}>
+                                            Delete
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
                                 </svelte:fragment>
-                            </DropList>
-                        </div>
+                            </Popover>
+                        </Layout.Stack>
 
-                        <div
-                            class="policy-item-subtitles u-flex u-gap-6"
-                            style="width: fit-content;">
-                            {#if shouldUseTooltip}
-                                <span use:tooltip={{ content: policyDescription }}>
-                                    {policyDescriptionShort}
-                                </span>
-                            {:else}
-                                {policyDescription}
-                            {/if}
+                        <Typography.Caption variant="400">
+                            <Layout.Stack gap="xs" direction="row" alignItems="center">
+                                {#if shouldUseTooltip}
+                                    <Tooltip>
+                                        {policyDescriptionShort}
+                                        <span slot="tooltip">{policyDescription}</span>
+                                    </Tooltip>
+                                {:else}
+                                    {policyDescription}
+                                {/if}
 
-                            <span class="small-ellipse">●</span>
+                                <Ellipse size="s" />
 
-                            {formatRetentionMessage(policy.retention)}
-                        </div>
-                    </div>
+                                {formatRetentionMessage(policy.retention)}
+                            </Layout.Stack>
+                        </Typography.Caption>
+                    </Layout.Stack>
 
-                    <div
-                        class="policy-cycles u-flex u-main-space-between u-padding-block-2 policy-item-subtitles">
+                    <!-- Prev / Next section -->
+                    <div class="policy-cycles u-flex u-gap-24 u-padding-block-2">
                         <div style="width: 128px" class="u-flex-vertical policy-item-caption">
-                            <span style="color: #97979B">Previous</span>
-                            <div
-                                class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
-                                <span
-                                    class="medium-ellipse"
-                                    class:success={!!lastBackupDates[policy.$id]}>●</span>
-                                <span class="policy-item-subtitles">
+                            <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
+                                >Previous
+                            </Typography.Caption>
+
+                            <Layout.Stack direction="row" gap="s" alignItems="center">
+                                <Ellipse
+                                    color={lastBackupDates[policy.$id]
+                                        ? 'var(--bgcolor-success)'
+                                        : undefined} />
+
+                                <Typography.Caption
+                                    variant="400"
+                                    color="--fgcolor-neutral-secondary">
                                     {#if lastBackupDates[policy.$id]}
                                         {toLocaleDateTime(lastBackupDates[policy.$id])}
                                     {:else}
                                         No backups yet
                                     {/if}
-                                </span>
-                            </div>
+                                </Typography.Caption>
+                            </Layout.Stack>
                         </div>
 
-                        <div class="u-border-vertical" />
+                        <div>
+                            <Divider vertical />
+                        </div>
 
                         <div style="width: 128px" class="u-flex-vertical policy-item-caption">
-                            <span style="color: #97979B">Next</span>
-                            <div
-                                class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
+                            <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
+                                >Next
+                            </Typography.Caption>
+
+                            <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
                                 {toLocaleDateTime(
                                     parseExpression(policy.schedule, {
                                         utc: true
@@ -225,10 +238,14 @@
                                         .next()
                                         .toString()
                                 )}
-                            </div>
+                            </Typography.Caption>
                         </div>
                     </div>
                 </div>
+
+                {#if index !== policies.total - 1}
+                    <Divider class="item-divider" />
+                {/if}
             {:else}
                 <div class="u-padding-24 u-flex-vertical u-gap-16 u-cross-center">
                     {#if $app.themeInUse === 'dark'}
@@ -261,8 +278,8 @@
                             event="create_policy"
                             class="small-radius-border-button"
                             on:click={() => (showCreatePolicy = true)}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create policy</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create policy
                         </Button>
                     </div>
                 </div>
@@ -281,67 +298,28 @@
             </div>
         {/if}
     </Card>
-</div>
+</Layout.Stack>
 
-<Modal
-    title="Delete policy"
-    icon="exclamation"
-    state="warning"
-    size="small"
-    bind:show={showDelete}
-    headerDivider={false}
-    onSubmit={deletePolicy}>
-    <FormList>
-        <div class="u-flex-vertical u-gap-16">
-            <p class="text" data-private>
-                Are you sure you want to delete the <b>{selectedPolicy.name}</b> policy?
-            </p>
+<Confirm title="Delete policy" bind:open={showDelete} onSubmit={deletePolicy} confirmDeletion>
+    <Layout.Stack gap="l">
+        <Typography.Text variant="m-400">
+            Are you sure you want to delete the <b>{selectedPolicy.name}</b> policy?
+        </Typography.Text>
 
-            <p class="text" data-private>
-                <b
-                    >This will also delete all backups associated with this policy. This action is
-                    irreversible.</b>
-            </p>
+        <Typography.Text variant="m-600">
+            This will also delete all backups associated with this policy. This action is
+            irreversible.
+        </Typography.Text>
+    </Layout.Stack>
+</Confirm>
 
-            <div class="input-check-box-friction">
-                <InputCheckbox
-                    required
-                    size="small"
-                    id="delete_policy"
-                    bind:checked={confirmedDeletion}
-                    label="I understand and confirm" />
-            </div>
-        </div>
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
-    </svelte:fragment>
-</Modal>
-
-<style>
+<style lang="scss">
     .inner-card {
-        margin: 0 -1px;
         padding: 0.5rem;
-    }
 
-    .u-border-vertical {
-        width: 1px;
-        height: 34px;
-        background-color: hsl(var(--color-border));
-    }
-
-    :global(.small-ellipse) {
-        font-size: 0.25rem;
-    }
-
-    :global(.medium-ellipse) {
-        font-size: 0.5rem;
-        color: hsl(var(--color-neutral-20));
-    }
-
-    :global(.medium-ellipse.success) {
-        color: hsl(var(--color-success-100));
+        &.empty {
+            block-size: 365px;
+        }
     }
 
     :global(.u-gap-6) {
@@ -354,11 +332,11 @@
 
     .policy-card-item-padding {
         padding: var(--space-3, 6px) var(--space-4, 8px);
-        border-block-end: solid 0.0625rem hsl(var(--color-border));
-    }
+        border-block-end: solid 0.0625rem hsl(var(--border));
 
-    .policy-card-item-padding:last-child {
-        border-block-end: none;
+        &:last-child {
+            border-block-end: none;
+        }
     }
 
     .u-padding-block-start-10 {
@@ -369,22 +347,10 @@
         padding-block-end: 10px;
     }
 
-    .policy-item-subtitles {
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 150%;
-        font-style: normal;
-        font-family: Inter;
-    }
-
     :global(.input-check-box-friction .choice-item-title) {
         margin-block-start: 1px;
     }
 
-    :global(.theme-light .policy-item-subtitles) {
-        color: var(--color-fgColor-neutral-secondary, #56565c);
-    }
-
     :global(.theme-light .policy-item-caption) {
         color: var(--color-neutral-50, #818186);
     }
@@ -413,39 +379,48 @@
             visibility: hidden;
         }
 
+        .policy-cycles {
+            justify-content: space-between;
+        }
+
+        .policy-card-item-padding.opacity-gradient-bottom[data-show-every='false']
+            + :global(.item-divider) {
+            display: none;
+        }
+
         .policy-card-item-padding[data-visible='true'] {
             display: block;
             visibility: visible;
         }
 
-        .policy-card-item-padding[data-visible='true']:nth-child(3) {
+        .policy-card-item-padding[data-visible='true']:nth-child(4) {
             opacity: 0.25;
             border-block-end: none;
         }
 
-        .policy-card-item-padding[data-visible='true']:nth-child(3) .policy-cycles {
+        .policy-card-item-padding[data-visible='true']:nth-child(4) .policy-cycles {
             height: 0;
             margin: unset;
             padding: unset;
             visibility: hidden;
         }
 
-        .policy-card-item-padding[data-visible='false']:nth-child(n + 4) {
+        .policy-card-item-padding[data-visible='false']:nth-child(n + 5) {
             opacity: 0;
             height: 0;
             padding: unset;
             border-block-end: none;
         }
 
-        .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3):not(
+        .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(4):not(
                 :last-child
             ) {
-            border-block-end: solid 0.0625rem hsl(var(--color-border));
+            border-block-end: solid 0.0625rem hsl(var(--border));
         }
 
-        .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3)
+        .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(4)
             .policy-cycles,
-        .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3),
+        .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(4),
         .policy-cycles {
             opacity: 1;
             height: auto;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/restoreModal.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/restoreModal.svelte
index df8d8e0ab..52c75d0fd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/restoreModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/restoreModal.svelte
@@ -1,95 +1,67 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { InnerModal } from '$lib/components';
-    import { FormItem } from '$lib/elements/forms';
-    import TextCounter from '$lib/elements/forms/textCounter.svelte';
+    import { Card, Icon, Input, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
 
     export let id: string;
     export let show = false;
     export let name: string;
     export let autofocus = true;
-    export let fullWidth = false;
     export let databaseId: string;
 
-    let icon = 'info';
-    let element: HTMLInputElement;
+    let error = null;
     const pattern = String.raw`^[a-zA-Z0-9][a-zA-Z0-9._\-]*$`;
 
-    onMount(() => {
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-
     $: if (!show) {
         id = null;
     }
 
-    const handleInvalid = (event: Event) => {
-        event.preventDefault();
-
-        if (element.validity.patternMismatch) {
-            icon = 'exclamation';
-            return;
-        }
-    };
-
     $: if (show) {
-        trackEvent('click_show_custom_id');
+        trackEvent(Click.ShowCustomIdClick);
     }
 
     $: if (id === databaseId) {
-        icon = 'exclamation';
-        element?.setCustomValidity('Database ID must be different from the one being restored.');
+        error = 'Database ID must be different from the one being restored.';
     } else {
-        icon = 'info';
-        element?.setCustomValidity('');
-    }
-
-    $: if (id?.length) {
-        icon = 'info';
-    } else {
-        id = null;
+        error = null;
     }
 </script>
 
-<InnerModal bind:show {fullWidth}>
-    <svelte:fragment slot="title">{name} ID</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Enter a custom {name} ID. Leave blank for a randomly generated one.
-    </svelte:fragment>
-    <svelte:fragment slot="content">
-        <div class="form u-gap-8">
-            <FormItem>
-                <div class="input-text-wrapper">
-                    <input
-                        id="id"
-                        placeholder="Enter ID"
-                        maxlength={36}
-                        {pattern}
-                        autocomplete="off"
-                        type="text"
-                        class="input-text"
-                        bind:value={id}
-                        bind:this={element}
-                        on:invalid={handleInvalid} />
-                    <TextCounter count={id?.length ?? 0} max={36} />
-                </div>
-            </FormItem>
-            <div
-                class="u-flex u-gap-4 u-margin-block-start-8 u-small"
-                class:u-color-text-warning={icon === 'exclamation'}>
-                <span
-                    class:icon-info={icon === 'info'}
-                    class:icon-exclamation={icon === 'exclamation'}
-                    class="u-cross-center u-line-height-1 u-color-text-gray"
-                    aria-hidden="true" />
-                <span class="text u-line-height-1-5">
-                    Allowed characters: alphanumeric, non-leading hyphen, underscore, period.
-                    Database ID must be different from the one being restored.
-                </span>
-            </div>
+<Card.Base
+    variant="secondary"
+    padding="s"
+    --input-background-color="var(--bgcolor-neutral-primary)">
+    <Layout.Stack gap="xl">
+        <Layout.Stack gap="s">
+            <Layout.Stack direction="row" justifyContent="space-between" alignContent="center">
+                <Typography.Text variant="m-600">{name} ID</Typography.Text>
+                <Button extraCompact on:click={() => (show = false)}>
+                    <Icon icon={IconX} size="s" />
+                </Button>
+            </Layout.Stack>
+            <Typography.Text>
+                Enter a custom {name} ID. Leave blank for a randomly generated one.
+            </Typography.Text>
+        </Layout.Stack>
+        <Input.Text
+            id="id"
+            placeholder="Enter ID"
+            maxlength={36}
+            {pattern}
+            {autofocus}
+            helper={error}
+            state={error ? 'warning' : 'default'}
+            autocomplete="off"
+            type="text"
+            class="input-text"
+            bind:value={id} />
+
+        <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+            <span class="text u-line-height-1-5">
+                Allowed characters: alphanumeric, non-leading hyphen, underscore, period. Database
+                ID must be different from the one being restored.
+            </span>
         </div>
-    </svelte:fragment>
-</InnerModal>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts
index 1c2b3da2f..dd4b9c133 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts
@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
+import type { Column } from '$lib/helpers/types';
 import type { UserBackupPolicy } from '$lib/helpers/backups';
 
-export const policyPricing = 20; //TODO: get this from the backend
 export const showCreatePolicy = writable(false);
 export const showCreateBackup = writable(false);
 
@@ -27,3 +27,11 @@ export const presetPolicies = writable<UserBackupPolicy[]>([
         description: 'Runs every day and is retained for 7 days'
     }
 ]);
+
+export const columns = writable<Column[]>([
+    { id: 'backups', title: 'Backups', type: 'string', width: { min: 180 } },
+    { id: 'size', title: 'Size', type: 'integer', width: { min: 163 } },
+    { id: 'status', title: 'Status', type: 'enum', width: { min: 163 } },
+    { id: 'policy', title: 'Policy', type: 'string', width: { min: 163 } },
+    { id: 'actions', title: '', type: 'string', width: 48 }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
index aafa9cde9..1603ca8f4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
@@ -1,33 +1,47 @@
 <script lang="ts">
-    import { Card, DropList, DropListItem, FloatingActionBar, Modal } from '$lib/components';
-    import { Button, FormList, InputCheckbox, InputText } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Card, Modal } from '$lib/components';
+    import { Button, InputCheckbox, InputText } from '$lib/elements/forms';
     import RestoreModal from './restoreModal.svelte';
     import type { PageData } from './$types';
     import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
-    import { Pill } from '$lib/elements';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { ID } from '@appwrite.io/console';
+    import { columns } from './store';
     import { database } from '../store';
     import type { BackupArchive } from '$lib/sdk/backups';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { copy } from '$lib/helpers/copy';
     import { LabelCard } from '$lib/components/index.js';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+
     import { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import {
+        ActionMenu,
+        Badge,
+        FloatingActionBar,
+        Icon,
+        Layout,
+        Popover,
+        Status,
+        Table,
+        Tag,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconDuplicate,
+        IconPencil,
+        IconRefresh,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import Ellipse from './components/Ellipse.svelte';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { page } from '$app/state';
 
     export let data: PageData;
 
@@ -47,8 +61,7 @@
         {
             id: 'new',
             title: 'Restore in new database',
-            description:
-                'Duplicate the database from the selected backup version into a new database.'
+            description: 'Duplicate the database from the selected backup version to a new.'
         },
         {
             id: 'same',
@@ -65,9 +78,7 @@
         const message = `${selectedBackups.length} backup${selectedBackups.length > 1 ? 's have been' : ''} deleted`;
 
         const promises = selectedBackups.map((archiveId) =>
-            sdk
-                .forProject($page.params.region, $page.params.project)
-                .backups.deleteArchive(archiveId)
+            sdk.forProject(page.params.region, page.params.project).backups.deleteArchive(archiveId)
         );
 
         try {
@@ -97,7 +108,7 @@
 
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .backups.createRestoration(
                     selectedBackup.$id,
                     ['databases'],
@@ -137,153 +148,146 @@
         selectedRestoreOption = 'new';
         newDatabaseInfo = { name: null, id: null };
     }
+
+    $: disableButton =
+        (selectedRestoreOption === 'new' &&
+            (!newDatabaseInfo.name || $database.$id === newDatabaseInfo.id)) ||
+        (selectedRestoreOption === 'same' && !confirmSameDbRestore);
+
+    function getBackupStatus(backup: BackupArchive) {
+        switch (backup.status) {
+            case 'pending':
+                return 'pending';
+            case 'completed':
+                return 'complete';
+            case 'uploading':
+            case 'downloading':
+                return 'processing';
+            case 'failed':
+                return 'failed';
+            default:
+                return 'waiting';
+        }
+    }
 </script>
 
-<TableScroll class="custom-height-table-column">
-    <TableHeader>
-        <TableCellHeadCheck
-            bind:selected={selectedBackups}
-            pageItemsIds={data.backups.archives.map((b) => b.$id)} />
-        <TableCellHead width={192}>Backups</TableCellHead>
-        <TableCellHead width={80}>Size</TableCellHead>
-        <TableCellHead width={120}>Status</TableCellHead>
-        <TableCellHead width={120}>Policy</TableCellHead>
-        <TableCellHead width={48} />
-    </TableHeader>
-    <TableBody>
-        {#each data.backups.archives as backup, index}
-            {@const policy = policyDetails(backup.policyId)}
-            {@const retainedUntil = new Date(
-                new Date(policy?.$createdAt).getTime() + policy?.retention * 24 * 60 * 60 * 1000
-            )}
-            {@const formattedRetainedUntil = `${retainedUntil.getDate()} ${retainedUntil.toLocaleString('en-US', { month: 'short' })}, ${retainedUntil.getFullYear()} ${retainedUntil.toLocaleTimeString('en-US', { hour12: false })}`}
-            <TableRow>
-                <TableCellCheck id={backup.$id} bind:selectedIds={selectedBackups} />
-                <TableCell title={backup.$createdAt}>
-                    <span
-                        use:tooltip={{
-                            content: timeFromNow(backup.$createdAt)
-                        }}>
-                        {cleanBackupName(backup)}
-                    </span>
-                </TableCell>
-                <TableCell title="Backup Size">
-                    {#if backup.status === 'completed'}
-                        {calculateSize(backup.size)}
-                    {:else}
-                        -
-                    {/if}
-                </TableCell>
-                <TableCell title="Backup Status">
-                    <div class="u-flex u-gap-8 u-cross-baseline">
-                        <Pill
-                            warning={backup.status === 'pending'}
-                            danger={backup.status === 'failed'}
-                            success={backup.status === 'completed'}>
-                            {backup.status.toLowerCase()}
-                        </Pill>
-                        <!--{#if backup.status === 'Failed'}-->
-                        <!--    <span class="u-underline">Get support</span>-->
-                        <!--{/if}-->
-                    </div>
-                </TableCell>
-                <TableCell title="Backup Policy">
-                    <div class="u-flex u-main-space-between u-cross-baseline">
-                        <span
-                            use:tooltip={{
-                                content: policy
-                                    ? `Retained until: ${formattedRetainedUntil}`
-                                    : `Retained forever`
-                            }}>
+<Table.Root let:root allowSelection columns={$columns} bind:selectedRows={selectedBackups}>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as column}
+            <Table.Header.Cell column={column.id} {root}>{column.title}</Table.Header.Cell>
+        {/each}
+    </svelte:fragment>
+
+    {#each data.backups.archives as backup, index}
+        {@const policy = policyDetails(backup.policyId)}
+        {@const retainedUntil = new Date(
+            new Date(policy?.$createdAt).getTime() + policy?.retention * 24 * 60 * 60 * 1000
+        )}
+        {@const formattedRetainedUntil = `${retainedUntil.getDate()} ${retainedUntil.toLocaleString('en-US', { month: 'short' })}, ${retainedUntil.getFullYear()} ${retainedUntil.toLocaleTimeString('en-US', { hour12: false })}`}
+        <Table.Row.Base id={backup.$id} {root}>
+            <Table.Cell column="backups" {root}>
+                <DualTimeView time={backup.$createdAt}>
+                    {cleanBackupName(backup)}
+                </DualTimeView>
+            </Table.Cell>
+            <Table.Cell column="size" {root}>
+                {#if backup.status === 'completed'}
+                    {calculateSize(backup.size)}
+                {:else}
+                    -
+                {/if}
+            </Table.Cell>
+            <Table.Cell column="status" {root}>
+                {@const backupStatus = getBackupStatus(backup)}
+                <Status status={backupStatus} label={capitalize(backupStatus)} />
+                <!--{#if backup.status === 'Failed'}-->
+                <!--    <span class="u-underline">Get support</span>-->
+                <!--{/if}-->
+            </Table.Cell>
+            <Table.Cell column="policy" {root}>
+                <div class="u-flex u-main-space-between u-cross-baseline">
+                    <Tooltip maxWidth="fit-content">
+                        <span>
                             {policy?.name || 'Manual'}
                         </span>
-                    </div>
-                </TableCell>
-
-                <TableCell class="last-dropdown-item">
-                    <DropList
-                        class="drop-list-menu"
-                        noArrow
-                        bind:show={showDropdown[index]}
-                        placement="bottom-end">
-                        <button
-                            class="button is-only-icon is-text"
-                            aria-label="More options"
-                            on:click|preventDefault={() => {
-                                showDropdown[index] = !showDropdown[index];
-                            }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </button>
-
-                        <svelte:fragment slot="list">
+                        <span slot="tooltip"
+                            >{policy
+                                ? `Retained until: ${formattedRetainedUntil}`
+                                : `Retained forever`}</span>
+                    </Tooltip>
+                </div>
+            </Table.Cell>
+            <Table.Cell column="action" {root}>
+                <Popover let:toggle padding="m" placement="bottom-end">
+                    <Button extraCompact on:click={toggle}>
+                        <Icon icon={IconDotsHorizontal} />
+                    </Button>
+                    <svelte:fragment slot="tooltip" let:toggle>
+                        <ActionMenu.Root width="180px" noPadding>
                             {#if backup.status === 'completed'}
-                                <DropListItem
-                                    icon="refresh"
-                                    on:click={() => {
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconRefresh}
+                                    on:click={(e) => {
+                                        toggle(e);
                                         showRestore = true;
                                         selectedBackup = backup;
                                         showDropdown[index] = false;
-                                        trackEvent('click_backup_restore');
+                                        trackEvent(Click.BackupRestoreClick);
                                     }}>
                                     Restore
-                                </DropListItem>
+                                </ActionMenu.Item.Button>
                             {/if}
-                            <DropListItem
-                                icon="trash"
-                                on:click={() => {
+                            <ActionMenu.Item.Button
+                                trailingIcon={IconDuplicate}
+                                on:click={(e) => {
+                                    toggle(e);
+                                    copy(backup.$id);
+                                    showDropdown[index] = false;
+                                    trackEvent(Click.BackupCopyIdClick);
+                                }}>
+                                Copy ID
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                status="danger"
+                                trailingIcon={IconTrash}
+                                on:click={(e) => {
+                                    toggle(e);
                                     showDelete = true;
                                     selectedBackup = backup;
                                     showDropdown[index] = false;
-                                    trackEvent('click_backup_delete');
+                                    trackEvent(Click.BackupDeleteClick);
                                 }}>
                                 Delete
-                            </DropListItem>
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </svelte:fragment>
+                </Popover>
+            </Table.Cell>
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
 
-                            <DropListItem
-                                icon="duplicate"
-                                on:click={() => {
-                                    copy(backup.$id);
-                                    showDropdown[index] = false;
-                                }}>
-                                Copy ID
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </TableCell>
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
-
-<FloatingActionBar show={selectedBackups.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedBackups.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedBackups.length > 1 ? 'backups' : 'backup'}
-                </span>
+{#if selectedBackups.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedBackups.length.toString()} />
+            <span>
+                {selectedBackups.length > 1 ? 'backups' : 'backup'}
                 selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
             <Button text on:click={() => (selectedBackups = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-<Modal
+<Confirm
     title="Delete {selectedBackups.length ? 'backups' : 'backup'}"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    headerDivider={false}
+    bind:open={showDelete}
     onSubmit={deleteBackups}>
-    <p class="text" data-private>
+    <Typography.Text>
         Are you sure you want to delete
         {#if selectedBackups.length}
             <b>{selectedBackups.length}</b> {selectedBackups.length > 1 ? 'backups' : 'backup'}?
@@ -291,141 +295,83 @@
             the <b>{cleanBackupName(selectedBackup)}</b> backup?
         {/if}
         <br />This action is irreversible.
-    </p>
+    </Typography.Text>
+</Confirm>
 
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
-
-<Modal headerDivider={true} title="Restore backup" bind:show={showRestore} onSubmit={restoreBackup}>
-    <Card
-        isTile
-        class="restore-modal-inner-card u-width-full-line"
-        style="border-radius: var(--border-radius-small, 8px); padding: 1rem;">
-        <div class="u-flex u-flex-vertical u-gap-4">
-            <span class="body-text-2 u-bold darker-neutral-color">
+<Modal title="Restore backup" bind:show={showRestore} onSubmit={restoreBackup}>
+    <Card radius="m" padding="s">
+        <Layout.Stack gap="xxs">
+            <Typography.Text variant="m-500">
                 {cleanBackupName(selectedBackup)}
-            </span>
-            <div class="u-flex u-cross-center u-gap-6 u-width-full-line">
-                <span class="u-flex u-cross-center u-gap-4">
-                    <span class="u-color-text-success u-font-size-12">●</span> Completed
-                </span>
-                <span class="small-ellipse">●</span>
-                {calculateSize(selectedBackup.size)}
-                <span class="small-ellipse">●</span>
+            </Typography.Text>
 
-                <!--                TODO: ellipsis-->
-                {timeFromNow(selectedBackup.$createdAt)}
-            </div>
-        </div>
+            <Typography.Caption variant="500">
+                <Layout.Stack direction="row" gap="xs">
+                    <Ellipse color="var(--bgcolor-success)" /> Completed
+                    <Ellipse size="s" />
+                    {calculateSize(selectedBackup.size)}
+                    <Ellipse size="s" />
+                    {timeFromNow(selectedBackup.$createdAt)}
+                </Layout.Stack>
+            </Typography.Caption>
+        </Layout.Stack>
     </Card>
 
-    <FormList>
-        <div class="u-flex u-flex-vertical-mobile u-gap-16">
-            {#each restoreOptions as restoreOption}
-                <div class="u-width-full-line">
-                    <LabelCard
-                        padding={1}
-                        name="restore"
-                        value={restoreOption.id}
-                        bind:group={selectedRestoreOption}>
-                        <svelte:fragment slot="custom">
-                            <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
-                                <h4 class="body-text-2 u-bold">
-                                    {restoreOption.title}
-                                </h4>
-                                <p class="u-color-text-offline u-small">
-                                    {restoreOption.description}
-                                </p>
-                            </div>
-                        </svelte:fragment>
-                    </LabelCard>
-                </div>
-            {/each}
-        </div>
-
-        {#if selectedRestoreOption === 'new'}
-            <div class="u-flex-vertical u-gap-8">
-                <InputText
-                    id="name"
-                    label="Database name"
-                    placeholder="Enter database name"
-                    bind:value={newDatabaseInfo.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}
-                    <div class="u-flex u-flex-vertical u-gap-8">
-                        <RestoreModal
-                            autofocus={false}
-                            name="Database"
-                            bind:show={showCustomId}
-                            databaseId={$database.$id}
-                            bind:id={newDatabaseInfo.id} />
-                    </div>
-                {/if}
-            </div>
-        {:else}
-            <div class="input-check-box-friction">
-                <InputCheckbox
-                    required
-                    size="small"
-                    id="delete_policy"
-                    bind:checked={confirmSameDbRestore}>
-                    <svelte:fragment slot="description">
-                        <span style="margin-block-start: 1px;">
-                            Overwrite <b>{$database.name}</b> with the selected backup version
-                        </span>
+    <Layout.Stack direction="row" gap="l">
+        {#each restoreOptions as restoreOption}
+            <div class="u-width-full-line">
+                <LabelCard padding="s" value={restoreOption.id} bind:group={selectedRestoreOption}>
+                    <svelte:fragment slot="title">
+                        <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
+                            <h4 class="body-text-2 u-bold">
+                                {restoreOption.title}
+                            </h4>
+                        </div>
                     </svelte:fragment>
-                </InputCheckbox>
+                    <p class="u-color-text-offline u-small">
+                        {restoreOption.description}
+                    </p>
+                </LabelCard>
             </div>
-        {/if}
-    </FormList>
+        {/each}
+    </Layout.Stack>
+
+    {#if selectedRestoreOption === 'new'}
+        <Layout.Stack gap="s" alignItems="flex-start">
+            <InputText
+                id="name"
+                label="Database name"
+                placeholder="Enter database name"
+                bind:value={newDatabaseInfo.name}
+                autofocus
+                required />
+            {#if !showCustomId}
+                <Tag
+                    size="s"
+                    on:click={() => {
+                        showCustomId = true;
+                    }}><Icon icon={IconPencil} /> Database ID</Tag>
+            {:else}
+                <RestoreModal
+                    autofocus={false}
+                    name="Database"
+                    bind:show={showCustomId}
+                    databaseId={$database.$id}
+                    bind:id={newDatabaseInfo.id} />
+            {/if}
+        </Layout.Stack>
+    {:else}
+        <InputCheckbox
+            required
+            size="s"
+            id="delete_policy"
+            bind:checked={confirmSameDbRestore}
+            label="Overwrite '{$database.name}' with the selected backup version">
+        </InputCheckbox>
+    {/if}
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showRestore = false)}>Cancel</Button>
-        <Button submit>Restore</Button>
+        <Button submit disabled={disableButton}>Restore</Button>
     </svelte:fragment>
 </Modal>
-
-<style lang="scss">
-    :global(.custom-height-table-column .table-col) {
-        height: 54px;
-        padding: 0 1rem; /* removes vertical padding for constrained height */
-    }
-
-    :global(.restore-modal-inner-card) {
-        background: hsl(var(--color-neutral-5));
-        border: 1px solid hsl(var(--color-neutral-10));
-    }
-
-    :global(.theme-dark .restore-modal-inner-card) {
-        background: hsl(var(--color-neutral-85));
-        border: 1px solid hsl(var(--color-neutral-80));
-    }
-
-    // centers item horizontally!
-    :global(.last-dropdown-item div) {
-        margin: auto;
-    }
-
-    .actions {
-        .indicator {
-            border-radius: 0.25rem;
-            background: hsl(var(--color-information-100));
-            color: hsl(var(--color-neutral-0));
-
-            padding: 0rem 0.375rem;
-            display: inline-block;
-        }
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte
index 52a7d8644..886b74c24 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte
@@ -12,8 +12,8 @@
     import EmptyLightTablet from '$lib/images/backups/upgrade/backups-tablet-light.png';
 
     import { upgradeURL } from '$lib/stores/billing';
-    import { Card } from '$lib/components';
     import { isCloud } from '$lib/system';
+    import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     const title = isCloud
         ? 'Backups are available on paid plans'
@@ -25,7 +25,7 @@
 </script>
 
 <div>
-    <Card style="--card-padding: 1rem; --card-padding-mobile: 1rem">
+    <Card.Base padding="xs">
         <div class="u-flex u-gap-24 u-flex-vertical-mobile u-cross-center">
             <div
                 style:--p-file-preview-border-color="transparent"
@@ -78,35 +78,32 @@
                     {/if}
                 </div>
             </div>
-            <div class="u-flex u-flex-vertical-mobile u-gap-mobile-6 u-cross-center">
-                <div class="u-flex-vertical u-gap-8">
-                    <h3 class="body-text-2 u-bold">
-                        {title}
-                    </h3>
-
+            <Layout.Stack direction="row" alignItems="center" wrap="wrap">
+                <Layout.Stack gap="xs">
+                    <Typography.Text variant="m-600">{title}</Typography.Text>
                     <span class="upgrade-description">
                         {message} Schedule automatic or manual backups to protect your data and ensure
                         quick recovery.
                     </span>
-                </div>
+                </Layout.Stack>
 
+                <span class="is-only-mobile-button">
+                    <Button
+                        external={!isCloud}
+                        href={isCloud ? $upgradeURL : 'https://cloud.appwrite.io/register'}>
+                        {isCloud ? 'Upgrade plan' : 'Sign up'}
+                    </Button>
+                </span>
+            </Layout.Stack>
+            <div class="is-not-mobile">
                 <Button
                     external={!isCloud}
-                    class="is-not-mobile"
-                    href={isCloud ? $upgradeURL : 'https://cloud.appwrite.io/register'}>
-                    {isCloud ? 'Upgrade plan' : 'Sign up'}
-                </Button>
-
-                <Button
-                    fullWidthMobile
-                    external={!isCloud}
-                    class="is-only-mobile-button u-margin-block-start-32"
                     href={isCloud ? $upgradeURL : 'https://cloud.appwrite.io/register'}>
                     {isCloud ? 'Upgrade plan' : 'Sign up'}
                 </Button>
             </div>
         </div>
-    </Card>
+    </Card.Base>
 </div>
 
 <style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
index 8d730764d..e1f0459d4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { database } from './store';
@@ -11,15 +11,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
-            title: $page.data.project.name
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: page.data.project.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases`,
             title: 'Databases'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database.$id}`,
             title: $database.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 1c9e84279..d319f65c3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -27,16 +27,15 @@
     import { CreateAttributePanel } from '$lib/commandCenter/panels';
     import { database } from '../store';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import CreateIndex from './indexes/createIndex.svelte';
-    import { wizard } from '$lib/stores/wizard';
-    import CreateDocument from './createDocument.svelte';
     import { base } from '$app/paths';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { IconEye, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
 
     onMount(() => {
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe(['project', 'console'], (response) => {
                 if (
                     response.events.includes('databases.*.collections.*.attributes.*') ||
@@ -50,20 +49,22 @@
     $: $registerCommands([
         {
             label: 'Create document',
-            keys: $page.url.pathname.endsWith($collection.$id) ? ['c'] : ['c', 'd'],
+            keys: page.url.pathname.endsWith($collection.$id) ? ['c'] : ['c', 'd'],
             callback() {
-                wizard.start(CreateDocument);
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/create`
+                );
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'documents'
         },
         {
             label: 'Create attribute',
-            keys: $page.url.pathname.endsWith('attributes') ? ['c'] : ['c', 'a'],
+            keys: page.url.pathname.endsWith('attributes') ? ['c'] : ['c', 'a'],
             callback() {
                 addSubPanel(CreateAttributePanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'attributes',
             disabled: !$canWriteCollections
         },
@@ -72,10 +73,10 @@
             keys: ['g', 'd'],
             callback() {
                 goto(
-                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`
                 );
             },
-            disabled: $page.url.pathname.endsWith($collection.$id),
+            disabled: page.url.pathname.endsWith($collection.$id),
             group: 'collections'
         },
         {
@@ -83,10 +84,10 @@
             keys: ['g', 'a'],
             callback() {
                 goto(
-                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/attributes`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/attributes`
                 );
             },
-            disabled: $page.url.pathname.endsWith('attributes'),
+            disabled: page.url.pathname.endsWith('attributes'),
             group: 'collections'
         },
         {
@@ -94,10 +95,10 @@
             keys: ['g', 'i'],
             callback() {
                 goto(
-                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/indexes`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/indexes`
                 );
             },
-            disabled: $page.url.pathname.endsWith('indexes'),
+            disabled: page.url.pathname.endsWith('indexes'),
             group: 'collections'
         },
         {
@@ -105,10 +106,10 @@
             keys: ['g', 'c'],
             callback() {
                 goto(
-                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/activity`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/activity`
                 );
             },
-            disabled: $page.url.pathname.endsWith('activity'),
+            disabled: page.url.pathname.endsWith('activity'),
             group: 'collections'
         },
         {
@@ -116,10 +117,10 @@
             keys: ['g', 'u'],
             callback() {
                 goto(
-                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/usage`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/usage`
                 );
             },
-            disabled: $page.url.pathname.endsWith('usage'),
+            disabled: page.url.pathname.endsWith('usage'),
             group: 'collections'
         },
         {
@@ -127,10 +128,10 @@
             keys: ['g', 's'],
             callback() {
                 goto(
-                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/settings`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/settings`
                 );
             },
-            disabled: $page.url.pathname.endsWith('settings') || !$canWriteCollections,
+            disabled: page.url.pathname.endsWith('settings') || !$canWriteCollections,
             group: 'collections'
         },
         {
@@ -142,10 +143,10 @@
             },
             group: 'collections',
             disabled:
-                $page.url.pathname.endsWith('display-name') ||
-                $page.url.pathname.endsWith('settings') ||
+                page.url.pathname.endsWith('display-name') ||
+                page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'eye'
+            icon: IconEye
         },
         {
             label: 'Permissions',
@@ -156,10 +157,10 @@
             },
             group: 'collections',
             disabled:
-                $page.url.pathname.endsWith('permissions') ||
-                $page.url.pathname.endsWith('settings') ||
+                page.url.pathname.endsWith('permissions') ||
+                page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'puzzle'
+            icon: IconPuzzle
         },
         {
             label: 'Document security',
@@ -170,18 +171,18 @@
             },
             group: 'collections',
             disabled:
-                $page.url.pathname.endsWith('document-security') ||
-                $page.url.pathname.endsWith('settings') ||
+                page.url.pathname.endsWith('document-security') ||
+                page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'lock-closed'
+            icon: IconLockClosed
         },
         {
             label: 'Create index',
-            keys: $page.url.pathname.endsWith('indexes') ? ['c'] : ['c', 'i'],
+            keys: page.url.pathname.endsWith('indexes') ? ['c'] : ['c', 'i'],
             callback() {
                 initCreateIndex();
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'indexes',
             disabled: !$canWriteCollections
         }
@@ -201,5 +202,10 @@
 
 <slot />
 
-<CreateAttribute {...$createAttributeArgs} />
-<CreateIndex bind:showCreateIndex={$showCreateIndex} />
+{#if $createAttributeArgs.showCreate}
+    <CreateAttribute {...$createAttributeArgs} />
+{/if}
+
+{#if $showCreateIndex}
+    <CreateIndex bind:showCreateIndex={$showCreateIndex} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 1c3d6d19a..4367866f0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Empty, EmptySearch, Heading, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch, PaginationWithLimit } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
@@ -8,28 +7,34 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { wizard } from '$lib/stores/wizard';
+    import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
-    import Create from './createDocument.svelte';
-    import { collection, columns } from './store';
+    import { collection, columns, isCsvImportInProgress } from './store';
     import Table from './table.svelte';
     import { writable } from 'svelte/store';
+    import FilePicker from '$lib/components/filePicker.svelte';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { base } from '$app/paths';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { SHOW_INIT_FEATURES } from '$lib/system';
 
     export let data: PageData;
 
+    let showImportCSV = false;
     let showCreateAttribute = false;
-    let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
 
     const filterColumns = writable<Column[]>([]);
 
-    $: selected = preferences.getCustomCollectionColumns(
-        $page.params.project,
-        $page.params.collection
-    );
+    $: selected = preferences.getCustomCollectionColumns(page.params.collection);
     $: columns.set(
         $collection.attributes.map((attribute) => ({
             id: attribute.key,
@@ -51,54 +56,80 @@
         }))
     ]);
 
-    function openWizard() {
-        if (!$canWriteDocuments) return;
-        wizard.start(Create);
-    }
-
     $: hasAttributes = !!$collection.attributes.length;
-
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
+
+    async function onSelect(file: Models.File) {
+        $isCsvImportInProgress = true;
+
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .migrations.createCsvMigration(
+                    file.bucketId,
+                    file.$id,
+                    `${page.params.database}:${page.params.collection}`
+                );
+
+            addNotification({
+                type: 'success',
+                message: 'Documents import from csv has started'
+            });
+
+            trackEvent(Submit.DatabaseImportCsv);
+        } catch (e) {
+            trackError(e, Submit.DatabaseImportCsv);
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        } finally {
+            $isCsvImportInProgress = false;
+        }
+    }
 </script>
 
-{#key $page.params.collection}
+{#key page.params.collection}
     <Container>
-        <div class="heading-grid u-main-justify-between u-cross-center">
-            <Heading tag="h2" size="5">Documents</Heading>
-            <div class="u-flex u-main-end is-only-mobile">
+        <Layout.Stack direction="column" gap="xl">
+            <Layout.Stack direction="row" justifyContent="space-between">
+                <Filters
+                    query={data.query}
+                    {columns}
+                    disabled={!(hasAttributes && hasValidAttributes)}
+                    analyticsSource="database_documents" />
+                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+                    <ViewSelector view={data.view} {columns} hideView />
+                    {#if SHOW_INIT_FEATURES}
+                        <Button
+                            secondary
+                            event={Click.DatabaseImportCsv}
+                            disabled={!(hasAttributes && hasValidAttributes)}
+                            on:click={() => (showImportCSV = true)}>
+                            Import CSV
+                        </Button>
+                    {/if}
+                    {#if !$isSmallViewport}
+                        <Button
+                            disabled={!(hasAttributes && hasValidAttributes)}
+                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                            event="create_document">
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create document
+                        </Button>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+            {#if $isSmallViewport}
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    on:click={openWizard}
+                    href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
                     event="create_document">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create document</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create document
                 </Button>
-            </div>
-
-            <Filters
-                query={data.query}
-                columns={filterColumns}
-                disabled={!(hasAttributes && hasValidAttributes)} />
-
-            <div class="u-flex u-main-end u-gap-16">
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    isCustomCollection
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                <div class="is-not-mobile">
-                    <Button
-                        disabled={!(hasAttributes && hasValidAttributes)}
-                        on:click={openWizard}
-                        event="create_document">
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create document</span>
-                    </Button>
-                </div>
-            </div>
-        </div>
+            {/if}
+        </Layout.Stack>
 
         {#if hasAttributes && hasValidAttributes}
             {#if data.documents.total}
@@ -122,6 +153,9 @@
                                 on:click={() => {
                                     queries.clearAll();
                                     queries.apply();
+                                    trackEvent(Submit.FilterClear, {
+                                        source: 'database_documents'
+                                    });
                                 }}>
                                 Clear filters
                             </Button>
@@ -133,61 +167,69 @@
                     allowCreate={$canWriteDocuments}
                     single
                     href="https://appwrite.io/docs/products/databases/documents"
-                    target="document"
-                    on:click={openWizard} />
+                    target="document">
+                    <svelte:fragment slot="actions">
+                        <Button
+                            external
+                            href="https://appwrite.io/docs/products/databases/documents"
+                            text
+                            event="empty_documentation"
+                            size="s"
+                            ariaLabel="create document">Documentation</Button>
+                        <Button
+                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                            secondary
+                            disabled={!$canWriteDocuments}
+                            size="s">
+                            Create document
+                        </Button>
+                    </svelte:fragment>
+                </Empty>
             {/if}
         {:else}
-            <Empty
-                allowCreate={$canWriteCollections}
-                single
-                target="attribute"
-                on:click={() => (showCreateDropdown = true)}>
-                <div class="u-text-center">
-                    <Heading size="7" tag="h2">Create an attribute to get started.</Heading>
-                    <p class="body-text-2 u-bold u-margin-block-start-4">
-                        Need a hand? Learn more in our documentation.
-                    </p>
-                </div>
-                <div class="u-flex u-gap-16 u-main-center">
-                    <Button
-                        external
-                        href="https://appwrite.io/docs/products/databases/collections#attributes"
-                        text
-                        event="empty_documentation"
-                        ariaLabel={`create {target}`}>Documentation</Button>
-                    {#if $canWriteCollections}
-                        <CreateAttributeDropdown
-                            bind:showCreateDropdown
-                            bind:showCreate={showCreateAttribute}
-                            bind:selectedOption={selectedAttribute}>
-                            <Button
-                                secondary
-                                event="create_attribute"
-                                on:click={() => {
-                                    showCreateDropdown = !showCreateDropdown;
-                                }}>
-                                Create attribute
-                            </Button>
-                        </CreateAttributeDropdown>
-                    {/if}
-                </div>
-            </Empty>
+            <Card.Base padding="none">
+                <PinkEmpty
+                    title="Create an attribute to get started."
+                    description="Need a hand? Learn more in our documentation.">
+                    <slot name="actions" slot="actions">
+                        <Button
+                            external
+                            href="https://appwrite.io/docs/products/databases/collections#attributes"
+                            text
+                            event="empty_documentation"
+                            size="s">Documentation</Button>
+                        {#if $canWriteCollections}
+                            <CreateAttributeDropdown
+                                bind:selectedOption={selectedAttribute}
+                                bind:showCreate={showCreateAttribute}
+                                let:toggle>
+                                <Button secondary event="create_attribute" on:click={toggle}>
+                                    Create attribute
+                                </Button>
+                            </CreateAttributeDropdown>
+                        {/if}
+                    </slot>
+                </PinkEmpty>
+            </Card.Base>
         {/if}
     </Container>
 {/key}
 
-<CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />
+{#if showCreateAttribute}
+    <CreateAttribute
+        bind:showCreate={showCreateAttribute}
+        bind:selectedOption={selectedAttribute} />
+{/if}
 
-<style lang="scss">
-    .heading-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 2rem;
-
-        @media (min-width: 768px) {
-            :global(h2) {
-                grid-column: span 2;
-            }
-        }
-    }
-</style>
+{#if showImportCSV}
+    <!-- CSVs can be text/plain or text/csv sometimes! -->
+    <FilePicker
+        {onSelect}
+        mimeTypeQuery="text/"
+        allowedExtension="csv"
+        bind:show={showImportCSV}
+        gridImageDimensions={{
+            imageHeight: 32,
+            imageWidth: 32
+        }} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
index 16860c77f..107d096f6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
@@ -8,8 +8,8 @@ import { queries, queryParamToMap } from '$lib/components/filters';
 export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.DOCUMENTS);
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
-    const view = getView(params.project, url, route, View.Grid);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts
index dc9a44c26..955c1796c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 92f74f858..e7803f924 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -1,35 +1,46 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { DropList, DropListItem, Empty, Heading } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { page } from '$app/state';
+    import { Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { canWriteCollections } from '$lib/stores/roles';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Link,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import Create from '../createAttribute.svelte';
     import { isRelationship } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
-    import { attributes, type Attributes } from '../store';
+    import { attributes, type Attributes, isCsvImportInProgress } from '../store';
     import CreateAttributeDropdown from './createAttributeDropdown.svelte';
     import Delete from './deleteAttribute.svelte';
     import Edit from './edit.svelte';
     import { attributeOptions, type Option } from './store';
+    import {
+        IconArrowSmRight,
+        IconDotsHorizontal,
+        IconLink,
+        IconLocationMarker,
+        IconPencil,
+        IconPlus,
+        IconSwitchHorizontal,
+        IconTrash,
+        IconViewList
+    } from '@appwrite.io/pink-icons-svelte';
+    import type { ComponentProps } from 'svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import CsvDisabled from '../csvDisabled.svelte';
 
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
-    let showCreateDropdown = false;
-    let showEmptyCreateDropdown = false;
     let showDropdown = [];
     let selectedOption: Option['name'] = null;
     let selectedAttribute: Attributes = null;
@@ -40,175 +51,165 @@
     let showFailed = false;
     let error = '';
 
-    enum attributeFormatIcon {
-        ip = 'location-marker',
-        url = 'link',
-        email = 'mail',
-        enum = 'view-list'
+    const attributeFormatIcon = {
+        ip: IconLocationMarker,
+        url: IconLink,
+        email: IconLink,
+        enum: IconViewList
+    };
+
+    function getAttributeStatusBadge(status: string): ComponentProps<Badge>['type'] {
+        switch (status) {
+            case 'processing':
+                return 'warning';
+            case 'deleting':
+            case 'stuck':
+            case 'failed':
+                return 'error';
+            default:
+                return undefined;
+        }
     }
 </script>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Attributes</Heading>
-
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Typography.Title>Attributes</Typography.Title>
         {#if $canWriteCollections}
-            <CreateAttributeDropdown bind:showCreateDropdown bind:selectedOption bind:showCreate />
+            <CreateAttributeDropdown bind:selectedOption bind:showCreate />
         {/if}
-    </div>
+    </Layout.Stack>
 
     {#if $attributes.length}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Key</TableCellHead>
-                <TableCellHead onlyDesktop>Type</TableCellHead>
-                <TableCellHead onlyDesktop>Default Value</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-            <TableBody>
-                {#each $attributes as attribute, index}
-                    {@const option = attributeOptions.find(
-                        (option) => option.type === attribute.type
-                    )}
-                    <TableRow>
-                        <TableCell title="Key">
-                            <div class="u-flex u-main-space-between u-cross-center">
-                                <div class="u-flex u-cross-center u-gap-16">
-                                    <div class="avatar is-size-small u-color-text-gray">
-                                        {#if isRelationship(attribute)}
-                                            <span
-                                                class={`icon-${
-                                                    attribute?.twoWay
-                                                        ? 'switch-horizontal'
-                                                        : 'arrow-sm-right'
-                                                }`}
-                                                aria-hidden="true" />
-                                        {:else if 'format' in attribute && attribute.format}
-                                            {@const icon = attributeFormatIcon[attribute?.format]}
-                                            <span class={`icon-${icon}`} aria-hidden="true" />
-                                        {:else}
-                                            <span
-                                                class={`icon-${option.icon}`}
-                                                aria-hidden="true" />
-                                        {/if}
-                                    </div>
-                                    <span class="text u-trim-1" data-private>{attribute.key}</span>
-                                </div>
-                                {#if attribute.status !== 'available'}
-                                    <div class="u-inline-flex u-gap-12 u-cross-center">
-                                        <Pill
-                                            warning={attribute.status === 'processing'}
-                                            danger={['deleting', 'stuck', 'failed'].includes(
-                                                attribute.status
-                                            )}>
-                                            {attribute.status}
-                                        </Pill>
-                                        {#if attribute.error}
-                                            <Button
-                                                link
-                                                on:click={(e) => {
-                                                    e.preventDefault();
-                                                    error = attribute.error;
-                                                    showFailed = true;
-                                                }}>Details</Button>
-                                        {/if}
-                                    </div>
-                                {:else if attribute.required}
-                                    <Pill>Required</Pill>
-                                {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Type">
-                            {#if 'format' in attribute && attribute.format}
-                                <span class="u-capitalize">{attribute.format}</span>
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'key' },
+                { id: 'type' },
+                { id: 'default' },
+                { id: 'actions', width: 40 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
+                <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+                <Table.Header.Cell column="default" {root}>Default value</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each $attributes as attribute, index}
+                {@const option = attributeOptions.find((option) => option.type === attribute.type)}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="key" {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if isRelationship(attribute)}
+                                <Icon
+                                    size="s"
+                                    icon={attribute?.twoWay
+                                        ? IconSwitchHorizontal
+                                        : IconArrowSmRight} />
+                            {:else if 'format' in attribute && attribute.format}
+                                {@const icon = attributeFormatIcon[attribute?.format]}
+                                <Icon {icon} size="s" />
                             {:else}
-                                <span class="u-capitalize">{attribute.type}</span>
-                                {#if isRelationship(attribute)}
-                                    <span>
-                                        with <a
-                                            href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${attribute?.relatedCollection}`}
-                                            ><b data-private>{attribute?.key}</b></a>
-                                    </span>
-                                {/if}
+                                <Icon icon={option.icon} size="s" />
                             {/if}
-                            <span>
-                                {attribute.array ? '[]' : ''}
-                            </span>
-                        </TableCellText>
-                        <TableCellText onlyDesktop title="Default Value">
-                            {attribute?.default !== null && attribute?.default !== undefined
-                                ? attribute?.default
-                                : '-'}
-                        </TableCellText>
-                        <TableCell showOverflow>
-                            <DropList
-                                bind:show={showDropdown[index]}
-                                placement="bottom-start"
-                                noArrow>
-                                <button
-                                    class="button is-only-icon is-text"
-                                    aria-label="More options"
-                                    on:click|preventDefault={() => {
-                                        showDropdown[index] = !showDropdown[index];
-                                    }}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </button>
-                                <svelte:fragment slot="list">
-                                    <DropListItem
-                                        event="edit_attribute"
-                                        icon="pencil"
+                            <span class="text u-trim-1" data-private>{attribute.key}</span>
+                            {#if attribute.status !== 'available'}
+                                <Badge
+                                    size="s"
+                                    variant="secondary"
+                                    content={attribute.status}
+                                    type={getAttributeStatusBadge(attribute.status)} />
+                                {#if attribute.error}
+                                    <Link.Button
+                                        variant="muted"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            error = attribute.error;
+                                            showFailed = true;
+                                        }}>Details</Link.Button>
+                                {/if}
+                            {:else if attribute.required}
+                                <Badge size="s" variant="secondary" content="required" />
+                            {/if}
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="type" {root}>
+                        {#if 'format' in attribute && attribute.format}
+                            <span class="u-capitalize">{attribute.format}</span>
+                        {:else}
+                            <span class="u-capitalize">{attribute.type}</span>
+                            {#if isRelationship(attribute)}
+                                <span>
+                                    with <a
+                                        href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attribute?.relatedCollection}`}
+                                        ><b data-private>{attribute?.key}</b></a>
+                                </span>
+                            {/if}
+                        {/if}
+                        <span>
+                            {attribute.array ? '[]' : ''}
+                        </span>
+                    </Table.Cell>
+                    <Table.Cell column="default" {root}>
+                        {attribute?.default !== null && attribute?.default !== undefined
+                            ? attribute?.default
+                            : '-'}
+                    </Table.Cell>
+                    <Table.Cell column="actions" {root}>
+                        {#if $isCsvImportInProgress}
+                            <CsvDisabled>
+                                <Button disabled text icon ariaLabel="more options">
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                            </CsvDisabled>
+                        {:else}
+                            <Popover let:toggle padding="none" placement="bottom-end">
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip">
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconPencil}
                                         on:click={() => {
                                             selectedAttribute = attribute;
                                             showEdit = true;
                                             showDropdown[index] = false;
                                         }}>
                                         Update
-                                    </DropListItem>
+                                    </ActionMenu.Item.Button>
                                     {#if !isRelationship(attribute)}
-                                        <DropListItem
-                                            icon="plus"
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPlus}
                                             on:click={() => {
                                                 selectedAttribute = attribute;
                                                 showCreateIndex = true;
                                                 showDropdown[index] = false;
                                             }}>
-                                            Create Index
-                                        </DropListItem>
+                                            Create index
+                                        </ActionMenu.Item.Button>
                                     {/if}
                                     {#if attribute.status !== 'processing'}
-                                        <DropListItem
-                                            icon="trash"
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconTrash}
                                             on:click={() => {
                                                 selectedAttribute = attribute;
                                                 showDelete = true;
                                                 showDropdown[index] = false;
+                                                trackEvent(Click.DatabaseAttributeDelete);
                                             }}>
                                             Delete
-                                        </DropListItem>
+                                        </ActionMenu.Item.Button>
                                     {/if}
-                                </svelte:fragment>
-                            </DropList>
-                        </TableCell>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </Table>
-        <div class="u-flex common-section u-main-space-between">
-            <p class="text">Total results: {$attributes.length}</p>
-        </div>
+                                </ActionMenu.Root>
+                            </Popover>
+                        {/if}
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
     {:else}
-        <Empty
-            allowCreate={$canWriteCollections}
-            single
-            target="attribute"
-            on:click={() => (showEmptyCreateDropdown = true)}>
-            <div class="u-text-center">
-                <Heading size="7" tag="h2">Create your first attribute to get started.</Heading>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Need a hand? Learn more in our documentation.
-                </p>
-            </div>
-            <div class="u-flex u-gap-16 u-main-center">
+        <Empty single target="attribute">
+            <svelte:fragment slot="actions">
                 <Button
                     external
                     href="https://appwrite.io/docs/products/databases/collections#attributes"
@@ -216,27 +217,29 @@
                     event="empty_documentation"
                     ariaLabel={`create {target}`}>Documentation</Button>
                 {#if $canWriteCollections}
-                    <CreateAttributeDropdown
-                        bind:showCreateDropdown={showEmptyCreateDropdown}
-                        bind:selectedOption
-                        bind:showCreate>
-                        <Button
-                            secondary
-                            event="create_attribute"
-                            on:click={() => {
-                                showEmptyCreateDropdown = !showEmptyCreateDropdown;
-                            }}>
+                    <CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
+                        <Button secondary event="create_attribute" on:click={toggle}>
                             Create attribute
                         </Button>
                     </CreateAttributeDropdown>
                 {/if}
-            </div>
+            </svelte:fragment>
         </Empty>
     {/if}
 </Container>
 
-<Create bind:showCreate bind:selectedOption />
-<Delete bind:showDelete {selectedAttribute} />
-<Edit bind:showEdit {selectedAttribute} />
-<CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
-<FailedModal bind:show={showFailed} title="Create attribute" header="Creation failed" {error} />
+{#if showCreate}
+    <Create bind:showCreate bind:selectedOption />
+{/if}
+{#if showDelete}
+    <Delete bind:showDelete {selectedAttribute} />
+{/if}
+{#if showEdit}
+    <Edit bind:showEdit {selectedAttribute} />
+{/if}
+{#if showCreateIndex}
+    <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
+{/if}
+{#if showFailed}
+    <FailedModal bind:show={showFailed} title="Create attribute" header="Creation failed" {error} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
index aa7c6d384..9959b7229 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
@@ -1,7 +1,6 @@
 <script context="module" lang="ts">
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
-    import { get } from 'svelte/store';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
 
     export async function submitBoolean(
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeBoolean>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createBooleanAttribute(
                 databaseId,
                 collectionId,
@@ -28,9 +26,8 @@
         data: Partial<Models.AttributeBoolean>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateBooleanAttribute(
                 databaseId,
                 collectionId,
@@ -43,7 +40,7 @@
 </script>
 
 <script lang="ts">
-    import { InputChoice, InputSelect } from '$lib/elements/forms';
+    import { InputSelect } from '$lib/elements/forms';
 
     export let editing = false;
     export let data: Partial<Models.AttributeBoolean> = {
@@ -53,6 +50,7 @@
     };
 
     import { createConservative } from '$lib/helpers/stores';
+    import { Selector } from '@appwrite.io/pink-svelte';
 
     let savedDefault = data.default;
 
@@ -89,10 +87,18 @@
         { label: 'False', value: false }
     ]}
     bind:value={data.default} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
index 4189730f4..201ef960f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
@@ -1,34 +1,41 @@
 <script lang="ts">
-    import { DropList, DropListItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
     import { attributeOptions, type Option } from './store';
-
-    export let showCreateDropdown = false;
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import CsvDisabled from '../csvDisabled.svelte';
+    import { isCsvImportInProgress } from '../store';
 
     export let selectedOption: Option['name'] = null;
     export let showCreate = false;
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable>
-    <slot>
-        <Button
-            on:click={() => (showCreateDropdown = !showCreateDropdown)}
-            event="create_attribute">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create attribute</span>
+{#if $isCsvImportInProgress}
+    <CsvDisabled>
+        <Button size="s" disabled>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create attribute
         </Button>
-    </slot>
-    <svelte:fragment slot="list">
-        {#each attributeOptions as attribute}
-            <DropListItem
-                icon={attribute.icon}
-                on:click={() => {
-                    selectedOption = attribute.name;
-                    showCreateDropdown = false;
-                    showCreate = true;
-                }}>
-                {attribute.name}
-            </DropListItem>
-        {/each}
-    </svelte:fragment>
-</DropList>
+    </CsvDisabled>
+{:else}
+    <Popover let:toggle padding="none" placement="bottom-start">
+        <slot {toggle}>
+            <Button on:click={toggle} event="create_attribute">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create attribute
+            </Button>
+        </slot>
+        <ActionMenu.Root slot="tooltip">
+            {#each attributeOptions as attribute}
+                <ActionMenu.Item.Button
+                    leadingIcon={attribute.icon}
+                    on:click={() => {
+                        selectedOption = attribute.name;
+                        showCreate = true;
+                    }}>
+                    {attribute.name}
+                </ActionMenu.Item.Button>
+            {/each}
+        </ActionMenu.Root>
+    </Popover>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
index c885c62f0..cb40c72c9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
@@ -1,8 +1,7 @@
 <script context="module" lang="ts">
     import type { Models } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
-    import { get } from 'svelte/store';
+    import { page } from '$app/state';
 
     export async function submitDatetime(
         databaseId: string,
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeDatetime>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createDatetimeAttribute(
                 databaseId,
                 collectionId,
@@ -29,9 +27,8 @@
         data: Partial<Models.AttributeDatetime>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateDatetimeAttribute(
                 databaseId,
                 collectionId,
@@ -44,12 +41,13 @@
 </script>
 
 <script lang="ts">
-    import { InputChoice, InputDateTime } from '$lib/elements/forms';
+    import { InputDateTime } from '$lib/elements/forms';
 
     export let editing = false;
     export let data: Partial<Models.AttributeDatetime>;
 
     import { createConservative } from '$lib/helpers/stores';
+    import { Selector } from '@appwrite.io/pink-svelte';
 
     let savedDefault = data.default;
 
@@ -81,10 +79,18 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index 60df3b265..0d4cc50e1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Modal } from '$lib/components';
-    import { Button, InputChoice } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { collection } from '../store';
     import type { Attributes } from '../store';
@@ -11,15 +10,17 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { isRelationship } from '../document-[document]/attributes/store';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let showDelete = false;
     export let selectedAttribute: Attributes;
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
     let checked = false;
+    let error: string;
     async function handleDelete() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.deleteAttribute(databaseId, $collection.$id, selectedAttribute.key);
             await invalidate(Dependencies.COLLECTION);
             showDelete = false;
@@ -29,14 +30,11 @@
             });
             trackEvent(Submit.AttributeDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${databaseId}/collection-${$page.params.collection}/attributes`
+                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${page.params.collection}/attributes`
             );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.AttributeDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.AttributeDelete);
         }
     }
 
@@ -44,24 +42,23 @@
         isRelationship(selectedAttribute) && selectedAttribute?.twoWay && !checked;
 </script>
 
-<Modal
+<Confirm
+    bind:open={showDelete}
+    onSubmit={handleDelete}
     title="Delete attribute"
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:show={showDelete}
-    onSubmit={handleDelete}>
-    <p class="text" data-private>
+    bind:error
+    disabled={isDeleteBtnDisabled}>
+    <p>
         Are you sure you want to delete <b data-private>{selectedAttribute?.key}</b> from
         <b data-private>{$collection?.name}</b>?
     </p>
     {#if isRelationship(selectedAttribute) && selectedAttribute?.twoWay}
         <div class="u-flex u-flex-vertical u-gap-24">
-            <p class="text">
+            <p>
                 This is a two way relationship and the corresponding relationship will also be
                 deleted.
             </p>
-            <p class="text"><b>This action is irreversible.</b></p>
+            <p><b>This action is irreversible.</b></p>
             <ul>
                 <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
                     Delete relationship between <b data-private>{selectedAttribute.key}</b> to
@@ -70,9 +67,4 @@
             </ul>
         </div>
     {/if}
-
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button disabled={isDeleteBtnDisabled} secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 4d406caa6..8b23bb11f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import deepEqual from 'deep-equal';
     import { addNotification } from '$lib/stores/notifications';
     import type { Attributes } from '../store';
@@ -14,8 +14,8 @@
     export let showEdit = false;
     export let selectedAttribute: Attributes;
 
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
     let originalKey = '';
 
     let error: string;
@@ -35,9 +35,9 @@
         try {
             await option.update(databaseId, collectionId, selectedAttribute, originalKey);
             await invalidate(Dependencies.COLLECTION);
-            if (!$page.url.pathname.includes('attributes')) {
+            if (!page.url.pathname.includes('attributes')) {
                 await goto(
-                    `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
                 );
             }
             addNotification({
@@ -53,6 +53,7 @@
     }
 
     $: onShow(showEdit);
+    $: title = `Update ${attributeOptions.find((v) => v.name === option.name)?.sentenceName ?? ''} attribute`;
 
     function onShow(show: boolean) {
         if (show) {
@@ -65,13 +66,7 @@
     }
 </script>
 
-<Modal
-    {error}
-    size="big"
-    bind:show={showEdit}
-    onSubmit={submit}
-    icon={option?.icon}
-    iconNotMobile={option?.type === 'relationship'}>
+<Modal {error} bind:show={showEdit} onSubmit={submit} {title}>
     <svelte:fragment slot="title">
         <div class="u-flex u-cross-center u-gap-8">
             {option?.name}
@@ -82,25 +77,25 @@
             {/if}
         </div>
     </svelte:fragment>
-    <FormList>
-        {#if selectedAttribute}
-            {#if selectedAttribute?.type !== 'relationship'}
-                <InputText
-                    id="key"
-                    label="Attribute Key"
-                    placeholder="Enter Key"
-                    bind:value={selectedAttribute.key}
-                    autofocus />
-            {/if}
-            {#if option}
-                <svelte:component
-                    this={option.component}
-                    editing
-                    bind:data={selectedAttribute}
-                    on:close={() => (option = null)} />
-            {/if}
+
+    {#if selectedAttribute}
+        {#if selectedAttribute?.type !== 'relationship'}
+            <InputText
+                id="key"
+                label="Attribute Key"
+                placeholder="Enter Key"
+                bind:value={selectedAttribute.key}
+                autofocus />
         {/if}
-    </FormList>
+        {#if option}
+            <svelte:component
+                this={option.component}
+                editing
+                bind:data={selectedAttribute}
+                onclose={() => (option = null)} />
+        {/if}
+    {/if}
+
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
         <Button submit disabled={deepEqual(currentAttr, selectedAttribute)}>Update</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
index b99d4ec1c..07faa118f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
@@ -1,7 +1,6 @@
 <script context="module" lang="ts">
     import type { Models } from '@appwrite.io/console';
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
 
     export async function submitEmail(
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeEmail>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createEmailAttribute(
                 databaseId,
                 collectionId,
@@ -29,9 +27,8 @@
         data: Partial<Models.AttributeEmail>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateEmailAttribute(
                 databaseId,
                 collectionId,
@@ -44,12 +41,14 @@
 </script>
 
 <script lang="ts">
-    import { createConservative } from '$lib/helpers/stores';
-    import { InputChoice, InputEmail } from '$lib/elements/forms';
+    import { InputEmail } from '$lib/elements/forms';
 
     export let editing = false;
     export let data: Partial<Models.AttributeEmail>;
 
+    import { createConservative } from '$lib/helpers/stores';
+    import { Selector } from '@appwrite.io/pink-svelte';
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -81,10 +80,18 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
index 32f5cc19a..2eed37bb1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeEnum>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createEnumAttribute(
                 databaseId,
                 collectionId,
@@ -30,9 +28,8 @@
         data: Partial<Models.AttributeEnum>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateEnumAttribute(
                 databaseId,
                 collectionId,
@@ -46,12 +43,15 @@
 </script>
 
 <script lang="ts">
-    import { createConservative } from '$lib/helpers/stores';
-    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
+    import { InputSelect, InputTags } from '$lib/elements/forms';
 
     export let editing = false;
     export let data: Partial<Models.AttributeEnum>;
 
+    import { createConservative } from '$lib/helpers/stores';
+    import { Icon, Selector, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -91,12 +91,17 @@
 </script>
 
 <InputTags
+    required
     id="elements"
     label="Elements"
     bind:tags={data.elements}
-    placeholder="Add elements here"
-    tooltip="Enum elements have a maximum length of 255 characters. This limit can not be exceeded."
-    required>
+    placeholder="Add elements here">
+    <Tooltip slot="info" maxWidth="15rem">
+        <Icon icon={IconInfo} size="s" />
+        <Typography.Caption variant="400" slot="tooltip">
+            Enum elements have a maximum length of 255 characters. This limit can not be exceeded.
+        </Typography.Caption>
+    </Tooltip>
 </InputTags>
 
 <InputSelect
@@ -106,10 +111,18 @@
     placeholder="Select a value"
     {options}
     bind:value={data.default} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
index 8cbd07c1f..2480a2d97 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeFloat>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createFloatAttribute(
                 databaseId,
                 collectionId,
@@ -31,9 +29,8 @@
         data: Partial<Models.AttributeFloat>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateFloatAttribute(
                 databaseId,
                 collectionId,
@@ -48,7 +45,7 @@
 </script>
 
 <script lang="ts">
-    import { InputNumber, InputChoice } from '$lib/elements/forms';
+    import { InputNumber } from '$lib/elements/forms';
 
     export let editing = false;
     export let data: Partial<Models.AttributeFloat> = {
@@ -60,6 +57,7 @@
     };
 
     import { createConservative } from '$lib/helpers/stores';
+    import { Layout, Selector } from '@appwrite.io/pink-svelte';
 
     let savedDefault = data.default;
 
@@ -85,28 +83,22 @@
     $: handleDefaultState($required || $array);
 </script>
 
-<div>
-    <ul class="u-flex u-gap-16">
-        <li class="u-flex-basis-50-percent">
-            <InputNumber
-                id="min"
-                label="Min"
-                placeholder="Enter size"
-                bind:value={data.min}
-                step="any"
-                required={editing} />
-        </li>
-        <li class="u-flex-basis-50-percent">
-            <InputNumber
-                id="max"
-                label="Max"
-                placeholder="Enter size"
-                bind:value={data.max}
-                step="any"
-                required={editing} />
-        </li>
-    </ul>
-</div>
+<Layout.Stack direction="row" gap="s">
+    <InputNumber
+        id="min"
+        label="Min"
+        placeholder="Enter size"
+        bind:value={data.min}
+        step="any"
+        required={editing} />
+    <InputNumber
+        id="max"
+        label="Max"
+        placeholder="Enter size"
+        bind:value={data.max}
+        step="any"
+        required={editing} />
+</Layout.Stack>
 <InputNumber
     id="default"
     label="Default value"
@@ -117,10 +109,18 @@
     disabled={data.required || data.array}
     nullable={!data.required && !data.array}
     step="any" />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
index f3c26ddcd..de97fccff 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeInteger>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createIntegerAttribute(
                 databaseId,
                 collectionId,
@@ -31,9 +29,8 @@
         data: Partial<Models.AttributeInteger>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateIntegerAttribute(
                 databaseId,
                 collectionId,
@@ -48,8 +45,7 @@
 </script>
 
 <script lang="ts">
-    import { createConservative } from '$lib/helpers/stores';
-    import { InputNumber, InputChoice } from '$lib/elements/forms';
+    import { InputNumber } from '$lib/elements/forms';
 
     export let editing = false;
 
@@ -61,6 +57,9 @@
         array: false
     };
 
+    import { createConservative } from '$lib/helpers/stores';
+    import { Layout, Selector } from '@appwrite.io/pink-svelte';
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -85,27 +84,20 @@
     $: handleDefaultState($required || $array);
 </script>
 
-<div>
-    <ul class="u-flex u-gap-16">
-        <li class="u-flex-basis-50-percent">
-            <InputNumber
-                id="min"
-                label="Min"
-                placeholder="Enter size"
-                bind:value={data.min}
-                required={editing} />
-        </li>
-
-        <li class="u-flex-basis-50-percent">
-            <InputNumber
-                id="max"
-                label="Max"
-                placeholder="Enter size"
-                bind:value={data.max}
-                required={editing} />
-        </li>
-    </ul>
-</div>
+<Layout.Stack direction="row" gap="s">
+    <InputNumber
+        id="min"
+        label="Min"
+        placeholder="Enter size"
+        bind:value={data.min}
+        required={editing} />
+    <InputNumber
+        id="max"
+        label="Max"
+        placeholder="Enter size"
+        bind:value={data.max}
+        required={editing} />
+</Layout.Stack>
 <InputNumber
     id="default"
     label="Default value"
@@ -115,10 +107,18 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
index ec2995298..a097bcbbd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeIp>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createIpAttribute(
                 databaseId,
                 collectionId,
@@ -28,9 +26,8 @@
         data: Partial<Models.AttributeIp>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateIpAttribute(
                 databaseId,
                 collectionId,
@@ -43,12 +40,13 @@
 </script>
 
 <script lang="ts">
-    import { InputText, InputChoice } from '$lib/elements/forms';
+    import { InputText } from '$lib/elements/forms';
 
     export let editing = false;
     export let data: Partial<Models.AttributeIp>;
 
     import { createConservative } from '$lib/helpers/stores';
+    import { Selector } from '@appwrite.io/pink-svelte';
 
     let savedDefault = data.default;
 
@@ -81,10 +79,18 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
index 16696e75b..e35847910 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { ID, type Models, Query, RelationMutate, RelationshipType } from '@appwrite.io/console';
 
@@ -17,9 +16,8 @@
             throw new Error(`Invalid on delete: ${data.onDelete}`);
         }
 
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createRelationshipAttribute(
                 databaseId,
                 collectionId,
@@ -42,9 +40,8 @@
             throw new Error(`Invalid on delete: ${data.onDelete}`);
         }
 
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateRelationshipAttribute(
                 databaseId,
                 collectionId,
@@ -56,22 +53,23 @@
 </script>
 
 <script lang="ts">
-    import { InputText, InputSelect, InputSelectSearch } from '$lib/elements/forms';
+    import { InputText, InputSelect } from '$lib/elements/forms';
     import { onMount } from 'svelte';
-    import { Box, LabelCard } from '$lib/components';
+    import { Box } from '$lib/components';
     import { collection } from '../store';
     import arrowOne from './arrow-one.svg';
     import arrowTwo from './arrow-two.svg';
     import { camelize } from '$lib/helpers/string';
-    import { SelectSearchItem } from '$lib/elements';
     import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { Card, Layout } from '@appwrite.io/pink-svelte';
+    import { IconArrowSmRight, IconSwitchHorizontal } from '@appwrite.io/pink-icons-svelte';
 
     // Props
     export let data: Models.AttributeRelationship;
     export let editing = false;
 
     // Constants
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
     const relationshipType = [
         { value: 'oneToOne', label: 'One to one' },
         { value: 'oneToMany', label: 'One to many' },
@@ -94,7 +92,7 @@
     async function getCollections(search: string = null) {
         const queries = search ? [Query.orderDesc('')] : [Query.limit(100)];
         return sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.listCollections(databaseId, queries, search);
     }
 
@@ -129,99 +127,55 @@
     }
 </script>
 
-<li>
-    <ul
-        class="grid-box"
-        style="--p-grid-item-size:16em; --p-grid-item-size-small-screens:16rem; --grid-gap: 0.5rem;">
-        <li>
-            <LabelCard
-                name="relationship"
-                bind:group={way}
-                value="one"
-                icon="arrow-sm-right"
-                disabled={editing}>
-                <svelte:fragment slot="title">One-way relationship</svelte:fragment>
-                One Relation attribute within this collection
-            </LabelCard>
-        </li>
-        <li>
-            <LabelCard
-                name="relationship"
-                bind:group={way}
-                value="two"
-                icon="switch-horizontal"
-                disabled={editing}>
-                <svelte:fragment slot="title">Two-way relationship</svelte:fragment>
-                One Relation attribute within this collection and another within the related collection
-            </LabelCard>
-        </li>
-    </ul>
-</li>
+<Layout.Stack direction="row" wrap="wrap">
+    <Card.Selector
+        title="One-way relationship"
+        bind:group={way}
+        name="one"
+        value="one"
+        icon={IconArrowSmRight}>
+        <p>One Relation attribute within this collection</p>
+    </Card.Selector>
+    <Card.Selector
+        title="Two-way relationship"
+        bind:group={way}
+        name="two"
+        value="two"
+        icon={IconSwitchHorizontal}>
+        <p>
+            One Relation attribute within this collection and another within the related collection
+        </p>
+    </Card.Selector>
+</Layout.Stack>
 
-<div>
-    <InputSelectSearch
-        id="related"
-        label="Related Collection"
-        name="collections"
-        bind:search
-        bind:value={data.relatedCollection}
-        required
-        interactiveOutput={!editing}
-        placeholder="Select a collection"
-        disabled={editing}
-        options={collections?.map((n) => ({ value: n.$id, label: n.$id, data: [n.name] })) ?? []}
-        on:select={updateKeyName}
-        let:option={o}>
-        <SelectSearchItem data={o.data}>
-            {o.label}
-        </SelectSearchItem>
-        <svelte:fragment slot="output" let:option={o}>
-            <output class="input-text" class:is-read-only={editing}>
-                <SelectSearchItem data={o.data}>
-                    {o.label}
-                </SelectSearchItem>
-            </output>
-        </svelte:fragment>
-    </InputSelectSearch>
-</div>
+<InputSelect
+    required
+    id="related"
+    label="Related collection"
+    placeholder="Select a collection"
+    bind:value={data.relatedCollection}
+    on:change={updateKeyName}
+    options={collections?.map((n) => ({ value: n.$id, label: `${n.name} (${n.$id})` })) ?? []} />
 
 {#if data?.relatedCollection}
-    <div>
-        <InputText
-            id="key"
-            label="Attribute Key"
-            placeholder="Enter Key"
-            bind:value={data.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: a-z, A-Z, 0-9, -, .</span>
-        </div>
-    </div>
+    <InputText
+        id="key"
+        label="Attribute key"
+        placeholder="Enter key"
+        bind:value={data.key}
+        autofocus
+        helper="Allowed characters: a-z, A-Z, 0-9, -, ."
+        required />
     {#if way === 'two'}
-        <div>
-            <InputText
-                id="keyRelated"
-                label="Attribute Key (related collection)"
-                placeholder="Enter Key"
-                bind:value={data.twoWayKey}
-                required
-                readonly={editing} />
-
-            <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: a-z, A-Z, 0-9, -, . Once created, attribute key cannot be
-                    adjusted to maintain data integrity.
-                </span>
-            </div>
-        </div>
+        <InputText
+            id="keyRelated"
+            label="Attribute key (related collection)"
+            placeholder="Enter key"
+            bind:value={data.twoWayKey}
+            required
+            helper="Allowed characters: a-z, A-Z, 0-9, -, . Once created, attribute key cannot be
+                adjusted to maintain data integrity."
+            readonly={editing} />
     {/if}
 
     <InputSelect
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
index 05fa8b81c..f6c02240e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -1,4 +1,4 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 import { writable } from 'svelte/store';
 import Boolean, { submitBoolean, updateBoolean } from './boolean.svelte';
 import Email, { submitEmail, updateEmail } from './email.svelte';
@@ -11,6 +11,18 @@ import Url, { submitUrl, updateUrl } from './url.svelte';
 import Datetime, { submitDatetime, updateDatetime } from './datetime.svelte';
 import type { Attributes } from '../store';
 import Relationship, { submitRelationship, updateRelationship } from './relationship.svelte';
+import {
+    IconCalendar,
+    IconHashtag,
+    IconLink,
+    IconLocationMarker,
+    IconMail,
+    IconRelationship,
+    IconText,
+    IconToggle,
+    IconViewList
+} from '@appwrite.io/pink-icons-svelte';
+import type { ComponentType } from 'svelte';
 
 export type Option = {
     name:
@@ -24,7 +36,8 @@ export type Option = {
         | 'URL'
         | 'Enum'
         | 'Relationship';
-    component: typeof SvelteComponent<unknown>;
+    sentenceName: string;
+    component: Component;
     type: 'string' | 'integer' | 'double' | 'boolean' | 'datetime' | 'relationship';
     create: (
         databaseId: string,
@@ -39,93 +52,103 @@ export type Option = {
         originalKey: string
     ) => Promise<void>;
     format?: 'email' | 'ip' | 'url' | 'enum';
-    icon: string;
+    icon: ComponentType;
 };
 
 export const attributeOptions: Option[] = [
     {
         name: 'String',
+        sentenceName: 'string',
         component: String,
         type: 'string',
         create: submitString,
         update: updateString,
-        icon: 'text'
+        icon: IconText
     },
     {
         name: 'Integer',
+        sentenceName: 'integer',
         component: Integer,
         type: 'integer',
         create: submitInteger,
         update: updateInteger,
-        icon: 'hashtag'
+        icon: IconHashtag
     },
     {
         name: 'Float',
+        sentenceName: 'float',
         component: Float,
         type: 'double',
         create: submitFloat,
         update: updateFloat,
-        icon: 'hashtag'
+        icon: IconHashtag
     },
     {
         name: 'Boolean',
+        sentenceName: 'boolean',
         component: Boolean,
         type: 'boolean',
         create: submitBoolean,
         update: updateBoolean,
-        icon: 'toggle'
+        icon: IconToggle
     },
     {
         name: 'Datetime',
+        sentenceName: 'datetime',
         component: Datetime,
         type: 'datetime',
         create: submitDatetime,
         update: updateDatetime,
-        icon: 'calendar'
+        icon: IconCalendar
     },
     {
         name: 'Email',
+        sentenceName: 'email',
         component: Email,
         type: 'string',
         format: 'email',
         create: submitEmail,
         update: updateEmail,
-        icon: 'mail'
+        icon: IconMail
     },
     {
         name: 'IP',
+        sentenceName: 'IP',
         component: Ip,
         type: 'string',
         format: 'ip',
         create: submitIp,
         update: updateIp,
-        icon: 'location-marker'
+        icon: IconLocationMarker
     },
     {
         name: 'URL',
+        sentenceName: 'URL',
         component: Url,
         type: 'string',
         format: 'url',
         create: submitUrl,
         update: updateUrl,
-        icon: 'link'
+        icon: IconLink
     },
     {
         name: 'Enum',
+        sentenceName: 'enum',
         component: Enum,
         type: 'string',
         format: 'enum',
         create: submitEnum,
         update: updateEnum,
-        icon: 'view-list'
+        icon: IconViewList
     },
     {
         name: 'Relationship',
+        sentenceName: 'relationship',
         component: Relationship,
         type: 'relationship',
         create: submitRelationship,
         update: updateRelationship,
-        icon: 'relationship'
+        icon: IconRelationship
     }
 ];
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 85decf022..8bfc5e18a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeString>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createStringAttribute(
                 databaseId,
                 collectionId,
@@ -29,9 +27,8 @@
         data: Partial<Models.AttributeString>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateStringAttribute(
                 databaseId,
                 collectionId,
@@ -45,8 +42,9 @@
 </script>
 
 <script lang="ts">
-    import { InputChoice, InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
+    import { Selector } from '@appwrite.io/pink-svelte';
     import { createConservative } from '$lib/helpers/stores';
+    import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
@@ -105,10 +103,18 @@
         maxlength={data.size}
         bind:value={data.default} />
 {/if}
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
index 75dd37f43..4c9d6991e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeUrl>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createUrlAttribute(
                 databaseId,
                 collectionId,
@@ -29,9 +27,8 @@
         data: Partial<Models.AttributeUrl>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateUrlAttribute(
                 databaseId,
                 collectionId,
@@ -44,12 +41,14 @@
 </script>
 
 <script lang="ts">
-    import { createConservative } from '$lib/helpers/stores';
-    import { InputChoice, InputURL } from '$lib/elements/forms';
+    import { InputURL } from '$lib/elements/forms';
 
     export let data: Partial<Models.AttributeUrl>;
     export let editing = false;
 
+    import { createConservative } from '$lib/helpers/stores';
+    import { Selector } from '@appwrite.io/pink-svelte';
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -81,10 +80,18 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
-</InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
-    array.
-</InputChoice>
+<Selector.Checkbox
+    size="s"
+    id="required"
+    label="Required"
+    bind:checked={data.required}
+    disabled={data.array}
+    description="Indicate whether this attribute is required" />
+<Selector.Checkbox
+    size="s"
+    id="array"
+    label="Array"
+    bind:checked={data.array}
+    disabled={data.required || editing}
+    description="Indicate whether this attribute should act as an array, with the default value set as an empty
+    array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
index c588496c3..2419b882b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { database } from '../store';
     import { collection } from './store';
@@ -10,15 +10,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases`,
             title: 'Databases'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}`,
             title: $database?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
             title: $collection?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
new file mode 100644
index 000000000..f41ee8067
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { Alert, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import AttributeForm from '../document-[document]/attributeForm.svelte';
+    import { Permissions } from '$lib/components/permissions';
+    import type { PageData } from './$types';
+    import type { Attributes } from '../store';
+    import { ID } from '@appwrite.io/console';
+
+    export let data: PageData;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    type CreateDocument = {
+        id?: string;
+        document: object;
+        permissions: string[];
+        attributes: Attributes[];
+    };
+
+    function createDocumentWritable() {
+        const availableAttributes = (data.collection.attributes as unknown as Attributes[]).filter(
+            (a) => a.status === 'available'
+        );
+        const initial = {
+            id: null,
+            document: availableAttributes.reduce((acc, attr) => {
+                acc[attr.key] = attr.array ? [] : null;
+
+                return acc;
+            }, {}),
+            permissions: [],
+            attributes: availableAttributes
+        };
+
+        const store = writable<CreateDocument>({ ...initial });
+
+        return store;
+    }
+
+    const createDocument = createDocumentWritable();
+
+    async function create() {
+        try {
+            const { $id } = await sdk
+                .forProject(page.params.region, page.params.project)
+                .databases.createDocument(
+                    page.params.database,
+                    page.params.collection,
+                    $createDocument.id ?? ID.unique(),
+                    $createDocument.document,
+                    $createDocument.permissions
+                );
+
+            addNotification({
+                message: 'Document has been created',
+                type: 'success'
+            });
+            trackEvent(Submit.DocumentCreate, {
+                customId: !!$createDocument.id
+            });
+            goto(
+                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/document-${$id}`
+            );
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.DocumentCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create document"
+    href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/`}
+    bind:showExitModal
+    column
+    columnSize="s"
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Data">
+                <AttributeForm
+                    bind:formValues={$createDocument.document}
+                    attributes={$createDocument.attributes}
+                    bind:customId={$createDocument.id} />
+            </Fieldset>
+
+            <Fieldset legend="Permissions">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    {#if data.collection.documentSecurity}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is enabled</svelte:fragment>
+                            Users will be able to access this document if they have been granted
+                            <b>either document or collection permissions</b>.
+                        </Alert.Inline>
+                        <Permissions bind:permissions={$createDocument.permissions} />
+                    {:else}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is disabled</svelte:fragment>
+                            If you want to assign document permissions, navigate to Collection settings
+                            and enable document security. Otherwise, only collection permissions will
+                            be used.
+                        </Alert.Inline>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index c9ee41fb3..54111eb10 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import { option, attributeOptions, type Option } from './attributes/store';
-    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { base } from '$app/paths';
     import type { Attributes } from './store';
@@ -13,8 +13,8 @@
 
     export let showCreate = false;
     export let selectedOption: Option['name'] = null;
-    const databaseId = $page.params.database;
-    $: collectionId = $page.params.collection;
+    const databaseId = page.params.database;
+    $: collectionId = page.params.collection;
 
     let key: string = null;
     let data: Partial<Attributes> = {
@@ -28,20 +28,13 @@
         try {
             await $option.create(databaseId, collectionId, key, data);
 
-            let selectedColumns = preferences.getCustomCollectionColumns(
-                $page.params.project,
-                collectionId
-            );
+            let selectedColumns = preferences.getCustomCollectionColumns(collectionId);
             selectedColumns.push(key ?? data?.key);
-            preferences.setCustomCollectionColumns(
-                $page.params.project,
-                $page.route,
-                selectedColumns
-            );
+            preferences.setCustomCollectionColumns(selectedColumns);
             await invalidate(Dependencies.COLLECTION);
-            if (!$page.url.pathname.includes('attributes')) {
+            if (!page.url.pathname.includes('attributes')) {
                 await goto(
-                    `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
                 );
             }
             addNotification({
@@ -71,55 +64,24 @@
             default: null
         };
     }
+
+    $: title = `Create ${attributeOptions.find((option) => option.name === selectedOption)?.sentenceName ?? ''} attribute`;
 </script>
 
-<Modal
-    {error}
-    size="big"
-    bind:show={showCreate}
-    onSubmit={submit}
-    icon={$option?.icon}
-    iconNotMobile={selectedOption === 'Relationship'}>
-    <svelte:fragment slot="title">
-        {#if selectedOption === 'Relationship'}
-            <span class="u-flex u-gap-16 u-cross-center">
-                {selectedOption}
-                <div class="tag eyebrow-heading-3">
-                    <span class="text u-x-small">Experimental</span>
-                </div>
-            </span>
-        {:else}
-            {selectedOption}
-        {/if}
-    </svelte:fragment>
-    <FormList>
-        {#if selectedOption !== 'Relationship'}
-            <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>
-        {/if}
-        {#if selectedOption}
-            <svelte:component
-                this={$option.component}
-                bind:data
-                on:close={() => ($option = null)} />
-        {/if}
-    </FormList>
+<Modal {error} bind:show={showCreate} onSubmit={submit} {title}>
+    {#if selectedOption !== 'Relationship'}
+        <InputText
+            id="key"
+            label="Attribute key"
+            placeholder="Enter key"
+            bind:value={key}
+            autofocus
+            helper="Allowed characters: alphanumeric, hyphen, non-leading underscore, period."
+            required />
+    {/if}
+    {#if selectedOption}
+        <svelte:component this={$option.component} bind:data onclose={() => ($option = null)} />
+    {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit disabled={!selectedOption}>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
deleted file mode 100644
index f2e4cf318..000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Dependencies } from '$lib/constants';
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import { ID } from '@appwrite.io/console';
-    import { onDestroy, onMount } from 'svelte';
-    import { attributes } from './store';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import { createDocument } from './wizard/store';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-
-    onMount(initializeDocument);
-
-    function initializeDocument() {
-        $createDocument.attributes = $attributes.filter((a) => a.status === 'available');
-        $attributes.forEach((attr) => {
-            if (attr.array) {
-                $createDocument.document[attr.key] = [];
-            } else {
-                $createDocument.document[attr.key] = null;
-            }
-        });
-    }
-
-    async function create() {
-        try {
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .databases.createDocument(
-                    databaseId,
-                    collectionId,
-                    $createDocument.id ?? ID.unique(),
-                    $createDocument.document,
-                    $createDocument.permissions
-                );
-            await invalidate(Dependencies.DOCUMENTS);
-
-            addNotification({
-                message: 'Document has been created',
-                type: 'success'
-            });
-            trackEvent(Submit.DocumentCreate, {
-                customId: !!$createDocument.id
-            });
-
-            createDocument.reset();
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.DocumentCreate);
-        }
-    }
-
-    onDestroy(() => {
-        $createDocument.id = null;
-        $createDocument.document = {};
-        $createDocument.attributes = [];
-        $createDocument.permissions = [];
-    });
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Data',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Permissions',
-        component: Step2,
-        optional: true
-    });
-</script>
-
-<Wizard title="Create document" steps={stepsComponents} on:finish={create} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte
new file mode 100644
index 000000000..1ebac3183
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { isCsvImportInProgress } from './store';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
+</script>
+
+<Tooltip disabled={!$isCsvImportInProgress} maxWidth="12rem">
+    <div>
+        <slot />
+    </div>
+
+    <div slot="tooltip">This action is disabled during import.</div>
+</Tooltip>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
index deae81fbc..103f9a8b2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import { Container } from '$lib/layout';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
-    import { CardGrid, Heading } from '$lib/components';
-    import { page } from '$app/stores';
+    import { CardGrid } from '$lib/components';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { writable } from 'svelte/store';
     import type { Models } from '@appwrite.io/console';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { doc } from './store';
     import { collection, type Attributes } from '../store';
-    import { Container } from '$lib/layout';
     import AttributeItem from './attributeItem.svelte';
-    import { symmetricDifference } from '$lib/helpers/array';
     import { isRelationship, isRelationshipToMany } from './attributes/store';
     import { deepClone } from '$lib/helpers/object';
 
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-    const documentId = $page.params.document;
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
+    const documentId = page.params.document;
     const editing = true;
 
     function initWork() {
@@ -49,7 +49,7 @@
     async function updateData() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.updateDocument(
                     databaseId,
                     collectionId,
@@ -121,7 +121,8 @@
         {#each $collection.attributes as attribute}
             {@const label = attribute.key}
             <CardGrid>
-                <Heading tag="h6" size="7">{label}</Heading>
+                <svelte:fragment slot="title">{label}</svelte:fragment>
+
                 <svelte:fragment slot="aside">
                     <AttributeItem {attribute} bind:formValues={$work} {label} {editing} />
                 </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts
index 070f18127..6c59cf14f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
index d8b6f4354..aa49a0441 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
     import CustomId from '$lib/components/customId.svelte';
-    import Pill from '$lib/elements/pill.svelte';
+    import { Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
     import type { Attributes } from '../store';
     import AttributeItem from './attributeItem.svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
 
     export let attributes: Attributes[] = [];
     export let formValues: object = {};
     export let customId: string | null | undefined = undefined;
-    export let gap: '16' | '24' | '32' = '32';
 
     let showCustomId = false;
 </script>
 
 {#if attributes.length}
-    <ul class={`form-list u-gap-${gap}`}>
+    <Layout.Stack>
         {#each attributes as attribute}
             {@const label = attribute.key}
             <AttributeItem {attribute} bind:formValues {label} />
@@ -21,16 +21,15 @@
 
         {#if customId !== undefined}
             {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Document ID
-                        </span>
-                    </Pill>
-                </div>
+                <span>
+                    <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                        <Icon icon={IconPencil} slot="start" size="s" />
+                        Document ID
+                    </Tag>
+                </span>
             {:else}
                 <CustomId autofocus bind:show={showCustomId} name="Document" bind:id={customId} />
             {/if}
         {/if}
-    </ul>
+    </Layout.Stack>
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
index 75d7d054b..61b52948e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-    import { Button, FormList } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { capitalize } from '$lib/helpers/string';
-    import type { Attributes } from '../store';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import Attribute from './attribute.svelte';
+    import type { Attributes } from '../store';
 
     export let attribute: Attributes;
     export let formValues: object = {};
@@ -45,55 +47,47 @@
 
 {#if attribute.array}
     {#if formValues[attribute.key]?.length === 0}
-        <div class="u-flex u-cross-center u-main-space-between">
-            <span class="label u-margin-0">
-                {label}
-                <span class="optional u-margin-inline-start-8">
+        <Layout.Stack direction="row" alignContent="space-between">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                     {getAttributeType(attribute)}
-                </span>
-            </span>
-            <Button text noMargin on:click={() => addArrayItem(attribute.key)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add item</span>
+                </Typography.Text>
+            </Layout.Stack>
+            <Button secondary on:click={() => addArrayItem(attribute.key)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add item
             </Button>
-        </div>
+        </Layout.Stack>
     {:else}
-        <ul class="u-grid u-gap-4">
+        <Layout.Stack>
             {#each [...formValues[attribute.key].keys()] as index}
-                <li class="form-item is-multiple u-gap-8">
-                    <div class="form-item-part u-stretch">
-                        <Attribute
-                            {attribute}
-                            id={`${attribute.key}-${index}`}
-                            optionalText={index === 0 ? getAttributeType(attribute) : undefined}
-                            label={index === 0 ? label : ''}
-                            bind:value={formValues[attribute.key][index]} />
-                    </div>
-                    <div class="form-item-part u-cross-child-end">
-                        <Button
-                            noMargin
-                            text
-                            round
-                            on:click={() => removeArrayItem(attribute.key, index)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </div>
-                </li>
+                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                    <Attribute
+                        {attribute}
+                        id={`${attribute.key}-${index}`}
+                        optionalText={index === 0 ? getAttributeType(attribute) : undefined}
+                        label={index === 0 ? label : ''}
+                        bind:value={formValues[attribute.key][index]} />
+                    <Button text icon on:click={() => removeArrayItem(attribute.key, index)}>
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </Button>
+                </Layout.Stack>
             {/each}
-            <Button text noMargin on:click={() => addArrayItem(attribute.key)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text"> Add item</span>
-            </Button>
-        </ul>
+            <div>
+                <Button secondary on:click={() => addArrayItem(attribute.key)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add item
+                </Button>
+            </div>
+        </Layout.Stack>
     {/if}
 {:else}
-    <FormList>
-        <Attribute
-            {editing}
-            {attribute}
-            {label}
-            optionalText={getAttributeType(attribute)}
-            id={attribute.key}
-            bind:value={formValues[attribute.key]} />
-    </FormList>
+    <Attribute
+        {editing}
+        {attribute}
+        {label}
+        optionalText={getAttributeType(attribute)}
+        id={attribute.key}
+        bind:value={formValues[attribute.key]} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/boolean.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/boolean.svelte
index fb18a51fc..a25e6f4c1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/boolean.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/boolean.svelte
@@ -13,7 +13,6 @@
     {id}
     {label}
     {optionalText}
-    showLabel={!!label?.length}
     placeholder="Select a value"
     required={attribute.required}
     options={[
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
index 258241b6b..d1b3e24b5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
@@ -6,14 +6,11 @@
     export let label: string;
     export let value: string;
     export let attribute: Models.AttributeDatetime;
-    export let optionalText: string | undefined = undefined;
 </script>
 
 <InputDateTime
     {id}
     {label}
-    {optionalText}
-    showLabel={!!label?.length}
     required={attribute.required}
     nullable={!attribute.required}
     bind:value />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte
index 8d77c6a43..cf93d4b5f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte
@@ -5,15 +5,15 @@
     export let id: string;
     export let label: string;
     export let value: string | null;
-    export let optionalText: string | undefined = undefined;
     export let attribute: Models.AttributeUrl;
+
+    $: nullable = attribute.required ? false : !value;
 </script>
 
 <InputEmail
     {id}
     {label}
-    {optionalText}
+    {nullable}
     placeholder="Enter URL"
-    showLabel={!!label?.length}
     required={attribute.required}
     bind:value />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/enum.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/enum.svelte
index 9f88aaa57..fc4c053b9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/enum.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/enum.svelte
@@ -29,5 +29,4 @@
     {label}
     {optionalText}
     required={attribute.required}
-    placeholder="Select a value"
-    showLabel={!!label?.length} />
+    placeholder="Select a value" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/integer.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/integer.svelte
index 22360ff6f..00ee6a2af 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/integer.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/integer.svelte
@@ -6,14 +6,14 @@
     export let label: string;
     export let value: number;
     export let attribute: Models.AttributeInteger;
-    export let optionalText: string | undefined = undefined;
+
+    $: nullable = attribute.required ? false : !value;
 </script>
 
 <InputNumber
     {id}
     {label}
-    {optionalText}
-    nullable
+    {nullable}
     required={attribute.required}
     min={attribute.min}
     max={attribute.max}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
index 8bfc68926..af18757b5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { PaginationInline } from '$lib/components';
-    import { SelectSearchItem } from '$lib/elements';
-    import { Button, InputSelectSearch, Label } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { doc } from '../store';
     import { isRelationshipToMany } from './store';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
 
     export let id: string;
     export let label: string;
@@ -18,7 +20,7 @@
     export let optionalText: string | undefined = undefined;
     export let editing = false;
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     let documentList: Models.DocumentList<Models.Document>;
     let search: string = null;
@@ -59,7 +61,7 @@
     async function getDocuments(search: string = null) {
         if (search) {
             const documents = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.listDocuments(databaseId, attribute.relatedCollection, [
                     Query.startsWith('$id', search),
                     Query.orderDesc('')
@@ -67,7 +69,7 @@
             return documents;
         } else {
             const documents = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.listDocuments(databaseId, attribute.relatedCollection);
             return documents;
         }
@@ -96,181 +98,99 @@
 
 {#if isRelationshipToMany(attribute)}
     <div class="u-width-full-line">
-        <div class="u-flex u-cross-center u-main-space-between">
-            <div>
-                <Label required={attribute.required} {optionalText} for={id}>
-                    {label}
-                </Label>
-            </div>
+        <Layout.Stack direction="row" alignContent="space-between">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                    {optionalText}
+                </Typography.Text>
+            </Layout.Stack>
             {#if editing || total === 0}
                 <Button
-                    text
-                    noMargin
+                    secondary
                     on:click={() => {
                         showInput = true;
                     }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add item</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add item
                 </Button>
             {/if}
-        </div>
-
+        </Layout.Stack>
         <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
             {#if !editing && relatedList?.length}
                 {#each relatedList as item, i}
-                    <li class="u-flex u-gap-16">
-                        <InputSelectSearch
-                            {id}
-                            label="Rel"
-                            showLabel={false}
-                            required
-                            bind:search
-                            bind:value={item}
-                            {options}
-                            let:option={o}>
-                            <SelectSearchItem data={o.data}>
-                                {o.label}
-                            </SelectSearchItem>
-                            <svelte:fragment slot="output" let:option={o}>
-                                <output class="input-text is-read-only">
-                                    <SelectSearchItem data={o.data}>
-                                        {o.label}
-                                    </SelectSearchItem>
-                                </output>
-                            </svelte:fragment>
-                        </InputSelectSearch>
-                        <Button
-                            text
-                            noMargin
-                            ariaLabel={`Delete item ${i}`}
-                            on:click={() => {
-                                relatedList.splice(i, 1);
-                                relatedList = relatedList;
-                                value = relatedList;
-                            }}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </li>
+                    <InputSelect {id} required bind:value={item} {options} />
+                    <Button
+                        extraCompact
+                        ariaLabel={`Delete item ${i}`}
+                        on:click={() => {
+                            relatedList.splice(i, 1);
+                            relatedList = relatedList;
+                            value = relatedList;
+                        }}>
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </Button>
                 {/each}
             {/if}
 
             {#if showInput}
-                <li class="u-flex u-gap-16">
-                    <InputSelectSearch
-                        {id}
-                        label="Rel"
-                        showLabel={false}
-                        required
-                        placeholder={`Select ${attribute.key}`}
-                        bind:search
-                        bind:value={relatedList[total]}
-                        options={options?.filter((n) => !relatedList.includes(n.value))}
-                        on:select={() => {
-                            value = relatedList;
-                            showInput = false;
-                        }}
-                        let:option={o}>
-                        <SelectSearchItem data={o.data}>
-                            {o.label}
-                        </SelectSearchItem>
-                        <svelte:fragment slot="output" let:option={o}>
-                            <output class="input-text is-read-only">
-                                <SelectSearchItem data={o.data}>
-                                    {o.label}
-                                </SelectSearchItem>
-                            </output>
-                        </svelte:fragment>
-                    </InputSelectSearch>
-                    <Button
-                        text
-                        noMargin
-                        ariaLabel={`Hide input`}
-                        on:click={() => (showInput = false)}>
-                        <span class="icon-x" aria-hidden="true" />
-                    </Button>
-                </li>
+                <InputSelect
+                    {id}
+                    label="Rel"
+                    required
+                    placeholder={`Select ${attribute.key}`}
+                    bind:value={relatedList[total]}
+                    options={options?.filter((n) => !relatedList.includes(n.value))}
+                    on:change={() => {
+                        value = relatedList;
+                        showInput = false;
+                    }} />
+                <Button extraCompact ariaLabel={`Hide input`} on:click={() => (showInput = false)}>
+                    <span class="icon-x" aria-hidden="true"></span>
+                </Button>
             {/if}
             {#if paginatedItems && editing}
                 {#each paginatedItems as item, i}
-                    <li class="u-flex u-gap-16">
-                        <InputSelectSearch
-                            {id}
-                            label="Rel"
-                            showLabel={false}
-                            required
-                            bind:search
-                            bind:value={item}
-                            {options}
-                            let:option={o}>
-                            <SelectSearchItem data={o.data}>
-                                {o.label}
-                            </SelectSearchItem>
-                            <svelte:fragment slot="output" let:option={o}>
-                                <output class="input-text is-read-only">
-                                    <SelectSearchItem data={o.data}>
-                                        {o.label}
-                                    </SelectSearchItem>
-                                </output>
-                            </svelte:fragment>
-                        </InputSelectSearch>
-                        <Button
-                            text
-                            noMargin
-                            ariaLabel={`Delete item ${i}`}
-                            on:click={() => {
-                                relatedList.splice(i, 1);
-                                relatedList = relatedList;
-                                value = relatedList;
-                            }}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </li>
+                    <InputSelect {id} label="Rel" required bind:value={item} {options} />
+                    <Button
+                        extraCompact
+                        ariaLabel={`Delete item ${i}`}
+                        on:click={() => {
+                            relatedList.splice(i, 1);
+                            relatedList = relatedList;
+                            value = relatedList;
+                        }}>
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </Button>
                 {/each}
             {/if}
         </ul>
         {#if editing}
             <div class="u-flex u-margin-block-start-32 u-main-space-between">
                 <p class="text">Total results: {total}</p>
-                <PaginationInline {limit} bind:offset sum={total} hidePages />
+                <PaginationInline {limit} bind:offset {total} hidePages />
             </div>
         {/if}
+
         {#if total > 0 && !editing}
             <Button
-                text
-                noMargin
+                extraCompact
                 disabled={showInput}
                 on:click={() => {
                     showInput = true;
                 }}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add item</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add item
             </Button>
         {/if}
     </div>
 {:else}
-    <InputSelectSearch
+    <InputSelect
         {id}
         {label}
-        {optionalText}
-        required={attribute.required}
-        name="documents"
-        placeholder={`Select ${attribute.key}`}
-        interactiveOutput
-        bind:search
-        bind:value={singleRel}
         {options}
-        let:option={o}
-        on:reset={() => (value = null)}
-        on:select={() => (value = singleRel)}>
-        <SelectSearchItem data={o.data}>
-            {o.label}
-        </SelectSearchItem>
-        <svelte:fragment slot="output" let:option={o}>
-            <output class="input-text">
-                <SelectSearchItem data={o.data}>
-                    {o.label}
-                </SelectSearchItem>
-            </output>
-        </svelte:fragment>
-    </InputSelectSearch>
+        required={attribute.required}
+        placeholder={`Select ${attribute.key}`}
+        bind:value={singleRel}
+        on:change={() => (value = singleRel)} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
index d5c32fa59..94b18799e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
@@ -6,16 +6,16 @@
     export let label: string;
     export let value: string;
     export let attribute: Models.AttributeString;
-    export let optionalText: string | undefined = undefined;
+
+    $: nullable = attribute.required ? false : !value;
 </script>
 
 {#if attribute.size >= 50}
     <InputTextarea
         {id}
         {label}
-        nullable={!attribute.required}
+        {nullable}
         placeholder="Enter string"
-        showLabel={!!label?.length}
         required={attribute.required}
         maxlength={attribute.size}
         bind:value />
@@ -23,10 +23,8 @@
     <InputText
         {id}
         {label}
-        {optionalText}
-        nullable={!attribute.required}
+        {nullable}
         placeholder="Enter string"
-        showLabel={!!label?.length}
         required={attribute.required}
         maxlength={attribute.size}
         bind:value />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/url.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/url.svelte
index b745348d9..d8c74bca7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/url.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/url.svelte
@@ -5,16 +5,15 @@
     export let id: string;
     export let label: string;
     export let value: string | null;
-    export let optionalText: string | undefined = undefined;
     export let attribute: Models.AttributeUrl;
+
+    $: nullable = attribute.required ? false : !value;
 </script>
 
 <InputURL
     {id}
     {label}
-    {optionalText}
+    {nullable}
     placeholder="Enter URL"
-    showLabel={!!label?.length}
-    nullable={!attribute.required}
     required={attribute.required}
     bind:value />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
index 88418f11f..3523787c3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { database } from '../../store';
     import { collection } from '../store';
@@ -11,15 +11,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}`,
             title: $database?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
             title: $collection?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`,
             title: $doc?.$id
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
index 1e7025591..0fcf83a43 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
@@ -1,38 +1,26 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Alert, Modal, Trim } from '$lib/components';
-    import { Button, InputChoice } from '$lib/elements/forms';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
+    import { page } from '$app/state';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Confirm, Trim } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Alert, Selector, Table } from '@appwrite.io/pink-svelte';
     import { attributes, collection } from '../store';
     import { isRelationship, isRelationshipToMany } from './attributes/store';
     import type { Models } from '@appwrite.io/console';
 
     export let showDelete = false;
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
     let checked = false;
 
     const handleDelete = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .databases.deleteDocument(
-                    databaseId,
-                    $page.params.collection,
-                    $page.params.document
-                );
+                .forProject(page.params.region, page.params.project)
+                .databases.deleteDocument(databaseId, page.params.collection, page.params.document);
             showDelete = false;
             addNotification({
                 type: 'success',
@@ -40,7 +28,7 @@
             });
             trackEvent(Submit.DocumentDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}`
+                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}`
             );
         } catch (error) {
             addNotification({
@@ -71,13 +59,7 @@
     ) as Models.AttributeRelationship[];
 </script>
 
-<Modal
-    title="Delete document"
-    icon="exclamation"
-    state="warning"
-    onSubmit={handleDelete}
-    bind:show={showDelete}
-    headerDivider={false}>
+<Confirm title="Delete document" onSubmit={handleDelete} bind:open={showDelete}>
     <p data-private>
         Are you sure you want to delete <b
             >the document from <span data-private>{$collection.name}</span></b
@@ -86,48 +68,51 @@
 
     {#if relAttributes?.length}
         <p class="text">This document contains the following relationships:</p>
-        <TableScroll noMargin>
-            <TableHeader>
-                <TableCellHead width={70}>Relation</TableCellHead>
-                <TableCellHead width={70}>Setting</TableCellHead>
-                <TableCellHead width={200} />
-            </TableHeader>
-            <TableBody>
-                {#each relAttributes as attr}
-                    <TableRow>
-                        <TableCell title="relation">
-                            <span class="u-flex u-cross-center u-gap-8">
-                                {#if attr.twoWay}
-                                    <span class="icon-switch-horizontal" />
-                                {:else}
-                                    <span class="icon-arrow-sm-right" />
-                                {/if}
-                                <Trim>{attr.key}</Trim>
-                            </span>
-                        </TableCell>
-                        <TableCellText title="Settings">
-                            {attr.onDelete}
-                        </TableCellText>
-                        <TableCellText title="description">
-                            {Deletion[attr.onDelete]}
-                        </TableCellText>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </TableScroll>
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'relations', width: 70 },
+                { id: 'setting', width: 70 },
+                { id: 'desc' }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="relations" {root}>Relation</Table.Header.Cell>
+                <Table.Header.Cell column="setting" {root}>Setting</Table.Header.Cell>
+                <Table.Header.Cell column="desc" {root} />
+            </svelte:fragment>
+            {#each relAttributes as attr}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="relations" {root}>
+                        <span class="u-flex u-cross-center u-gap-8">
+                            {#if attr.twoWay}
+                                <span class="icon-switch-horizontal"></span>
+                            {:else}
+                                <span class="icon-arrow-sm-right"></span>
+                            {/if}
+                            <Trim>{attr.key}</Trim>
+                        </span>
+                    </Table.Cell>
+                    <Table.Cell column="setting" {root}>
+                        {attr.onDelete}
+                    </Table.Cell>
+                    <Table.Cell column="desc" {root}>
+                        {Deletion[attr.onDelete]}
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Alert>To change the selection edit the relationship settings.</Alert>
-
-            <ul>
-                <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
-                    Delete document from <span data-private>{$collection.name}</span>
-                </InputChoice>
-            </ul>
+            <Alert.Inline
+                title="To change these deletion behaviors edit the relationship settings." />
+            <Selector.Checkbox
+                id="delete"
+                label={`Delete document from ${$collection.name}`}
+                bind:checked />
         </div>
     {/if}
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit disabled={relAttributes?.length && !checked}>Delete</Button>
+        <Button danger submit disabled={relAttributes?.length && !checked}>Delete</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
index 7f5799eee..fd3865bf8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { collection } from '../store';
     import { doc } from './store';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { writable } from 'svelte/store';
@@ -16,9 +16,9 @@
 
     let disableUpdate = true;
     let currentDoc: string;
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-    const documentId = $page.params.document;
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
+    const documentId = page.params.document;
 
     const work = writable(
         Object.keys($doc)
@@ -53,7 +53,7 @@
     async function updateData() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.updateDocument(
                     databaseId,
                     collectionId,
@@ -81,10 +81,10 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Data</Heading>
-    <p>Update document data based on the attributes created earlier.</p>
+    <svelte:fragment slot="title">Data</svelte:fragment>
+    Update document data based on the attributes created earlier.
     <svelte:fragment slot="aside">
-        <AttributeForm attributes={$collection.attributes} bind:formValues={$work} gap="16" />
+        <AttributeForm attributes={$collection.attributes} bind:formValues={$work} />
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
index 8c4754d81..d97751b9f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     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 = `${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collectionId}/document-${documentId}`;
+    const projectId = page.params.project;
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
+    const documentId = page.params.document;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/document-${documentId}`;
     const tabs = [
         {
             href: path,
@@ -35,7 +35,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
+            href={`${base}/project-${page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
             {$doc?.$id}
         </CoverTitle>
         <Id value={$doc?.$id} event="document">Document ID</Id>
@@ -45,7 +45,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte
index abccfb94f..fd24eb648 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading, Alert } from '$lib/components';
+    import { CardGrid, BoxAvatar, Alert } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
@@ -58,7 +58,8 @@
 
 <Container>
     <CardGrid>
-        <Heading tag="h2" size="7">Metadata</Heading>
+        <svelte:fragment slot="title">Metadata</svelte:fragment>
+
         <svelte:fragment slot="aside">
             <div>
                 <p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
@@ -67,7 +68,8 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Permissions</Heading>
+        <svelte:fragment slot="title">Permissions</svelte:fragment>
+
         <p>
             A user requires appropriate permissions at either the <b>collection level</b> or
             <b>document level</b> to access a document. If no permissions are configured, no user
@@ -116,8 +118,8 @@
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid danger>
-        <Heading tag="h6" size="7">Delete document</Heading>
+    <CardGrid>
+        <svelte:fragment slot="title">Delete document</svelte:fragment>
         <p>
             The document will be permanently deleted, including all the data within it. This action
             is irreversible.
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
index cf9f0f37e..8c67e481f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
@@ -8,13 +8,14 @@
     export let header: string;
 </script>
 
-<Modal {title} headerDivider={false} bind:show size="big">
+<Modal {title} bind:show>
     <div class="box u-flex-vertical u-gap-24">
         <p class="u-inline-flex u-cross-center u-gap-8">
             <span
                 class="icon-exclamation-circle u-font-size-20"
                 aria-hidden="true"
-                style="color:hsl(var(--color-danger-100));" />{header}
+                style="color:hsl(var(--color-danger-100));"></span
+            >{header}
         </p>
         <p>{error}</p>
     </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
index 86de2dff0..7e9ffffcf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -1,73 +1,85 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteCollections } from '$lib/stores/roles';
     import { collection } from './store';
+    import { isTabletViewport } from '$lib/stores/viewport';
 
-    $: projectId = $page.params.project;
-    $: databaseId = $page.params.database;
-    $: collectionId = $page.params.collection;
-    $: path = `${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
-    $: tabs = [
-        {
-            href: path,
-            title: 'Documents',
-            event: 'documents',
-            hasChildren: true
-        },
-        {
-            href: `${path}/attributes`,
-            title: 'Attributes',
-            event: 'attributes'
-        },
-        {
-            href: `${path}/indexes`,
-            title: 'Indexes',
-            event: 'indexes'
-        },
-        {
-            href: `${path}/activity`,
-            title: 'Activity',
-            event: 'activity',
-            hasChildren: true
-        },
-        {
-            href: `${path}/usage`,
-            title: 'Usage',
-            event: 'usage',
-            hasChildren: true
-        },
-        {
-            href: `${path}/settings`,
-            title: 'Settings',
-            event: 'settings',
-            disabled: !$canWriteCollections
-        }
-    ].filter((tab) => !tab.disabled);
+    let databaseId = $derived.by(() => {
+        return page.params.database;
+    });
+    let collectionId = $derived.by(() => {
+        return page.params.collection;
+    });
+
+    let path = $derived.by(() => {
+        return `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}`;
+    });
+
+    let tabs = $derived.by(() => {
+        return [
+            {
+                href: path,
+                title: 'Documents',
+                event: 'documents',
+                hasChildren: true
+            },
+            {
+                href: `${path}/attributes`,
+                title: 'Attributes',
+                event: 'attributes'
+            },
+            {
+                href: `${path}/indexes`,
+                title: 'Indexes',
+                event: 'indexes'
+            },
+            {
+                href: `${path}/activity`,
+                title: 'Activity',
+                event: 'activity',
+                hasChildren: true
+            },
+            {
+                href: `${path}/usage`,
+                title: 'Usage',
+                event: 'usage',
+                hasChildren: true
+            },
+            {
+                href: `${path}/settings`,
+                title: 'Settings',
+                event: 'settings',
+                disabled: !$canWriteCollections
+            }
+        ].filter((tab) => !tab.disabled);
+    });
 </script>
 
-<Cover>
-    <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}`}>
-            {$collection?.name}
-        </CoverTitle>
-        {#key $collection?.$id}
-            <Id value={$collection?.$id}>{$collection?.$id}</Id>
-        {/key}
-    </svelte:fragment>
+<div style:margin-top={$isTabletViewport ? '48px' : 0}>
+    <Cover>
+        <svelte:fragment slot="header">
+            <CoverTitle
+                href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
+                {$collection?.name}
+            </CoverTitle>
+            {#key $collection?.$id}
+                <Id value={$collection?.$id}>{$collection?.$id}</Id>
+            {/key}
+        </svelte:fragment>
 
-    <Tabs>
-        {#each tabs as tab}
-            <Tab
-                href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
-                event={tab.event}>
-                {tab.title}
-            </Tab>
-        {/each}
-    </Tabs>
-</Cover>
+        <Tabs>
+            {#each tabs as tab}
+                <Tab
+                    href={tab.href}
+                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                    event={tab.event}>
+                    {tab.title}
+                </Tab>
+            {/each}
+        </Tabs>
+    </Cover>
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 9eab3f1a3..c04b73365 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -1,17 +1,7 @@
 <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 { Empty } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { collection, indexes } from '../store';
+    import { collection } from '../store';
     import Delete from './deleteIndex.svelte';
     import Create from './createIndex.svelte';
     import Overview from './overviewIndex.svelte';
@@ -22,115 +12,137 @@
     import type { Option } from '../attributes/store';
     import FailedModal from '../failedModal.svelte';
     import { canWriteCollections } from '$lib/stores/roles';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Link,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconEye,
+        IconPlus,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import type { ComponentProps } from 'svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+
+    export let data;
 
-    let showDropdown = [];
     let selectedIndex: Models.Index = null;
     let showCreateIndex = false;
     let showOverview = false;
     let showDelete = false;
     let showCreateAttribute = false;
-    let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
     let showFailed = false;
     let error = '';
+
+    function getAttributeStatusBadge(status: string): ComponentProps<Badge>['type'] {
+        switch (status) {
+            case 'processing':
+                return 'warning';
+            case 'deleting':
+            case 'stuck':
+            case 'failed':
+                return 'error';
+            default:
+                return undefined;
+        }
+    }
 </script>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Indexes</Heading>
-
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Typography.Title>Indexes</Typography.Title>
         {#if $canWriteCollections}
             <Button
                 event="create_index"
                 disabled={!$collection?.attributes?.length}
                 on:click={() => (showCreateIndex = true)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create index</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create index
             </Button>
         {/if}
-    </div>
-    {#if $collection?.attributes?.length}
-        {#if $indexes.length}
-            <Table>
-                <TableHeader>
-                    <TableCellHead>Key</TableCellHead>
-                    <TableCellHead onlyDesktop>Type</TableCellHead>
-                    <TableCellHead onlyDesktop>Attributes</TableCellHead>
-                    <TableCellHead onlyDesktop>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'}
-                                        <div class="u-inline-flex u-gap-12 u-cross-center">
-                                            <Pill
-                                                warning={index.status === 'processing'}
-                                                danger={['deleting', 'stuck', 'failed'].includes(
-                                                    index.status
-                                                )}>
-                                                {index.status}
-                                            </Pill>
-                                            {#if index.error}
-                                                <Button
-                                                    link
-                                                    on:click={(e) => {
-                                                        e.preventDefault();
-                                                        error = index.error;
-                                                        showFailed = true;
-                                                    }}>Details</Button>
-                                            {/if}
-                                        </div>
-                                    {/if}
-                                </div>
-                            </TableCell>
-                            <TableCellText title="Type" onlyDesktop>{index.type}</TableCellText>
-                            <TableCellText title="Attributes" onlyDesktop>
-                                {index.attributes}
-                            </TableCellText>
-                            <TableCellText title="ASC/DESC" onlyDesktop>
-                                {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>
+    </Layout.Stack>
 
-                                        <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>
+    {#if data.collection?.attributes?.length}
+        {#if data.collection.indexes.length}
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'key' },
+                    { id: 'type' },
+                    { id: 'attributes' },
+                    { id: 'orders' },
+                    { id: 'actions', width: 40 }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
+                    <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+                    <Table.Header.Cell column="attributes" {root}>Attributes</Table.Header.Cell>
+                    <Table.Header.Cell column="orders" {root}>Asc/Desc</Table.Header.Cell>
+                    <Table.Header.Cell column="actions" {root} />
+                </svelte:fragment>
+                {#each data.collection.indexes as index}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="key" {root}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                {index.key}
+                                {#if index.status !== 'available'}
+                                    <Badge
+                                        size="s"
+                                        variant="secondary"
+                                        content={index.status}
+                                        type={getAttributeStatusBadge(index.status)} />
+                                    {#if index.error}
+                                        <Link.Button
+                                            variant="muted"
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                error = index.error;
+                                                showFailed = true;
+                                            }}>Details</Link.Button>
+                                    {/if}
+                                {/if}
+                            </Layout.Stack>
+                        </Table.Cell>
+                        <Table.Cell column="type" {root}>{index.type}</Table.Cell>
+                        <Table.Cell column="attributes" {root}>
+                            {index.attributes}
+                        </Table.Cell>
+                        <Table.Cell column="orders" {root}>
+                            {index.orders}
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <Popover let:toggle padding="none" placement="bottom-end">
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip">
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconEye}
+                                        on:click={() => {
+                                            selectedIndex = index;
+                                            showOverview = true;
+                                        }}>Overview</ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconTrash}
+                                        on:click={() => {
+                                            selectedIndex = index;
+                                            showDelete = true;
+                                            trackEvent(Click.DatabaseIndexDelete);
+                                        }}>Delete</ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </Popover>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
         {:else}
             <Empty
                 allowCreate={$canWriteCollections}
@@ -140,18 +152,8 @@
                 on:click={() => (showCreateIndex = true)} />
         {/if}
     {:else}
-        <Empty
-            single
-            target="attribute"
-            allowCreate={$canWriteCollections}
-            on:click={() => (showCreateDropdown = true)}>
-            <div class="u-text-center">
-                <Heading size="7" tag="h2">Create an attribute to get started.</Heading>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Need a hand? Learn more in our documentation.
-                </p>
-            </div>
-            <div class="u-flex u-gap-16 u-main-center">
+        <Empty single target="attribute">
+            <svelte:fragment slot="actions">
                 <Button
                     external
                     href="https://appwrite.io/docs/products/databases/collections#attributes"
@@ -160,20 +162,15 @@
                     ariaLabel={`create {target}`}>Documentation</Button>
                 {#if $canWriteCollections}
                     <CreateAttributeDropdown
-                        bind:showCreateDropdown
+                        bind:selectedOption={selectedAttribute}
                         bind:showCreate={showCreateAttribute}
-                        bind:selectedOption={selectedAttribute}>
-                        <Button
-                            secondary
-                            event="create_attribute"
-                            on:click={() => {
-                                showCreateDropdown = !showCreateDropdown;
-                            }}>
+                        let:toggle>
+                        <Button secondary event="create_attribute" on:click={toggle}>
                             Create attribute
                         </Button>
                     </CreateAttributeDropdown>
                 {/if}
-            </div>
+            </svelte:fragment>
         </Empty>
     {/if}
 </Container>
@@ -185,6 +182,10 @@
     <Overview bind:showOverview {selectedIndex} />
 {/if}
 
-<CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />
+{#if showCreateAttribute}
+    <CreateAttribute
+        bind:showCreate={showCreateAttribute}
+        bind:selectedOption={selectedAttribute} />
+{/if}
 
 <FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index 3ff5ae972..b5812ff55 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, InputSelect, InputText } from '$lib/elements/forms';
     import { remove } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { IndexType } from '@appwrite.io/console';
     import { isRelationship } from '../document-[document]/attributes/store';
     import { type Attributes, collection, indexes } from '../store';
-    import Select from './select.svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     let key = '';
     let error: string;
@@ -71,7 +72,7 @@
         }
 
         try {
-            await sdk.forProject($page.params.region, $page.params.project).databases.createIndex(
+            await sdk.forProject(page.params.region, page.params.project).databases.createIndex(
                 databaseId,
                 $collection.$id,
                 key,
@@ -85,7 +86,7 @@
             ]);
 
             goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${databaseId}/collection-${$collection.$id}/indexes`
+                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${$collection.$id}/indexes`
             );
 
             addNotification({
@@ -108,59 +109,61 @@
     }
 </script>
 
-<Modal title="Create index" bind:error size="big" onSubmit={create} bind:show={showCreateIndex}>
-    <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} />
+<Modal title="Create index" bind:error onSubmit={create} bind:show={showCreateIndex}>
+    <InputText
+        required
+        id="key"
+        label="Index Key"
+        placeholder="Enter Key"
+        bind:value={key}
+        autofocus />
+    <InputSelect required options={types} id="type" label="Index type" bind:value={selectedType} />
 
+    <Layout.Stack gap="s">
         {#each attributeList as attribute, i}
-            <li class="form-item is-multiple">
-                <div class="form-item-part u-stretch">
-                    <Select id={`attribute-${i}`} label="Attribute" bind:value={attribute.value}>
-                        <option value="" disabled 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}>
-                                    {option.label}
-                                </option>
-                            {/each}
-                        </optgroup>
-                    </Select>
-                </div>
-                <div class="form-item-part u-stretch">
-                    <Select id={`order-${i}`} label="Order" bind:value={attribute.order}>
-                        <option value="" disabled 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">
+            <Layout.Stack direction="row">
+                <InputSelect
+                    required
+                    options={[
+                        { value: '$id', label: '$id' },
+                        { value: '$createdAt', label: '$createdAt' },
+                        { value: '$updatedAt', label: '$updatedAt' },
+                        ...attributeOptions
+                    ]}
+                    id={`attribute-${i}`}
+                    label={i === 0 ? 'Attribute' : undefined}
+                    placeholder="Select Attribute"
+                    bind:value={attribute.value} />
+                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                    <InputSelect
+                        options={[
+                            { value: 'ASC', label: 'ASC' },
+                            { value: 'DESC', label: 'DESC' }
+                        ]}
+                        required
+                        id={`order-${i}`}
+                        label={i === 0 ? 'Order' : undefined}
+                        bind:value={attribute.order}
+                        placeholder="Select Order" />
                     <Button
-                        noMargin
-                        text
+                        icon
+                        compact
                         disabled={attributeList.length <= 1}
                         on:click={() => {
                             attributeList = remove(attributeList, i);
                         }}>
-                        <span class="icon-x" aria-hidden="true" />
+                        <span class="icon-x" aria-hidden="true"></span>
                     </Button>
-                </div>
-            </li>
+                </Layout.Stack>
+            </Layout.Stack>
         {/each}
-
-        <Button text noMargin on:click={addAttribute} disabled={addAttributeDisabled}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add attribute</span>
-        </Button>
-    </FormList>
+        <div>
+            <Button compact on:click={addAttribute} disabled={addAttributeDisabled}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add attribute
+            </Button>
+        </div>
+    </Layout.Stack>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreateIndex = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index e515bc5ad..1669fea99 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { collection } from '../store';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let showDelete = false;
     export let selectedIndex: Models.Index;
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
+    let error: string;
 
     async function handleDelete() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.deleteIndex(databaseId, $collection.$id, selectedIndex.key);
             await invalidate(Dependencies.COLLECTION);
             showDelete = false;
@@ -27,28 +28,15 @@
                 message: `Index has been deleted`
             });
             trackEvent(Submit.IndexDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.IndexDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.IndexDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete index"
-    icon="exclamation"
-    state="warning"
-    onSubmit={handleDelete}
-    bind:show={showDelete}
-    headerDivider={false}>
-    <p data-private>
-        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>
+<Confirm onSubmit={handleDelete} title="Delete index" bind:open={showDelete} bind:error>
+    <Typography.Text>
+        Are you sure you want to delete <b>{selectedIndex.key}</b> from <b>{$collection.name}</b>?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
index de7c68e6a..755bad2dc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
@@ -1,57 +1,45 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { InputText, FormList } from '$lib/elements/forms';
+    import { InputText } from '$lib/elements/forms';
+    import { Layout } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
 
     export let showOverview = false;
     export let selectedIndex: Models.Index = null;
-    //TODO: add error message when index failed
 </script>
 
-<Modal title="Overview" size="big" bind:show={showOverview}>
-    <FormList>
-        <InputText
-            id="key"
-            label="Index Key"
-            placeholder="Enter Key"
-            value={selectedIndex.key}
-            readonly />
-        <InputText
-            id="type"
-            label="Index type"
-            placeholder="Select type"
-            value={selectedIndex.type}
-            readonly />
+<Modal title="Overview" bind:show={showOverview}>
+    <InputText
+        required
+        id="key"
+        label="Index Key"
+        placeholder="Enter Key"
+        value={selectedIndex.key}
+        readonly />
+    <InputText
+        required
+        id="type"
+        label="Index type"
+        placeholder="Select type"
+        value={selectedIndex.type}
+        readonly />
 
-        {#if selectedIndex?.attributes?.length}
-            {#each selectedIndex.attributes as attribute, i}
-                <li class="form-item is-multiple">
-                    <div class="form-item-part u-stretch">
-                        <label class="label" for={`value-${attribute}`}>Attribute</label>
-                        <div class="input-text-wrapper">
-                            <input
-                                id={`value-${attribute}`}
-                                placeholder=""
-                                type="text"
-                                class="input-text"
-                                value={attribute}
-                                readonly />
-                        </div>
-                    </div>
-                    <div class="form-item-part u-stretch">
-                        <label class="label" for={`value-${selectedIndex.orders[i]}`}>Order</label>
-                        <div class="input-text-wrapper">
-                            <input
-                                id={`value-${selectedIndex.orders[i]}`}
-                                placeholder=""
-                                type="text"
-                                class="input-text"
-                                value={selectedIndex.orders[i]}
-                                readonly />
-                        </div>
-                    </div>
-                </li>
-            {/each}
-        {/if}
-    </FormList>
+    {#if selectedIndex?.attributes?.length}
+        {#each selectedIndex.attributes as attribute, i}
+            <Layout.Stack direction="row">
+                <InputText
+                    required
+                    label={i === 0 ? 'Attribute' : ''}
+                    id={`value-${attribute}`}
+                    value={attribute}
+                    readonly />
+                <InputText
+                    required
+                    label={i === 0 ? 'Order' : ''}
+                    id={`value-${selectedIndex.orders[i]}`}
+                    value={selectedIndex.orders[i]}
+                    readonly />
+            </Layout.Stack>
+        {/each}
+    {/if}
 </Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
index 05344c804..ea8eb3b61 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
@@ -30,7 +30,7 @@
     <select bind:this={element} {id} bind:value {required} on:invalid={handleInvalid}>
         <slot />
     </select>
-    <span class="icon-cheveron-down" aria-hidden="true" />
+    <span class="icon-cheveron-down" aria-hidden="true"></span>
 </div>
 {#if error}
     <Helper type="warning">{error}</Helper>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
index edeb3c162..aa90532f7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { ClickableList, ClickableListItem, Modal, Paginator } from '$lib/components';
+    import { page } from '$app/state';
+    import { Modal, Paginator } from '$lib/components';
+    import Id from '$lib/components/id.svelte';
     import { preferences } from '$lib/stores/preferences';
     import type { Models } from '@appwrite.io/console';
+    import { Table } from '@appwrite.io/pink-svelte';
 
     export let show = false;
-    export let data: [];
+    export let data: Partial<Models.Document>[];
     export let selectedRelationship: Models.AttributeRelationship = null;
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
     const limit = 10;
 
     $: args =
@@ -23,35 +24,38 @@
     }
 </script>
 
-<Modal size="big" bind:show icon="relationship" headerDivider={false}>
-    <svelte:fragment slot="title">
-        <span data-private>
-            {selectedRelationship.key}
-        </span>
-    </svelte:fragment>
-
+<Modal bind:show title={selectedRelationship?.key} hideFooter>
     {#if data?.length}
-        <Paginator items={data} {limit} let:paginatedItems>
-            <ClickableList>
-                {#each paginatedItems as doc}
-                    <ClickableListItem
-                        href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${selectedRelationship.relatedCollection}/document-${doc.$id}`}
-                        on:click={() => (show = false)}>
+        <Paginator items={data} {limit}>
+            {#snippet children(paginatedItems: typeof data)}
+                <Table.Root
+                    let:root
+                    columns={[{ id: '$id', width: 150 }, ...args.map((id) => ({ id }))]}>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
                         {#if args?.length}
-                            {#each args as arg, i}
-                                {#if i}
-                                    <span class="clickable-list-title-sep">|</span>
-                                {/if}
-                                <span data-private>{doc[arg]}</span>
+                            {#each args as arg}
+                                <Table.Header.Cell column={arg} {root}>{arg}</Table.Header.Cell>
                             {/each}
                         {/if}
-                        <svelte:fragment slot="desc">
-                            {doc.$id}
-                        </svelte:fragment>
-                    </ClickableListItem>
-                {/each}
-            </ClickableList>
+                    </svelte:fragment>
+                    {#each paginatedItems as doc}
+                        <Table.Row.Link
+                            {root}
+                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${selectedRelationship.relatedCollection}/document-${doc.$id}`}
+                            on:click={() => (show = false)}>
+                            <Table.Cell column="$id" {root}>
+                                <Id value={doc.$id}>{doc.$id}</Id>
+                            </Table.Cell>
+                            {#if args?.length}
+                                {#each args as arg}
+                                    <Table.Cell column={arg} {root}>{doc[arg]}</Table.Cell>
+                                {/each}
+                            {/if}
+                        </Table.Row.Link>
+                    {/each}
+                </Table.Root>
+            {/snippet}
         </Paginator>
     {/if}
-    <svelte:fragment slot="footer" />
 </Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
index dec225ffd..493e37667 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { collection } from '../store';
     import Delete from './deleteCollection.svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <Heading tag="h6" size="7">Delete collection</Heading>
-    <p>
-        The collection will be permanently deleted, including all the documents within it. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete collection</svelte:fragment>
+    The collection will be permanently deleted, including all the documents within it. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
@@ -24,7 +23,12 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        <Button
+            secondary
+            on:click={() => {
+                trackEvent(Click.DatabaseCollectionDelete);
+                showDelete = true;
+            }}>Delete</Button>
     </svelte:fragment>
 </CardGrid>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
index 16fa943e4..dfd0e6548 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { collection } from '../store';
 
     export let showDelete = false;
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
+    let error: string;
 
     async function handleDelete() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.deleteCollection(databaseId, $collection.$id);
             await invalidate(Dependencies.DATABASE);
             showDelete = false;
@@ -27,30 +28,17 @@
             });
             trackEvent(Submit.CollectionDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$page.params.database}`
+                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}`
             );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.CollectionDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.CollectionDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete collection"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}>
-    <p data-private>
+<Confirm onSubmit={handleDelete} title="Delete collection" bind:open={showDelete} bind:error>
+    <Typography.Text>
         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>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
index e98f77d31..a60fc2489 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, InputSelectSearch, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputSelect, InputText } from '$lib/elements/forms';
     import { last, symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
     import { attributes } from '../store';
     import { preferences } from '$lib/stores/preferences';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
 
-    const collectionId = $page.params.collection;
+    const collectionId = page.params.collection;
     let names: string[] = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
-    let search: string;
 
     async function updateDisplayName() {
         try {
@@ -55,84 +56,54 @@
 
 <Form onSubmit={updateDisplayName}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="display-name">Display name</Heading>
-        <p class="text">
-            Select string attributes as display names for your documents. The selected names will be
-            used as short forms to identify documents in the Appwrite console, like when creating
-            database relationships. You can specify up to 5 names.
-        </p>
+        <svelte:fragment slot="title">Display name</svelte:fragment>
+        Select up to 5 string attributes to display as document names in the Appwrite console. These
+        help identify documents in places like relationships.
 
         <svelte:fragment slot="aside">
-            <div class="u-flex u-flex-vertical u-gap-4">
-                <ul class="u-flex-vertical u-gap-8">
-                    <li class="u-flex u-gap-8">
-                        <InputText
-                            id="id"
-                            label="Document ID"
-                            showLabel={false}
-                            placeholder="Document ID"
-                            readonly
-                            fullWidth />
-                        <div class="form-item-part u-cross-child-end u-opacity-0">
-                            <Button text noMargin disabled>
-                                <span class="icon-x" aria-hidden="true" />
+            <Layout.Stack gap="s">
+                <Layout.Stack direction="row" gap="xxs">
+                    <InputText id="id" value="Document ID" readonly />
+                    <span style:visibility="hidden">
+                        <Button icon extraCompact>
+                            <Icon icon={IconX} />
+                        </Button>
+                    </span>
+                </Layout.Stack>
+                {#if names?.length}
+                    {#each names as name, i}
+                        <Layout.Stack direction="row" gap="xxs">
+                            <InputSelect
+                                id={name}
+                                placeholder="Select attribute"
+                                bind:value={names[i]}
+                                disabled={!!names[i] && names.length > i + 1}
+                                {options} />
+                            <Button
+                                icon
+                                extraCompact
+                                on:click={() => {
+                                    names.splice(i, 1);
+                                    names = names;
+                                }}>
+                                <Icon icon={IconX} />
                             </Button>
-                        </div>
-                    </li>
-                    {#if names?.length}
-                        {#each names as name, i}
-                            <div class="u-flex u-gap-8">
-                                {#if names[i]}
-                                    <InputSelectSearch
-                                        id={name}
-                                        label={name}
-                                        showLabel={false}
-                                        interactiveOutput
-                                        placeholder="Select attribute"
-                                        bind:value={names[i]}
-                                        bind:search={names[i]}
-                                        name="attributes"
-                                        disabled
-                                        {options} />
-                                {:else}
-                                    <InputSelectSearch
-                                        id={name}
-                                        label={name}
-                                        showLabel={false}
-                                        placeholder="Select attribute"
-                                        bind:value={names[i]}
-                                        bind:search
-                                        name="attributes"
-                                        {options} />
-                                {/if}
-                                <div class="form-item-part u-cross-child-end">
-                                    <Button
-                                        text
-                                        noMargin
-                                        on:click={() => {
-                                            names.splice(i, 1);
-                                            names = names;
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </div>
-                            </div>
-                        {/each}
-                    {/if}
-                </ul>
-                <Button
-                    noMargin
-                    text
-                    disabled={addAttributeDisabled}
-                    on:click={() => {
-                        names[names.length] = null;
-                        search = null;
-                        names = names;
-                    }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add attribute</span>
-                </Button>
-            </div>
+                        </Layout.Stack>
+                    {/each}
+                {/if}
+                <div>
+                    <Button
+                        compact
+                        disabled={addAttributeDisabled}
+                        on:click={() => {
+                            names[names.length] = null;
+                            names = names;
+                        }}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add attribute
+                    </Button>
+                </div>
+            </Layout.Stack>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
index 1c40d27a7..80351378c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -10,7 +10,7 @@
     import { onMount } from 'svelte';
     import { collection } from '../store';
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     let collectionName: string = null;
 
@@ -21,7 +21,7 @@
     async function updateName() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.updateCollection(
                     databaseId,
                     $collection.$id,
@@ -48,17 +48,15 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
-            <ul>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Enter name"
-                    autocomplete={false}
-                    bind:value={collectionName} />
-            </ul>
+            <InputText
+                required
+                id="name"
+                label="Name"
+                placeholder="Enter name"
+                autocomplete={false}
+                bind:value={collectionName} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
index 0ee1b6fde..f9b4e4bff 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Permissions } from '$lib/components/permissions';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
@@ -11,8 +11,9 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { collection } from '../store';
+    import { Link } from '@appwrite.io/pink-svelte';
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     let arePermsDisabled = true;
 
@@ -25,7 +26,7 @@
     async function updatePermissions() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.updateCollection(
                     databaseId,
                     $collection.$id,
@@ -49,25 +50,20 @@
         }
     }
 
-    $: if (
+    $: arePermsDisabled = !(
         collectionPermissions &&
         symmetricDifference(collectionPermissions, $collection.$permissions).length
-    ) {
-        arePermsDisabled = false;
-    } else arePermsDisabled = true;
+    );
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7" id="permissions">Permissions</Heading>
-    <p class="text">
-        Choose who can access your collection and documents. For more about <a
-            href="https://appwrite.io/docs/products/databases/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions
-        </a>.
-    </p>
+    <svelte:fragment slot="title">Permissions</svelte:fragment>
+    Choose who can access your collection and documents. <Link.Anchor
+        href="https://appwrite.io/docs/products/databases/permissions"
+        target="_blank"
+        rel="noopener noreferrer">
+        Learn more
+    </Link.Anchor>.
     <svelte:fragment slot="aside">
         {#if collectionPermissions}
             <Permissions bind:permissions={collectionPermissions} withCreate />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
index a89260ff5..5b4e83244 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputSwitch } from '$lib/elements/forms';
+    import { Button, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { collection } from '../store';
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     let collectionDocumentSecurity: boolean = null;
 
@@ -21,7 +21,7 @@
     async function updateSecurity() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.updateCollection(
                     databaseId,
                     $collection.$id,
@@ -47,14 +47,13 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7" id="document-security">Document security</Heading>
+    <svelte:fragment slot="title">Document security</svelte:fragment>
     <svelte:fragment slot="aside">
-        <FormList>
-            <InputSwitch
-                bind:value={collectionDocumentSecurity}
-                id="security"
-                label="Document security" />
-        </FormList>
+        <InputSwitch
+            bind:value={collectionDocumentSecurity}
+            id="security"
+            label="Document security" />
+
         <p class="text">
             When document security is enabled, users will be able to access documents for which they
             have been granted <b>either document or collection permissions</b>.
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
index 36198dbdc..0089ecf9a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -11,7 +11,7 @@
     import { onMount } from 'svelte';
     import { collection } from '../store';
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     let enabled: boolean = null;
 
@@ -22,7 +22,7 @@
     async function toggleCollection() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.updateCollection(
                     databaseId,
                     $collection.$id,
@@ -48,8 +48,7 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">{$collection.name}</Heading>
-
+    <svelte:fragment slot="title">{$collection.name}</svelte:fragment>
     <svelte:fragment slot="aside">
         <ul>
             <InputSwitch
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 4408ca1ea..374adf90f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -26,3 +26,5 @@ export const attributes = derived(
 export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]);
 
 export const columns = writable<Column[]>([]);
+
+export const isCsvImportInProgress = writable(false);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index 9f23604ee..ae0809327 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -1,48 +1,227 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { showCreate } from '../store';
     import type { PageData } from './$types';
     import { showSubNavigation } from '$lib/stores/layout';
+    import { Icon, Sidebar, Navbar, Layout, Link, ActionMenu } from '@appwrite.io/pink-svelte';
+    import {
+        IconChevronDown,
+        IconDatabase,
+        IconPlus,
+        IconTable
+    } from '@appwrite.io/pink-icons-svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import { BottomSheet } from '$lib/components';
 
-    $: data = $page.data as PageData;
-    $: project = $page.params.project;
-    $: databaseId = $page.params.database;
-    $: collectionId = $page.params.collection;
+    let data = $derived(page.data) as PageData;
+    let region = $derived(page.params.region);
+    let project = $derived(page.params.project);
+    let databaseId = $derived(page.params.database);
+    let collectionId = $derived(page.params.collection);
 
-    $: sortedCollections = data?.allCollections?.collections?.sort((a, b) =>
-        a.name.localeCompare(b.name)
+    const sortedCollections = $derived.by(() =>
+        data?.allCollections?.collections?.slice().sort((a, b) => a.name.localeCompare(b.name))
     );
+
+    const selectedCollection = $derived.by(() =>
+        sortedCollections?.find((collection) => collection.$id === collectionId)
+    );
+
+    let openBottomSheet = $state(false);
+
+    function onResize() {
+        if (openBottomSheet && !$isTabletViewport) {
+            openBottomSheet = false;
+        }
+    }
 </script>
 
-<section class="drop-section u-flex-vertical u-gap-8">
-    <a
-        class="u-flex u-cross-center u-sep-block-end u-padding-block-12 is-not-desktop"
-        href={`${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}?openNavbar=true`}>
-        <span class="icon-cheveron-left" aria-hidden="true" />
-        <h5 class="eyebrow-heading-3 u-margin-inline-auto">Collections</h5>
-    </a>
-    <h5 class="eyebrow-heading-3 u-padding-block-12 is-not-mobile">Collections</h5>
-    <button
-        class="button is-text is-full-width u-main-start u-padding-inline-0"
-        on:click={() => {
-            $showCreate = true;
-            $showSubNavigation = false;
-        }}>
-        <span class="icon-plus" aria-hidden="true" />
-        <span class="text">Create collection</span>
-    </button>
-    {#if data?.allCollections?.total}
-        <ul class="drop-list">
-            {#each sortedCollections as collection}
-                {@const href = `${base}/project-${$page.params.region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
-                {@const isSelected = collectionId === collection.$id}
-                <li class="drop-list-item">
-                    <a class="drop-button" class:is-selected={isSelected} {href}>
-                        <span class="text" data-private>{collection.name}</span>
-                    </a>
-                </li>
-            {/each}
-        </ul>
-    {/if}
-</section>
+<svelte:window on:resize={onResize} />
+{#if !$isTabletViewport}
+    <Sidebar.Base state="open" resizable={false}>
+        <section class="list-container" slot="top" style:width="100%">
+            <a
+                href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
+                <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
+                {data.database?.name}
+            </a>
+            <div class="collection-content">
+                {#if data?.allCollections?.total}
+                    <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
+                        {#each sortedCollections as collection}
+                            {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
+                            {@const isSelected = collectionId === collection.$id}
+                            <li class:is-selected={isSelected}>
+                                <a
+                                    class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
+                                    {href}>
+                                    <Icon
+                                        icon={IconTable}
+                                        size="s"
+                                        color={isSelected
+                                            ? '--fgcolor-neutral-tertiary'
+                                            : '--fgcolor-neutral-weak'} />
+                                    <span class="text collection-name" data-private
+                                        >{collection.name}</span>
+                                </a>
+                            </li>
+                        {/each}
+                    </ul>
+                {/if}
+            </div>
+            <ActionMenu.Root noPadding width="167">
+                <ActionMenu.Item.Button
+                    on:click={() => {
+                        $showCreate = true;
+                        $showSubNavigation = false;
+                    }}
+                    leadingIcon={IconPlus}>
+                    Create collection
+                </ActionMenu.Item.Button>
+            </ActionMenu.Root>
+        </section>
+    </Sidebar.Base>
+{:else}
+    <Navbar.Base>
+        <div slot="left">
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                <Icon icon={IconDatabase} size="s" color="--neutral-300" />
+                <Link.Anchor
+                    href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                    variant="quiet-muted">{data.database.name}</Link.Anchor>
+                <span style:margin-left="8px">/</span>
+                <button
+                    type="button"
+                    class="trigger"
+                    aria-label="Open collections"
+                    onclick={() => {
+                        openBottomSheet = !openBottomSheet;
+                    }}>
+                    <span class="orgName">{selectedCollection.name}</span>
+                    <Icon icon={IconChevronDown} size="s" />
+                </button>
+            </Layout.Stack>
+        </div>
+    </Navbar.Base>
+{/if}
+{#if openBottomSheet}
+    <BottomSheet.Menu
+        bind:isOpen={openBottomSheet}
+        menu={{
+            top: {
+                items: sortedCollections.slice(0, 10).map((collection) => {
+                    return {
+                        name: collection.name,
+                        leadingIcon: IconTable,
+                        href: `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`
+                    };
+                })
+            },
+            bottom:
+                sortedCollections.length > 10
+                    ? {
+                          items: [
+                              {
+                                  name: 'All collections',
+                                  leadingIcon: IconTable,
+                                  href: `${base}/project-${region}-${project}/databases/database-${databaseId}`
+                              }
+                          ]
+                      }
+                    : undefined
+        }}></BottomSheet.Menu>
+{/if}
+
+<style lang="scss">
+    .list-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+    }
+
+    .database-name {
+        font-size: var(--font-size-sm);
+        color: var(--fgcolor-neutral-secondary);
+
+        margin-block-end: 2px;
+    }
+
+    .collection-content {
+        flex: 1;
+        overflow-y: auto;
+        min-height: 0;
+        margin-bottom: auto;
+        padding-bottom: 16px;
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-neutral, #ededf0) transparent;
+        color: var(--fgcolor-neutral-secondary, #56565c);
+
+        &::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 2px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: var(--border-neutral, #ededf0);
+            border-radius: 2px;
+
+            &:hover {
+                background: var(--border-neutral-emphasis, #dbdbdf);
+            }
+        }
+    }
+
+    .drop-list {
+        border-left: 1px solid var(--border-neutral, #ededf0);
+        flex: 1;
+        padding-left: 4px;
+        font-size: var(--font-size-sm);
+        color: var(--fgcolor-neutral-secondary);
+
+        .is-selected,
+        li:hover {
+            color: var(--fgcolor-neutral-primary);
+            border-radius: var(--border-radius-xs, 4px);
+            background: var(--bgcolor-neutral-secondary);
+        }
+
+        .collection-name {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-clamp: 1;
+            color: var(--fgcolor-neutral-secondary, #56565c);
+        }
+    }
+
+    :global(.sub-navigation header) {
+        top: 48px !important;
+    }
+    .trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-1, 2px) var(--space-2, 4px) var(--space-1, 2px) var(--space-3, 6px);
+        gap: var(--space-2, 4px);
+        transition: color 0.2s ease;
+
+        color: var(--fgcolor-neutral-secondary);
+        border-radius: var(--corner-radius-medium, 8px);
+
+        cursor: default;
+        /* Body text/level 2 Regular */
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%; /* 21px */
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 772721d01..abbe66541 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -1,24 +1,11 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { Alert, FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Alert, Confirm, Id } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, InputChoice } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
+    import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
@@ -28,18 +15,24 @@
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
-    import { clickOnEnter } from '$lib/helpers/a11y';
     import type { ColumnType } from '$lib/helpers/types';
-    import { toLocaleDateTime } from '$lib/helpers/date';
+    import {
+        Tooltip,
+        Table,
+        Button,
+        Link,
+        Badge,
+        FloatingActionBar
+    } from '@appwrite.io/pink-svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
 
     export let data: PageData;
 
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
     let showRelationships = false;
     let selectedRelationship: Models.AttributeRelationship = null;
-    let relationshipData: [];
+    let relationshipData: Partial<Models.Document>[];
     let displayNames = {};
 
     onMount(async () => {
@@ -52,7 +45,7 @@
     function updateMaxWidth() {
         const tableCells = Array.from(document.querySelectorAll('.less-width-truncated'));
 
-        const visibleColumnsCount = $columns.filter((col) => col.show).length;
+        const visibleColumnsCount = $columns.filter((col) => !col.hide).length;
         const newMaxWidth = Math.max(50 - (visibleColumnsCount - 1) * 5, 25);
 
         tableCells.forEach((cell) => {
@@ -99,10 +92,7 @@
         };
     }
 
-    $: selected = preferences.getCustomCollectionColumns(
-        $page.params.project,
-        $page.params.collection
-    );
+    $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
     $: {
         columns.set(
@@ -119,16 +109,15 @@
         );
     }
 
-    let selectedDb: string[] = [];
+    let selectedRows: string[] = [];
     let showDelete = false;
-    let deleting = false;
 
     async function handleDelete() {
         showDelete = false;
 
-        const promises = selectedDb.map((documentId) =>
+        const promises = selectedRows.map((documentId) =>
             sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.deleteDocument(databaseId, collectionId, documentId)
         );
         try {
@@ -136,7 +125,7 @@
             trackEvent(Submit.DocumentDelete);
             addNotification({
                 type: 'success',
-                message: `${selectedDb.length} document${selectedDb.length > 1 ? 's' : ''} deleted`
+                message: `${selectedRows.length} document${selectedRows.length > 1 ? 's' : ''} deleted`
             });
             invalidate(Dependencies.DOCUMENTS);
         } catch (error) {
@@ -146,7 +135,7 @@
             });
             trackError(error, Submit.DocumentDelete);
         } finally {
-            selectedDb = [];
+            selectedRows = [];
             showDelete = false;
         }
     }
@@ -173,178 +162,161 @@
     let checked = false;
 </script>
 
-<TableScroll isSticky>
-    <TableHeader>
-        <TableCellHeadCheck
-            bind:selected={selectedDb}
-            pageItemsIds={data.documents.documents.map((d) => d.$id)} />
-        <TableCellHead width={150} eyebrow={false}>Document ID</TableCellHead>
-        {#each $columns.filter((n) => n.show) as column}
-            {#if column.show}
-                <TableCellHead eyebrow={false}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root
+    let:root
+    allowSelection
+    bind:selectedRows
+    columns={[{ id: '$id', width: 200 }, ...$columns, { id: '$created' }, { id: '$updated' }]}>
+    <svelte:fragment slot="header" let:root>
+        <Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
+        {#each $columns as column}
+            <Table.Header.Cell column={column.id} {root}>{column.title}</Table.Header.Cell>
         {/each}
-        <TableCellHead eyebrow={false}>Created</TableCellHead>
-        <TableCellHead eyebrow={false}>Updated</TableCellHead>
-    </TableHeader>
-    <TableBody>
-        {#each data.documents.documents as document}
-            <TableRowLink
-                href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
-                <TableCellCheck bind:selectedIds={selectedDb} id={document.$id} />
+        <Table.Header.Cell column="$created" {root}>Created</Table.Header.Cell>
+        <Table.Header.Cell column="$updated" {root}>Updated</Table.Header.Cell>
+    </svelte:fragment>
+    {#each data.documents.documents as document (document.$id)}
+        <Table.Row.Link
+            {root}
+            id={document.$id}
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
+            <Table.Cell column="$id" {root}>
+                {#key document.$id}
+                    <Id value={document.$id}>
+                        {document.$id}
+                    </Id>
+                {/key}
+            </Table.Cell>
 
-                <TableCell width={150}>
-                    {#key document.$id}
-                        <Id value={document.$id}>
-                            {document.$id}
-                        </Id>
-                    {/key}
-                </TableCell>
-
-                {#each $columns as column}
-                    {#if column.show}
-                        {@const attr = $attributes.find((n) => n.key === column.id)}
-                        {#if isRelationship(attr)}
-                            {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
-                            <TableCell title={column.title}>
-                                {#if !isRelationshipToMany(attr)}
-                                    {#if document[column.id]}
-                                        {@const related = document[column.id]}
-                                        <div
-                                            tabindex="0"
-                                            class="link is-5px-offset u-trim-1 u-break-word"
-                                            role="button"
-                                            on:keyup={clickOnEnter}
-                                            on:click|preventDefault|stopPropagation={() =>
-                                                goto(
-                                                    `${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
-                                                )}>
-                                            {#each args as arg, i}
-                                                {#if arg !== undefined}
-                                                    {#if i}
-                                                        &nbsp;|
-                                                    {/if}
-                                                    <span class="text" data-private>
-                                                        {related?.[arg]}
-                                                    </span>
-                                                {/if}
-                                            {/each}
-                                        </div>
-                                    {:else}
-                                        <span class="text">n/a</span>
-                                    {/if}
-                                {:else}
-                                    {@const itemsNum = document[column.id]?.length}
-                                    <button
-                                        class="button is-text"
-                                        on:click|preventDefault|stopPropagation={() => {
-                                            relationshipData = document[column.id];
-                                            showRelationships = true;
-                                            selectedRelationship = attr;
-                                        }}
-                                        disabled={!itemsNum}>
-                                        Items <span class="inline-tag">{itemsNum ?? 0}</span>
-                                    </button>
-                                {/if}
-                            </TableCell>
+            {#each $columns as { id }}
+                {@const attr = $attributes.find((n) => n.key === id)}
+                <Table.Cell column={id} {root}>
+                    {#if isRelationship(attr)}
+                        {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
+                        {#if !isRelationshipToMany(attr)}
+                            {#if document[+id]}
+                                {@const related = document[id]}
+                                <Link.Button
+                                    variant="muted"
+                                    on:click={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        goto(
+                                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
+                                        );
+                                    }}>
+                                    {#each args as arg, i}
+                                        {#if arg !== undefined}
+                                            {#if i}
+                                                &nbsp;|
+                                            {/if}
+                                            <span class="text" data-private>
+                                                {related?.[arg]}
+                                            </span>
+                                        {/if}
+                                    {/each}
+                                </Link.Button>
+                            {:else}
+                                <span class="text">n/a</span>
+                            {/if}
                         {:else}
-                            {@const formatted = formatColumn(document[column.id])}
-                            <TableCell class="truncated-content-table-cell">
-                                <div
-                                    class:truncated={formatted.whole.length >
-                                        formatted.value.length}
-                                    class:less-width-truncated={$columns.filter((col) => col.show)
-                                        .length > 1}
-                                    use:tooltip={{
-                                        content: formatted.whole,
-                                        disabled: !formatted.truncated
-                                    }}
-                                    data-private
-                                    data-content={formatted.whole}>
-                                    {formatted.whole}
-                                </div>
-                            </TableCell>
+                            {@const itemsNum = document[id]?.length}
+                            <Button.Button
+                                variant="extra-compact"
+                                disabled={!itemsNum}
+                                badge={itemsNum ?? 0}
+                                on:click={(e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    relationshipData = document[id];
+                                    showRelationships = true;
+                                    selectedRelationship = attr;
+                                }}>
+                                Items
+                            </Button.Button>
                         {/if}
+                    {:else}
+                        {@const formatted = formatColumn(document[id])}
+                        <Tooltip disabled={!formatted.truncated} placement="bottom">
+                            <span>
+                                {formatted.value}
+                            </span>
+                            <span style:white-space="pre-wrap" slot="tooltip">
+                                {formatted.whole}
+                            </span>
+                        </Tooltip>
                     {/if}
-                {/each}
-                <TableCellText>
-                    {toLocaleDateTime(document.$createdAt)}
-                </TableCellText>
-                <TableCellText>
-                    {toLocaleDateTime(document.$updatedAt)}
-                </TableCellText>
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="$created" {root}>
+                <DualTimeView time={document.$createdAt} />
+            </Table.Cell>
+            <Table.Cell column="$updated" {root}>
+                <DualTimeView time={document.$updatedAt} />
+            </Table.Cell>
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
 
 <RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
 
-<FloatingActionBar show={selectedDb.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedDb.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedDb.length > 1 ? 'documents' : 'document'}
+{#if selectedRows.length > 0}
+    <div class="floating-action-bar">
+        <FloatingActionBar>
+            <svelte:fragment slot="start">
+                <Badge content={selectedRows.length.toString()} />
+                <span>
+                    {selectedRows.length > 1 ? 'documents' : 'document'}
+                    selected
                 </span>
-                selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
-            <Button text on:click={() => (selectedDb = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
+            </svelte:fragment>
+            <svelte:fragment slot="end">
+                <ConsoleButton text on:click={() => (selectedRows = [])}>Cancel</ConsoleButton>
+                <ConsoleButton secondary on:click={() => (showDelete = true)}>Delete</ConsoleButton>
+            </svelte:fragment>
+        </FloatingActionBar>
     </div>
-</FloatingActionBar>
+{/if}
 
-<Modal
-    title="Delete Documents"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
+<Confirm title="Delete Documents" bind:open={showDelete} onSubmit={handleDelete}>
     <div>
-        <p class="text" data-private>
-            Are you sure you want to delete <b>{selectedDb.length}</b>
-            {selectedDb.length > 1 ? 'documents' : 'document'}?
-        </p>
+        Are you sure you want to delete <b>{selectedRows.length}</b>
+        {selectedRows.length > 1 ? 'documents' : 'document'}?
 
         {#if relAttributes?.length}
-            <TableScroll noMargin>
-                <TableHeader>
-                    <TableCellHead width={50}>Relation</TableCellHead>
-                    <TableCellHead width={50}>Setting</TableCellHead>
-                    <TableCellHead width={200} />
-                </TableHeader>
-                <TableBody>
-                    {#each relAttributes as attr}
-                        <TableRow>
-                            <TableCell title="relation">
-                                <span class="u-flex u-cross-center u-gap-8">
-                                    {#if attr.twoWay}
-                                        <span class="icon-switch-horizontal" />
-                                    {:else}
-                                        <span class="icon-arrow-sm-right" />
-                                    {/if}
-                                    <span data-private>{attr.key}</span>
-                                </span>
-                            </TableCell>
-                            <TableCellText title="Settings">
-                                {attr.onDelete}
-                            </TableCellText>
-                            <TableCellText title="description">
-                                {Deletion[attr.onDelete]}
-                            </TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </TableScroll>
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'relation', width: 150 },
+                    { id: 'setting', width: 150 },
+                    { id: 'desc' }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="relation" {root}>Relation</Table.Header.Cell>
+                    <Table.Header.Cell column="setting" {root}>Setting</Table.Header.Cell>
+                    <Table.Header.Cell column="desc" {root} />
+                </svelte:fragment>
+                {#each relAttributes as attr}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="relation" {root}>
+                            <span class="u-flex u-cross-center u-gap-8">
+                                {#if attr.twoWay}
+                                    <span class="icon-switch-horizontal"></span>
+                                {:else}
+                                    <span class="icon-arrow-sm-right"></span>
+                                {/if}
+                                <span data-private>{attr.key}</span>
+                            </span>
+                        </Table.Cell>
+                        <Table.Cell column="setting" {root}>
+                            {attr.onDelete}
+                        </Table.Cell>
+                        <Table.Cell column="desc" {root}>
+                            {Deletion[attr.onDelete]}
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
             <div class="u-flex u-flex-vertical u-gap-16">
                 <Alert>To change the selection edit the relationship settings.</Alert>
 
@@ -358,36 +330,11 @@
             <p class="u-bold">This action is irreversible.</p>
         {/if}
     </div>
+</Confirm>
 
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting || (relAttributes?.length && !checked)}>
-            Delete
-        </Button>
-    </svelte:fragment>
-</Modal>
-
-<style lang="scss">
-    .actions {
-        .indicator {
-            border-radius: 0.25rem;
-            background: hsl(var(--color-information-100));
-            color: hsl(var(--color-neutral-0));
-
-            padding: 0rem 0.375rem;
-            display: inline-block;
-        }
-    }
-
-    :global(.truncated-content-table-cell .truncated) {
-        max-width: 50vw;
-        overflow: hidden;
-        white-space: nowrap;
-        display: inline-block;
-        text-overflow: ellipsis;
-    }
-
-    :global(.truncated-content-table-cell:has(.truncated)) {
-        inline-size: 0;
+<style>
+    .floating-action-bar :global(div:first-of-type) {
+        /* 50% > 60% because we have sub-navigation */
+        left: calc(60% - var(--p-floating-action-bar-width) / 2);
     }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
index a00eba3ae..93f00b816 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Usage } from '$lib/layout';
-    import type { PageData } from './$types';
+    import Container from '$lib/layout/container.svelte';
 
-    export let data: PageData;
+    export let data;
     $: total = data.documentsTotal;
     $: count = data.documents;
 </script>
 
-<Usage
-    title="Databases"
-    path={`${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
-    {total}
-    {count}
-    countMetadata={{
-        legend: 'Documents',
-        title: 'Total documents'
-    }} />
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/usage`}
+        {total}
+        {count}
+        countMetadata={{
+            legend: 'Documents',
+            title: 'Total documents'
+        }} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
deleted file mode 100644
index b14c3a728..000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import AttributeForm from '../document-[document]/attributeForm.svelte';
-    import { createDocument } from './store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Data</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Provide document data based on attributes you created earlier.
-    </svelte:fragment>
-
-    <AttributeForm
-        bind:formValues={$createDocument.document}
-        attributes={$createDocument.attributes}
-        bind:customId={$createDocument.id}
-        gap="24" />
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
deleted file mode 100644
index 01db671ca..000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { Permissions } from '$lib/components/permissions';
-    import { WizardStep } from '$lib/layout';
-    import { createDocument } from './store';
-    import { collection } from '../store';
-    import { Alert } from '$lib/components';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose who can access your collection and documents. For more information, visit our <a
-            href="https://appwrite.io/docs/products/databases/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions guide
-        </a>.
-    </svelte:fragment>
-    {#if $collection.documentSecurity}
-        <div class="common-section">
-            <Alert type="info">
-                <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
-                Users will be able to access this document if they have been granted
-                <b>either document or collection permissions</b>.
-            </Alert>
-        </div>
-        <div class="common-section">
-            <Permissions bind:permissions={$createDocument.permissions} />
-        </div>
-    {:else}
-        <Alert type="info">
-            <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
-            If you want to assign document permissions, navigate to Collection settings and enable document
-            security. Otherwise, only collection permissions will be used.
-        </Alert>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
deleted file mode 100644
index 04cd8ed9f..000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Attributes } from '../store';
-
-type CreateDocument = {
-    id?: string;
-    document: object;
-    permissions: string[];
-    attributes: Attributes[];
-};
-
-const initialCreateDocument: CreateDocument = {
-    id: null,
-    document: {},
-    permissions: [],
-    attributes: []
-};
-
-function createDocumentWritable() {
-    const store = writable<CreateDocument>({ ...initialCreateDocument });
-
-    const reset = () => {
-        store.set({ ...initialCreateDocument });
-    };
-
-    return {
-        ...store,
-        reset
-    };
-}
-
-export const createDocument = createDocumentWritable();
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
index ec61955c1..2e20d66cd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
 
     import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let showCreate = false;
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
     const dispatch = createEventDispatcher();
 
     let name = '';
@@ -24,7 +25,7 @@
         error = null;
         try {
             const collection = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.createCollection(databaseId, id ? id : ID.unique(), name);
             showCreate = false;
             dispatch('created', collection);
@@ -50,32 +51,26 @@
     }
 </script>
 
-<Modal title="Create collection" size="big" bind:show={showCreate} onSubmit={create} bind:error>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="Enter collection name"
-            bind:value={name}
-            autofocus
-            required />
+<Modal title="Create collection" size="m" bind:show={showCreate} onSubmit={create} bind:error>
+    <InputText
+        id="name"
+        label="Name"
+        placeholder="Enter collection name"
+        bind:value={name}
+        autofocus
+        required />
+
+    {#if !showCustomId}
+        <div>
+            <Tag
+                size="s"
+                on:click={() => {
+                    showCustomId = true;
+                }}><Icon icon={IconPencil} /> Collection ID</Tag>
+        </div>
+    {/if}
+    <CustomId autofocus bind:show={showCustomId} name="Collection" bind:id />
 
-        {#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
-                autofocus
-                bind:show={showCustomId}
-                name="Collection"
-                bind:id
-                fullWidth={true} />
-        {/if}
-    </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
index 1c80bd3bf..ef7661522 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
@@ -1,26 +1,18 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { Button, FormList, InputCheckbox } from '$lib/elements/forms';
+    import { Button, InputCheckbox } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { database } from './store';
-
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
     import { type Models, Query } from '@appwrite.io/console';
+    import { Spinner, Table } from '@appwrite.io/pink-svelte';
 
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
     export let showDelete = false;
     let confirmedDeletion = false;
@@ -28,9 +20,6 @@
     let error = null;
     let isLoadingDocumentsCount = false;
 
-    /* enable overflow-x */
-    const columnWidth = 135;
-
     $: collectionItems = [];
     let collections: Models.CollectionList = null;
 
@@ -57,7 +46,7 @@
             const queries = buildQueries();
 
             collections = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.listCollections(databaseId, queries);
 
             const collectionPromises = collections.collections.map(async (collection) => {
@@ -79,14 +68,14 @@
     const handleDelete = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.delete(databaseId);
             showDelete = false;
             addNotification({
                 type: 'success',
                 message: `${$database.name} has been deleted`
             });
-            await goto(`${base}/project-${$page.params.region}-${$page.params.project}/databases`);
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/databases`);
             trackEvent(Submit.DatabaseDelete);
         } catch (error) {
             addNotification({
@@ -101,110 +90,86 @@
     $: if (!showDelete) {
         collections = null;
         collectionItems = [];
+    } else {
+        listCollections();
     }
 </script>
 
-<div class="max-height-dialog">
-    <Modal
-        title="Delete database"
-        icon="exclamation"
-        size="big"
-        state="warning"
-        bind:show={showDelete}
-        onSubmit={handleDelete}
-        headerDivider={false}>
-        {#await listCollections()}
-            <div class="u-flex u-main-center">
-                <div class="loader" />
-            </div>
-        {:then}
-            {#if error}
-                <p class="text" data-private>
-                    Are you sure you want to delete <b>{$database.name}</b>?
-                </p>
-            {:else if collectionItems.length > 0}
-                <p class="text" data-private>
-                    The following collections and all data associated with <b>{$database.name}</b>,
-                    will be permanently deleted.
-                </p>
+<Modal title="Delete database" bind:show={showDelete} onSubmit={handleDelete}>
+    <p class="text" slot="description">
+        {#if collectionItems.length > 0}
+            The following collections and all data associated with <b>{$database.name}</b>, will be
+            permanently deleted.
+        {:else}
+            Are you sure you want to delete <b>{$database.name}</b>?
+        {/if}
+    </p>
 
-                <div class="u-flex-vertical u-gap-16">
-                    <TableScroll dense noMargin class="table">
-                        <TableHeader>
-                            <TableCellHead width={columnWidth}>Collection</TableCellHead>
-                            <!-- small spacer placeholder -->
-                            <TableCellHead width={columnWidth / 4} />
-                            <TableCellHead width={columnWidth}>Last Updated</TableCellHead>
-                        </TableHeader>
-                        <TableBody>
-                            {#each collectionItems as collection}
-                                <TableRow>
-                                    <TableCell title="Collection">{collection.name}</TableCell>
-                                    <TableCell />
-                                    <TableCell title="Last Updated"
-                                        >{toLocaleDate(collection.updatedAt)}</TableCell>
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </TableScroll>
+    {#if isLoadingDocumentsCount}
+        <div class="u-flex u-main-center">
+            <Spinner />
+        </div>
+    {:else if error}
+        <p class="text">
+            Are you sure you want to delete <b>{$database.name}</b>?
+        </p>
+    {:else if collectionItems.length > 0}
+        <div class="u-flex-vertical u-gap-16">
+            <Table.Root columns={2} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell {root}>Collection</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Last Updated</Table.Header.Cell>
+                </svelte:fragment>
+                {#each collectionItems as collection}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>{collection.name}</Table.Cell>
+                        <Table.Cell {root}>{toLocaleDate(collection.updatedAt)}</Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
 
-                    {#if collectionItems.length < collections.total}
-                        <div class="u-flex u-gap-16 u-cross-center">
-                            <button class="u-underline" on:click={listCollections} type="button">
-                                Show more
-                            </button>
+            {#if collectionItems.length < collections.total}
+                <div class="u-flex u-gap-16 u-cross-center">
+                    <button class="u-underline" on:click={listCollections} type="button">
+                        Show more
+                    </button>
 
-                            {#if isLoadingDocumentsCount}
-                                <div class="loader is-small" />
-                            {/if}
-                        </div>
-                    {:else if collectionItems.length > 25}
-                        <button
-                            class="u-underline"
-                            on:click={() => {
-                                collectionItems = collectionItems.slice(0, 3);
-                            }}
-                            type="button">
-                            Show less
-                        </button>
+                    {#if isLoadingDocumentsCount}
+                        <div class="loader is-small"></div>
                     {/if}
                 </div>
-            {:else}
-                <p class="text" data-private>
-                    Are you sure you want to delete <b>{$database.name}</b>?
-                </p>
+            {:else if collectionItems.length > 25}
+                <button
+                    class="u-underline"
+                    on:click={() => {
+                        collectionItems = collectionItems.slice(0, 3);
+                    }}
+                    type="button">
+                    Show less
+                </button>
             {/if}
-        {/await}
+        </div>
+    {/if}
 
-        {#if !isLoadingDocumentsCount}
-            <p class="text" data-private>
-                <b>
-                    Once deleted, this database and its backups cannot be restored. This action is
-                    irreversible.
-                </b>
-            </p>
+    {#if !isLoadingDocumentsCount}
+        <p class="text" data-private>
+            <b>
+                Once deleted, this database and its backups cannot be restored. This action is
+                irreversible.
+            </b>
+        </p>
 
-            <FormList>
-                <div class="input-check-box-friction">
-                    <InputCheckbox
-                        required
-                        size="small"
-                        id="delete_policy"
-                        bind:checked={confirmedDeletion}
-                        label="I understand and confirm" />
-                </div>
-            </FormList>
-        {/if}
+        <div class="input-check-box-friction">
+            <InputCheckbox
+                required
+                id="delete_policy"
+                bind:checked={confirmedDeletion}
+                label="I understand and confirm" />
+        </div>
+    {/if}
 
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</div>
-
-<style>
-    :global(.max-height-dialog dialog) {
-        max-height: 650px;
-    }
-</style>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button danger submit disabled={!confirmedDeletion}>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
index 5cc8c1a25..822203307 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { CardContainer, GridItem1, Id } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { canWriteCollections } from '$lib/stores/roles';
     import type { PageData } from './$types';
     export let data: PageData;
     export let showCreate = false;
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
+    const projectId = page.params.project;
+    const databaseId = page.params.database;
 </script>
 
 <CardContainer
-    showEmpty={$canWriteCollections}
+    disableEmpty={!$canWriteCollections}
     total={data.collections.total}
     on:click={() => (showCreate = true)}
     event="collection">
     {#each data.collections.collections as collection}
         <GridItem1
-            href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
+            href={`${base}/project-${page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
             <svelte:fragment slot="title">{collection.name}</svelte:fragment>
             <svelte:fragment slot="status">
                 {#if !collection.enabled}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
index d5e107c9b..e220dba39 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteDatabases } from '$lib/stores/roles';
     import { database } from './store';
 
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
-    const path = `${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}`;
+    const projectId = page.params.project;
+    const databaseId = page.params.database;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`;
     const tabs = [
         {
             href: path,
@@ -40,7 +40,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/databases`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>
         <Id value={$database.$id}>{$database.$id}</Id>
@@ -50,7 +50,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
index d0b64f86c..fc6dd0cd0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { BoxAvatar, Card, CardGrid, Heading } from '$lib/components';
+    import { page } from '$app/state';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, Helper, InputText } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -26,7 +26,7 @@
 
     async function loadCollectionCount() {
         const { total } = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.listCollections($database.$id, [Query.limit(1)]);
         return total;
     }
@@ -40,8 +40,8 @@
     async function updateName() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .databases.update($page.params.database, databaseName);
+                .forProject(page.params.region, page.params.project)
+                .databases.update(page.params.database, databaseName);
             await invalidate(Dependencies.DATABASE);
             addNotification({
                 message: 'Name has been updated',
@@ -57,24 +57,19 @@
 
 {#if $database}
     <Container>
-        <Card>
-            <div class="common-section grid-1-2">
-                <div class="grid-1-2-col-1">
-                    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-                        <Heading tag="h6" size="7">{$database.name}</Heading>
-                    </div>
-                </div>
+        <CardGrid>
+            <svelte:fragment slot="title">{$database.name}</svelte:fragment>
+            <svelte:fragment slot="aside">
                 <div class="grid-1-2-col-2">
                     <p>Created: {toLocaleDateTime($database.$createdAt)}</p>
                     <p>Last updated: {toLocaleDateTime($database.$updatedAt)}</p>
                 </div>
-            </div>
-        </Card>
+            </svelte:fragment>
+        </CardGrid>
 
         <Form onSubmit={updateName}>
             <CardGrid>
-                <Heading tag="h6" size="7">Name</Heading>
-
+                <svelte:fragment slot="title">Name</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <ul>
                         <InputText
@@ -98,22 +93,17 @@
             </CardGrid>
         </Form>
 
-        <CardGrid danger>
-            <div>
-                <Heading tag="h6" size="7">Delete database</Heading>
-            </div>
-
-            <p>
-                The database will be permanently deleted, including all collections within it. This
-                action is irreversible.
-            </p>
+        <CardGrid>
+            <svelte:fragment slot="title">Delete database</svelte:fragment>
+            The database will be permanently deleted, including all collections within it. This action
+            is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="title">
                         <h6 class="u-bold u-trim-1">{$database.name}</h6>
                         <span class="u-flex u-gap-8">
                             {#await loadCollectionCount()}
-                                <div class="loader is-small" />
+                                <div class="loader is-small"></div>
                             {:then count}
                                 {count}
                             {/await}
@@ -125,7 +115,12 @@
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+                <Button
+                    secondary
+                    on:click={() => {
+                        showDelete = true;
+                        trackEvent(Click.DatabaseDatabaseDelete);
+                    }}>Delete</Button>
             </svelte:fragment>
         </CardGrid>
     </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/store.ts
index f7844f092..d37acffdb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/store.ts
@@ -7,10 +7,10 @@ export const database = derived(page, ($page) => $page.data.database as Models.D
 export const showCreate = writable(false);
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Collection ID', type: 'string', show: true, width: 150 },
-    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
-    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+    { id: '$id', title: 'Collection ID', type: 'string', width: 200 },
+    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } },
+    { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 120 } }
 ]);
 
 export const backupRetainingOptions = [
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
index d56d13300..5f1f8c2b3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
-    import { get } from 'svelte/store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
 
@@ -10,9 +9,8 @@
         key: string,
         data: Partial<Models.AttributeString>
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.createStringAttribute(
                 databaseId,
                 collectionId,
@@ -29,9 +27,8 @@
         data: Partial<Models.AttributeString>,
         originalKey?: string
     ) {
-        const $page = get(page);
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .databases.updateStringAttribute(
                 databaseId,
                 collectionId,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
index 918db5c77..bab65963c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
@@ -1,44 +1,33 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Id, Modal } from '$lib/components';
-    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    import { Id } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { canWriteCollections } from '$lib/stores/roles';
     import { sdk } from '$lib/stores/sdk';
+    import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import { columns } from './store';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let data: PageData;
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
+    const databaseId = page.params.database;
 
-    let selected: string[] = [];
+    let selectedRows: string[] = [];
     let showDelete = false;
     let deleting = false;
 
     async function handleDelete() {
         showDelete = false;
 
-        const promises = selected.map((collectionId) =>
+        const promises = selectedRows.map((collectionId) =>
             sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .databases.deleteCollection(databaseId, collectionId)
         );
         try {
@@ -46,7 +35,7 @@
             trackEvent(Submit.CollectionDelete);
             addNotification({
                 type: 'success',
-                message: `${selected.length} collection${selected.length > 1 ? 's' : ''} deleted`
+                message: `${selectedRows.length} collection${selectedRows.length > 1 ? 's' : ''} deleted`
             });
             invalidate(Dependencies.COLLECTIONS);
         } catch (error) {
@@ -56,104 +45,63 @@
             });
             trackError(error, Submit.CollectionDelete);
         } finally {
-            selected = [];
+            selectedRows = [];
             showDelete = false;
         }
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        {#if $canWriteCollections}
-            <TableCellHeadCheck
-                bind:selected
-                pageItemsIds={data.collections.collections.map((c) => c.$id)} />
-        {/if}
-        {#each $columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root columns={$columns} allowSelection={$canWriteCollections} bind:selectedRows let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.collections.collections as collection (collection.$id)}
-            <TableRowLink
-                href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
-                {#if $canWriteCollections}
-                    <TableCellCheck bind:selectedIds={selected} id={collection.$id} />
-                {/if}
-                {#each $columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key $columns}
-                                <TableCell title={column.title} width={column.width}>
-                                    <Id value={collection.$id}>{collection.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'name'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {collection.name}
-                            </TableCellText>
-                        {:else}
-                            <TableCellText title={column.title} width={column.width}>
-                                {toLocaleDateTime(collection[column.id])}
-                            </TableCellText>
-                        {/if}
-                    {/if}
-                {/each}
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</TableScroll>
-
-<FloatingActionBar show={selected.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selected.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selected.length > 1 ? 'collections' : 'collection'}
-                </span>
-                selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
-            <Button text on:click={() => (selected = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
-
-<Modal
-    title="Delete Collections"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
-        Are you sure you want to delete <b>{selected.length}</b>
-        {selected.length > 1 ? 'collections' : 'collection'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
     </svelte:fragment>
-</Modal>
+    {#each data.collections.collections as collection (collection.$id)}
+        <Table.Row.Link
+            {root}
+            id={collection.$id}
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collection.$id}`}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key $columns}
+                            <Id value={collection.$id}>{collection.$id}</Id>
+                        {/key}
+                    {:else if column.id === 'name'}
+                        {collection.name}
+                    {:else}
+                        {toLocaleDateTime(collection[column.id])}
+                    {/if}
+                </Table.Cell>
+            {/each}
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
 
-<style lang="scss">
-    .actions {
-        .indicator {
-            border-radius: 0.25rem;
-            background: hsl(var(--color-information-100));
-            color: hsl(var(--color-neutral-0));
+{#if selectedRows.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedRows.length.toString()} />
+            <span>
+                {selectedRows.length > 1 ? 'collections' : 'collection'}
+                selected
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
+            <Button text on:click={() => (selectedRows = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-            padding: 0rem 0.375rem;
-            display: inline-block;
-        }
-    }
-</style>
+<Confirm
+    title="Delete collections"
+    bind:open={showDelete}
+    onSubmit={handleDelete}
+    disabled={deleting}>
+    <Typography.Text>
+        Are you sure you want to delete <b>{selectedRows.length}</b>
+        {selectedRows.length > 1 ? 'collections' : 'collection'}?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index 98589f18a..2cf815d2e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Usage, UsageMultiple } from '$lib/layout';
-    import type { PageData } from './$types';
+    import { page } from '$app/state';
+    import { Container, Usage, UsageMultiple } from '$lib/layout';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
-    export let data: PageData;
+    export let data;
 
     $: total = data.collectionsTotal;
     $: count = data.collections;
@@ -14,30 +14,28 @@
 
     $: writes = data.databaseWrites;
     $: writesTotal = data.databaseWritesTotal;
-
-    $: path = `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$page.params.database}/usage`;
 </script>
 
-<div class="u-flex u-flex-vertical u-gap-16">
-    <Usage
-        {path}
-        {total}
-        {count}
-        title="Usage"
-        countMetadata={{
-            legend: 'Collections',
-            title: 'Total collections'
-        }} />
+<Container>
+    <Layout.Stack gap="l">
+        <Usage
+            path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/usage`}
+            {total}
+            {count}
+            countMetadata={{
+                legend: 'Collections',
+                title: 'Total collections'
+            }} />
 
-    <UsageMultiple
-        title="Reads and writes"
-        showHeader={false}
-        overlapContainerCover
-        total={[readsTotal, writesTotal]}
-        count={[reads, writes]}
-        legendNumberFormat="abbreviate"
-        legendData={[
-            { name: 'Reads', value: readsTotal },
-            { name: 'Writes', value: writesTotal }
-        ]} />
-</div>
+        <UsageMultiple
+            title="Reads and writes"
+            showHeader={false}
+            total={[readsTotal, writesTotal]}
+            count={[reads, writes]}
+            legendNumberFormat="abbreviate"
+            legendData={[
+                { name: 'Reads', value: readsTotal },
+                { name: 'Writes', value: writesTotal }
+            ]} />
+    </Layout.Stack>
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/grid.svelte b/src/routes/(console)/project-[region]-[project]/databases/grid.svelte
index 18f50fa93..cacfeba9c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/grid.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { CardContainer, GridItem1, Id } from '$lib/components';
     import { canWriteDatabases } from '$lib/stores/roles';
     import type { PageData } from './$types';
     export let data: PageData;
     export let showCreate = false;
-    const project = $page.params.project;
+    const project = page.params.project;
 </script>
 
 <CardContainer
-    showEmpty={$canWriteDatabases}
+    disableEmpty={!$canWriteDatabases}
     total={data.databases.total}
     on:click={() => (showCreate = true)}
     event="database"
     service="databases">
     {#each data.databases.databases as database}
         <GridItem1
-            href={`${base}/project-${$page.params.region}-${project}/databases/database-${database.$id}`}>
+            href={`${base}/project-${page.params.region}-${project}/databases/database-${database.$id}`}>
             <svelte:fragment slot="title">{database.name}</svelte:fragment>
             <svelte:fragment slot="subtitle">
                 {#if data.lastBackups && data.lastBackups[database.$id]}
                     Last backup: {data.lastBackups[database.$id]}
                 {:else if !data.policies || !data.policies[database.$id]}
-                    <span class="icon-exclamation" /> No backup policies
+                    <span class="icon-exclamation"></span> No backup policies
                 {:else}
                     Last backup: No backups yet
                 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/header.svelte
index 0401a24f8..796c86d09 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/header.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
-    const path = `${base}/project-${$page.params.region}-${projectId}/databases`;
+    const projectId = page.params.project;
+    const path = `${base}/project-${page.params.region}-${projectId}/databases`;
     const tabs = [
         {
             href: path,
@@ -25,13 +26,13 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle>Databases</CoverTitle>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Databases</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/store.ts b/src/routes/(console)/project-[region]-[project]/databases/store.ts
index a931b52c6..0abd5c32f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/store.ts
@@ -5,16 +5,16 @@ import { writable } from 'svelte/store';
 export const columns = writable<Column[]>(
     isCloud
         ? [
-              { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
-              { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
-              { id: 'backup', title: 'Backups', type: 'string', show: true, width: 120 },
-              { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
-              { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+              { id: '$id', title: 'Database ID', type: 'string', width: 200 },
+              { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+              { id: 'backup', title: 'Backups', type: 'string', width: { min: 120 } },
+              { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } },
+              { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 120 } }
           ]
         : [
-              { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
-              { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
-              { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
-              { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+              { id: '$id', title: 'Database ID', type: 'string', width: 200 },
+              { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+              { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } },
+              { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 120 } }
           ]
 );
diff --git a/src/routes/(console)/project-[region]-[project]/databases/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/table.svelte
index 5c3adf122..df80b3c35 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/table.svelte
@@ -1,24 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import type { PageData } from './$types';
     import { columns } from './store';
-    import Cell from '$lib/elements/table/cell.svelte';
+    import { Tooltip, Table } from '@appwrite.io/pink-svelte';
 
-    export let data: PageData;
-    const projectId = $page.params.project;
+    export let data;
 
     function getPolicyDescription(cron: string): string {
         const [minute, hour, dayOfMonth, , dayOfWeek] = cron.split(' ');
@@ -30,68 +18,53 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        {#each $columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root columns={$columns} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.databases.databases as database (database.$id)}
-            <TableRowLink
-                href={`${base}/project-${$page.params.region}-${projectId}/databases/database-${database.$id}`}>
-                {#each $columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key $columns}
-                                <TableCell width={column.width} title={column.title}>
-                                    <Id value={database.$id}>
-                                        {database.$id}
-                                    </Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'name'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {database.name}
-                            </TableCellText>
-                        {:else if column.id === 'backup'}
-                            {@const policies = data.policies?.[database.$id] ?? null}
-                            {@const lastBackup = data.lastBackups?.[database.$id] ?? null}
-                            {@const description = policies
-                                ?.map((policy) => getPolicyDescription(policy.schedule))
-                                .join(', ')}
+    </svelte:fragment>
+    {#each data.databases.databases as database (database.$id)}
+        <Table.Row.Link
+            {root}
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${database.$id}`}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key $columns}
+                            <Id value={database.$id}>
+                                {database.$id}
+                            </Id>
+                        {/key}
+                    {:else if column.id === 'name'}
+                        {database.name}
+                    {:else if column.id === 'backup'}
+                        {@const policies = data.policies?.[database.$id] ?? null}
+                        {@const lastBackup = data.lastBackups?.[database.$id] ?? null}
+                        {@const description = policies
+                            ?.map((policy) => getPolicyDescription(policy.schedule))
+                            .join(', ')}
 
-                            <Cell title={column.title} width={column.width}>
-                                <span
-                                    class="u-trim"
-                                    use:tooltip={{
-                                        placement: 'bottom',
-                                        disabled: !policies || !lastBackup,
-                                        content: `Last backup: ${lastBackup}`
-                                    }}>
-                                    {#if !policies}
-                                        <span class="icon-exclamation" /> No backup policies
-                                    {:else}
-                                        {description}
-                                    {/if}
-                                </span>
-                            </Cell>
-                        {:else}
-                            <TableCellText width={column.width} title={column.title}>
-                                {toLocaleDateTime(database[column.id])}
-                            </TableCellText>
-                        {/if}
+                        <Tooltip
+                            placement="bottom"
+                            disabled={!policies || !lastBackup}
+                            maxWidth="fit-content">
+                            <span class="u-trim">
+                                {#if !policies}
+                                    <span class="icon-exclamation"></span> No backup policies
+                                {:else}
+                                    {description}
+                                {/if}
+                            </span>
+                            <span slot="tooltip">
+                                {`Last backup: ${lastBackup}`}
+                            </span>
+                        </Tooltip>
+                    {:else}
+                        {toLocaleDateTime(database[column.id])}
                     {/if}
-                {/each}
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</TableScroll>
-
-<style lang="scss">
-    .icon-exclamation {
-        color: hsl(var(--color-warning-100)) !important;
-    }
-</style>
+                </Table.Cell>
+            {/each}
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
index 69f270c15..5ff65052e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Usage, UsageMultiple } from '$lib/layout';
+    import { page } from '$app/state';
+    import { Container, Usage, UsageMultiple } from '$lib/layout';
+    import { Layout } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
 
     export let data: PageData;
@@ -13,30 +14,28 @@
 
     $: writes = data.databasesWrites;
     $: writesTotal = data.databasesWritesTotal;
-
-    $: path = `${base}/project-${$page.params.region}-${$page.params.project}/databases/usage`;
 </script>
 
-<div class="u-flex u-flex-vertical u-gap-16">
-    <Usage
-        {path}
-        {total}
-        {count}
-        title="Usage"
-        countMetadata={{
-            legend: 'Databases',
-            title: 'Total databases'
-        }} />
+<Container>
+    <Layout.Stack gap="l">
+        <Usage
+            path={`${base}/project-${page.params.region}-${page.params.project}/databases/usage`}
+            {total}
+            {count}
+            countMetadata={{
+                legend: 'Databases',
+                title: 'Total databases'
+            }} />
 
-    <UsageMultiple
-        title="Reads and writes"
-        showHeader={false}
-        overlapContainerCover
-        total={[readsTotal, writesTotal]}
-        count={[reads, writes]}
-        legendNumberFormat="abbreviate"
-        legendData={[
-            { name: 'Reads', value: readsTotal },
-            { name: 'Writes', value: writesTotal }
-        ]} />
-</div>
+        <UsageMultiple
+            title="Reads and writes"
+            showHeader={false}
+            total={[readsTotal, writesTotal]}
+            count={[reads, writes]}
+            legendNumberFormat="abbreviate"
+            legendData={[
+                { name: 'Reads', value: readsTotal },
+                { name: 'Writes', value: writesTotal }
+            ]} />
+    </Layout.Stack>
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
index c642197f0..0bc701817 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
@@ -1,68 +1,61 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { page } from '$app/state';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import {
         CardContainer,
         Empty,
+        EmptySearch,
         GridItem1,
         Id,
         PaginationWithLimit,
+        SearchQuery,
         SvgIcon
     } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import { isServiceLimited } from '$lib/stores/billing';
-    import { templatesList } from '$lib/stores/templates';
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
-    import Initial from '$lib/wizards/functions/cover.svelte';
-    import CreateTemplate from '$lib/wizards/functions/createTemplate.svelte';
-    import {
-        templateConfig as templateConfigStore,
-        template as templateStore
-    } from '$lib/wizards/functions/store.js';
+
     import { parseExpression } from 'cron-parser';
     import { onMount } from 'svelte';
-    import { functionsList } from './store';
     import { canWriteFunctions } from '$lib/stores/roles';
     import type { Models } from '@appwrite.io/console';
+    import { Icon, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconClock, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { goto } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
+    import Avatar from '$lib/components/avatar.svelte';
 
     export let data;
 
     let offset = 0;
 
-    const project = $page.params.project;
+    const project = page.params.project;
 
     onMount(async () => {
-        const from = $page.url.searchParams.get('from');
+        const from = page.url.searchParams.get('from');
         if (from === 'github') {
-            const to = $page.url.searchParams.get('to');
+            const to = page.url.searchParams.get('to');
             switch (to) {
                 case 'template': {
-                    const step = $page.url.searchParams.get('step');
-                    const template = $page.url.searchParams.get('template');
-                    const templateConfig = $page.url.searchParams.get('templateConfig');
-                    templateStore.set(
-                        (await $templatesList).templates.find((item) => item.id === template)
+                    const template = page.url.searchParams.get('template');
+                    const templateConfig = page.url.searchParams.get('templateConfig');
+                    goto(
+                        `${base}/project-${page.params.region}-${project}/functions/create-function/template-${template}?templateConfig=${templateConfig}`
                     );
-                    templateConfigStore.set(JSON.parse(templateConfig));
-                    wizard.start(CreateTemplate);
-                    wizard.setStep(Number(step));
                     break;
                 }
                 case 'cover':
-                    openWizard();
+                    goto(
+                        `${base}/project-${page.params.region}-${project}/functions/create-function`
+                    );
                     break;
             }
         }
     });
 
-    function openWizard() {
-        wizard.showCover(Initial);
-    }
-
     function getNextScheduledExecution(func: Models.Function) {
         return toLocaleDateTime(parseExpression(func.schedule, { utc: true }).next().toString());
     }
@@ -70,13 +63,14 @@
     $: $registerCommands([
         {
             label: 'Create function',
-            callback: openWizard,
+            callback: () =>
+                goto(`${base}/project-${page.params.region}-${project}/functions/create-function`),
             keys: ['c'],
             disabled:
                 $wizard.show ||
-                isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total) ||
+                isServiceLimited('functions', $organization?.billingPlan, data.functions?.total) ||
                 !$canWriteFunctions,
-            icon: 'plus',
+            icon: IconPlus,
             group: 'functions'
         }
     ]);
@@ -85,43 +79,43 @@
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Functions"
-        buttonText={$canWriteFunctions ? 'Create function' : ''}
-        buttonEvent="create_function"
-        buttonMethod={openWizard}
-        total={data.functions.total} />
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery placeholder="Search by name or ID" />
+
+        <Button href={`${base}/project-${page.params.region}-${project}/functions/create-function`}>
+            <Icon icon={IconPlus} slot="start" />
+            Create function
+        </Button>
+    </Layout.Stack>
 
     {#if data.functions.total}
         <CardContainer
             {offset}
-            showEmpty={$canWriteFunctions}
+            disableEmpty={!$canWriteFunctions}
             event="functions"
             total={data.functions.total}
-            on:click={openWizard}
-            service="functions">
-            {#each data.functions.functions as func}
+            service="functions"
+            on:click={() =>
+                goto(`${base}/project-${page.params.region}-${project}/functions/create-function`)}>
+            {#each data.functions.functions as func (func.$id)}
                 <GridItem1
-                    href={`${base}/project-${$page.params.region}-${project}/functions/function-${func.$id}`}>
+                    href={`${base}/project-${page.params.region}-${project}/functions/function-${func.$id}`}>
                     <svelte:fragment slot="title">
-                        <div class="u-flex u-gap-16 u-cross-center">
-                            <div class="avatar is-medium">
-                                <SvgIcon name={func.runtime.split('-')[0]}></SvgIcon>
-                            </div>
-                            <span class="text">{func.name}</span>
-                        </div>
+                        <Layout.Stack gap="l" alignItems="center" direction="row" inline>
+                            <Avatar alt={func.name} size="m">
+                                <SvgIcon name={func.runtime.split('-')[0]} />
+                            </Avatar>
+                            {func.name}
+                        </Layout.Stack>
                     </svelte:fragment>
                     <svelte:fragment slot="icons">
                         {#if func.schedule}
-                            <li>
-                                <span
-                                    class="icon-clock"
-                                    aria-hidden="true"
-                                    use:tooltip={{
-                                        content: `Next execution:
-                                        ${getNextScheduledExecution(func)}`
-                                    }} />
-                            </li>
+                            <Tooltip>
+                                <Icon icon={IconClock} size="s" />
+                                <span slot="tooltip"
+                                    >{`Next execution:
+                                        ${getNextScheduledExecution(func)}`}</span>
+                            </Tooltip>
                         {/if}
                     </svelte:fragment>
                     <Id value={func.$id} event="function">{func.$id}</Id>
@@ -137,12 +131,23 @@
             limit={data.limit}
             offset={data.offset}
             total={data.functions.total} />
+    {:else if data?.search}
+        <EmptySearch hidePages bind:search={data.search} target="functions">
+            <Button
+                secondary
+                href={`${base}/project-${page.params.region}-${page.params.project}/functions`}>
+                Clear search
+            </Button>
+        </EmptySearch>
     {:else}
         <Empty
             single
             allowCreate={$canWriteFunctions}
             href="https://appwrite.io/docs/products/functions"
             target="function"
-            on:click={openWizard} />
+            on:click={() =>
+                goto(
+                    `${base}/project-${page.params.region}-${project}/functions/create-function`
+                )} />
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/+page.ts
index 7fa73f262..a09115861 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/+page.ts
@@ -1,14 +1,14 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
-import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, depends, route, params }) => {
+export const load = async ({ url, depends, route, parent, params }) => {
     depends(Dependencies.FUNCTIONS);
-
+    const { templatesList } = await parent();
+    const search = getSearch(url);
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, CARD_LIMIT);
+    const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
@@ -16,6 +16,11 @@ export const load: PageLoad = async ({ url, depends, route, params }) => {
         limit,
         functions: await sdk
             .forProject(params.region, params.project)
-            .functions.list([Query.limit(limit), Query.offset(offset), Query.orderDesc('')])
+            .functions.list(
+                [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+                search
+            ),
+        search,
+        templatesList
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
index 514ebe0eb..0b6627d1e 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -11,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/functions`,
             title: 'Functions'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte
new file mode 100644
index 000000000..ae7ea0a6e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { Card, SvgIcon } from '$lib/components';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
+    import type { Models, Runtime } from '@appwrite.io/console';
+
+    export let runtime: Runtime;
+    export let repositoryName: string = undefined;
+    export let branch: string = undefined;
+    export let rootDir: string = undefined;
+    export let showGitData = true;
+    export let runtimes: Models.RuntimeList;
+
+    $: selectedRuntime = runtimes?.runtimes.find((r) => r.$id === runtime);
+
+    $: console.log(runtimes);
+</script>
+
+<Card padding="s" radius="s">
+    <Layout.Stack gap="xl">
+        <slot />
+        <Layout.Stack gap="l">
+            {#if selectedRuntime?.name}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Runtime</Typography.Caption>
+                    <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                        {#if selectedRuntime?.key}
+                            <SvgIcon iconSize="small" size={16} name={selectedRuntime.key} />
+                        {/if}
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                            {selectedRuntime.name} - {selectedRuntime.version}
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+            {/if}
+            {#if showGitData}
+                {#if repositoryName}
+                    <Layout.Stack gap="xxxs">
+                        <Typography.Caption variant="400">Git repository</Typography.Caption>
+                        <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                            <Icon size="s" icon={IconGithub} color="--fgcolor-neutral-primary" />
+                            <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                                {repositoryName}
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                {/if}
+                {#if branch}
+                    <Layout.Stack gap="xxxs">
+                        <Typography.Caption variant="400">Branch</Typography.Caption>
+                        <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                            <Icon size="s" icon={IconGitBranch} color="--fgcolor-neutral-primary" />
+                            <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                                {branch}
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                {/if}
+
+                {#if rootDir}
+                    <Layout.Stack gap="xxxs">
+                        <Typography.Caption variant="400">Root directory</Typography.Caption>
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                            {rootDir}
+                        </Typography.Text>
+                    </Layout.Stack>
+                {/if}
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Card>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte
new file mode 100644
index 000000000..baa9692af
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { CustomId } from '$lib/components';
+    import { BillingPlan } from '$lib/constants';
+    import { InputSelect, InputText } from '$lib/elements/forms';
+    import Link from '$lib/elements/link.svelte';
+    import { upgradeURL } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+    import { isCloud } from '$lib/system';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Fieldset, Icon, Input, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import type { ComponentType } from 'svelte';
+
+    export let name: string;
+    export let id: string;
+    export let entrypoint: string;
+    export let showEntrypoint = false;
+    export let runtime: string;
+    export let options: {
+        value: string;
+        label: string;
+        leadingIcon?: ComponentType;
+    }[] = [];
+    export let specification: string;
+    export let specificationOptions: {
+        value: string;
+        label: string;
+    }[] = [];
+
+    let showCustomId = false;
+</script>
+
+<Fieldset legend="Details">
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="s">
+            <InputText
+                label="Name"
+                id="name"
+                name="name"
+                bind:value={name}
+                required
+                placeholder="Enter name" />
+            {#if showCustomId}
+                <CustomId bind:id bind:show={showCustomId} name="Function" />
+            {:else}
+                <div>
+                    <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                        <Icon icon={IconPencil} size="s" />
+                        Function ID
+                    </Tag>
+                </div>
+            {/if}
+        </Layout.Stack>
+        {#key runtime}
+            <InputSelect
+                id="runtime"
+                label="Runtime"
+                placeholder="Select runtime"
+                bind:value={runtime}
+                required
+                {options} />
+        {/key}
+
+        {#if isCloud}
+            <Layout.Stack gap="xs">
+                <InputSelect
+                    label="CPU and memory"
+                    id="specification"
+                    placeholder="Select specification"
+                    required
+                    disabled={specificationOptions.length < 1}
+                    options={specificationOptions}
+                    bind:value={specification} />
+                {#if $organization?.billingPlan === BillingPlan.FREE}
+                    <Input.Helper state="default">
+                        <Link href={$upgradeURL} variant="muted">Upgrade</Link> to Pro or Scale to adjust
+                        your CPU and RAM beyond the default.
+                    </Input.Helper>
+                {/if}
+            </Layout.Stack>
+        {/if}
+        {#if showEntrypoint}
+            <InputText
+                label="Entrypoint"
+                id="entrypoint"
+                bind:value={entrypoint}
+                required
+                placeholder="Enter entrypoint" />
+        {/if}
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte
new file mode 100644
index 000000000..cb80520e3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { SvgIcon } from '$lib/components';
+    import { page } from '$app/state';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import type { Models } from '@appwrite.io/console';
+    import { isSelfHosted } from '$lib/system';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { afterNavigate, goto } from '$app/navigation';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { Repositories } from '$lib/components/git';
+    import {
+        Alert,
+        Avatar,
+        Badge,
+        Card,
+        Divider,
+        Icon,
+        Layout,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+
+    export let data;
+
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
+    const wizardBase = `${base}/project-${page.params.region}-${page.params.project}/functions`;
+    let previousPage: string = wizardBase;
+    afterNavigate(({ from }) => {
+        previousPage = from?.url?.pathname || previousPage;
+    });
+
+    let selectedRepository: string;
+
+    const featuredTemplatesList = data.templatesList.templates
+        .filter((template) => template.id !== 'starter')
+        .slice(0, 4);
+
+    const starterTemplate = data.templatesList.templates.find(
+        (template) => template.id === 'starter'
+    );
+
+    const baseRuntimesList = [
+        ...new Map(
+            data.runtimesList.runtimes.map((runtime) => {
+                const base = runtime.name.split('-')[0];
+                return [base, runtime];
+            })
+        ).values()
+    ];
+
+    const starterTemplateRuntimes = starterTemplate.runtimes.filter((r) =>
+        baseRuntimesList.some((base) => base.$id === r.name)
+    );
+
+    function connect(e: Models.ProviderRepository) {
+        trackEvent(Click.ConnectRepositoryClick, { from: 'cover' });
+        repository.set(e);
+        goto(`${wizardBase}/create-function/repository-${e.id}?installation=${$installation.$id}`);
+    }
+</script>
+
+<Wizard title="Create function" href={previousPage} column columnSize="l" hideFooter>
+    <Layout.Stack gap="l">
+        <Layout.GridFraction start={4} end={6} gap="l" rowSize="auto">
+            <Card.Base>
+                {#if isSelfHosted && !isVcsEnabled}
+                    <Layout.Stack gap="xl">
+                        <Typography.Title size="s">Connect Git repository</Typography.Title>
+
+                        <Alert.Inline
+                            status="info"
+                            title="Connect your self-hosted instance to Git ">
+                            <Layout.Stack>
+                                <p>
+                                    Configure your self-hosted instance to connect your function to
+                                    a Git repository.
+                                </p>
+                                <div>
+                                    <Button
+                                        compact
+                                        external
+                                        href="https://appwrite.io/docs/advanced/self-hosting/functions#git"
+                                        >Learn more</Button>
+                                </div>
+                            </Layout.Stack>
+                        </Alert.Inline>
+                    </Layout.Stack>
+                {:else}
+                    <Layout.Stack
+                        gap="xl"
+                        justifyContent="space-between"
+                        alignContent="space-between"
+                        alignItems="stretch"
+                        height="100%">
+                        <Layout.Stack gap="xl">
+                            <Typography.Title size="s">Connect Git repository</Typography.Title>
+
+                            <Repositories
+                                bind:selectedRepository
+                                action="button"
+                                callbackState={{
+                                    from: 'github',
+                                    to: 'cover'
+                                }}
+                                {connect} />
+                        </Layout.Stack>
+                        {#if data.installations.total}
+                            <Layout.Stack gap="l">
+                                <Divider />
+                                <Link variant="quiet" href="#/">
+                                    <Layout.Stack direction="row" gap="xs">
+                                        Missing a repository? check your permissions <Icon
+                                            icon={IconArrowSmRight} />
+                                    </Layout.Stack>
+                                </Link>
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+            </Card.Base>
+
+            <Card.Base>
+                <Layout.Stack gap="xl">
+                    <Typography.Title size="s">Quick start</Typography.Title>
+                    <Layout.Grid columnsXXS={1} columnsXS={2} columnsS={3} columns={4} gap="s">
+                        {#each starterTemplateRuntimes.slice(0, 6) as template}
+                            {@const iconName = template.name.split('-')[0]}
+                            {@const runtimeDetail = baseRuntimesList.find(
+                                (runtime) => runtime.$id === template.name
+                            )}
+                            <Card.Link
+                                variant="secondary"
+                                radius="s"
+                                padding="s"
+                                on:click={() => {
+                                    trackEvent('click_connect_template', {
+                                        from: 'cover',
+                                        template: starterTemplate.id,
+                                        runtime: template.name
+                                    });
+                                }}
+                                href={`${wizardBase}/create-function/template-${starterTemplate.id}?runtime=${runtimeDetail.$id}`}>
+                                <Layout.Stack direction="row" gap="s" alignItems="center">
+                                    <Avatar size="xs" alt={template.name} empty={!template.name}>
+                                        <SvgIcon name={iconName} iconSize="small" />
+                                    </Avatar>
+                                    <Typography.Text color="--fgcolor-neutral-primary">
+                                        <Layout.Stack direction="row" gap="xs" alignItems="center">
+                                            {runtimeDetail?.name}
+                                            {#if runtimeDetail?.name?.toLowerCase() === 'deno'}
+                                                <Badge
+                                                    variant="secondary"
+                                                    size="xs"
+                                                    content="New" />
+                                            {/if}
+                                        </Layout.Stack>
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Card.Link>
+                        {/each}
+                    </Layout.Grid>
+
+                    <Divider />
+
+                    <Layout.Grid columnsS={1} columns={2}>
+                        {#each featuredTemplatesList as template}
+                            <Card.Link
+                                radius="s"
+                                padding="xs"
+                                href={`${wizardBase}/create-function/template-${template.id}`}
+                                on:click={() => {
+                                    trackEvent('click_connect_template', {
+                                        from: 'cover',
+                                        template: template.name
+                                    });
+                                }}>
+                                <Layout.Stack gap="xxs">
+                                    <Layout.Stack
+                                        direction="row"
+                                        gap="s"
+                                        alignItems="center"
+                                        justifyContent="space-between">
+                                        <Typography.Text
+                                            variant="m-500"
+                                            color="--fgcolor-neutral-primary">
+                                            {template.name}
+                                        </Typography.Text>
+                                        <Icon
+                                            icon={IconArrowSmRight}
+                                            color="--fgcolor-neutral-tertiary" />
+                                    </Layout.Stack>
+                                    <Typography.Text variant="m-400">
+                                        {template.tagline}
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Card.Link>
+                        {/each}
+                    </Layout.Grid>
+
+                    <Link variant="quiet" href={`${wizardBase}/templates`}>
+                        <Layout.Stack direction="row" gap="xs">
+                            Browse all templates <Icon icon={IconArrowSmRight} />
+                        </Layout.Stack>
+                    </Link>
+                </Layout.Stack>
+            </Card.Base>
+        </Layout.GridFraction>
+
+        <span>
+            You can also create a function <Link
+                on:click={() => {
+                    trackEvent('click_create_function_manual', { from: 'cover' });
+                }}
+                href={`${wizardBase}/create-function/manual`}>manually</Link>
+            or using the CLI.
+            <Link href="https://appwrite.io/docs/products/functions/deployment" external
+                >Learn more</Link
+            >.
+        </span>
+    </Layout.Stack>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.ts
new file mode 100644
index 000000000..935756a39
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.ts
@@ -0,0 +1,12 @@
+export const load = async ({ parent, url }) => {
+    const { templatesList, installations, runtimesList } = await parent();
+
+    return {
+        installations,
+        installation: installations.installations.find(
+            (installation) => installation.$id === url.searchParams.get('installation')
+        ),
+        runtimesList,
+        templatesList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte
new file mode 100644
index 000000000..c7ce6fc56
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Button, Form } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { writable } from 'svelte/store';
+    import { ID, Runtime } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
+    import { consoleVariables } from '$routes/(console)/store';
+    import Details from '../(components)/details.svelte';
+    import Aside from '../(components)/aside.svelte';
+    import { iconPath } from '$lib/stores/app';
+    import { Dependencies } from '$lib/constants';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import Configuration from './configuration.svelte';
+    import { getIconFromRuntime } from '$lib/stores/runtimes';
+    import { removeFile } from '$lib/helpers/files';
+
+    export let data;
+
+    const runtimeOptions = data.runtimesList.runtimes.map((runtime) => {
+        return {
+            value: runtime.$id,
+            label: `${runtime.name} - ${runtime.version}`,
+            leadingHtml: `<img src='${$iconPath(getIconFromRuntime(runtime.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
+        };
+    });
+
+    const specificationOptions = data.specificationsList.specifications.map((size) => ({
+        label:
+            `${size.cpus} CPU, ${size.memory} MB RAM` +
+            (!size.enabled ? ` (Upgrade to use this)` : ''),
+        value: size.slug,
+        disabled: !size.enabled
+    }));
+    let showExitModal = false;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = '';
+    let id: string;
+    let runtime: Runtime;
+    let entrypoint = '';
+    let buildCommand = '';
+    let roles: string[] = [];
+    let variables: Partial<Models.Variable>[] = [];
+    let files: FileList;
+    let specification = specificationOptions[0].value;
+
+    async function create() {
+        try {
+            const func = await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.create(
+                    id || ID.unique(),
+                    name,
+                    runtime,
+                    roles?.length ? roles : undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    true,
+                    undefined,
+                    entrypoint,
+                    buildCommand,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    specification || undefined
+                );
+
+            // Add domain
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.createFunctionRule(
+                    `${ID.unique()}.${$consoleVariables._APP_DOMAIN_FUNCTIONS}`,
+                    func.$id
+                );
+
+            //Add variables
+            const promises = variables.map((variable) =>
+                sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.createVariable(
+                        func.$id,
+                        variable.key,
+                        variable.value,
+                        variable?.secret ?? false
+                    )
+            );
+            await Promise.all(promises);
+
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.createDeployment(func.$id, files[0], true, undefined, undefined);
+
+            trackEvent(Submit.FunctionCreate, {
+                source: 'repository',
+                runtime: runtime
+            });
+
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}`
+            );
+
+            invalidate(Dependencies.FUNCTION);
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+            trackError(e, Submit.FunctionCreate);
+        }
+    }
+
+    $: filesList = files?.length
+        ? Array.from(files).map((f) => {
+              return {
+                  ...f,
+                  extension: f.type,
+                  removable: true
+              };
+          })
+        : [];
+</script>
+
+<svelte:head>
+    <title>Create function - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    title="Create function"
+    bind:showExitModal
+    href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
+    column
+    columnSize="s"
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="s">
+                <Typography.Text color="--fgcolor-neutral-primary">
+                    Upload a tar.gz file containing your function source code
+                </Typography.Text>
+                <Upload.Dropzone
+                    bind:files
+                    title="Upload function"
+                    extensions={['gz', 'tar']}
+                    maxSize={10000000}
+                    required>
+                    <Layout.Stack alignItems="center" gap="s">
+                        <Layout.Stack alignItems="center" gap="s">
+                            <Layout.Stack
+                                alignItems="center"
+                                justifyContent="center"
+                                direction="row"
+                                gap="s">
+                                <Typography.Text variant="l-500">
+                                    Drag and drop file here or click to upload
+                                </Typography.Text>
+                                <Tooltip>
+                                    <Layout.Stack
+                                        alignItems="center"
+                                        justifyContent="center"
+                                        inline>
+                                        <Icon icon={IconInfo} size="s" />
+                                    </Layout.Stack>
+                                    <svelte:fragment slot="tooltip"
+                                        >Only .tar.gz files allowed</svelte:fragment>
+                                </Tooltip>
+                            </Layout.Stack>
+                            <Typography.Caption variant="400"
+                                >Max file size 10MB</Typography.Caption>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Upload.Dropzone>
+                {#if files?.length}
+                    <!-- TODO: torsten, the types issue with FileList-->
+                    <Upload.List
+                        bind:files={filesList}
+                        on:remove={(e) => (files = removeFile(e.detail, files))} />
+                {/if}
+            </Layout.Stack>
+
+            <Details
+                bind:name
+                bind:entrypoint
+                bind:id
+                bind:runtime
+                bind:specification
+                {specificationOptions}
+                options={runtimeOptions}
+                showEntrypoint />
+
+            <Configuration bind:buildCommand bind:roles />
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside {runtime} runtimes={data.runtimesList} showGitData={false} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            submissionLoader
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.ts
new file mode 100644
index 000000000..1982e83ba
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.ts
@@ -0,0 +1,9 @@
+export const load = async ({ parent }) => {
+    const { installations, runtimesList, specificationsList } = await parent();
+
+    return {
+        installations,
+        runtimesList,
+        specificationsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/configuration.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/configuration.svelte
new file mode 100644
index 000000000..8f3091f39
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/configuration.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Roles } from '$lib/components/permissions';
+    import { Link } from '$lib/elements';
+    import { InputText } from '$lib/elements/forms';
+    import { Accordion, Fieldset, Layout } from '@appwrite.io/pink-svelte';
+
+    export let buildCommand = '';
+    export let roles: string[] = [];
+</script>
+
+<Fieldset legend="Settings">
+    <Layout.Stack>
+        <Accordion title="Build settings" badge="Optional">
+            <Layout.Stack gap="xl">
+                <InputText
+                    id="installCommand"
+                    label="Install command"
+                    bind:value={buildCommand}
+                    placeholder="npm install" />
+            </Layout.Stack>
+        </Accordion>
+        <Accordion title="Execute access" badge="Optional" hideDivider>
+            <Layout.Stack gap="xl">
+                <span>
+                    Choose who can execute this function using the client API. <Link
+                        external
+                        href="https://appwrite.io/docs/advanced/platform/permissions"
+                        >Learn more</Link>
+                </span>
+
+                <Roles bind:roles />
+            </Layout.Stack>
+        </Accordion>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
new file mode 100644
index 000000000..d6c729b3e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Button, Form } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { writable } from 'svelte/store';
+    import { ID, Runtime, VCSDeploymentType } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import { consoleVariables } from '$routes/(console)/store';
+    import Details from '../(components)/details.svelte';
+    import ProductionBranchFieldset from '$lib/components/git/productionBranchFieldset.svelte';
+    import Configuration from './configuration.svelte';
+    import Aside from '../(components)/aside.svelte';
+    import { iconPath } from '$lib/stores/app';
+    import { Dependencies } from '$lib/constants';
+    import RepoCard from './repoCard.svelte';
+    import { getIconFromRuntime } from '$lib/stores/runtimes';
+
+    export let data;
+
+    const specificationOptions = data.specificationsList.specifications.map((size) => ({
+        label:
+            `${size.cpus} CPU, ${size.memory} MB RAM` +
+            (!size.enabled ? ` (Upgrade to use this)` : ''),
+        value: size.slug,
+        disabled: !size.enabled
+    }));
+    const runtimeOptions = data.runtimesList.runtimes.map((runtime) => {
+        return {
+            value: runtime.$id,
+            label: `${runtime.name} - ${runtime.version}`,
+            leadingHtml: `<img src='${$iconPath(getIconFromRuntime(runtime.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
+        };
+    });
+
+    let showExitModal = false;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = '';
+    let id: string;
+    let runtime: Runtime;
+    let entrypoint = '';
+    let buildCommand = '';
+    let roles: string[] = [];
+    let branch: string;
+    let rootDir = './';
+    let variables: Partial<Models.Variable>[] = [];
+    let silentMode = false;
+    let specification = specificationOptions[0].value;
+
+    onMount(async () => {
+        installation.set(data.installation);
+        repository.set(data.repository);
+        name = data.repository.name;
+    });
+
+    async function create() {
+        try {
+            const func = await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.create(
+                    id || ID.unique(),
+                    name,
+                    runtime,
+                    roles?.length ? roles : undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    true,
+                    undefined,
+                    entrypoint,
+                    buildCommand,
+                    undefined,
+                    $installation.$id,
+                    $repository.id,
+                    branch,
+                    silentMode,
+                    rootDir,
+                    specification || undefined
+                );
+
+            // Add domain
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.createFunctionRule(
+                    `${ID.unique()}.${$consoleVariables._APP_DOMAIN_FUNCTIONS}`,
+                    func.$id
+                );
+
+            //Add variables
+            const promises = variables.map((variable) =>
+                sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.createVariable(
+                        func.$id,
+                        variable.key,
+                        variable.value,
+                        variable?.secret ?? false
+                    )
+            );
+            await Promise.all(promises);
+
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.createVcsDeployment(func.$id, VCSDeploymentType.Branch, branch, true);
+
+            trackEvent(Submit.FunctionCreate, {
+                source: 'repository',
+                runtime: runtime
+            });
+
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}`
+            );
+
+            invalidate(Dependencies.FUNCTION);
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+            trackError(e, Submit.FunctionCreate);
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Create function - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    title="Create function"
+    bind:showExitModal
+    href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            <RepoCard repository={data.repository} />
+
+            <Details
+                bind:name
+                bind:entrypoint
+                bind:id
+                bind:runtime
+                bind:specification
+                {specificationOptions}
+                options={runtimeOptions}
+                showEntrypoint />
+
+            <ProductionBranchFieldset
+                bind:branch
+                bind:rootDir
+                bind:silentMode
+                product="functions"
+                installationId={data.installation.$id}
+                repositoryId={data.repository.id} />
+
+            <Configuration bind:buildCommand bind:roles />
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside
+            {runtime}
+            runtimes={data.runtimesList}
+            repositoryName={data.repository.name}
+            {branch}
+            {rootDir} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            submissionLoader
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Deploy
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts
new file mode 100644
index 000000000..6b98ecef0
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts
@@ -0,0 +1,21 @@
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ parent, params, url }) => {
+    const { installations, runtimesList, specificationsList } = await parent();
+
+    const [repository] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .vcs.getRepository(url.searchParams.get('installation'), params.repository)
+    ]);
+
+    return {
+        installations,
+        installation: installations.installations.find(
+            (installation) => installation.$id === url.searchParams.get('installation')
+        ),
+        repository,
+        runtimesList,
+        specificationsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte
new file mode 100644
index 000000000..8f3091f39
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/configuration.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Roles } from '$lib/components/permissions';
+    import { Link } from '$lib/elements';
+    import { InputText } from '$lib/elements/forms';
+    import { Accordion, Fieldset, Layout } from '@appwrite.io/pink-svelte';
+
+    export let buildCommand = '';
+    export let roles: string[] = [];
+</script>
+
+<Fieldset legend="Settings">
+    <Layout.Stack>
+        <Accordion title="Build settings" badge="Optional">
+            <Layout.Stack gap="xl">
+                <InputText
+                    id="installCommand"
+                    label="Install command"
+                    bind:value={buildCommand}
+                    placeholder="npm install" />
+            </Layout.Stack>
+        </Accordion>
+        <Accordion title="Execute access" badge="Optional" hideDivider>
+            <Layout.Stack gap="xl">
+                <span>
+                    Choose who can execute this function using the client API. <Link
+                        external
+                        href="https://appwrite.io/docs/advanced/platform/permissions"
+                        >Learn more</Link>
+                </span>
+
+                <Roles bind:roles />
+            </Layout.Stack>
+        </Accordion>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte
new file mode 100644
index 000000000..a92459a25
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let repository: Models.ProviderRepository;
+</script>
+
+<Card.Base radius="s" padding="s">
+    <Layout.Stack direction="row" justifyContent="space-between" alignItems="center" gap="xs">
+        <Layout.Stack direction="row" alignItems="center" gap="xs">
+            <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
+            <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
+                {repository?.organization}/{repository?.name}
+            </Typography.Text>
+        </Layout.Stack>
+        <Button
+            secondary
+            href={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function`}>
+            Change
+        </Button>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte
new file mode 100644
index 000000000..2f1f6224e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte
@@ -0,0 +1,369 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Card } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { Fieldset, Layout, Icon, Divider, Empty, Typography } from '@appwrite.io/pink-svelte';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+    import ProductionBranch from '$lib/components/git/productionBranchFieldset.svelte';
+    import Configuration from './configuration.svelte';
+    import { ID, Runtime, type Models } from '@appwrite.io/console';
+    import {
+        ConnectBehaviour,
+        NewRepository,
+        Repositories,
+        RepositoryBehaviour
+    } from '$lib/components/git';
+    import { consoleVariables } from '$routes/(console)/store';
+    import Details from '../(components)/details.svelte';
+    import Aside from '../(components)/aside.svelte';
+    import { iconPath } from '$lib/stores/app';
+    import Permissions from './permissions.svelte';
+    import { connectGitHub } from '$lib/stores/git';
+    import RepoCard from './repoCard.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { getIconFromRuntime } from '$lib/stores/runtimes';
+
+    export let data;
+
+    const specificationOptions = data.specificationsList.specifications.map((size) => ({
+        label:
+            `${size.cpus} CPU, ${size.memory} MB RAM` +
+            (!size.enabled ? ` (Upgrade to use this)` : ''),
+        value: size.slug,
+        disabled: !size.enabled
+    }));
+
+    let showExitModal = false;
+    let isCreatingRepository = false;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = data.template.name;
+    let id: string;
+    let runtime: Runtime;
+    let branch = 'main';
+    let rootDir = './';
+    let connectBehaviour: 'now' | 'later' = 'now';
+    let repositoryBehaviour: 'new' | 'existing' = 'new';
+    let repositoryName = undefined;
+    let repositoryPrivate = true;
+    let selectedInstallationId = '';
+    let selectedRepository = '';
+    let showConfig = false;
+    let silentMode = false;
+    let entrypoint = '';
+    let selectedScopes: string[] = [];
+    let execute = true;
+    let variables: Partial<Models.TemplateVariable>[] = [];
+    let specification = specificationOptions[0].value;
+
+    onMount(async () => {
+        if (!$installation?.$id) {
+            $installation = data.installations.installations[0];
+        }
+        selectedInstallationId = $installation?.$id;
+        if (data.template.runtimes && data.template.runtimes.length > 0) {
+            const targetRuntime = data.template.runtimes[0].name;
+            const matchingRuntimes = Object.values(Runtime).filter((r) =>
+                r.startsWith(targetRuntime.split('-')[0])
+            );
+
+            matchingRuntimes.sort((a, b) => {
+                const versionA = a.split('-')[1];
+                const versionB = b.split('-')[1];
+                return versionB.localeCompare(versionA, undefined, { numeric: true });
+            });
+            if (page.url.searchParams.has('runtime')) {
+                runtime = page.url.searchParams.get('runtime') as Runtime;
+            } else {
+                runtime = matchingRuntimes[0];
+            }
+        }
+    });
+
+    async function createRepository() {
+        try {
+            isCreatingRepository = true;
+            const repo = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.createRepository($installation.$id, repositoryName, repositoryPrivate);
+            repository.set(repo);
+            selectedRepository = repo.id;
+            showConfig = true;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingRepository = false;
+        }
+    }
+
+    async function create() {
+        if (connectBehaviour === 'now' && !selectedRepository) {
+            addNotification({
+                type: 'error',
+                message: 'Please select a repository'
+            });
+            return;
+        } else {
+            try {
+                const rt = data.template.runtimes.find((r) => r.name === runtime);
+
+                const func = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.create(
+                        id || ID.unique(),
+                        name,
+                        runtime as Runtime,
+                        data.template.permissions?.length ? data.template.permissions : undefined,
+                        data.template.events?.length ? data.template.events : undefined,
+                        data.template.cron || undefined,
+                        data.template.timeout ? data.template.timeout : undefined,
+                        undefined,
+                        undefined,
+                        entrypoint || rt?.entrypoint || undefined,
+                        rt?.commands || undefined,
+                        selectedScopes?.length ? selectedScopes : undefined,
+                        connectBehaviour === 'later' ? undefined : $installation?.$id || undefined,
+                        connectBehaviour === 'later' ? undefined : $repository?.id || undefined,
+                        branch,
+                        silentMode,
+                        rootDir,
+                        specification || undefined
+                    );
+
+                // Add domain
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createFunctionRule(
+                        `${ID.unique()}.${$consoleVariables._APP_DOMAIN_FUNCTIONS}`,
+                        func.$id
+                    );
+
+                // Add variables
+                const promises = variables.map((variable) =>
+                    sdk
+                        .forProject(page.params.region, page.params.project)
+                        .functions.createVariable(
+                            func.$id,
+                            variable.name,
+                            variable.value,
+                            variable?.secret ?? false
+                        )
+                );
+                await Promise.all(promises);
+
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.createTemplateDeployment(
+                        func.$id,
+                        data.template.providerRepositoryId || undefined,
+                        data.template.providerOwner || undefined,
+                        rt?.providerRootDirectory || undefined,
+                        data.template.providerVersion || undefined,
+                        true
+                    );
+
+                trackEvent(Submit.FunctionCreate, {
+                    runtime: runtime,
+                    source: 'template',
+                    framework: data.template.name
+                });
+
+                await goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}`
+                );
+                invalidate(Dependencies.FUNCTION);
+            } catch (e) {
+                addNotification({
+                    type: 'error',
+                    message: e.message
+                });
+                trackError(e, Submit.FunctionCreate);
+            }
+        }
+    }
+
+    $: if (repositoryBehaviour === 'new') {
+        selectedInstallationId ??= $installation?.$id;
+        repositoryName ??= name.split(' ').join('-').toLowerCase();
+    }
+
+    $: if (connectBehaviour === 'later') {
+        selectedRepository = null;
+    }
+
+    $: availableRuntimes = data.runtimesList.runtimes.filter((runtime) =>
+        data.template.runtimes.some((templateRuntime) => templateRuntime.name === runtime.$id)
+    );
+</script>
+
+<svelte:head>
+    <title>Create function - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    title="Create function"
+    bind:showExitModal
+    href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            {#if selectedRepository && showConfig}
+                <Layout.Stack gap="xxl">
+                    <RepoCard bind:showConfig />
+
+                    <ProductionBranch
+                        bind:branch
+                        bind:rootDir
+                        bind:silentMode
+                        product="functions"
+                        installationId={selectedInstallationId}
+                        repositoryId={selectedRepository} />
+
+                    {#if data.template.variables?.length}
+                        <Configuration bind:variables templateVariables={data.template.variables} />
+                    {/if}
+                </Layout.Stack>
+            {:else}
+                {@const options = availableRuntimes.map((runtime) => {
+                    return {
+                        value: runtime.$id,
+                        label: `${runtime.name} - ${runtime.version}`,
+                        leadingHtml: `<img src='${$iconPath(getIconFromRuntime(runtime.$id), 'color')}' style='inline-size: var(--icon-size-m)' />`
+                    };
+                })}
+
+                <Layout.Stack gap="xxl">
+                    <Details
+                        bind:name
+                        bind:id
+                        bind:runtime
+                        bind:entrypoint
+                        bind:specification
+                        {specificationOptions}
+                        {options} />
+                    <Permissions
+                        templateScopes={data.template.scopes}
+                        bind:selectedScopes
+                        bind:execute />
+
+                    <ConnectBehaviour bind:connectBehaviour />
+                </Layout.Stack>
+                {#if connectBehaviour === 'now'}
+                    {#if !!data?.installations?.total}
+                        <Fieldset legend="Git repository">
+                            <Layout.Stack gap="xl">
+                                <RepositoryBehaviour bind:repositoryBehaviour />
+                                {#if repositoryBehaviour === 'new'}
+                                    <NewRepository
+                                        bind:selectedInstallationId
+                                        disableFields={isCreatingRepository}
+                                        installations={data.installations}
+                                        bind:repositoryName
+                                        bind:repositoryPrivate />
+                                    <Layout.Stack gap="xl" alignItems="flex-end">
+                                        <Divider />
+
+                                        <Button
+                                            size="s"
+                                            on:click={createRepository}
+                                            forceShowLoader
+                                            submissionLoader={isCreatingRepository}
+                                            disabled={!repositoryName ||
+                                                !$installation?.$id ||
+                                                isCreatingRepository}>
+                                            Create
+                                        </Button>
+                                    </Layout.Stack>
+                                {:else}
+                                    <Repositories
+                                        bind:selectedRepository
+                                        action="button"
+                                        connect={(e) => {
+                                            trackEvent(Click.ConnectRepositoryClick, {
+                                                from: 'template-wizard'
+                                            });
+                                            repository.set(e);
+                                            repositoryName = e.name;
+                                            selectedRepository = e.id;
+                                            showConfig = true;
+                                        }} />
+                                {/if}
+                            </Layout.Stack>
+                        </Fieldset>
+                    {:else}
+                        <Card isDashed padding="none">
+                            <Empty
+                                type="secondary"
+                                title="Connect Git repository"
+                                description="Create and deploy a Site with a connected git repository.">
+                                <svelte:fragment slot="actions">
+                                    <Button secondary href={connectGitHub().toString()} size="s">
+                                        <Icon icon={IconGithub} slot="start" />
+                                        Connect to GitHub
+                                    </Button>
+                                </svelte:fragment>
+                            </Empty>
+                        </Card>
+                    {/if}
+                {:else if data.template.variables?.length}
+                    <Configuration bind:variables templateVariables={data.template.variables} />
+                {/if}
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside
+            {runtime}
+            {repositoryName}
+            {branch}
+            {rootDir}
+            runtimes={data.runtimesList}
+            bind:showGitData={showConfig}>
+            <Layout.Stack gap="xxxs">
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                    {data.template.name}
+                </Typography.Text>
+                <Typography.Text>
+                    {data.template.tagline}
+                </Typography.Text>
+            </Layout.Stack>
+        </Aside>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile size="s" secondary on:click={() => (showExitModal = true)}>
+            Cancel
+        </Button>
+        <Button
+            fullWidthMobile
+            size="s"
+            on:click={() => {
+                if (variables.filter((v) => v.required && !v.value).length) {
+                    addNotification({
+                        type: 'error',
+                        message:
+                            'Missing required environment variables. Please update and try again.'
+                    });
+                } else {
+                    formComponent.triggerSubmit();
+                }
+            }}
+            disabled={$isSubmitting || (connectBehaviour === 'now' && !selectedRepository)}>
+            Deploy
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.ts
new file mode 100644
index 000000000..047a9521c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.ts
@@ -0,0 +1,15 @@
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ parent, params }) => {
+    const { installations, runtimesList, specificationsList } = await parent();
+    const template = await sdk
+        .forProject(params.region, params.project)
+        .functions.getTemplate(params.template);
+
+    return {
+        installations,
+        template,
+        runtimesList,
+        specificationsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/configuration.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/configuration.svelte
new file mode 100644
index 000000000..34f815e6e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/configuration.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+    import {
+        Button,
+        InputEmail,
+        InputNumber,
+        InputPassword,
+        InputPhone,
+        InputText,
+        InputURL
+    } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Fieldset,
+        Layout,
+        Popover,
+        Icon,
+        Accordion,
+        ActionMenu
+    } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import type { Component } from 'svelte';
+    import { getApiEndpoint } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import { project } from '$routes/(console)/project-[region]-[project]/store';
+
+    export let variables: Partial<Models.TemplateVariable>[] = [];
+    export let templateVariables: Models.TemplateVariable[] = [];
+
+    variables = [...templateVariables];
+    let { requiredVariables, optionalVariables } = variables.reduce(
+        (acc, variable) => {
+            if (variable.required) {
+                acc.requiredVariables.push(variable);
+            } else {
+                acc.optionalVariables.push(variable);
+            }
+            return acc;
+        },
+        { requiredVariables: [], optionalVariables: [] }
+    );
+
+    variables.map((variable) => {
+        if (variable.value === '{apiEndpoint}') {
+            variable.value = getApiEndpoint();
+            variable.placeholder = getApiEndpoint();
+        } else if (variable.value === '{projectId}') {
+            variable.value = page.params.project;
+            variable.placeholder = page.params.project;
+        } else if (variable.value === '{projectName}') {
+            variable.value = $project.name;
+            variable.placeholder = $project.name;
+        } else return variable;
+    });
+    variables = [...variables];
+
+    function selectComponent(variableType: string): Component {
+        switch (variableType) {
+            case 'password':
+                return InputPassword;
+            case 'text':
+                return InputText;
+            case 'url':
+                return InputURL;
+            case 'phone':
+                return InputPhone;
+            case 'email':
+                return InputEmail;
+            case 'number':
+                return InputNumber;
+            default:
+                return InputPassword;
+        }
+    }
+</script>
+
+<Fieldset legend="Environment variables">
+    <Layout.Stack gap="l">
+        <Layout.Stack>
+            {#if requiredVariables?.length}
+                <Accordion title="Required variables" open hideDivider={!optionalVariables?.length}>
+                    <Layout.Stack>
+                        {#each requiredVariables as variable, i}
+                            <Layout.Stack gap="s" direction="row">
+                                <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        required
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle placement="bottom-end">
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon icon={IconInfo} /></Button>
+                                        <ActionMenu.Root slot="tooltip">
+                                            <p>{@html variable.description}</p>
+                                        </ActionMenu.Root>
+                                    </Popover>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+            {/if}
+            {#if optionalVariables?.length}
+                <Accordion title="Optional variables" hideDivider>
+                    <Layout.Stack>
+                        {#each optionalVariables as variable, i}
+                            <Layout.Stack gap="s" direction="row">
+                                <Layout.Stack gap="s" direction="row">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        required
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle placement="bottom-end">
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon size="s" icon={IconInfo} />
+                                        </Button>
+                                        <ActionMenu.Root slot="tooltip">
+                                            <p>{@html variable.description}</p>
+                                        </ActionMenu.Root>
+                                    </Popover>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/permissions.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/permissions.svelte
new file mode 100644
index 000000000..f17aae982
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/permissions.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { scopes } from '$lib/constants';
+    import { Fieldset, Layout, Selector } from '@appwrite.io/pink-svelte';
+
+    export let templateScopes: string[];
+    export let selectedScopes: string[];
+    export let execute = true;
+
+    let scopeList = scopes
+        .filter((s) => templateScopes.includes(s.scope))
+        .map((s) => {
+            selectedScopes.push(s.scope);
+            return {
+                value: s,
+                checked: true
+            };
+        });
+
+    $: console.log(selectedScopes);
+</script>
+
+<Fieldset legend="Permissions">
+    <Layout.Stack gap="l">
+        <Selector.Switch
+            id="execute"
+            label="Public (anyone can execute)"
+            description="This could include unauthorized users and bots. You can further customize execute
+        permissions in your function settings."
+            bind:checked={execute}>
+        </Selector.Switch>
+
+        {#if scopeList.length > 0}
+            {#each scopeList as scope}
+                <Selector.Switch
+                    id={scope.value.scope}
+                    label={scope.value.scope}
+                    description={scope.value.description}
+                    bind:checked={scope.checked}
+                    on:change={() => {
+                        selectedScopes = scopeList
+                            .filter((s) => s.checked)
+                            .map((s) => s.value.scope);
+                    }}>
+                </Selector.Switch>
+            {/each}
+        {/if}
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/repoCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/repoCard.svelte
new file mode 100644
index 000000000..1d989f087
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/repoCard.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { repository } from '$lib/stores/vcs';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+
+    import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let showConfig: boolean;
+</script>
+
+<Card.Base padding="s" radius="s">
+    <Layout.Stack direction="row" justifyContent="space-between" alignItems="center" gap="xs">
+        <Layout.Stack direction="row" alignItems="center" gap="s">
+            <Icon size="s" icon={IconGithub} />
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                {$repository.organization}/{$repository.name}
+            </Typography.Text>
+        </Layout.Stack>
+        <Button
+            size="s"
+            secondary
+            on:click={() => {
+                showConfig = false;
+            }}>
+            Update
+        </Button>
+    </Layout.Stack>
+</Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/createFunction.svelte b/src/routes/(console)/project-[region]-[project]/functions/createFunction.svelte
deleted file mode 100644
index 105f0e99b..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/createFunction.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { onDestroy } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { wizard } from '$lib/stores/wizard';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import Step3 from './wizard/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
-    import Step5 from './wizard/step5.svelte';
-    import { createFunction } from './wizard/store';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { goto, invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { ID, Runtime } from '@appwrite.io/console';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    const projectId = $page.params.project;
-
-    async function onFinish() {
-        await invalidate(Dependencies.FUNCTIONS);
-    }
-
-    async function create() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $createFunction.runtime)) {
-                throw new Error(`Invalid runtime: ${$createFunction.runtime}`);
-            }
-            const response = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.create(
-                    $createFunction.id ?? ID.unique(),
-                    $createFunction.name,
-                    $createFunction.runtime,
-                    $createFunction.execute || undefined,
-                    $createFunction.events || undefined,
-                    $createFunction.schedule || undefined,
-                    $createFunction.timeout || undefined,
-                    undefined,
-                    undefined,
-                    $createFunction.entrypoint || undefined
-                );
-            await Promise.all(
-                $createFunction.vars.map((v) =>
-                    sdk
-                        .forProject($page.params.region, $page.params.project)
-                        .functions.createVariable(response.$id, v.key, v.value)
-                )
-            );
-            await invalidate(Dependencies.FUNCTIONS);
-            await goto(
-                `${base}/project-${$page.params.region}-${projectId}/functions/function-${response.$id}`
-            );
-            addNotification({
-                message: `${$createFunction.name} has been created`,
-                type: 'success'
-            });
-            trackEvent(Submit.FunctionCreate, {
-                customId: !!$createFunction.id
-            });
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.FunctionCreate);
-        }
-    }
-
-    onDestroy(() => {
-        $createFunction = {
-            id: null,
-            entrypoint: null,
-            name: null,
-            execute: [],
-            runtime: null,
-            vars: [],
-            events: [],
-            schedule: null,
-            timeout: null
-        };
-    });
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Configuration',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Permissions',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Events',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Schedule',
-        component: Step4,
-        optional: true
-    });
-    stepsComponents.set(5, {
-        label: 'Variables',
-        component: Step5,
-        optional: true
-    });
-</script>
-
-<Wizard title="Create Function" steps={stepsComponents} on:finish={create} on:exit={onFinish} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte
new file mode 100644
index 000000000..5f9e684f4
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { beforeNavigate } from '$app/navigation';
+    import { canWriteFunctions } from '$lib/stores/roles';
+    import { ActionMenu, Popover } from '@appwrite.io/pink-svelte';
+    import CreateCli from '../(modals)/createCli.svelte';
+    import CreateGit from '../(modals)/createGit.svelte';
+    import CreateManual from '../(modals)/createManual.svelte';
+    import { showCreateDeployment } from '../store';
+    import type { Models } from '@appwrite.io/console';
+
+    export let installations: Models.InstallationList;
+    let showCreateCli = false;
+    let showCreateGit = false;
+    let showCreateManual = false;
+
+    beforeNavigate(() => ($showCreateDeployment = false));
+</script>
+
+<Popover let:toggle placement="bottom-end" padding="none">
+    {#if $canWriteFunctions}
+        <slot {toggle} />
+    {/if}
+    <svelte:fragment slot="tooltip" let:toggle>
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                badge="Recommended"
+                on:click={(e) => {
+                    showCreateGit = true;
+                    toggle(e);
+                }}>
+                Git
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateCli = true;
+                    toggle(e);
+                }}>
+                CLI
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateManual = true;
+                    toggle(e);
+                }}>
+                Manual
+            </ActionMenu.Item.Button>
+        </ActionMenu.Root>
+    </svelte:fragment>
+</Popover>
+<CreateCli bind:show={showCreateCli} />
+<CreateGit bind:show={showCreateGit} {installations} />
+<CreateManual bind:show={showCreateManual} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte
new file mode 100644
index 000000000..5d698c934
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+    import { Card, Id, SvgIcon } from '$lib/components/index.js';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Badge,
+        Divider,
+        Icon,
+        Layout,
+        Status,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { DeploymentSource, DeploymentCreatedBy, DeploymentDomains } from '$lib/components/git';
+    import { func } from '../store';
+    import { capitalize } from '$lib/helpers/string';
+    import { isCloud } from '$lib/system';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import Link from '$lib/elements/link.svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import type { Snippet } from 'svelte';
+
+    let {
+        deployment,
+        proxyRuleList,
+        variant = 'primary',
+        activeDeployment = false,
+        footer
+    }: {
+        deployment: Models.Deployment;
+        proxyRuleList: Models.ProxyRuleList;
+        variant?: 'primary' | 'secondary';
+        activeDeployment?: boolean;
+        footer?: Snippet;
+    } = $props();
+
+    let totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
+</script>
+
+{#snippet titleSnippet(title: string)}
+    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+        {title}
+    </Typography.Text>
+{/snippet}
+
+{#snippet textGroup(title: string, text: string)}
+    <Layout.Stack gap="xxs" inline>
+        {@render titleSnippet(title)}
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+            {text}
+        </Typography.Text>
+    </Layout.Stack>
+{/snippet}
+
+{#snippet protection(text: string, tooltip: string)}
+    <Layout.Stack gap="xxs" inline>
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+            <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                {text}
+                <Tooltip>
+                    <Icon icon={IconInfo} size="s" />
+                    <span slot="tooltip">
+                        {tooltip}
+                    </span>
+                </Tooltip>
+            </Layout.Stack>
+        </Typography.Text>
+        <Layout.Stack inline alignItems="flex-start">
+            <Badge
+                size="xs"
+                variant="secondary"
+                type={isCloud ? 'success' : null}
+                content={isCloud ? 'Connected' : 'Available on Cloud'} />
+        </Layout.Stack>
+    </Layout.Stack>
+{/snippet}
+
+<Card padding="m" radius="m" {variant}>
+    <Layout.Stack gap="xxl">
+        <Layout.GridFraction start={4} end={6}>
+            <Layout.Stack>
+                <Layout.Stack direction="row" alignItems="center" gap="s" wrap="wrap">
+                    {#if activeDeployment}
+                        <Typography.Title
+                            size="s"
+                            variant="l-500"
+                            color="--fgcolor-neutral-primary">
+                            Active deployment
+                        </Typography.Title>
+                        <div>
+                            <Id value={deployment.$id}>
+                                {deployment.$id}
+                            </Id>
+                        </div>
+                    {:else}
+                        <Typography.Title
+                            size="s"
+                            variant="l-500"
+                            color="--fgcolor-neutral-primary">
+                            Deployment overview
+                        </Typography.Title>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+            <Layout.Stack gap="xl">
+                <Layout.Stack direction="row" alignItems="flex-start">
+                    <Layout.Stack gap="xxs">
+                        {@render titleSnippet('Domains')}
+
+                        {#if $func.deploymentId === deployment.$id}
+                            <DeploymentDomains domains={proxyRuleList} />
+                        {:else}
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                Only the <Link
+                                    href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployment-${$func.deploymentId}`}
+                                    variant="default">active deployment</Link> has a domain.
+                            </Typography.Text>
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" gap="xl">
+                    {#if deployment.status === 'failed'}
+                        <Layout.Stack gap="xxs" inline>
+                            {@render titleSnippet('Status')}
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                <Status status={deployment.status} label={deployment.status} />
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {:else}
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                Deployed
+                            </Typography.Text>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                <DeploymentCreatedBy {deployment} />
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+
+                <Layout.Stack gap="xxl" direction="row" wrap="wrap">
+                    <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
+                        {#if deployment?.buildDuration}
+                            {@render textGroup(
+                                'Build duration',
+                                formatTimeDetailed(deployment.buildDuration)
+                            )}
+                        {/if}
+                        {@render textGroup('Total size', `${totalSize.value} ${totalSize.unit}`)}
+
+                        <Layout.Stack gap="xxs" inline>
+                            {@render titleSnippet('Runtime')}
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                                    <SvgIcon
+                                        size={16}
+                                        iconSize="small"
+                                        name={$func.runtime.split('-')[0]} />
+                                    {capitalize($func.runtime)}
+                                </Layout.Stack>
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </Layout.Stack>
+
+                    {@render protection(
+                        'Global CDN',
+                        'Optimized speed by caching content on servers closer to users.'
+                    )}
+                    {@render protection(
+                        'DDoS protection',
+                        'Safeguards your site by detecting and blocking malicious traffic.'
+                    )}
+                </Layout.Stack>
+                <Layout.Stack gap="xxs" inline style="width: min-content;">
+                    {@render titleSnippet('Source')}
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                        <div>
+                            <DeploymentSource {deployment} />
+                        </div>
+                    </Typography.Text>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.GridFraction>
+
+        {#if footer}
+            <span
+                style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
+                <Divider />
+            </span>
+            <Layout.Stack direction="row-reverse">
+                {@render footer()}
+            </Layout.Stack>
+        {/if}
+    </Layout.Stack>
+</Card>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
new file mode 100644
index 000000000..b91ee6d6f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { SubMenu } from '$lib/components/menu';
+    import { type Models } from '@appwrite.io/console';
+    import { IconDownload } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu } from '@appwrite.io/pink-svelte';
+    import { getOutputDownload, getSourceDownload } from '../store';
+
+    export let deployment: Models.Deployment;
+    export let toggle: () => void;
+</script>
+
+{#if deployment?.status === 'ready' || deployment?.status === 'failed' || deployment?.status === 'building'}
+    <SubMenu>
+        <ActionMenu.Root noPadding>
+            <ActionMenu.Item.Button trailingIcon={IconDownload}>Download</ActionMenu.Item.Button>
+        </ActionMenu.Root>
+        <svelte:fragment slot="menu">
+            <ActionMenu.Root>
+                <ActionMenu.Item.Anchor
+                    on:click={toggle}
+                    href={getSourceDownload(page.params.function, deployment.$id)}
+                    external>
+                    Download source
+                </ActionMenu.Item.Anchor>
+
+                <ActionMenu.Item.Anchor
+                    disabled={deployment?.status !== 'ready'}
+                    on:click={toggle}
+                    href={getOutputDownload(page.params.function, deployment.$id)}
+                    external>
+                    Download output
+                </ActionMenu.Item.Anchor>
+            </ActionMenu.Root>
+        </svelte:fragment>
+    </SubMenu>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/activateModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/activateModal.svelte
new file mode 100644
index 000000000..af30c552f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/activateModal.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Confirm } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import { createEventDispatcher } from 'svelte';
+    import { page } from '$app/state';
+
+    export let showActivate = false;
+    export let selectedDeployment: Models.Deployment = null;
+    let error = null;
+    const dispatch = createEventDispatcher();
+
+    const handleSubmit = async () => {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.updateFunctionDeployment(
+                    selectedDeployment.resourceId,
+                    selectedDeployment.$id
+                );
+
+            showActivate = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been activated`
+            });
+            dispatch('activated');
+            trackEvent(Submit.DeploymentUpdate);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentUpdate);
+        }
+    };
+
+    $: if (!showActivate) {
+        error = null;
+    }
+</script>
+
+<Confirm title="Activate deployment" bind:open={showActivate} onSubmit={handleSubmit} bind:error>
+    <p>This deployment is ready but not yet live. Activate it to make it publicly accessible.</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showActivate = false)}>Cancel</Button>
+        <Button submit>Activate</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/cancelDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/cancelDeploymentModal.svelte
new file mode 100644
index 000000000..de7b64692
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/cancelDeploymentModal.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Confirm } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import type { Models } from '@appwrite.io/console';
+
+    export let showCancel = false;
+    export let selectedDeployment: Models.Deployment;
+
+    async function handleSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.updateDeploymentStatus(
+                    selectedDeployment.resourceId,
+                    selectedDeployment.$id
+                );
+
+            await invalidate(Dependencies.FUNCTION);
+            showCancel = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been cancelled`
+            });
+            trackEvent(Submit.DeploymentCancel);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DeploymentCancel);
+        }
+    }
+</script>
+
+<Confirm title="Cancel deployment" bind:open={showCancel} onSubmit={handleSubmit}>
+    <p data-private>Are you sure you want to cancel this deployment?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showCancel = false)}>Cancel</Button>
+        <Button secondary submit>Confirm</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createCli.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createCli.svelte
new file mode 100644
index 000000000..ae5cdc4c3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createCli.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { Alert, Code, Layout, Tabs } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+
+    export let show = false;
+
+    // let lang = 'js';
+    let codeSnippets = {};
+    let os = 'unknown';
+    let category = 'Unix';
+
+    const functionId = page.params.function;
+
+    onMount(() => {
+        // lang = setLanguage($func.runtime);
+        codeSnippets = setCodeSnippets();
+        os = navigator['userAgentData']?.platform || navigator?.platform || 'unknown';
+
+        if (os.includes('Win')) {
+            category = 'CMD';
+        } else if (os.includes('Mac') || os.includes('Linux')) {
+            category = 'Unix';
+        } else {
+            category = 'Unix';
+        }
+    });
+
+    // 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() {
+        return {
+            Unix: {
+                code: `appwrite client --projectId="${page.params.project}" && \\
+appwrite functions createDeployment \\
+    --functionId=${functionId} \\
+    --code="." \\
+    --activate=true`,
+                language: 'bash'
+            },
+
+            CMD: {
+                code: `appwrite client --projectId="${page.params.project}" && ^
+appwrite functions createDeployment ^
+    --functionId=${functionId} ^
+    --code="." ^
+    --activate`,
+                language: 'CMD'
+            },
+            PowerShell: {
+                code: `appwrite client --projectId="${page.params.project}" && ,
+appwrite functions createDeployment ,
+    --functionId=${functionId} ,
+    --code="." ,
+    --activate`,
+                language: 'PowerShell'
+            }
+        };
+    }
+</script>
+
+<Modal title="Create CLI deployment" bind:show hideFooter>
+    <span slot="description">
+        Deploy your function using the Appwrite CLI by running the following command inside your
+        function's folder.
+    </span>
+
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="s">
+            <Tabs.Root let:root stretch>
+                {#each ['Unix', 'CMD', 'PowerShell'] as cat}
+                    <Tabs.Item.Button
+                        {root}
+                        on:click={() => (category = cat)}
+                        active={category === cat}>
+                        {cat}
+                    </Tabs.Item.Button>
+                {/each}
+            </Tabs.Root>
+
+            <Code hideHeader lang="sh" code={codeSnippets[category].code} />
+        </Layout.Stack>
+
+        <Alert.Inline status="info">
+            If it's your first time using CLI, remember to <Link
+                href="https://appwrite.io/docs/tooling/command-line/installation#install-with-npm"
+                external>install CLI</Link> and <Link
+                href="https://appwrite.io/docs/tooling/command-line/installation#login"
+                external>login to your account</Link> before running deployment command.
+        </Alert.Inline>
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte
new file mode 100644
index 000000000..ae203ec3a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal, Card } from '$lib/components';
+    import { Repositories } from '$lib/components/git';
+    import { Dependencies } from '$lib/constants';
+    import { Link } from '$lib/elements';
+    import { Button, InputCheckbox, InputSelect } from '$lib/elements/forms';
+    import { timeFromNow } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository, sortBranches } from '$lib/stores/vcs';
+    import { Runtime, VCSDeploymentType, type Models } from '@appwrite.io/console';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+    import { func } from '../store';
+    import { page } from '$app/state';
+
+    export let show = false;
+
+    export let installations: Models.InstallationList;
+    let hasRepository = !!$func?.providerRepositoryId;
+    let selectedRepository: string = $func.providerRepositoryId;
+    let branch: string = null;
+    let commit: string = null;
+    let activate = true;
+    let error = '';
+
+    async function loadInstallations() {
+        if (!$func?.installationId && installations?.total > 0) {
+            installation.set(installations.installations[0]);
+        }
+        $installation = installations.installations.find(
+            (installation) => installation.$id === $func.installationId
+        );
+        if (!$installation?.$id) {
+            $installation = installations.installations[0];
+        }
+    }
+
+    async function load() {
+        try {
+            await loadInstallations();
+            if (!$repository?.id && hasRepository) {
+                $repository = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.getRepository($installation.$id, $func.providerRepositoryId);
+            }
+            selectedRepository = $repository?.id;
+            const branchList = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.listRepositoryBranches($installation.$id, selectedRepository);
+
+            const sorted = sortBranches(branchList.branches);
+            branch = sorted[0]?.name ?? null;
+
+            if (!branch) {
+                branch = 'main';
+            }
+
+            return sorted;
+        } catch (error) {
+            console.log(installations);
+            console.log(error);
+        }
+    }
+
+    async function createDeployment() {
+        try {
+            if (!$func?.providerRepositoryId) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.update(
+                        $func.$id,
+                        $func.name,
+                        $func.runtime as Runtime,
+                        $func.execute || undefined,
+                        $func.events || undefined,
+                        $func.schedule || undefined,
+                        $func.timeout || undefined,
+                        $func.enabled || undefined,
+                        $func.logging || undefined,
+                        $func.entrypoint,
+                        $func.commands || undefined,
+                        $func.scopes || undefined,
+                        $installation.$id || undefined,
+                        selectedRepository || undefined,
+                        branch || undefined,
+                        undefined,
+                        undefined,
+                        undefined
+                    );
+            }
+            if (commit) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.createVcsDeployment(
+                        $func.$id,
+                        VCSDeploymentType.Commit,
+                        commit,
+                        activate
+                    );
+            } else if (branch) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .functions.createVcsDeployment(
+                        $func.$id,
+                        VCSDeploymentType.Branch,
+                        branch,
+                        activate
+                    );
+            }
+            show = false;
+            invalidate(Dependencies.DEPLOYMENTS);
+            addNotification({
+                message: activate
+                    ? 'Deployment is in progress. It will be automatically activated after build step completes.'
+                    : 'Deployment is in progress. You can activate it after build step completes.',
+                type: 'success'
+            });
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    $: console.log($repository);
+</script>
+
+<Modal title="Create Git deployment" bind:show onSubmit={createDeployment} bind:error>
+    <span slot="description">
+        Enter a valid commit reference to create a new deployment. <Link
+            href="https://appwrite.io/docs/products/functions/deployments#create-deployment"
+            external>Learn more</Link>
+    </span>
+    {#if hasRepository}
+        {#await load()}
+            <Card padding="xs" radius="s" variant="secondary">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="s">
+                        <Icon size="s" icon={IconGithub} />
+                        <Skeleton variant="line" width={100} height={19.6} />
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Card>
+            <Layout.Stack gap="s">
+                <Skeleton variant="line" width={100} height={19.6} />
+                <Skeleton variant="line" width={350} height={31} />
+            </Layout.Stack>
+        {:then branches}
+            {@const options =
+                branches
+                    ?.map((branch) => {
+                        return {
+                            value: branch.name,
+                            label: branch.name
+                        };
+                    })
+                    ?.sort((a, b) => {
+                        return a.label > b.label ? 1 : -1;
+                    }) ?? []}
+            <Card padding="xs" radius="s" variant="secondary">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                        <Icon icon={IconGithub} />
+                        <Link
+                            external
+                            href={`https://github.com/${$repository?.organization}/${$repository?.name}`}>
+                            <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                                {$repository?.organization}/{$repository?.name}
+                            </Layout.Stack>
+                        </Link>
+                    </Layout.Stack>
+                    <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
+                        Last updated {timeFromNow($repository?.pushedAt)}
+                    </Typography.Caption>
+                </Layout.Stack>
+            </Card>
+            <InputSelect
+                required={true}
+                id="branch"
+                label="Production branch"
+                placeholder="Select branch"
+                bind:value={branch}
+                isSearchable
+                on:select={(event) => {
+                    branch = event.detail.value;
+                }}
+                {options} />
+            <!-- <InputText
+                id="commit"
+                label="Commit hash"
+                placeholder="Select commit"
+                bind:value={commit} /> -->
+            {#if branch}
+                <InputCheckbox
+                    label="Activate deployment after build"
+                    id="activate"
+                    description="This deployment will automatically activate after the build completes. If
+                unchecked, it will remain inactive, and you can activate it manually later."
+                    bind:checked={activate} />
+            {/if}
+        {/await}
+    {:else}
+        <Repositories
+            bind:selectedRepository
+            installationList={installations}
+            product="functions"
+            action="button"
+            callbackState={{
+                createDeployment: 'true'
+            }}
+            connect={(e) => {
+                repository.set(e);
+                hasRepository = true;
+            }} />
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
+        <Button submit size="s" disabled={!$installation?.$id || !selectedRepository || !branch}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createManual.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createManual.svelte
new file mode 100644
index 000000000..11aacc9d9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createManual.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { removeFile } from '$lib/helpers/files';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { func } from '../store';
+    import { page } from '$app/state';
+
+    export let show = false;
+
+    let files: FileList;
+    let error: string = '';
+
+    async function create() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.createDeployment($func.$id, files[0], true, undefined, undefined);
+            await invalidate(Dependencies.DEPLOYMENTS);
+            files = undefined;
+            show = false;
+            trackEvent(Submit.DeploymentCreate);
+            addNotification({
+                type: 'success',
+                message: 'Deployment created successfully'
+            });
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentCreate);
+        }
+    }
+
+    $: filesList = files?.length
+        ? Array.from(files).map((f) => {
+              return {
+                  ...f,
+                  extension: f.type,
+                  removable: true
+              };
+          })
+        : [];
+</script>
+
+<Modal title="Create manual deployment" bind:show onSubmit={create} {error}>
+    <span slot="description"> Manually deploy a function by uploading any file(s) or folder. </span>
+    <Layout.Stack gap="s">
+        <Typography.Text color="--fgcolor-neutral-primary">
+            Upload a tar.gz file containing your function source code
+        </Typography.Text>
+        <Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
+            <Layout.Stack alignItems="center" gap="s">
+                <Layout.Stack alignItems="center" gap="s">
+                    <Layout.Stack
+                        alignItems="center"
+                        justifyContent="center"
+                        direction="row"
+                        gap="s">
+                        <Typography.Text variant="l-500">
+                            Drag and drop file here or click to upload
+                        </Typography.Text>
+                        <Tooltip>
+                            <Layout.Stack alignItems="center" justifyContent="center" inline>
+                                <Icon icon={IconInfo} size="s" />
+                            </Layout.Stack>
+                            <svelte:fragment slot="tooltip"
+                                >Only .tar.gz files allowed</svelte:fragment>
+                        </Tooltip>
+                    </Layout.Stack>
+                    <Typography.Caption variant="400">Max file size 10MB</Typography.Caption>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Upload.Dropzone>
+        {#if files?.length}
+            <Upload.List
+                bind:files={filesList}
+                on:remove={(e) => (files = removeFile(e.detail, files))} />
+        {/if}
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
+        <Button size="s" disabled={!(files ?? [])[0]} submit submissionLoader>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/deleteModal.svelte
new file mode 100644
index 000000000..98287abd6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/deleteModal.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import type { Models } from '@appwrite.io/console';
+
+    export let showDelete = false;
+    export let selectedDeployment: Models.Deployment = null;
+    let error: string;
+
+    async function handleSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.deleteDeployment(selectedDeployment.resourceId, selectedDeployment.$id);
+            await invalidate(Dependencies.FUNCTION);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been deleted`
+            });
+            trackEvent(Submit.DeploymentDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentDelete);
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleSubmit} title="Delete deployment" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this deployment?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte
new file mode 100644
index 000000000..d3f7847cc
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Confirm } from '$lib/components';
+    import { func } from '../store';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { page } from '$app/state';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+
+    export let show = false;
+    export let selectedDeployment: Models.Deployment = null;
+    export let redirect = false;
+    let error: string;
+
+    async function redeploy() {
+        try {
+            const deployment = await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.createDuplicateDeployment(
+                    $func.$id,
+                    selectedDeployment.$id,
+                    selectedDeployment?.buildId || undefined
+                );
+
+            addNotification({
+                type: 'success',
+                message: `Redeploying ${$func.name}`
+            });
+            trackEvent(Submit.FunctionRedeploy);
+
+            invalidate(Dependencies.FUNCTION);
+            invalidate(Dependencies.DEPLOYMENTS);
+            if (redirect) {
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployments/deployment-${deployment.$id}`
+                );
+            }
+            show = false;
+        } catch (e) {
+            error = e.message;
+
+            trackError(e, Submit.FunctionRedeploy);
+        }
+    }
+</script>
+
+<Confirm title="Redeploy function" bind:open={show} bind:error onSubmit={redeploy}>
+    <p class="text">
+        Are you sure you want to redeploy <b>{$func.name}</b>? Redeploying may affect your
+        production code.
+    </p>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Redeploy</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte
index 389d00fc0..689ac01f0 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { realtime } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate, goto } from '$app/navigation';
@@ -10,11 +10,19 @@
     import type { Models } from '@appwrite.io/console';
     import { base } from '$app/paths';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import {
+        IconCalendar,
+        IconClock,
+        IconList,
+        IconPlus,
+        IconSearch,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';
 
     onMount(() => {
         let previousStatus = null;
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe<Models.Deployment>('console', (message) => {
                 if (previousStatus === message.payload.status) {
                     return;
@@ -40,16 +48,16 @@
         {
             label: 'Create deployment',
             async callback() {
-                if (!$page.url.pathname.endsWith($func.$id)) {
+                if (!page.url.pathname.endsWith($func.$id)) {
                     await goto(
                         `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}`
                     );
                 }
                 showCreateDeployment.set(true);
             },
-            keys: $page.url.pathname.endsWith($func.$id) ? ['c'] : ['c', 'd'],
+            keys: page.url.pathname.endsWith($func.$id) ? ['c'] : ['c', 'd'],
             group: 'functions',
-            icon: 'plus',
+            icon: IconPlus,
             disabled: !$canWriteFunctions
         },
         {
@@ -60,7 +68,7 @@
                 );
                 scrollBy({ top: -100 });
             },
-            icon: 'search',
+            icon: IconSearch,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -72,7 +80,7 @@
                 );
                 scrollBy({ top: -100 });
             },
-            icon: 'calendar',
+            icon: IconCalendar,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -83,7 +91,7 @@
                     `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#variables`
                 );
             },
-            icon: 'list',
+            icon: IconList,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -94,7 +102,7 @@
                     `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#timeout`
                 );
             },
-            icon: 'x-circle',
+            icon: IconXCircle,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -106,7 +114,7 @@
                 );
                 scrollBy({ top: -100 });
             },
-            icon: 'clock',
+            icon: IconClock,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -120,7 +128,7 @@
             keys: ['g', 'd'],
             group: 'navigation',
             rank: 10,
-            disabled: $page.url.pathname.endsWith($func.$id)
+            disabled: page.url.pathname.endsWith($func.$id)
         },
         {
             label: 'Go to usage',
@@ -132,7 +140,7 @@
             keys: ['g', 'u'],
             group: 'navigation',
             rank: 10,
-            disabled: $page.url.pathname.endsWith('usage')
+            disabled: page.url.pathname.endsWith('usage')
         },
         {
             label: 'Go to executions',
@@ -144,7 +152,7 @@
             keys: ['g', 'e'],
             group: 'navigation',
             rank: 10,
-            disabled: $page.url.pathname.endsWith('executions')
+            disabled: page.url.pathname.endsWith('executions')
         },
         {
             label: 'Go to settings',
@@ -156,7 +164,7 @@
             keys: ['g', 's'],
             group: 'navigation',
             rank: 10,
-            disabled: $page.url.pathname.endsWith('settings') || !$canWriteFunctions
+            disabled: page.url.pathname.endsWith('settings') || !$canWriteFunctions
         }
     ]);
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.ts
index 6bc3e535f..75207a4cd 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.ts
@@ -1,26 +1,31 @@
-import { sdk } from '$lib/stores/sdk';
+import { DeploymentResourceType, sdk } 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 { Query } from '@appwrite.io/console';
+import { RuleType } from '$lib/stores/sdk';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.FUNCTION);
     depends(Dependencies.DEPLOYMENTS);
 
     try {
-        const [func, proxyRuleList] = await Promise.all([
-            sdk.forProject(params.region, params.project).functions.get(params.function),
-            sdk
-                .forProject(params.region, params.project)
-                .proxy.listRules([
-                    Query.equal('resourceType', 'function'),
-                    Query.equal('resourceId', params.function),
-                    Query.limit(1)
-                ])
-        ]);
+        const func = await sdk
+            .forProject(params.region, params.project)
+            .functions.get(params.function);
+
+        //TODO remove rule limit of 1 and display extra rules
+        const proxyRuleList = await sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.DEPLOYMENT),
+                Query.equal('deploymentResourceType', DeploymentResourceType.FUNCTION),
+                Query.equal('deploymentResourceId', params.function),
+                Query.equal('deploymentId', func.deploymentId),
+                Query.limit(1)
+            ]);
 
         return {
             header: Header,
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
index ab52a8557..e7726504e 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
@@ -1,33 +1,29 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import {
-        Empty,
-        Heading,
-        PaginationWithLimit,
-        Alert,
-        ViewSelector,
-        EmptySearch
-    } from '$lib/components';
+    import { page } from '$app/state';
+    import { PaginationWithLimit, EmptyFilter } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { deploymentList, func } from './store';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { columns, deploymentList, func } from './store';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
-    import Create from './create.svelte';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
     import { readOnly } from '$lib/stores/billing';
-    import { writable } from 'svelte/store';
-    import type { Column } from '$lib/helpers/types';
     import Table from './table.svelte';
-    import { Filters } from '$lib/components/filters';
-    import { queries, tags } from '$lib/components/filters/store';
-    import { View } from '$lib/helpers/load';
-    import DeploymentCard from './deploymentCard.svelte';
-    import RedeployModal from './redeployModal.svelte';
-    import QuickFilters from './quickFilters.svelte';
-    import { Pill } from '$lib/elements';
-    import { onMount } from 'svelte';
+    import DeploymentCard from './(components)/deploymentCard.svelte';
+    import RedeployModal from './(modals)/redeployModal.svelte';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import { ActionMenu, Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import {
+        IconDotsHorizontal,
+        IconPlus,
+        IconRefresh,
+        IconTerminal
+    } from '@appwrite.io/pink-icons-svelte';
+    import { app } from '$lib/stores/app';
+    import CreateActionMenu from './(components)/createActionMenu.svelte';
+    import { Menu } from '$lib/components/menu';
+    import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
 
     export let data;
 
@@ -35,309 +31,170 @@
     let showAlert = true;
 
     let selectedDeployment: Models.Deployment = null;
-
-    const columns = writable<Column[]>([
-        { id: '$id', title: 'Deployment ID', type: 'string', show: true, width: 150 },
-        {
-            id: 'status',
-            title: 'Status',
-            type: 'enum',
-            show: true,
-            width: 110,
-            array: true,
-            format: 'enum',
-            elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
-            filter: false
-        },
-        {
-            id: 'type',
-            title: 'Source',
-            type: 'string',
-            show: true,
-            width: 90,
-            array: true,
-            format: 'enum',
-            elements: [
-                { value: 'manual', label: 'Manual' },
-                { value: 'cli', label: 'CLI' },
-                { value: 'vcs', label: 'Git' }
-            ]
-        },
-        {
-            id: '$createdAt',
-            title: 'Created',
-            type: 'datetime',
-            show: true,
-            width: 150,
-            format: 'datetime'
-        },
-        {
-            id: '$updatedAt',
-            title: 'Updated',
-            type: 'datetime',
-            show: true,
-            width: 150,
-            format: 'datetime'
-        },
-        {
-            id: 'buildTime',
-            title: 'Build time',
-            type: 'integer',
-            show: true,
-            width: 90,
-            elements: [
-                {
-                    value: 15,
-                    label: 'more than 15 seconds'
-                },
-                {
-                    value: 60,
-                    label: 'more than 1 minute'
-                },
-                {
-                    value: 5 * 60,
-                    label: 'more than 5 minutes'
-                }
-            ],
-            filter: false
-        },
-        {
-            id: 'size',
-            title: 'Size',
-            type: 'integer',
-            show: true,
-            width: 140,
-            elements: [
-                {
-                    value: 2 * 1000 * 1000,
-                    label: 'more than 2MB'
-                },
-                {
-                    value: 10 * 1000 * 1000,
-                    label: 'more than 10MB'
-                },
-                {
-                    value: 50 * 1000 * 1000,
-                    label: 'more than 50MB'
-                }
-            ]
-        },
-        {
-            id: 'buildSize',
-            title: 'Build size',
-            type: 'integer',
-            show: false,
-            filter: false,
-            width: 80
-        }
-    ]);
-
-    let showMobileFilters = false;
-
-    onMount(() => {
-        data?.query ? (showMobileFilters = true) : (showMobileFilters = false);
-    });
-
-    function clearAll() {
-        queries.clearAll();
-        queries.apply();
-    }
 </script>
 
 <Container>
-    <ContainerHeader title="Deployments">
-        <Create main />
-    </ContainerHeader>
     {#if !data?.deploymentList?.total && !data?.query}
-        <Empty single target="deployment">
-            <div class="u-text-center">
-                <Heading size="7" tag="h2">Create your first deployment to get started.</Heading>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Learn more about deployments in our Documentation.
-                </p>
-            </div>
-            <div class="u-flex u-gap-16 u-main-center">
-                <Button
-                    external
-                    href="https://appwrite.io/docs/products/functions/deployment"
-                    text
-                    event="empty_documentation"
-                    ariaLabel={`create deployment`}>Documentation</Button>
-                <Create secondary />
-            </div>
-        </Empty>
-    {:else}
-        {@const activeDeployment = data.activeDeployment}
-
-        <div class="common-section">
-            <Heading tag="h3" size="7">Active</Heading>
-        </div>
-        {#if data?.activeDeployment && !$func.live && showAlert}
-            <Alert
-                type="warning"
-                class="u-margin-block-start-8"
-                isStandalone
-                dismissible
-                on:dismiss={() => (showAlert = false)}>
-                Some configuration options are not live yet. Redeploy your function to apply latest
-                changes.
-            </Alert>
-        {/if}
-        {#if activeDeployment}
-            <DeploymentCard deployment={activeDeployment}>
-                <svelte:fragment slot="actions">
-                    <div class="u-flex u-flex-wrap">
-                        <Button
-                            text
-                            href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$page.params.function}/deployment-${activeDeployment.$id}`}>
-                            Build logs
-                        </Button>
-                        {#if $canWriteFunctions}
-                            <Button
-                                text
-                                class="u-margin-inline-end-16"
-                                on:click={() => {
-                                    selectedDeployment = activeDeployment;
-                                    showRedeploy = true;
-                                }}>
-                                Redeploy
-                            </Button>
-                        {/if}
-                        <Button
-                            secondary
-                            href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func.$id}/executions/execute-function`}
-                            disabled={isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE}>
-                            Execute
-                        </Button>
-                    </div>
-                </svelte:fragment>
-            </DeploymentCard>
-        {:else if !$deploymentList.total && !data?.query}
-            <Empty single target="deployment">
-                <div class="u-text-center">
-                    <Heading size="7" tag="h2"
-                        >Create your first deployment to get started.</Heading>
-                    <p class="body-text-2 u-bold u-margin-block-start-4">
-                        Learn more about deployments in our Documentation.
-                    </p>
-                </div>
-                <div class="u-flex u-gap-16 u-main-center">
+        <Card.Base padding="none">
+            <Empty
+                title="Create your first deployment"
+                src={$app.themeInUse === 'dark'
+                    ? `${base}/images/empty-deployment-dark.svg`
+                    : `${base}/images/empty-deployment-light.svg`}>
+                <span slot="description"> Need a hand? Learn more in our documentation </span>
+                <span slot="actions">
                     <Button
                         external
                         href="https://appwrite.io/docs/products/functions/deployment"
                         text
                         event="empty_documentation"
                         ariaLabel={`create deployment`}>Documentation</Button>
-                    <Create secondary />
-                </div>
-            </Empty>
-        {:else}
-            <Empty noMedia single>
-                <Create secondary round>
-                    <i class="icon-plus" />
-                </Create>
-                <div class="u-text-center">
-                    <p class="body-text-2 u-margin-block-start-4">
-                        Add a new deployment, or activate an existing one to see your function in
-                        action. <br />Learn more about deployments in our
-                        <a
-                            class="link"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            href="https://appwrite.io/docs/products/functions/deployment"
-                            >documentation</a
-                        >.
-                    </p>
-                </div>
+                    <CreateActionMenu let:toggle installations={data.installations}>
+                        <Button secondary on:click={toggle} event="create_deployment">
+                            Create deployment
+                        </Button>
+                    </CreateActionMenu>
+                </span>
             </Empty>
+        </Card.Base>
+    {:else}
+        {@const activeDeployment = data.activeDeployment}
+
+        {#if data?.activeDeployment && !$func.live && showAlert}
+            <Alert.Inline status="warning" dismissible on:dismiss={() => (showAlert = false)}>
+                Some configuration options are not live yet. Redeploy your function to apply latest
+                changes.
+            </Alert.Inline>
         {/if}
-        <div class="u-margin-block-start-48">
-            <Heading tag="h3" size="7">All deployments</Heading>
-            <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
-                <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
-                    <QuickFilters {columns} />
-                    <Filters query={data.query} {columns} let:disabled let:toggle singleCondition>
-                        <div class="u-flex u-gap-4">
+        <Layout.Stack gap="xxxl">
+            {#if activeDeployment}
+                <DeploymentCard
+                    deployment={activeDeployment}
+                    proxyRuleList={data.proxyRuleList}
+                    activeDeployment>
+                    {#snippet footer()}
+                        <Layout.Stack direction="row" gap="s" alignItems="center" inline>
+                            <Menu>
+                                <Button secondary icon text>
+                                    <Icon icon={IconDotsHorizontal} />
+                                </Button>
+                                <svelte:fragment slot="menu" let:toggle>
+                                    <ActionMenu.Root>
+                                        {#if $canWriteFunctions}
+                                            <ActionMenu.Item.Button
+                                                trailingIcon={IconRefresh}
+                                                on:click={() => {
+                                                    selectedDeployment = activeDeployment;
+                                                    showRedeploy = true;
+                                                    trackEvent(Click.FunctionsRedeployClick);
+                                                    toggle();
+                                                }}>
+                                                Redeploy
+                                            </ActionMenu.Item.Button>
+                                        {/if}
+                                        <DownloadActionMenuItem
+                                            deployment={activeDeployment}
+                                            {toggle} />
+                                        <ActionMenu.Item.Anchor
+                                            trailingIcon={IconTerminal}
+                                            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployment-${activeDeployment.$id}`}>
+                                            Build logs
+                                        </ActionMenu.Item.Anchor>
+                                    </ActionMenu.Root>
+                                </svelte:fragment>
+                            </Menu>
                             <Button
-                                text
-                                on:click={toggle}
-                                {disabled}
-                                ariaLabel="open filter"
-                                noMargin={!$tags?.length}>
-                                <span class="icon-filter-line" />
-                                <span class="text">More filters</span>
+                                secondary
+                                href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/executions/execute-function`}
+                                disabled={isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE}>
+                                Execute
                             </Button>
-                            {#if $tags?.length}
-                                <div
-                                    style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
-                                </div>
-                                <Button text on:click={clearAll}>Clear all</Button>
-                            {/if}
-                        </div>
-                    </Filters>
-                </div>
-                <div class="u-flex u-gap-16">
-                    <ViewSelector view={View.Table} {columns} hideView allowNoColumns hideText />
-                </div>
-            </div>
-            <div class="is-only-mobile">
-                <div class="u-flex u-main-space-between u-margin-block-start-16">
-                    <Button
-                        text
-                        on:click={() => (showMobileFilters = !showMobileFilters)}
-                        ariaLabel="toggle filters"
-                        noMargin>
-                        <span class="icon-filter-line" />
-                        <span class="text">Filters</span>
-                    </Button>
+                        </Layout.Stack>
+                    {/snippet}
+                </DeploymentCard>
+            {:else if data.activeDeployment?.status === 'building'}
+                <Card.Base padding="none">
+                    <Empty
+                        title="Deployment is still building"
+                        src={$app.themeInUse === 'dark'
+                            ? `${base}/images/empty-deployment-dark.svg`
+                            : `${base}/images/empty-deployment-light.svg`}>
+                        <span slot="description">
+                            Your build is running. When it completes, this page will automatically
+                            update with the latest deployment.
+                        </span>
+                        <span slot="actions">
+                            <Button
+                                external
+                                href="https://appwrite.io/docs/products/functions/deployment"
+                                text
+                                event="empty_documentation"
+                                ariaLabel={`create deployment`}>Documentation</Button>
+                            <Button
+                                secondary
+                                href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployments/deplyoment-${activeDeployment?.$id}`}>
+                                View logs</Button>
+                        </span>
+                    </Empty>
+                </Card.Base>
+            {:else}
+                <Card.Base padding="none">
+                    <Empty
+                        title="There is no active deployment"
+                        src={$app.themeInUse === 'dark'
+                            ? `${base}/images/empty-deployment-dark.svg`
+                            : `${base}/images/empty-deployment-light.svg`}>
+                        <span slot="description">
+                            Deploy your function to get started. Once deployed, you'll see your
+                            latest build details here.
+                        </span>
+                        <span slot="actions">
+                            <Button
+                                external
+                                href="https://appwrite.io/docs/products/functions/deployment"
+                                text
+                                event="empty_documentation"
+                                ariaLabel={`create deployment`}>Documentation</Button>
+                            <CreateActionMenu let:toggle installations={data.installations}>
+                                <Button secondary on:click={toggle} event="create_deployment">
+                                    Create deployment
+                                </Button>
+                            </CreateActionMenu>
+                        </span>
+                    </Empty>
+                </Card.Base>
+            {/if}
 
-                    <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
-                </div>
-                <div
-                    class:u-hide={!showMobileFilters}
-                    class:u-flex={showMobileFilters}
-                    class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
-                    <QuickFilters {columns} />
+            <Layout.Stack gap="l">
+                <ResponsiveContainerHeader
+                    hasFilters
+                    {columns}
+                    hideView
+                    analyticsSource="function_deployments">
+                    <CreateActionMenu let:toggle installations={data.installations}>
+                        <Button on:click={toggle} event="create_deployment">
+                            <Icon icon={IconPlus} size="s" slot="start" />
+                            Create deployment
+                        </Button>
+                    </CreateActionMenu>
+                </ResponsiveContainerHeader>
 
-                    <Filters query={data.query} {columns} clearOnClick>
-                        <svelte:fragment slot="mobile" let:disabled let:toggle>
-                            <Pill
-                                button
-                                on:click={toggle}
-                                {disabled}
-                                class="u-flex u-gap-4 u-cross-center"
-                                style="--p-tag-content-height: auto">
-                                <!-- <span class="icon-filter-line" /> -->
-                                <span class="text">More filters</span>
-                                <span class="icon-cheveron-down" />
-                            </Pill>
-                        </svelte:fragment>
-                    </Filters>
-                </div>
-            </div>
-        </div>
-        {#if $deploymentList.total}
-            <Table columns={$columns} {data} />
-        {:else if data?.query}
-            <EmptySearch hidePages>
-                <div class="common-section">
-                    <div class="u-text-center common-section">
-                        <b class="body-text-2 u-bold">Sorry we couldn't find any deployments</b>
-                        <p>There are no deployments that match your filters.</p>
-                    </div>
-                    <div class="u-flex u-gap-16 common-section u-main-center">
-                        <Button secondary on:click={clearAll}>Clear filters</Button>
-                    </div>
-                </div>
-            </EmptySearch>
-        {/if}
+                {#if data.deploymentList.total}
+                    <Table columns={$columns} {data} />
+                {:else if data?.query}
+                    <EmptyFilter resource="deployments" />
+                {/if}
+
+                {#if $deploymentList.total}
+                    <PaginationWithLimit
+                        name="Deployments"
+                        limit={data.limit}
+                        offset={data.offset}
+                        total={$deploymentList?.total} />
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
     {/if}
-
-    <PaginationWithLimit
-        name="Deployments"
-        limit={data.limit}
-        offset={data.offset}
-        total={$deploymentList?.total} />
 </Container>
 
 {#if selectedDeployment}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts
index 9b23d5d08..a21e2e347 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
     const data = await parent();
     depends(Dependencies.DEPLOYMENTS);
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
@@ -19,10 +19,11 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
         offset,
         limit,
         query,
-        activeDeployment: data.function.deployment
+        installations: data.installations,
+        activeDeployment: data.function.deploymentId
             ? await sdk
                   .forProject(params.region, params.project)
-                  .functions.getDeployment(params.function, data.function.deployment)
+                  .functions.getDeployment(params.function, data.function.deploymentId)
             : null,
         deploymentList: await sdk
             .forProject(params.region, params.project)
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/activate.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/activate.svelte
index 9c25382a3..af30c552f 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/activate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/activate.svelte
@@ -1,23 +1,27 @@
 <script lang="ts">
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import { Confirm } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let showActivate = false;
     export let selectedDeployment: Models.Deployment = null;
-
+    let error = null;
     const dispatch = createEventDispatcher();
 
     const handleSubmit = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.updateDeployment(selectedDeployment.resourceId, selectedDeployment.$id);
+                .forProject(page.params.region, page.params.project)
+                .functions.updateFunctionDeployment(
+                    selectedDeployment.resourceId,
+                    selectedDeployment.$id
+                );
+
             showActivate = false;
             addNotification({
                 type: 'success',
@@ -25,24 +29,21 @@
             });
             dispatch('activated');
             trackEvent(Submit.DeploymentUpdate);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.DeploymentUpdate);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentUpdate);
         }
     };
+
+    $: if (!showActivate) {
+        error = null;
+    }
 </script>
 
-<Modal
-    title="Activate Deployment"
-    bind:show={showActivate}
-    onSubmit={handleSubmit}
-    headerDivider={false}>
-    <p>Are you sure you want to activate this deployment?</p>
+<Confirm title="Activate deployment" bind:open={showActivate} onSubmit={handleSubmit} bind:error>
+    <p>This deployment is ready but not yet live. Activate it to make it publicly accessible.</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showActivate = false)}>Cancel</Button>
-        <Button secondary submit>Activate</Button>
+        <Button submit>Activate</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
index a9279c6b6..83622b79a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/functions`,
             title: 'Functions'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func?.$id}`,
             title: $func?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/cancel.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/cancel.svelte
index 1f6e765f7..de7b64692 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/cancel.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/cancel.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import { Confirm } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
 
     export let showCancel = false;
@@ -15,11 +15,12 @@
     async function handleSubmit() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.updateDeploymentBuild(
+                .forProject(page.params.region, page.params.project)
+                .functions.updateDeploymentStatus(
                     selectedDeployment.resourceId,
                     selectedDeployment.$id
                 );
+
             await invalidate(Dependencies.FUNCTION);
             showCancel = false;
             addNotification({
@@ -37,16 +38,10 @@
     }
 </script>
 
-<Modal
-    title="Cancel deployment"
-    bind:show={showCancel}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Confirm title="Cancel deployment" bind:open={showCancel} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to cancel this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showCancel = false)}>Cancel</Button>
-        <Button secondary submit>Continue</Button>
+        <Button secondary submit>Confirm</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/create.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/create.svelte
deleted file mode 100644
index 1b82b435c..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/create.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-    import { beforeNavigate } from '$app/navigation';
-    import { DropList, DropListItem } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { canWriteFunctions } from '$lib/stores/roles';
-    import CreateCli from './createCli.svelte';
-    import CreateGit from './createGit.svelte';
-    import CreateManual from './createManual.svelte';
-    import { showCreateDeployment } from './store';
-
-    export let secondary = false;
-    export let round = false;
-    // This allows us to know which one to open when the user uses the shortcut in the command center
-    export let main = false;
-    let show = false;
-    let showCreateCli = false;
-    let showCreateGit = false;
-    let showCreateManual = false;
-
-    beforeNavigate(() => ($showCreateDeployment = false));
-
-    $: if ($showCreateDeployment && main) {
-        show = true;
-    }
-</script>
-
-<DropList bind:show placement="bottom-end">
-    {#if $canWriteFunctions}
-        <Button {secondary} {round} on:click={() => (show = !show)} event="create_deployment">
-            <slot>
-                {#if !secondary}
-                    <span class="icon-plus" aria-hidden="true" />
-                {/if}
-                <span class="text">Create deployment</span>
-            </slot>
-        </Button>
-    {/if}
-    <svelte:fragment slot="list">
-        <DropListItem
-            on:click={() => {
-                showCreateGit = true;
-                show = false;
-            }}>Git</DropListItem>
-        <DropListItem
-            on:click={() => {
-                showCreateCli = true;
-                show = false;
-            }}>CLI</DropListItem>
-        <DropListItem
-            on:click={() => {
-                showCreateManual = true;
-                show = false;
-            }}>Manual</DropListItem>
-    </svelte:fragment>
-</DropList>
-<CreateCli bind:show={showCreateCli} />
-<CreateGit bind:show={showCreateGit} />
-<CreateManual bind:show={showCreateManual} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createCli.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createCli.svelte
deleted file mode 100644
index 4ab648d8e..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createCli.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-    import { Button } from '$lib/elements/forms';
-    import { Modal, Code, Alert } from '$lib/components';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import { func } from './store';
-    import SecondaryTabs from '$lib/components/secondaryTabs.svelte';
-    import SecondaryTabsItem from '$lib/components/secondaryTabsItem.svelte';
-
-    export let show = false;
-
-    let lang = 'js';
-    let codeSnippets = {};
-    let os = 'unknown';
-    let category = 'Unix';
-
-    const functionId = $page.params.function;
-
-    onMount(() => {
-        lang = setLanguage($func.runtime);
-        codeSnippets = setCodeSnippets(lang);
-        os = navigator['userAgentData']?.platform || navigator?.platform || 'unknown';
-
-        if (os.includes('Win')) {
-            category = 'CMD';
-        } else if (os.includes('Mac') || os.includes('Linux')) {
-            category = 'Unix';
-        } else {
-            category = 'Unix';
-        }
-    });
-
-    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'
-            }
-        };
-    }
-</script>
-
-<Modal title="Create CLI deployment" size="big" bind:show headerDivider={false}>
-    <p class="text">
-        Deploy your function using the Appwrite CLI by running the following command inside your
-        function's folder.
-    </p>
-
-    <Alert dismissible={false} type="warning">
-        If you did not create your function using the CLI, initialize your function by following our <a
-            href="https://appwrite.io/docs/tooling/command-line/installation"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">documentation</a
-        >.
-    </Alert>
-
-    <div class="editor-border box">
-        <SecondaryTabs large class="u-sep-block-end u-padding-8">
-            {#each ['Unix', 'CMD', 'PowerShell'] as cat}
-                <SecondaryTabsItem
-                    stretch
-                    fullWidth
-                    center
-                    on:click={() => (category = cat)}
-                    disabled={category === cat}>
-                    {cat}
-                </SecondaryTabsItem>
-            {/each}
-        </SecondaryTabs>
-
-        {#each ['Unix', 'CMD', 'PowerShell'] as cat}
-            {#if category === cat}
-                <Code
-                    withLineNumbers
-                    withCopy
-                    language="sh"
-                    class="cli-commands-code-box-no-outline"
-                    label={codeSnippets[cat].language}
-                    code={codeSnippets[cat].code} />
-            {/if}
-        {/each}
-    </div>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (show = false)}>Close</Button>
-    </svelte:fragment>
-</Modal>
-
-<style>
-    .box {
-        padding: unset;
-        background-color: unset;
-    }
-
-    .editor-border :global(.cli-commands-code-box-no-outline) {
-        margin: 1rem 0;
-        border: unset;
-        border-radius: unset;
-        background-color: unset;
-        padding: 0 var(--box-padding, 1.5rem) 0 var(--box-padding, 1.5rem);
-    }
-
-    :global(.editor-border .cli-commands-code-box-no-outline pre) {
-        background-color: unset;
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createGit.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createGit.svelte
deleted file mode 100644
index 104c29ff4..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createGit.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import { Button } from '$lib/elements/forms';
-    import { Box, Code, Modal, NumericList, NumericListItem } from '$lib/components';
-    import { func } from './store';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-
-    export let show = false;
-</script>
-
-<Modal title="Create Git deployment" size="big" bind:show headerDivider={false}>
-    {#if $func.installationId && $func.providerRepositoryId}
-        <p class="text">
-            Deploy your function from the Git provider of your choice by following the steps below.
-            Learn more in our <a
-                href="https://appwrite.io/docs/products/functions/deployment"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">documentation</a
-            >.
-        </p>
-        <NumericList>
-            <NumericListItem fullWidth>
-                <span class="text">Checkout your production branch.</span>
-                <div class="u-margin-block-start-16">
-                    <Code
-                        language="sh"
-                        withCopy
-                        noMargin
-                        noBoxPadding
-                        code={`git checkout ${$func.providerBranch}`} />
-                </div>
-            </NumericListItem>
-            <NumericListItem fullWidth>
-                <span class="text"> Add your changes</span>
-                <div class="u-margin-block-start-16">
-                    <Code language="sh" withCopy noMargin noBoxPadding code={`git add .`} />
-                </div>
-            </NumericListItem>
-            <NumericListItem fullWidth>
-                <span class="text"> Create a new commit </span>
-                <div class="u-margin-block-start-16 u-min-width-0 u-grid">
-                    <Code
-                        language="sh"
-                        withCopy
-                        noMargin
-                        noBoxPadding
-                        code={`git commit -m "deploying with Appwrite"`} />
-                </div>
-            </NumericListItem>
-            <NumericListItem fullWidth>
-                <span class="text"> Push your new commit</span>
-                <div class="u-margin-block-start-16">
-                    <Code
-                        language="sh"
-                        withCopy
-                        noMargin
-                        noBoxPadding
-                        code={`git push ${$func.providerBranch}`} />
-                </div>
-            </NumericListItem>
-            <NumericListItem>
-                <span class="text"> A new deployment will be triggered automatically. </span>
-            </NumericListItem>
-        </NumericList>
-    {:else}
-        <Box>
-            <div class="u-flex u-gap-16">
-                <span class=" icon-lightning-bolt" aria-hidden="true" />
-                <div class="alert-content" data-private>
-                    <h6 class="alert-title">You can now deploy your functions with Git</h6>
-                    <p class="alert-message">
-                        To get started, install Git and connect a repository to your function. When
-                        you push to that repository, your function will be deployed.
-                    </p>
-                    <div class="alert-buttons u-flex u-margin-inline-start-auto">
-                        <Button
-                            text
-                            href="https://appwrite.io/docs/products/functions/deployment"
-                            external>
-                            Learn more
-                        </Button>
-                        <Button
-                            href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$page.params.function}/settings`}>
-                            Install Git
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </Box>
-    {/if}
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (show = false)}>Close</Button>
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createManual.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createManual.svelte
deleted file mode 100644
index 4e46b5917..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/createManual.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-    import {
-        InputChoice,
-        Button,
-        InputFile,
-        FormList,
-        InputText,
-        InputTextarea
-    } from '$lib/elements/forms';
-    import { Alert, Collapsible, CollapsibleItem, Modal } from '$lib/components';
-    import { sdk } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { func } from './store';
-
-    export let show = false;
-
-    let active = true;
-    let files: FileList;
-    let entrypoint: string = $func.entrypoint;
-    let buildCommand: string = $func.commands;
-    let error: string = null;
-
-    const functionId = $page.params.function;
-    const dispatch = createEventDispatcher();
-
-    async function create() {
-        try {
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.createDeployment(
-                    functionId,
-                    files[0],
-                    active,
-                    entrypoint || undefined,
-                    buildCommand || undefined
-                );
-            await invalidate(Dependencies.DEPLOYMENTS);
-            files = undefined;
-            active = true;
-            entrypoint = $func.entrypoint;
-            buildCommand = $func.commands;
-            show = false;
-            dispatch('created');
-            trackEvent(Submit.DeploymentCreate);
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.DeploymentCreate);
-        }
-    }
-
-    $: if (!show) {
-        files = undefined;
-        active = true;
-        entrypoint = $func.entrypoint;
-        buildCommand = $func.commands;
-        show = false;
-        error = null;
-    }
-</script>
-
-<Modal
-    title="Create manual deployment"
-    {error}
-    size="big"
-    bind:show
-    onSubmit={create}
-    headerDivider={false}>
-    <p class="text">
-        Manually deploy a function by uploading a zip file containing the source code and a relative
-        path to the entry point.
-        <a
-            href="https://appwrite.io/docs/products/functions/deployment"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">Learn more about function deployments</a
-        >.
-    </p>
-    <FormList gap={16}>
-        <InputFile
-            label="Gzipped code (tar.gz)"
-            allowedFileExtensions={['gz', 'tar']}
-            bind:files
-            required={true} />
-
-        {#if $func.version === 'v2'}
-            <Alert type="info">
-                <svelte:fragment slot="title">
-                    Build commands now available for functions v3.0
-                </svelte:fragment>
-                Update your function version to make use of new features including build commands.
-                <svelte:fragment slot="buttons">
-                    <Button
-                        href="https://appwrite.io/docs/products/functions/development"
-                        external
-                        text>Learn more</Button>
-                </svelte:fragment>
-            </Alert>
-        {:else}
-            <Collapsible>
-                <CollapsibleItem>
-                    <svelte:fragment slot="title">Overwrite settings</svelte:fragment>
-                    <svelte:fragment slot="subtitle">(optional)</svelte:fragment>
-
-                    <FormList gap={16}>
-                        <p class="text">Overwrite your function entrypoint or build commands.</p>
-                        <InputText
-                            label="Entrypoint"
-                            id="entrypoint"
-                            placeholder="Entrypoint"
-                            bind:value={entrypoint} />
-                        <InputTextarea
-                            label="Commands"
-                            placeholder="Enter a build command (e.g. 'npm install')"
-                            tooltip="Enter a single command or chain multiple commands with the && operator"
-                            id="build"
-                            bind:value={buildCommand} />
-                        <InputChoice
-                            label="Activate deployment after build"
-                            id="activate"
-                            bind:value={active}>
-                            This deployment will be activated after the build is completed.
-                        </InputChoice>
-                    </FormList>
-                </CollapsibleItem>
-            </Collapsible>
-        {/if}
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (show = false)}>Close</Button>
-        <Button submit>Create</Button>
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/delete.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/delete.svelte
index 457999803..98287abd6 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/delete.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
 
     export let showDelete = false;
     export let selectedDeployment: Models.Deployment = null;
+    let error: string;
 
     async function handleSubmit() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.deleteDeployment(selectedDeployment.resourceId, selectedDeployment.$id);
             await invalidate(Dependencies.FUNCTION);
             showDelete = false;
@@ -24,26 +24,13 @@
                 message: `Deployment has been deleted`
             });
             trackEvent(Submit.DeploymentDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.DeploymentDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete deployment"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>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>
+<Confirm onSubmit={handleSubmit} title="Delete deployment" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this deployment?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 4e20d88ec..7f64649ea 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -1,88 +1,89 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { func } from '../store';
-    import { realtime, sdk } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import type { Models } from '@appwrite.io/console';
-    import { page } from '$app/stores';
+    import { type Models } from '@appwrite.io/console';
+    import { page } from '$app/state';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { deployment } from './store';
-    import Heading from '$lib/components/heading.svelte';
-    import BoxAvatar from '$lib/components/boxAvatar.svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import Delete from '../delete.svelte';
-    import Activate from '../activate.svelte';
-    import Cancel from '../cancel.svelte';
-    import DeploymentCard from '../deploymentCard.svelte';
+    import Activate from '../(modals)/activateModal.svelte';
+    import Cancel from '../(modals)/cancelDeploymentModal.svelte';
+    import DeploymentCard from '../(components)/deploymentCard.svelte';
+    import Delete from '../(modals)/deleteModal.svelte';
+    import {
+        Accordion,
+        ActionMenu,
+        Card,
+        Icon,
+        Layout,
+        Logs,
+        Spinner,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+    import { timer } from '$lib/actions/timer';
+    import { app } from '$lib/stores/app';
+    import { IconDotsHorizontal, IconRefresh } from '@appwrite.io/pink-icons-svelte';
+    import { Menu } from '$lib/components/menu';
+    import { canWriteFunctions } from '$lib/stores/roles';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import DownloadActionMenuItem from '../(components)/downloadActionMenuItem.svelte';
+    import { base } from '$app/paths';
+    import { isCloud } from '$lib/system';
+    import { readOnly } from '$lib/stores/billing';
+    import RedeployModal from '../(modals)/redeployModal.svelte';
 
     export let data;
 
-    let logs = '';
     let showDelete = false;
     let showCancel = false;
     let showActivate = false;
-
-    let enableScrollButton = false;
-    let codePanelContent: HTMLElement;
-
-    function handleActivate() {
-        invalidate(Dependencies.DEPLOYMENTS);
-    }
-
-    function getDownload(deploymentId: string) {
-        return (
-            sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.getDeploymentDownload($func.$id, deploymentId)
-                .toString() + '&mode=admin'
-        );
-    }
-
-    function handleScroll() {
-        const threshold = codePanelContent.clientHeight * 0.25;
-        enableScrollButton = codePanelContent.scrollTop > threshold;
-    }
+    let showRedeploy = false;
 
     onMount(() => {
-        logs = $deployment.buildLogs;
-
-        codePanelContent = document.querySelector('.code-panel-content');
-        codePanelContent.addEventListener('scroll', handleScroll);
-
-        if ($deployment.status === 'ready') {
-            return;
-        }
-
-        const unsubscribe = realtime
-            .forProject($page.params.region, $page.params.project)
-            .subscribe<Models.Deployment>('console', (message) => {
+        const unsubscribe = sdk.forConsole.client.subscribe<Models.Deployment>(
+            'console',
+            (message) => {
                 if (
                     message.events.includes(
-                        `functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
+                        `functions.${page.params.function}.deployments.${page.params.deployment}.update`
                     )
                 ) {
-                    logs = message.payload['logs'];
                     if (message.payload.status === 'ready') {
                         invalidate(Dependencies.DEPLOYMENT);
                     }
                 }
-            });
+            }
+        );
 
         return () => {
             unsubscribe();
-            codePanelContent.removeEventListener('scroll', handleScroll);
         };
     });
+
+    export function badgeTypeDeployment(status: string) {
+        switch (status) {
+            case 'failed':
+                return 'error';
+            case 'ready':
+                return 'success';
+            case 'building':
+                return 'warning';
+            case 'processing':
+                return undefined;
+            default:
+                return undefined;
+        }
+    }
 </script>
 
 <Container>
-    <DeploymentCard deployment={$deployment}>
-        <svelte:fragment slot="actions">
-            <div class="u-flex u-flex-wrap">
-                {#if $deployment.status === 'processing' || $deployment.status === 'building' || $deployment.status === 'waiting'}
+    <DeploymentCard proxyRuleList={data.proxyRuleList} deployment={data.deployment}>
+        {#snippet footer()}
+            <Layout.Stack direction="row" alignItems="center" inline>
+                {#if data.deployment.status === 'processing' || data.deployment.status === 'building' || data.deployment.status === 'waiting'}
                     <Button
                         text
                         on:click={() => {
@@ -90,83 +91,91 @@
                         }}>Cancel</Button>
                 {/if}
 
-                {#if $deployment.size > 0}
-                    <Button text href={getDownload($deployment.$id)}>Download code</Button>
+                <Menu>
+                    <Button secondary icon text>
+                        <Icon icon={IconDotsHorizontal} />
+                    </Button>
+                    <svelte:fragment slot="menu" let:toggle>
+                        <ActionMenu.Root>
+                            {#if $canWriteFunctions}
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconRefresh}
+                                    on:click={() => {
+                                        showRedeploy = true;
+                                        trackEvent(Click.FunctionsRedeployClick);
+                                        toggle();
+                                    }}>
+                                    Redeploy
+                                </ActionMenu.Item.Button>
+                            {/if}
+                            {#if !!data.deployment?.sourceSize || !!data.deployment?.sourceSize}
+                                <DownloadActionMenuItem deployment={data.deployment} {toggle} />
+                            {/if}
+                        </ActionMenu.Root>
+                    </svelte:fragment>
+                </Menu>
+                {#if data.func.deploymentId === data.deployment.$id && data.deployment.status === 'ready'}
+                    <Button
+                        href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/executions/execute-function`}
+                        disabled={isCloud && $readOnly}>
+                        Execute
+                    </Button>
                 {/if}
 
-                {#if $func.deployment !== $deployment.$id && $deployment.status === 'ready'}
+                {#if data.func.deploymentId !== data.deployment.$id && data.deployment.status === 'ready'}
                     <Button
-                        secondary
                         disabled={data.activeDeployment}
                         on:click={() => {
                             showActivate = true;
                         }}>Activate</Button>
                 {/if}
-            </div>
-        </svelte:fragment>
+            </Layout.Stack>
+        {/snippet}
     </DeploymentCard>
 
-    <div class="u-stretch u-overflow-hidden u-padding-block-start-24">
-        <section class="code-panel" style="border-radius: var(--border-radius-medium);">
-            <header
-                class="code-panel-header u-flex u-main-space-between u-width-full-line u-flex-wrap u-gap-16">
-                <div class="u-flex u-flex-vertical">
-                    <h4 class="u-bold">Build {$func.name}</h4>
-                    {#if $deployment.status === 'building'}
-                        <span>Building...</span>
+    <Card.Base padding="s">
+        <Accordion
+            title="Deployment logs"
+            badge={capitalize(data.deployment.status)}
+            open
+            badgeType={badgeTypeDeployment(data.deployment.status)}
+            hideDivider>
+            <Layout.Stack gap="xl">
+                {#key data.deployment.buildLogs}
+                    <Logs
+                        showScrollButton
+                        logs={data.deployment.buildLogs || 'No logs available yet...'}
+                        bind:theme={$app.themeInUse} />
+                {/key}
+            </Layout.Stack>
+
+            <svelte:fragment slot="end">
+                <Layout.Stack direction="row" alignItems="center" inline>
+                    {#if ['processing', 'building'].includes(data.deployment.status)}
+                        <Typography.Code color="--fgcolor-neutral-secondary">
+                            <Layout.Stack direction="row" alignItems="center" inline>
+                                <p use:timer={{ start: data.deployment.$createdAt }}></p>
+                                <Spinner size="s" />
+                            </Layout.Stack>
+                        </Typography.Code>
                     {:else}
-                        <span class="u-capitalize">{$deployment.status}</span>
+                        <Typography.Code color="--fgcolor-neutral-secondary">
+                            {formatTimeDetailed(data.deployment.buildDuration)}
+                        </Typography.Code>
                     {/if}
-                </div>
-
-                <div class="u-flex u-gap-16">
-                    <!-- TODO: add button once function is implemented -->
-                    <!-- <Button disabled text>
-                            <span class="icon-external-link" aria-hidden="true" /> Raw data</Button> -->
-                    <Button
-                        secondary
-                        disabled={!enableScrollButton}
-                        on:click={() => codePanelContent?.scrollTo({ top: 0, behavior: 'smooth' })}>
-                        <span class="icon-arrow-sm-up" aria-hidden="true" /> Scroll to top</Button>
-                </div>
-            </header>
-            <div class="code-panel-content">
-                <pre><code>{logs}</code></pre>
-            </div>
-        </section>
-    </div>
-
-    {#if !data.activeDeployment}
-        <CardGrid danger>
-            <Heading tag="h6" size="7">Delete deployment</Heading>
-            <p>
-                The deployment will be permanently deleted, including all data associated with it.
-                This action is irreversible.
-            </p>
-            <svelte:fragment slot="aside">
-                <BoxAvatar>
-                    <p>Last updated: {toLocaleDateTime($func.$updatedAt)}</p>
-                </BoxAvatar>
+                </Layout.Stack>
             </svelte:fragment>
-            <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-            </svelte:fragment>
-        </CardGrid>
-    {/if}
+        </Accordion>
+    </Card.Base>
 </Container>
 
-<Delete selectedDeployment={$deployment} bind:showDelete />
-<Cancel selectedDeployment={$deployment} bind:showCancel />
-<Activate selectedDeployment={$deployment} bind:showActivate on:activated={handleActivate} />
+<Delete selectedDeployment={data.deployment} bind:showDelete />
+<Cancel selectedDeployment={data.deployment} bind:showCancel />
+<Activate
+    selectedDeployment={data.deployment}
+    bind:showActivate
+    on:activated={() => invalidate(Dependencies.DEPLOYMENTS)} />
 
-<style>
-    @media (max-width: 768px) {
-        .code-panel-header {
-            flex-direction: column;
-        }
-    }
-
-    .code-panel-content {
-        max-height: 50vh;
-    }
-</style>
+{#if showRedeploy}
+    <RedeployModal bind:show={showRedeploy} selectedDeployment={data.deployment} redirect />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.ts
index 60b59ebfb..ddecf66ae 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.ts
@@ -11,7 +11,8 @@ export const load: PageLoad = async ({ params, depends, parent }) => {
         .functions.getDeployment(params.function, params.deployment);
 
     return {
+        func,
         deployment,
-        activeDeployment: func.deployment === params.deployment
+        activeDeployment: func.deploymentId === params.deployment
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
index 45f96c86b..785e7076b 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { func } from '../store';
     import { deployment } from './store';
@@ -10,15 +10,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/functions`,
             title: 'Functions'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func?.$id}`,
             title: $func?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func?.$id}/deployment-${$deployment?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func?.$id}/deployment-${$deployment?.$id}`,
             title: 'Deployment'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte
index eb1ca3164..e42debf62 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { deployment } from './store';
 
-    $: projectId = $page.params.project;
-    $: functionId = $page.params.function;
+    $: projectId = page.params.project;
+    $: functionId = page.params.function;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            href={`${base}/project-${$page.params.region}-${projectId}/functions/function-${functionId}`}>
+            href={`${base}/project-${page.params.region}-${projectId}/functions/function-${functionId}`}>
             Deployment
         </CoverTitle>
         <Id value={$deployment.$id}>{$deployment.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentBy.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentBy.svelte
deleted file mode 100644
index 84baf5329..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentBy.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { timeFromNow } from '$lib/helpers/date';
-    import type { Models } from '@appwrite.io/console';
-
-    export let type: 'create' | 'update';
-    export let deployment: Models.Deployment;
-
-    let variable = type === 'create' ? '$createdAt' : '$updatedAt';
-</script>
-
-{timeFromNow(deployment[variable])}
-{#if deployment.providerCommitAuthor}
-    by <a
-        class="u-underline u-cursor-pointer"
-        target="_blank"
-        href={deployment.providerCommitAuthorUrl}>{deployment.providerCommitAuthor}</a>
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentCard.svelte
deleted file mode 100644
index be95684ff..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentCard.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-    import { CardGrid, Id, SvgIcon } from '$lib/components';
-    import type { Models } from '@appwrite.io/console';
-    import { func, proxyRuleList } from './store';
-    import { Pill } from '$lib/elements';
-    import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { calculateTime } from '$lib/helpers/timeConversion';
-    import DeploymentBy from './deploymentBy.svelte';
-    import DeploymentSource from './deploymentSource.svelte';
-
-    import DeploymentDomains from './deploymentDomains.svelte';
-    import { tooltip } from '$lib/actions/tooltip';
-
-    export let deployment: Models.Deployment;
-</script>
-
-<CardGrid>
-    <div class="u-flex u-cross-start u-gap-16">
-        <div class="avatar" style={`--p-image-size: ${32 / 16}rem`} aria-hidden="true">
-            <SvgIcon size={64} iconSize="large" name={$func.runtime.split('-')[0]}></SvgIcon>
-        </div>
-        <div class="u-grid-equal-row-size u-gap-4 u-line-height-1">
-            <p><b>Deployment ID</b></p>
-
-            <Id value={deployment.$id}>
-                {deployment.$id}
-            </Id>
-        </div>
-    </div>
-    <svelte:fragment slot="aside">
-        {@const status = deployment.status}
-        {@const deploymentSize = humanFileSize(deployment.size)}
-        {@const buildSize = humanFileSize(deployment.buildSize)}
-        {@const totalSize = humanFileSize(deployment.buildSize + deployment.size)}
-        <ul class="stats-grid-box u-gap-16">
-            <li class="u-flex-vertical u-gap-4">
-                <p class="u-color-text-offline">Status</p>
-                <span>
-                    <Pill
-                        danger={status === 'failed'}
-                        warning={status === 'building'}
-                        success={status === 'ready'}>
-                        <span class="icon-lightning-bolt" aria-hidden="true" />
-                        <span class="text u-trim">
-                            {status === 'ready' ? 'active' : status}
-                        </span>
-                    </Pill>
-                </span>
-            </li>
-            <li class="u-flex-vertical u-gap-4">
-                <p class="u-color-text-offline">Build time</p>
-                <p class="u-line-height-2">
-                    {calculateTime(deployment.buildTime)}
-                </p>
-            </li>
-            <li class="u-flex-vertical u-gap-4">
-                <p class="u-color-text-offline">Total size</p>
-                <p class="u-line-height-2">
-                    {totalSize.value + totalSize.unit}
-                    <button
-                        type="button"
-                        on:click|preventDefault
-                        class="tooltip"
-                        aria-label="input tooltip"
-                        use:tooltip={{
-                            content: `
-                                <p><b>Deployment size:</b> ${deploymentSize.value + deploymentSize.unit}</p>
-                                <p><b>Build size:</b> ${buildSize.value + buildSize.unit}</p>
-                            `,
-                            allowHTML: true,
-                            appendTo: 'parent'
-                        }}>
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style="font-size: var(--icon-size-small)" />
-                    </button>
-                </p>
-            </li>
-            <li class="u-flex-vertical u-gap-4">
-                <p class="u-color-text-offline">Updated</p>
-                <p class="u-line-height-2">
-                    <DeploymentBy {deployment} type="update" />
-                </p>
-            </li>
-        </ul>
-
-        <div class="u-flex u-flex-vertical u-gap-4">
-            <p class="u-color-text-offline">Source</p>
-            <div>
-                <DeploymentSource {deployment} />
-            </div>
-        </div>
-
-        {#if $proxyRuleList?.rules?.length}
-            <div class="u-flex u-flex-vertical u-gap-4">
-                <p class="u-color-text-offline">Domains</p>
-                <DeploymentDomains domain={$proxyRuleList} />
-            </div>
-        {/if}
-    </svelte:fragment>
-
-    <svelte:fragment slot="actions">
-        <slot name="actions" />
-    </svelte:fragment>
-</CardGrid>
-
-<style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
-
-    .stats-grid-box {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media #{devices.$break3open} {
-        .stats-grid-box {
-            grid-template-columns: repeat(4, 1fr);
-        }
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentDomains.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentDomains.svelte
deleted file mode 100644
index bd441f17c..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentDomains.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { DropList, DropListLink, Trim } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import type { Models } from '@appwrite.io/console';
-
-    export let domain: Models.ProxyRuleList;
-    let showDropdown = false;
-</script>
-
-<div class="u-flex u-gap-4 u-cross-center">
-    <a
-        href={`http://${domain.rules[0].domain}`}
-        target="_blank"
-        class="u-flex u-gap-4 u-cross-center">
-        <Trim alternativeTrim>
-            <span class="link">
-                {domain.rules[0].domain}
-            </span>
-        </Trim>
-        <span class="icon-external-link" aria-hidden="true" />
-    </a>
-    {#if domain.rules.length > 1}
-        <DropList bind:show={showDropdown} scrollable>
-            <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                +{domain.rules.length - 1}
-            </Pill>
-            <svelte:fragment slot="list">
-                {#each domain.rules as rule, i}
-                    {#if i !== 0}
-                        <DropListLink href={`http://${rule.domain}`} external icon="external-link">
-                            {rule.domain}
-                        </DropListLink>
-                    {/if}
-                {/each}
-            </svelte:fragment>
-        </DropList>
-    {/if}
-</div>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentSource.svelte
deleted file mode 100644
index c81332f21..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deploymentSource.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import { DropList, DropListLink, Trim } from '$lib/components';
-    import type { Models } from '@appwrite.io/console';
-
-    export let deployment: Models.Deployment;
-    let showDropdown = false;
-</script>
-
-{#if deployment.type === 'vcs'}
-    <DropList bind:show={showDropdown}>
-        <button
-            on:click={() => (showDropdown = !showDropdown)}
-            type="button"
-            class="u-flex u-gap-4 u-cross-center">
-            <span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
-        </button>
-        <svelte:fragment slot="list">
-            <DropListLink
-                href={deployment.providerRepositoryUrl}
-                external
-                icon="github"
-                iconStyle="font-size:20px">
-                <Trim alternativeTrim>
-                    <span style:white-space="pre-wrap">
-                        {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
-                    </span>
-                </Trim>
-            </DropListLink>
-            <DropListLink
-                href={deployment.providerBranchUrl}
-                external
-                icon="git-branch"
-                iconStyle="font-size:20px">
-                {deployment.providerBranch}
-            </DropListLink>
-            {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
-                <DropListLink
-                    href={deployment.providerCommitUrl}
-                    external
-                    icon="git-commit"
-                    iconStyle="font-size:20px">
-                    <Trim alternativeTrim>
-                        <span style="white-space: pre-wrap">
-                            {deployment?.providerCommitHash?.substring(0, 7)}
-                            {deployment.providerCommitMessage}
-                        </span>
-                    </Trim>
-                </DropListLink>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{:else if deployment.type === 'manual'}
-    <span class="icon-code" aria-hidden="true" /> <span>Manual</span>
-{:else if deployment.type === 'cli'}
-    <span class="icon-terminal" aria-hidden="true" /> <span>CLI</span>
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte
index a10b67620..e1ab5a837 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte
@@ -1,18 +1,91 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
-    import type { PageData } from './$types';
-    import { ProxyRulesPage } from '$lib/pages/domains';
-    import { Dependencies } from '$lib/constants';
-    import { ResourceType } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js';
+    import { Button } from '$lib/elements/forms';
+    import Container from '$lib/layout/container.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import DeleteDomainModal from './deleteDomainModal.svelte';
+    import RetryDomainModal from './retryDomainModal.svelte';
+    import SearchQuery from '$lib/components/searchQuery.svelte';
+    import { app } from '$lib/stores/app';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import Table from './table.svelte';
 
-    export let data: PageData;
+    let { data } = $props();
+
+    let showDelete = $state(false);
+    let showRetry = $state(false);
+    let selectedDomain: Models.ProxyRule = null;
 </script>
 
 <Container>
-    <ProxyRulesPage
-        rules={data.rules}
-        type={ResourceType.Function}
-        dependency={Dependencies.FUNCTION_DOMAINS}>
-        <svelte:fragment slot="heading">Domains</svelte:fragment>
-    </ProxyRulesPage>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery placeholder="Search domain" />
+        <Button
+            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains/add-domain`}
+            on:click={() => {
+                trackEvent(Click.DomainCreateClick, {
+                    source: 'functions_domain_overview'
+                });
+            }}>
+            <Icon icon={IconPlus} size="s" />
+            Add domain
+        </Button>
+    </Layout.Stack>
+    {#if data.domains.total}
+        <Table domains={data.domains} />
+
+        <PaginationWithLimit
+            name="Domains"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.domains.total} />
+    {:else if data?.search}
+        <EmptySearch hidePages bind:search={data.search} target="domains" hidePagination>
+            <svelte:fragment slot="actions">
+                <Button
+                    secondary
+                    on:click={() => {
+                        data.search = '';
+                    }}>Clear search</Button>
+            </svelte:fragment>
+        </EmptySearch>
+    {:else}
+        <Card.Base padding="none">
+            <Empty
+                src={$app.themeInUse === 'dark'
+                    ? `${base}/images/domains/empty-domain-dark.svg`
+                    : `${base}/images/domains/empty-domain-light.svg`}
+                title="Use a custom domain for your function"
+                description="Make your function easier to access and integrate by assigning it a custom domain.">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        href="#/"
+                        text
+                        event="empty_documentation"
+                        size="s"
+                        ariaLabel="add domain">Documentation</Button>
+
+                    <Button
+                        secondary
+                        href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains/add-domain`}
+                        size="s">
+                        Add domain
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
+    {/if}
 </Container>
+
+{#if showDelete}
+    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
+{/if}
+
+{#if showRetry}
+    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.ts
index 97ffc057c..8e96e426a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.ts
@@ -1,17 +1,45 @@
 import { Dependencies } from '$lib/constants';
-import { sdk } from '$lib/stores/sdk';
-import { Query, ResourceType } from '@appwrite.io/console';
+import { RuleType, DeploymentResourceType, RuleTrigger, sdk } from '$lib/stores/sdk';
+import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
+import { getPage } from '$lib/helpers/load';
+import { getLimit } from '$lib/helpers/load';
+import { pageToOffset } from '$lib/helpers/load';
+import { getQuery } from '$lib/helpers/load';
+import { getSearch } from '$lib/helpers/load';
+import { queries, queryParamToMap } from '$lib/components/filters';
+import { PAGE_LIMIT } from '$lib/constants';
 
-export const load: PageLoad = async ({ depends, params }) => {
+export const load: PageLoad = async ({ depends, params, url, route }) => {
     depends(Dependencies.FUNCTION_DOMAINS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+    const search = getSearch(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
 
     return {
-        rules: await sdk
+        offset,
+        limit,
+        query,
+        search,
+        domains: await sdk
             .forProject(params.region, params.project)
-            .proxy.listRules([
-                Query.equal('resourceType', ResourceType.Function),
-                Query.equal('resourceId', params.function)
-            ])
+            .proxy.listRules(
+                [
+                    Query.equal('type', [RuleType.DEPLOYMENT, RuleType.REDIRECT]),
+                    Query.equal('deploymentResourceType', DeploymentResourceType.FUNCTION),
+                    Query.equal('deploymentResourceId', params.function),
+                    Query.equal('trigger', RuleTrigger.MANUAL),
+                    Query.limit(limit),
+                    Query.offset(offset),
+                    Query.orderDesc(''),
+                    ...parsedQueries.values()
+                ],
+                search || undefined
+            )
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
new file mode 100644
index 000000000..662c71bc5
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Button, Form, InputDomain, InputSelect, InputURL } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Fieldset, Layout, Tooltip, Icon, Input, Alert } from '@appwrite.io/pink-svelte';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { sortBranches } from '$lib/stores/vcs';
+    import { protocol } from '$routes/(console)/store';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { LabelCard } from '$lib/components';
+    import { Runtime, StatusCode, type Models } from '@appwrite.io/console';
+    import { statusCodeOptions } from '$lib/stores/domains';
+    import { writable } from 'svelte/store';
+    import { onMount } from 'svelte';
+    import { ConnectRepoModal } from '$lib/components/git/index.js';
+    import { isValueOfStringEnum } from '$lib/helpers/types.js';
+
+    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains`;
+
+    let { data } = $props();
+
+    let formComponent: Form;
+    let isSubmitting = $state(writable(false));
+    let showConnectRepo = $state(false);
+    let behaviour: 'REDIRECT' | 'BRANCH' | 'ACTIVE' = $state('ACTIVE');
+    let domainName = $state('');
+    let redirect: string = $state(null);
+    let statusCode = $state(307);
+    let branch: string = $state(null);
+
+    onMount(() => {
+        if (
+            page.url.searchParams.has('connectRepo') &&
+            page.url.searchParams.get('connectRepo') === 'true'
+        ) {
+            showConnectRepo = true;
+        }
+        if (page.url.searchParams.has('domain')) {
+            domainName = page.url.searchParams.get('domain');
+        }
+    });
+
+    async function addDomain() {
+        try {
+            let rule: Models.ProxyRule;
+            if (behaviour === 'BRANCH') {
+                rule = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createFunctionRule(domainName, page.params.function, branch);
+            } else if (behaviour === 'REDIRECT') {
+                const sc = Object.values(StatusCode).find((code) => parseInt(code) === statusCode);
+                rule = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createRedirectRule(domainName, $protocol + redirect, sc);
+            } else if (behaviour === 'ACTIVE') {
+                rule = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createFunctionRule(domainName, page.params.function);
+            }
+            if (rule?.status === 'verified') {
+                await goto(routeBase);
+                await invalidate(Dependencies.FUNCTION_DOMAINS);
+            } else {
+                await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
+                await invalidate(Dependencies.FUNCTION_DOMAINS);
+            }
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function connect(selectedInstallationId: string, selectedRepository: string) {
+        try {
+            if (!isValueOfStringEnum(Runtime, data.func.runtime)) {
+                throw new Error(`Invalid runtime: ${data.func.runtime}`);
+            }
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.update(
+                    data.func.$id,
+                    data.func.name,
+                    data.func.runtime as Runtime,
+                    data.func.execute || undefined,
+                    data.func.events || undefined,
+                    data.func.schedule || undefined,
+                    data.func.timeout || undefined,
+                    data.func.enabled || undefined,
+                    data.func.logging || undefined,
+                    data.func.entrypoint,
+                    data.func.commands || undefined,
+                    data.func.scopes || undefined,
+                    selectedInstallationId,
+                    selectedRepository,
+                    'main',
+                    undefined,
+                    undefined,
+                    undefined
+                );
+            await invalidate(Dependencies.FUNCTION);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+<Wizard title="Add domain" href={routeBase} column columnSize="s" confirmExit>
+    <Form bind:this={formComponent} onSubmit={addDomain} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Domain">
+                <!-- <Input.ComboBox
+                    label="Domain"
+                    id="domain"
+                    name="domain"
+                    bind:value={domain}
+                    options={data.domains.rules.map((domain) => ({
+                        label: domain.domain,
+                        value: domain.domain
+                    }))}
+                    required
+                    placeholder="appwrite.example.com" /> -->
+                <InputDomain
+                    label="Domain"
+                    id="domain"
+                    bind:value={domainName}
+                    required
+                    placeholder="appwrite.example.com" />
+            </Fieldset>
+
+            <Layout.Grid columns={3} columnsXS={1}>
+                <LabelCard value="ACTIVE" bind:group={behaviour} title="Active deployment">
+                    Point this domain to the latest deployed version.
+                </LabelCard>
+                <LabelCard value="BRANCH" bind:group={behaviour} title="Git branch">
+                    Point this domain to a specific branch in your repository.
+                </LabelCard>
+                <LabelCard value="REDIRECT" bind:group={behaviour} title="Redirect">
+                    Forward all traffic from this domain to another URL.
+                </LabelCard>
+            </Layout.Grid>
+
+            {#if behaviour === 'BRANCH'}
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="xl">
+                        {#if data.function?.providerRepositoryId}
+                            {@const sortedBranches = sortBranches(data.branches.branches)}
+                            {@const options = sortedBranches.map((branch) => ({
+                                label: branch.name,
+                                value: branch.name
+                            }))}
+                            <Layout.Stack gap="s">
+                                <InputSelect
+                                    {options}
+                                    label="Production branch"
+                                    id="branch"
+                                    required
+                                    bind:value={branch}
+                                    placeholder="Select branch" />
+                                {#if !data.branches?.total}
+                                    <Input.Helper state="default">
+                                        No branches found in the selected repository. Create a
+                                        branch to see it here.
+                                    </Input.Helper>
+                                {/if}
+                            </Layout.Stack>
+                        {:else}
+                            <InputSelect
+                                disabled
+                                options={[{ label: 'main', value: 'main' }]}
+                                label="Production branch"
+                                id="branch"
+                                required
+                                value="main"
+                                placeholder="Select branch" />
+                            <Alert.Inline
+                                title=" There is no repository connected to your function">
+                                <Layout.Stack>
+                                    <p>
+                                        The domain will be connected to your active deployment.
+                                        Connect your Git repository to link a production branch.
+                                    </p>
+                                    <div>
+                                        <Button compact on:click={() => (showConnectRepo = true)}>
+                                            Connect repository
+                                        </Button>
+                                    </div>
+                                </Layout.Stack>
+                            </Alert.Inline>
+                        {/if}
+                    </Layout.Stack>
+                </Fieldset>
+            {:else if behaviour === 'REDIRECT'}
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="xl">
+                        <InputURL
+                            label="Redirect to"
+                            id="redirect"
+                            placeholder="https://appwrite.io/docs"
+                            bind:value={redirect}
+                            required>
+                            <Tooltip slot="info">
+                                <Icon icon={IconInfo} size="s" />
+                                <span slot="tooltip"> Redirect your domain to this URL.</span>
+                            </Tooltip>
+                        </InputURL>
+                        <InputSelect
+                            options={statusCodeOptions}
+                            label="Status code"
+                            id="code"
+                            required
+                            bind:value={statusCode}
+                            placeholder="Select status code" />
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button secondary href={routeBase}>Cancel</Button>
+        <Button on:click={() => formComponent.triggerSubmit()} bind:disabled={$isSubmitting}>
+            Add
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+{#if showConnectRepo}
+    <ConnectRepoModal
+        bind:show={showConnectRepo}
+        {connect}
+        product="functions"
+        onlyExisting
+        callbackState={{ connectRepo: 'true' }} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts
new file mode 100644
index 000000000..773724c3c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts
@@ -0,0 +1,31 @@
+import { sdk } from '$lib/stores/sdk';
+import { Query } from '@appwrite.io/console';
+import { RuleTrigger, RuleType } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+
+export const load = async ({ parent, depends, params }) => {
+    const { function: func } = await parent();
+    depends(Dependencies.DOMAINS, Dependencies.FUNCTION_DOMAINS);
+
+    const [domains, installations] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.DEPLOYMENT),
+                Query.equal('trigger', RuleTrigger.MANUAL)
+            ]),
+        sdk.forProject(params.region, params.project).vcs.listInstallations()
+    ]);
+
+    return {
+        func,
+        domains,
+        installations,
+        branches:
+            func?.installationId && func?.providerRepositoryId
+                ? await sdk
+                      .forProject(params.region, params.project)
+                      .vcs.listRepositoryBranches(func.installationId, func.providerRepositoryId)
+                : undefined
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte
new file mode 100644
index 000000000..f8b03eb86
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+    import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Card,
+        Divider,
+        Fieldset,
+        Icon,
+        Layout,
+        Tabs,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { organization } from '$lib/stores/organization';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { isCloud } from '$lib/system';
+    import { page } from '$app/state';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { base } from '$app/paths';
+    import { writable } from 'svelte/store';
+    import { consoleVariables } from '$routes/(console)/store';
+    import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
+    import RecordTable from '$lib/components/domains/recordTable.svelte';
+
+    let { data } = $props();
+
+    const ruleId = page.url.searchParams.get('rule');
+    let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3);
+
+    let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
+    $effect(() => {
+        if ($consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
+            selectedTab = 'cname';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_A) {
+            selectedTab = 'a';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_AAAA) {
+            selectedTab = 'aaaa';
+        }
+    });
+    let verified = $state(false);
+
+    let routeBase = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains`;
+    let isSubmitting = $state(writable(false));
+
+    async function verify() {
+        const isNewDomain =
+            data.domainsList.domains.findIndex((rule) => rule.domain === page.params.domain) === -1;
+        try {
+            if (selectedTab !== 'nameserver') {
+                const ruleData = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.updateRuleVerification(ruleId);
+                verified = ruleData.status === 'verified';
+            } else if (isNewDomain && isCloud) {
+                const domainData = await sdk.forConsole.domains.create(
+                    $organization.$id,
+                    page.params.domain
+                );
+                verified = domainData.nameservers.toLocaleLowerCase() === 'appwrite';
+            }
+
+            addNotification({
+                type: 'success',
+                message: 'Domain added successfully'
+            });
+            await goto(routeBase);
+            await invalidate(Dependencies.DOMAINS);
+            await invalidate(Dependencies.FUNCTION_DOMAINS);
+        } catch (error) {
+            verified = false;
+            isSubmitting.set(false);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function back() {
+        if (ruleId) {
+            await sdk.forProject(page.params.region, page.params.project).proxy.deleteRule(ruleId);
+        }
+        await goto(`${routeBase}/add-domain?domain=${page.params.domain}`);
+    }
+</script>
+
+<Wizard title="Add domain" href={routeBase} column columnSize="s">
+    <Form onSubmit={verify} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Card.Base radius="s" padding="s">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="xs">
+                        <Icon icon={IconGlobeAlt} color="--fgcolor-neutral-primary" />
+
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
+                            {page.params.domain}
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Button secondary on:click={back}>Change</Button>
+                </Layout.Stack>
+            </Card.Base>
+
+            <Fieldset legend="Verification">
+                <Layout.Stack gap="xl">
+                    <div>
+                        <Tabs.Root variant="secondary" let:root>
+                            {#if isSubDomain && !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && $consoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'cname')}
+                                    active={selectedTab === 'cname'}>
+                                    CNAME
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if isCloud}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'nameserver')}
+                                    active={selectedTab === 'nameserver'}>
+                                    Nameservers
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'a')}
+                                    active={selectedTab === 'a'}>
+                                    A
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'aaaa')}
+                                    active={selectedTab === 'aaaa'}>
+                                    AAAA
+                                </Tabs.Item.Button>
+                            {/if}
+                        </Tabs.Root>
+                        <Divider />
+                    </div>
+                    {#if selectedTab === 'nameserver'}
+                        <NameserverTable domain={page.params.domain} {verified} />
+                    {:else}
+                        <RecordTable domain={page.params.domain} {verified} variant={selectedTab} />
+                    {/if}
+                    <Divider />
+                    <Layout.Stack direction="row" justifyContent="flex-end">
+                        <div>
+                            <Button submit disabled={$isSubmitting}>Verify</Button>
+                        </div>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.ts
new file mode 100644
index 000000000..6e84864d1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.ts
@@ -0,0 +1,22 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants.js';
+import { isCloud } from '$lib/system';
+import type { Domain, DomainsList } from '$lib/sdk/domains.js';
+
+export const load = async ({ depends, params }) => {
+    depends(Dependencies.DOMAINS);
+
+    let domain: Domain;
+    let domainsList: DomainsList;
+    if (isCloud) {
+        [domain, domainsList] = await Promise.all([
+            sdk.forConsole.domains.get(params.domain),
+            sdk.forConsole.domains.list()
+        ]);
+    }
+
+    return {
+        domain,
+        domainsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/deleteDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/deleteDomainModal.svelte
new file mode 100644
index 000000000..1882bc282
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/deleteDomainModal.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { Button, InputCheckbox } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import type { Models } from '@appwrite.io/console';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Confirm } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
+
+    export let show = false;
+    export let selectedDomain: Models.ProxyRule;
+    let confirm = false;
+    let error = '';
+
+    async function deleteDomain() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.deleteRule(selectedDomain.$id);
+            await invalidate(Dependencies.FUNCTION_DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Domain has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+</script>
+
+<Confirm title="Delete domain" bind:open={show} onSubmit={deleteDomain} bind:error>
+    {#if selectedDomain}
+        <Typography.Text variant="m-400">
+            Are you sure you want to delete this domain? You will no longer be able to execute your
+            function by visiting:
+        </Typography.Text>
+        <Typography.Text variant="m-500">
+            {selectedDomain.domain}
+        </Typography.Text>
+    {/if}
+    <InputCheckbox
+        required
+        bind:checked={confirm}
+        id="confirm"
+        label="I understand and confirm"
+        size="s" />
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit disabled={!confirm}>Delete</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte
new file mode 100644
index 000000000..87d83f145
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Copy } from '$lib/components';
+    import { Link } from '$lib/elements';
+    import type { Domain } from '$lib/sdk/domains';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Badge, Layout, Typography, Table, Fieldset, Icon } from '@appwrite.io/pink-svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    export let domain: Domain | Models.ProxyRule;
+</script>
+
+<Fieldset legend="Verification">
+    <Layout.Stack gap="xl">
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="s">
+                <Layout.Stack gap="s" direction="row" alignItems="center">
+                    <Typography.Text variant="l-500">{domain?.domain}</Typography.Text>
+                    <Badge variant="secondary" type="warning" content="Pending verification" />
+                </Layout.Stack>
+                <Typography.Text variant="m-400">
+                    Add the following nameservers on your DNS provider. Note that DNS changes may
+                    take time to propagate fully.
+                </Typography.Text>
+            </Layout.Stack>
+
+            <Table.Root columns={3} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell {root}>Type</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Name</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Value</Table.Header.Cell>
+                </svelte:fragment>
+                <Table.Row.Base {root}>
+                    <Table.Cell {root}>CNAME</Table.Cell>
+                    <Table.Cell {root}>{domain?.domain}</Table.Cell>
+                    <Table.Cell {root}>
+                        <Copy value={globalThis?.location?.origin}
+                            >{globalThis?.location?.origin}</Copy>
+                    </Table.Cell>
+                </Table.Row.Base>
+            </Table.Root>
+            <Layout.Stack gap="s" direction="row" alignItems="center">
+                <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                    A list of all domain providers and their DNS setting is available <Link
+                        variant="muted"
+                        href="#">here</Link
+                    >.
+                </Typography.Text>
+            </Layout.Stack>
+        </Layout.Stack>
+        <slot />
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/retryDomainModal.svelte
new file mode 100644
index 000000000..42f967ede
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/retryDomainModal.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import RecordsCard from './recordsCard.svelte';
+    import type { Domain } from '$lib/sdk/domains';
+    import type { Models } from '@appwrite.io/console';
+    import { page } from '$app/state';
+
+    export let show = false;
+    export let selectedDomain: Domain | Models.ProxyRule;
+
+    let error = null;
+    async function retryDomain() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.updateRuleVerification(selectedDomain.$id);
+            await invalidate(Dependencies.SITES_DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `${selectedDomain.domain} has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+
+    $: if (!show) {
+        error = null;
+    }
+</script>
+
+<Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
+    {#if selectedDomain}
+        <RecordsCard domain={selectedDomain} />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Retry</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/store.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/store.ts
new file mode 100644
index 000000000..902fb3e3e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/store.ts
@@ -0,0 +1,19 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    {
+        id: 'domain',
+        title: 'Domain',
+        type: 'string',
+        format: 'string',
+        width: { min: 200 }
+    },
+
+    {
+        id: 'target',
+        title: 'Target',
+        type: 'string',
+        width: { min: 120, max: 400 }
+    }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte
new file mode 100644
index 000000000..4fe75d81a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { protocol } from '$routes/(console)/store';
+    import type { Models } from '@appwrite.io/console';
+    import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import DeleteDomainModal from './deleteDomainModal.svelte';
+    import RetryDomainModal from './retryDomainModal.svelte';
+    import { columns } from './store';
+
+    let {
+        domains
+    }: {
+        domains: Models.ProxyRuleList;
+    } = $props();
+
+    let showDelete = $state(false);
+    let showRetry = $state(false);
+    let selectedDomain: Models.ProxyRule = $state(null);
+</script>
+
+<Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>
+                {title}
+            </Table.Header.Cell>
+        {/each}
+        <Table.Header.Cell column="actions" {root} />
+    </svelte:fragment>
+    {#each domains.rules as domain}
+        <Table.Row.Base {root}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === 'domain'}
+                        <Link external href={`${$protocol}${domain.domain}`} variant="quiet" icon>
+                            <Typography.Text truncate>
+                                {domain.domain}
+                                {#if domain.status !== 'verified'}
+                                    <Badge
+                                        variant="secondary"
+                                        type="error"
+                                        content="Verification failed"
+                                        size="s" />
+                                {/if}
+                            </Typography.Text>
+                        </Link>
+                    {:else if column.id === 'target'}
+                        {domain?.redirectUrl
+                            ? 'Redirect to ' + domain.redirectUrl
+                            : domain?.deploymentVcsProviderBranch
+                              ? 'Deployed from' + domain.deploymentVcsProviderBranch
+                              : '-'}
+                    {/if}
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="actions" {root}>
+                <Layout.Stack direction="row" justifyContent="flex-end">
+                    <Popover let:toggle placement="bottom-start" padding="none">
+                        <Button
+                            text
+                            icon
+                            on:click={(e) => {
+                                e.preventDefault();
+                                toggle(e);
+                            }}>
+                            <Icon icon={IconDotsHorizontal} size="s" />
+                        </Button>
+
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root>
+                                {#if domain.status !== 'verified'}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconRefresh}
+                                        on:click={(e) => {
+                                            selectedDomain = domain;
+                                            showRetry = true;
+                                            toggle(e);
+                                        }}>
+                                        Retry
+                                    </ActionMenu.Item.Button>
+                                {/if}
+                                <ActionMenu.Item.Button
+                                    status="danger"
+                                    leadingIcon={IconTrash}
+                                    on:click={(e) => {
+                                        selectedDomain = domain;
+                                        showDelete = true;
+                                        toggle(e);
+                                        trackEvent(Click.DomainDeleteClick, {
+                                            source: 'sites_domain_overview'
+                                        });
+                                    }}>
+                                    Delete
+                                </ActionMenu.Item.Button>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </Layout.Stack>
+            </Table.Cell>
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
+
+{#if showDelete}
+    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
+{/if}
+
+{#if showRetry}
+    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+layout.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+layout.svelte
index 67dcb2f36..d7af62449 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+layout.svelte
@@ -1,13 +1,13 @@
 <script>
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Dependencies } from '$lib/constants';
     import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
 
     onMount(() => {
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe('functions.*.executions', (response) => {
                 if (response.events.includes('functions.*.executions.*')) {
                     invalidate(Dependencies.EXECUTIONS);
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
index 5a2d790c5..49290ba31 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
@@ -1,279 +1,49 @@
 <script lang="ts">
-    import { Alert, EmptySearch, PaginationWithLimit, ViewSelector } from '$lib/components';
-    import { BillingPlan } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import { Empty, EmptyFilter, PaginationWithLimit } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import { hoursToDays } from '$lib/helpers/date';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { func } from '../store';
-    import { organization } from '$lib/stores/organization';
-    import { getServiceLimit, showUsageRatesModal } from '$lib/stores/billing';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
-    import Create from '../create.svelte';
-    import { abbreviateNumber } from '$lib/helpers/numbers';
     import { base } from '$app/paths';
-    import { Filters, queries } from '$lib/components/filters';
-    import { writable } from 'svelte/store';
-    import type { Column } from '$lib/helpers/types';
-    import { View } from '$lib/helpers/load';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import Table from './table.svelte';
-    import QuickFilters from './quickFilters.svelte';
-    import { Pill } from '$lib/elements';
-    import { tags } from '$lib/components/filters/store';
+    import { columns } from './store';
 
     export let data;
 
-    const logs = getServiceLimit('logs');
-
-    const columns = writable<Column[]>([
-        { id: '$id', title: 'Execution ID', type: 'string', show: true, width: 150 },
-        {
-            id: 'status',
-            title: 'Status',
-            type: 'enum',
-            show: true,
-            width: 130,
-            array: true,
-            format: 'enum',
-            elements: ['completed', 'failed', 'waiting', 'scheduled', 'processing', 'cancelled']
-        },
-        {
-            id: '$createdAt',
-            title: 'Created',
-            type: 'datetime',
-            show: true,
-            width: 120,
-            format: 'datetime',
-            elements: [
-                {
-                    value: 5 * 60 * 1000,
-                    label: 'last 5 minutes'
-                },
-                {
-                    value: 60 * 60 * 1000,
-                    label: 'last 1 hour'
-                },
-                {
-                    value: 24 * 60 * 60 * 1000,
-                    label: 'last 24 hours'
-                }
-            ]
-        },
-        {
-            id: 'trigger',
-            title: 'Trigger',
-            type: 'string',
-            show: false,
-            width: 90,
-            array: true,
-            format: 'enum',
-            elements: [
-                { value: 'http', label: 'HTTP' },
-                { value: 'schedule', label: 'Schedule' },
-                { value: 'event', label: 'Event' }
-            ]
-        },
-        {
-            id: 'requestMethod',
-            title: 'Method',
-            type: 'string',
-            show: true,
-            width: 70,
-            array: true,
-            format: 'enum',
-            elements: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']
-        },
-        {
-            id: 'responseStatusCode',
-            title: 'Status code',
-            type: 'integer',
-            show: true,
-            width: 100,
-            format: 'integer',
-            elements: [
-                {
-                    value: 299,
-                    label: 'Success (200-299)'
-                },
-                {
-                    value: 399,
-                    label: 'Redirect (300-399)'
-                },
-                {
-                    value: 499,
-                    label: 'Client error (400-499)'
-                },
-                {
-                    value: 599,
-                    label: 'Server error (500-599)'
-                }
-            ]
-        },
-        {
-            id: 'requestPath',
-            title: 'Path',
-            type: 'string',
-            show: true,
-            width: 90,
-            format: 'string'
-        },
-        {
-            id: 'duration',
-            title: 'Duration',
-            type: 'integer',
-            show: true,
-            width: 80,
-            format: 'integer',
-            elements: [
-                {
-                    value: 1,
-                    label: 'more than 1 second'
-                },
-                {
-                    value: 5,
-                    label: 'more than 5 seconds'
-                },
-                {
-                    value: 30,
-                    label: 'more than 30 seconds'
-                }
-            ]
-        }
-    ]);
-
-    let showMobileFilters = false;
     onMount(() => {
-        data?.query ? (showMobileFilters = true) : (showMobileFilters = false);
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes('functions.*.executions.*')) {
+                invalidate(Dependencies.EXECUTIONS);
+            }
+        });
     });
-
-    function clearAll() {
-        queries.clearAll();
-        queries.apply();
-    }
 </script>
 
 <Container>
-    <ContainerHeader title="Executions">
-        <svelte:fragment slot="tooltip" let:tier let:limit let:upgradeMethod>
-            <p class="u-bold">The {tier} plan has limits</p>
-            <ul>
-                <li>
-                    {abbreviateNumber(limit)} function executions
-                </li>
-                <li>
-                    {hoursToDays(logs)} of logs
-                </li>
-            </ul>
-            {#if $organization?.billingPlan === BillingPlan.FREE}
-                <p class="text">
-                    <button class="link" type="button" on:click|preventDefault={upgradeMethod}
-                        >Upgrade</button>
-                    to increase your resource limits.
-                </p>
-            {:else}
-                <p class="text">
-                    After this amount, <button
-                        class="link"
-                        type="button"
-                        on:click|preventDefault={() => ($showUsageRatesModal = true)}
-                        >usage fees will apply</button
-                    >.
-                </p>
-            {/if}
-        </svelte:fragment>
-    </ContainerHeader>
-    <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
-        <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
-            <QuickFilters {columns} />
-            <Filters query={data.query} {columns} let:disabled let:toggle clearOnClick>
-                <div class="u-flex u-gap-4">
-                    <Button
-                        text
-                        on:click={toggle}
-                        {disabled}
-                        ariaLabel="open filter"
-                        noMargin={!$tags?.length}>
-                        <span class="icon-filter-line" />
-                        <span class="text">More filters</span>
-                    </Button>
-                    {#if $tags?.length}
-                        <div
-                            style="flex-basis: 1px; background-color: hsl(var(--color-border)); width: 1px;">
-                        </div>
-                        <Button text on:click={clearAll}>Clear All</Button>
-                    {/if}
-                </div>
-            </Filters>
-        </div>
-        <div class="u-flex u-gap-16">
-            <ViewSelector view={View.Table} {columns} hideView allowNoColumns hideText />
-            <Button
-                event="execute_function"
-                href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
-                disabled={!$func.$id || !$func?.deployment}>
-                <span class="text">Execute</span>
-            </Button>
-        </div>
-    </div>
-    <div class="is-only-mobile">
-        <div class="u-flex u-main-space-between u-margin-block-start-16">
-            <Button
-                text
-                on:click={() => (showMobileFilters = !showMobileFilters)}
-                ariaLabel="toggle filters"
-                noMargin>
-                <span class="icon-filter-line" />
-                <span class="text">Filters</span>
-            </Button>
-
-            <div class=" u-flex u-gap-16">
-                <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+    <ResponsiveContainerHeader hasFilters {columns} hideView analyticsSource="function_executions">
+        <Tooltip disabled={!!data.func?.deploymentId}>
+            <div>
                 <Button
                     event="execute_function"
-                    href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
-                    disabled={!$func.$id || !$func?.deployment}>
-                    <span class="text">Execute</span>
+                    href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${data.func.$id}/executions/execute-function`}
+                    disabled={!data.func.$id || !data.func?.deploymentId}>
+                    <Icon icon={IconPlus} size="s" slot="start" />
+                    Create execution
                 </Button>
             </div>
-        </div>
-        <div
-            class:u-hide={!showMobileFilters}
-            class:u-flex={showMobileFilters}
-            class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
-            <QuickFilters {columns} />
+            <span slot="tooltip">
+                Execution cannot be created because there is no active deployment.
+            </span>
+        </Tooltip>
+    </ResponsiveContainerHeader>
 
-            <Filters query={data.query} {columns} clearOnClick>
-                <svelte:fragment slot="mobile" let:disabled let:toggle>
-                    <Pill
-                        button
-                        on:click={toggle}
-                        {disabled}
-                        class="u-flex u-gap-4 u-cross-center"
-                        style="--p-tag-content-height: auto">
-                        <!-- <span class="icon-filter-line" /> -->
-                        <span class="text">More filters</span>
-                        <span class="icon-cheveron-down" />
-                    </Pill>
-                </svelte:fragment>
-            </Filters>
-        </div>
-    </div>
-
-    {#if !$func.logging}
-        <div class="common-section">
-            <Alert type="info" isStandalone>
-                <svelte:fragment slot="title">Your execution logs are disabled</svelte:fragment>
-                To view execution logs and errors, enable them in your
-                <a
-                    href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings`}
-                    class="link">
-                    Function settings</a
-                >.
-            </Alert>
-        </div>
-    {/if}
     {#if data?.executions?.total}
-        <Table columns={$columns} {data} />
+        <Table columns={$columns} logs={data.executions} />
 
         <PaginationWithLimit
             name="Executions"
@@ -281,36 +51,32 @@
             offset={data.offset}
             total={data.executions.total} />
     {:else if data?.query}
-        <EmptySearch hidePages>
-            <div class="common-section">
-                <div class="u-text-center common-section">
-                    <b class="body-text-2 u-bold">Sorry we couldn't find any executions</b>
-                    <p>There are no executions that match your filters.</p>
-                </div>
-                <div class="u-flex u-gap-16 common-section u-main-center">
-                    <Button
-                        secondary
-                        on:click={() => {
-                            queries.clearAll();
-                            queries.apply();
-                        }}>Clear filters</Button>
-                </div>
-            </div>
-        </EmptySearch>
+        <EmptyFilter resource="executions"></EmptyFilter>
     {:else}
-        <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? Learn more in our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-16">
-                <Button text external href="https://appwrite.io/docs/products/functions/execution">
-                    Documentation
-                </Button>
-                <Create secondary />
-            </div>
-        </EmptySearch>
+        <Empty single target="execution">
+            <svelte:fragment slot="actions">
+                <Button
+                    external
+                    href="https://appwrite.io/docs/products/functions/execution"
+                    text
+                    event="empty_documentation"
+                    size="s"
+                    ariaLabel="create execution">Documentation</Button>
+                <Tooltip disabled={!!data.func?.deploymentId}>
+                    <div>
+                        <Button
+                            secondary
+                            event="execute_function"
+                            href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${data.func.$id}/executions/execute-function`}
+                            disabled={!data.func.$id || !data.func?.deploymentId}>
+                            Create execution
+                        </Button>
+                    </div>
+                    <span slot="tooltip">
+                        Execution cannot be created because there is no active deployment.
+                    </span>
+                </Tooltip>
+            </svelte:fragment>
+        </Empty>
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.ts
index fa8be5fd0..30145b9de 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.ts
@@ -5,10 +5,12 @@ import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 import { queries, queryParamToMap } from '$lib/components/filters';
 
-export const load: PageLoad = async ({ params, depends, url, route }) => {
+export const load: PageLoad = async ({ params, depends, url, route, parent }) => {
+    const { function: func } = await parent();
+
     depends(Dependencies.EXECUTIONS);
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
@@ -19,6 +21,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         offset,
         limit,
         query,
+        func,
         executions: await sdk
             .forProject(params.region, params.project)
             .functions.listExecutions(params.function, [
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/delete.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/delete.svelte
index 01a5ece61..369b83ba2 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/delete.svelte
@@ -1,22 +1,23 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { func } from '../store';
+    import Confirm from '$lib/components/confirm.svelte';
     import type { Models } from '@appwrite.io/console';
 
     export let showDelete = false;
     export let selectedExecution: Models.Execution;
 
+    let error: string;
+
     async function handleSubmit() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.deleteExecution($func.$id, selectedExecution.$id);
             await invalidate(Dependencies.EXECUTIONS);
             showDelete = false;
@@ -25,26 +26,13 @@
                 message: `Execution has been deleted`
             });
             trackEvent(Submit.ExecutionDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.ExecutionDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.ExecutionDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete execution"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>Are you sure you want to delete this execution?</p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+<Confirm onSubmit={handleSubmit} title="Delete execution" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this execution?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte
index c2df31df3..a1f7ceaeb 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte
@@ -1,43 +1,23 @@
 <script lang="ts">
     import { afterNavigate, goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { timer } from '$lib/actions/timer';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { Alert, Card, Id } from '$lib/components';
-
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import {
         Button,
         Form,
-        FormItem,
-        FormItemPart,
-        FormList,
         Helper,
         InputDate,
         InputSelect,
-        InputSelectSearch,
         InputText,
         InputTextarea,
         InputTime
     } from '$lib/elements/forms';
-    import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { calculateTime } from '$lib/helpers/timeConversion';
-    import {
-        WizardSecondaryContainer,
-        WizardSecondaryContent,
-        WizardSecondaryFooter
-    } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ExecutionMethod, type Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
-    import DeploymentSource from '../../deploymentSource.svelte';
-    import DeploymentDomains from '../../deploymentDomains.svelte';
-    import { proxyRuleList } from '../../store';
-    import DeploymentBy from '../../deploymentBy.svelte';
     import {
         isSameDay,
         toLocaleDateISO,
@@ -45,8 +25,21 @@
         toLocaleTimeISO
     } from '$lib/helpers/date';
     import { last } from '$lib/helpers/array';
+    import {
+        Accordion,
+        Alert,
+        Fieldset,
+        Icon,
+        Input,
+        Layout,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconInfo, IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import Aside from './aside.svelte';
 
-    let previousPage: string = `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$page.params.function}/executions`;
+    let previousPage: string = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/executions`;
 
     afterNavigate(({ from }) => {
         previousPage = from?.url?.pathname || previousPage;
@@ -101,7 +94,7 @@
             }
 
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.createExecution(
                     func.$id,
                     body,
@@ -112,7 +105,7 @@
                     isScheduled ? dateTime.toISOString() : undefined
                 );
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${func.$id}/executions`
+                `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}/executions`
             );
             invalidate(Dependencies.EXECUTIONS);
             addNotification({
@@ -148,274 +141,221 @@
 </script>
 
 <svelte:head>
-    <title>Execute function - Appwrite</title>
+    <title>Create execution - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer href={previousPage}>
-    <svelte:fragment slot="title">Execute Function</svelte:fragment>
-    <WizardSecondaryContent>
-        <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
-            <FormList>
-                {#if func?.version === 'v2'}
-                    <Alert type="info">
-                        <svelte:fragment slot="title">
-                            Customizable execution data now available for functions v3.0
-                        </svelte:fragment>
-                        Update your function version to make use of new features including customizable
-                        HTTP data in your executions.
-                        <svelte:fragment slot="buttons">
-                            <Button
-                                href="https://appwrite.io/docs/products/functions/development"
-                                external
-                                text>
-                                Learn more
-                            </Button>
-                        </svelte:fragment>
-                    </Alert>
-                    <InputTextarea
-                        label="Body"
-                        placeholder={`Hello, World!`}
-                        id="body"
-                        bind:value={body} />
-                {:else}
-                    <FormItem isMultiple stackOnMobile style="gap: 1rem">
-                        <InputSelect
-                            required
-                            id="method"
-                            label="Method"
-                            options={methodOptions}
-                            bind:value={method} />
-                        <InputText
-                            label="Path"
-                            id="path"
-                            fullWidth
-                            placeholder="/"
-                            bind:value={path}
-                            required />
-                    </FormItem>
-                    <div>
-                        <h3>
-                            <span class="body-text-2 u-bold">Headers</span>
-                            <span class="optional">(optional)</span>
-                            <span
-                                use:tooltip={{
-                                    content:
-                                        'Headers should contain alphanumeric characters (a-z, A-Z, and 0-9) and hyphens only (- and _).'
-                                }}
-                                class="icon-info"></span>
-                        </h3>
+<Wizard title="Create execution" href={previousPage}>
+    <svelte:fragment slot="title">Create execution</svelte:fragment>
+    <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            {#if func?.version === 'v2'}
+                <Alert.Inline
+                    status="info"
+                    title="Customizable execution data now available for functions v3.0">
+                    <svelte:fragment slot="title"></svelte:fragment>
 
-                        <FormList class="u-gap-8 u-margin-block-start-8">
-                            {#if headers}
-                                {#each headers as [name, value], index}
-                                    <FormItem isMultiple style="gap: 1rem">
-                                        <InputSelectSearch
-                                            fullWidth
-                                            label="Key"
-                                            placeholder="Select key"
-                                            interactiveOutput
-                                            hideEmpty
-                                            options={filteredKeyList}
-                                            id={`key-${index}`}
-                                            bind:value={name}
-                                            bind:search={name}>
-                                        </InputSelectSearch>
-                                        <InputText
-                                            isMultiple
-                                            fullWidth
-                                            label="Value"
-                                            placeholder="Enter value"
-                                            id={`value-${index}`}
-                                            bind:value />
-                                        <FormItemPart alignEnd>
+                    Update your function version to make use of new features including customizable
+                    HTTP data in your executions.
+                    <svelte:fragment slot="actions">
+                        <Button
+                            href="https://appwrite.io/docs/products/functions/development"
+                            external
+                            compact>
+                            Learn more
+                        </Button>
+                    </svelte:fragment>
+                </Alert.Inline>
+                <Fieldset legend="Request">
+                    <Accordion title="Body" badge="Optional" hideDivider open>
+                        <Layout.Stack gap="xl">
+                            <Typography.Text>
+                                Provide the request body to include the main data you want to send
+                                to the server.
+                            </Typography.Text>
+                            <InputTextarea
+                                placeholder="Enter request body here..."
+                                id="body"
+                                bind:value={body} />
+                        </Layout.Stack>
+                    </Accordion>
+                </Fieldset>
+            {:else}
+                <Fieldset legend="Request">
+                    <Layout.Stack gap="xl">
+                        <Layout.GridFraction start={1} end={3}>
+                            <InputSelect
+                                required
+                                id="method"
+                                label="Method"
+                                options={methodOptions}
+                                bind:value={method} />
+                            <InputText
+                                label="Path"
+                                id="path"
+                                placeholder="/"
+                                bind:value={path}
+                                required />
+                        </Layout.GridFraction>
+
+                        <Layout.Stack gap="s">
+                            <Accordion title="Headers" badge="Optional">
+                                <Layout.Stack gap="xl">
+                                    <Typography.Text>
+                                        Provide essential metadata to define the content type,
+                                        authentication details, and the expected response format.
+                                    </Typography.Text>
+
+                                    <Layout.Stack gap="xs">
+                                        {#if headers}
+                                            {#each headers as [name, value], index}
+                                                <Layout.Stack direction="row" alignItems="flex-end">
+                                                    <Input.ComboBox
+                                                        fullWidth
+                                                        label={index === 0 ? 'Key' : ''}
+                                                        placeholder="Select key"
+                                                        interactiveOutput
+                                                        hideEmpty
+                                                        options={filteredKeyList}
+                                                        id={`key-${index}`}
+                                                        bind:value={name}
+                                                        bind:search={name}>
+                                                    </Input.ComboBox>
+                                                    <InputText
+                                                        label={index === 0 ? 'Value' : ''}
+                                                        placeholder="Enter value"
+                                                        id={`value-${index}`}
+                                                        bind:value>
+                                                        <span slot="info">
+                                                            <Tooltip>
+                                                                <Layout.Stack alignItems="center">
+                                                                    <Icon
+                                                                        icon={IconInfo}
+                                                                        size="s" />
+                                                                </Layout.Stack>
+                                                                <span slot="tooltip">
+                                                                    Values should contain
+                                                                    alphanumeric characters (a-z,
+                                                                    A-Z, and 0-9) and hyphens only
+                                                                    (- and _).
+                                                                </span>
+                                                            </Tooltip>
+                                                        </span>
+                                                    </InputText>
+                                                    <Button
+                                                        text
+                                                        icon
+                                                        disabled={(!name || !value) && index === 0}
+                                                        on:click={() => {
+                                                            if (index === 0) {
+                                                                headers = [['', '']];
+                                                            } else {
+                                                                headers.splice(index, 1);
+                                                                headers = headers;
+                                                            }
+                                                        }}>
+                                                        <Icon icon={IconX} />
+                                                    </Button>
+                                                </Layout.Stack>
+                                            {/each}
+                                        {/if}
+                                        <div>
                                             <Button
-                                                text
-                                                noMargin
-                                                disabled={(!name || !value) && index === 0}
+                                                compact
+                                                disabled={headers?.length &&
+                                                headers[headers.length - 1][0]
+                                                    ? false
+                                                    : true}
                                                 on:click={() => {
-                                                    if (index === 0) {
-                                                        headers = [['', '']];
-                                                    } else {
-                                                        headers.splice(index, 1);
+                                                    if (headers[headers.length - 1][0]) {
+                                                        headers.push(['', '']);
                                                         headers = headers;
                                                     }
                                                 }}>
-                                                <span class="icon-x" aria-hidden="true" />
+                                                <Icon icon={IconPlus} slot="start" size="s" />
+                                                Add header
                                             </Button>
-                                        </FormItemPart>
-                                    </FormItem>
-                                {/each}
+                                        </div>
+                                    </Layout.Stack>
+                                </Layout.Stack>
+                            </Accordion>
+
+                            <Accordion title="Body" badge="Optional" hideDivider>
+                                <Layout.Stack gap="xl">
+                                    <Typography.Text>
+                                        Provide the request body to include the main data you want
+                                        to send to the server.
+                                    </Typography.Text>
+                                    <InputTextarea
+                                        placeholder="Enter request body here..."
+                                        id="body"
+                                        bind:value={body} />
+                                </Layout.Stack>
+                            </Accordion>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Fieldset>
+
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="l">
+                        <Layout.Stack gap="xs">
+                            <InputSelect
+                                bind:value={isScheduled}
+                                id="schedule"
+                                label="Schedule"
+                                required
+                                options={[
+                                    {
+                                        label: 'Now',
+                                        value: null
+                                    },
+                                    {
+                                        label: 'Custom',
+                                        value: true
+                                    }
+                                ]} />
+                            {#if !isScheduled}
+                                <Helper type="neutral">
+                                    Your function will be executed immediately
+                                </Helper>
                             {/if}
-                        </FormList>
-                        <Button
-                            noMargin
-                            text
-                            disabled={headers?.length && headers[headers.length - 1][0]
-                                ? false
-                                : true}
-                            on:click={() => {
-                                if (headers[headers.length - 1][0]) {
-                                    headers.push(['', '']);
-                                    headers = headers;
-                                }
-                            }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add Header</span>
-                        </Button>
-                    </div>
-
-                    <InputTextarea
-                        label="Body"
-                        placeholder={`Hello, World!`}
-                        id="body"
-                        bind:value={body} />
-
-                    <li>
-                        <InputSelect
-                            bind:value={isScheduled}
-                            id="schedule"
-                            label="Schedule"
-                            options={[
-                                {
-                                    label: 'Now',
-                                    value: null
-                                },
-                                {
-                                    label: 'Schedule',
-                                    value: true
-                                }
-                            ]} />
+                        </Layout.Stack>
                         {#if isScheduled}
-                            <FormItem isMultiple tag="div" class="u-margin-block-start-16">
-                                <InputDate
-                                    id="date"
-                                    label="Date"
-                                    required={true}
-                                    min={minDate}
-                                    bind:value={date}
-                                    isMultiple
-                                    fullWidth />
-                                <InputTime
-                                    id="time"
-                                    label="Time"
-                                    required={true}
-                                    min={minTime}
-                                    bind:value={time}
-                                    isMultiple
-                                    fullWidth />
-                            </FormItem>
+                            <Layout.Stack gap="xs">
+                                <Layout.GridFraction start={3} end={1}>
+                                    <InputDate
+                                        id="date"
+                                        required={true}
+                                        min={minDate}
+                                        bind:value={date} />
+                                    <InputTime
+                                        id="time"
+                                        required={true}
+                                        min={minTime}
+                                        bind:value={time} />
+                                </Layout.GridFraction>
+                                <Helper type="neutral">
+                                    Your function will be executed on {toLocaleDateTime(
+                                        dateTime?.toString()
+                                    )}
+                                </Helper>
+                            </Layout.Stack>
                         {/if}
-                        <Helper type="neutral">
-                            {isScheduled
-                                ? `Your function will be executed on ${toLocaleDateTime(dateTime?.toString())}`
-                                : 'Your function will be executed immediately'}
-                        </Helper>
-                    </li>
-                {/if}
-            </FormList>
-        </Form>
-        <svelte:fragment slot="aside">
-            <Card class="u-flex-vertical u-gap-24" style="--p-card-padding: 1.5rem">
-                <div class="u-flex-vertical u-gap-8">
-                    <p class="u-color-text-offline">Deployment ID</p>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside {deployment} proxyRuleList={data.proxyRuleList} />
+    </svelte:fragment>
 
-                    <Id value={func.deployment}>
-                        {func.deployment}
-                    </Id>
-                </div>
-                <ul
-                    class="u-grid u-width-full-line u-gap-16"
-                    style:grid-template-columns="repeat(3, 1fr)">
-                    <li class="u-flex-vertical u-gap-8">
-                        <p class="u-color-text-offline">Status</p>
-                        <p>
-                            <Pill success>
-                                <span class="icon-lightning-bolt"></span><span>active</span>
-                            </Pill>
-                            <!-- {#if deployment?.$id === func.deployment && deployment?.status === 'active'}
-                             {:else}
-                                <Pill
-                                    danger={deployment?.status === 'failed'}
-                                    warning={deployment?.status === 'building'}
-                                    info={deployment?.status === 'ready'}>
-                                    {deployment?.status}
-                                </Pill>
-                            {/if} -->
-                        </p>
-                    </li>
-                    <li class="u-flex-vertical u-gap-8">
-                        <p class="u-color-text-offline">Build time</p>
-                        <p>
-                            {#if ['processing', 'building'].includes(deployment.status)}
-                                <span use:timer={{ start: deployment.$createdAt }} />
-                            {:else}
-                                {calculateTime(deployment.buildTime)}
-                            {/if}
-                        </p>
-                    </li>
-                    <li class="u-flex-vertical u-gap-8">
-                        <p class="u-color-text-offline">Total size</p>
-                        <p>
-                            {humanFileSize(deployment.size + deployment.buildSize).value +
-                                humanFileSize(deployment.size + deployment.buildSize).unit}
-                            <button
-                                type="button"
-                                on:click|preventDefault
-                                class="tooltip"
-                                aria-label="input tooltip"
-                                use:tooltip={{
-                                    content: `
-                                <p><b>Deployment size:</b> ${
-                                    humanFileSize(deployment.size).value +
-                                    humanFileSize(deployment.size).unit
-                                }</p>
-                                <p><b>Build size:</b> ${
-                                    humanFileSize(deployment.buildSize).value +
-                                    humanFileSize(deployment.buildSize).unit
-                                }</p>
-                            `,
-                                    allowHTML: true,
-                                    appendTo: 'parent'
-                                }}>
-                                <span
-                                    class="icon-info"
-                                    aria-hidden="true"
-                                    style="font-size: var(--icon-size-small)" />
-                            </button>
-                        </p>
-                    </li>
-                </ul>
-                <div class="u-flex-vertical u-gap-8">
-                    <p class="u-color-text-offline">Source</p>
-                    <span>
-                        <DeploymentSource {deployment} />
-                    </span>
-                </div>
-                {#if $proxyRuleList?.rules?.length}
-                    <div class="u-flex-vertical u-gap-8">
-                        <p class="u-color-text-offline">Domains</p>
-                        <span>
-                            <DeploymentDomains domain={$proxyRuleList} />
-                        </span>
-                    </div>
-                {/if}
-                <div class="u-flex-vertical u-gap-8">
-                    <p class="u-color-text-offline">Updated</p>
-                    <span>
-                        <DeploymentBy {deployment} type="update" />
-                    </span>
-                </div>
-            </Card>
-        </svelte:fragment>
-    </WizardSecondaryContent>
-
-    <WizardSecondaryFooter>
+    <svelte:fragment slot="footer">
         <Button fullWidthMobile secondary href={previousPage}>Cancel</Button>
         <Button
             fullWidthMobile
             on:click={() => formComponent.triggerSubmit()}
             disabled={$isSubmitting}>
-            Execute
+            Create
         </Button>
-    </WizardSecondaryFooter>
-</WizardSecondaryContainer>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.ts
index 0af3bdd81..a05abb585 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.ts
@@ -8,10 +8,11 @@ export const load: PageLoad = async ({ params, depends, parent }) => {
 
     return {
         func: data.function,
-        activeDeployment: data.function.deployment
+        activeDeployment: data.function.deploymentId
             ? await sdk
                   .forProject(params.region, params.project)
-                  .functions.getDeployment(params.function, data.function.deployment)
-            : null
+                  .functions.getDeployment(params.function, data.function.deploymentId)
+            : null,
+        proxyRuleList: data.proxyRuleList
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/aside.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/aside.svelte
new file mode 100644
index 000000000..0967d6862
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/aside.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { Card, Id } from '$lib/components';
+    import { Icon, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { DeploymentCreatedBy, DeploymentDomains, DeploymentSource } from '$lib/components/git';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { timer } from '$lib/actions/timer';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+
+    export let deployment: Models.Deployment;
+    export let proxyRuleList: Models.ProxyRuleList;
+</script>
+
+<Card padding="s" radius="s">
+    <Layout.Stack gap="xl">
+        <slot />
+        <Layout.Stack gap="l">
+            <Layout.Stack gap="xxxs">
+                <Typography.Caption variant="400">Deployment ID</Typography.Caption>
+
+                <Id value={deployment.$id}>
+                    {deployment.$id}
+                </Id>
+            </Layout.Stack>
+
+            <Layout.Stack gap="xxxs">
+                <Typography.Caption variant="400">Build duration</Typography.Caption>
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                    {#if ['processing', 'building'].includes(deployment.status)}
+                        <span use:timer={{ start: deployment.$createdAt }}></span>
+                    {:else}
+                        {formatTimeDetailed(deployment.buildDuration)}
+                    {/if}
+                </Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="xxxs">
+                <Typography.Caption variant="400">Size</Typography.Caption>
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                    <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                        {humanFileSize(deployment.sourceSize + deployment.buildSize).value +
+                            humanFileSize(deployment.sourceSize + deployment.buildSize).unit}
+                        <Tooltip>
+                            <Icon icon={IconInfo} color="--fgcolor-neutral-tertiary" size="s" />
+                            <span slot="tooltip">
+                                <p>
+                                    <b>Deployment size:</b>
+                                    {humanFileSize(deployment.sourceSize).value +
+                                        humanFileSize(deployment.sourceSize).unit}
+                                </p>
+                                <p>
+                                    <b>Build size:</b>
+                                    {humanFileSize(deployment.buildSize).value +
+                                        humanFileSize(deployment.buildSize).unit}
+                                </p>
+                            </span>
+                        </Tooltip>
+                    </Layout.Stack>
+                </Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="xxxs">
+                <Typography.Caption variant="400">Source</Typography.Caption>
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                    <DeploymentSource {deployment} />
+                </Typography.Text>
+            </Layout.Stack>
+            {#if proxyRuleList?.total}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Domains</Typography.Caption>
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                        <DeploymentDomains domains={proxyRuleList} />
+                    </Typography.Text>
+                </Layout.Stack>
+            {/if}
+
+            <Layout.Stack gap="xxxs">
+                <Typography.Caption variant="400">Updated</Typography.Caption>
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                    <DeploymentCreatedBy {deployment} />
+                </Typography.Text>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
+</Card>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/quickFilters.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/quickFilters.svelte
deleted file mode 100644
index 71b432739..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/quickFilters.svelte
+++ /dev/null
@@ -1,283 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { DropList, DropListItem } from '$lib/components';
-    import {
-        addFilter,
-        queries,
-        queryParamToMap,
-        tagFormat,
-        tags,
-        ValidOperators,
-        type TagValue
-    } from '$lib/components/filters/store';
-    import { Pill, SelectSearchCheckbox } from '$lib/elements';
-    import type { Column } from '$lib/helpers/types';
-    import { type Writable } from 'svelte/store';
-
-    export let columns: Writable<Column[]>;
-
-    type FilterData = {
-        title: string;
-        id: string;
-        array: boolean;
-        show: boolean;
-        tag: string;
-        operator: ValidOperators;
-        options: { value: string; label: string; checked: boolean }[];
-    };
-
-    function buildFilterCol(col: Column, customOperator = null): FilterData {
-        return {
-            title: col.title,
-            id: col.id,
-            show: false,
-            array: col?.array,
-            tag: null,
-            operator: customOperator ?? ValidOperators.Equal,
-            options: col?.elements?.map((element) => {
-                return {
-                    value: (element?.value ?? element) as string,
-                    label: (element?.label ?? element) as string,
-                    checked: false
-                };
-            })
-        };
-    }
-
-    const statusCol = $columns.find((col) => col.id === 'status');
-    let statusFilter = buildFilterCol(statusCol);
-    const triggerCol = $columns.find((col) => col.id === 'trigger');
-    let triggerFilter = buildFilterCol(triggerCol);
-    const methodCol = $columns.find((col) => col.id === 'requestMethod');
-    let methodFilter = buildFilterCol(methodCol);
-    const statusCodeCol = $columns.find((col) => col.id === 'responseStatusCode');
-    let statusCodeFilter = buildFilterCol(statusCodeCol);
-    const createdAtCol = $columns.find((col) => col.id === '$createdAt');
-    let createdAtFilter = buildFilterCol(createdAtCol);
-
-    let localQueries = new Map<TagValue, string>();
-
-    afterNavigate((p) => {
-        const paramQueries = p.to.url.searchParams.get('query');
-        localQueries = queryParamToMap(paramQueries || '[]');
-        const localTags = Array.from(localQueries.keys());
-
-        if (!localTags?.length) {
-            statusFilter.tag = null;
-            triggerFilter.tag = null;
-            methodFilter.tag = null;
-            statusCodeFilter.tag = null;
-            createdAtFilter.tag = null;
-            [statusFilter, triggerFilter, methodFilter].forEach((filter) => {
-                resetOptions(filter);
-            });
-        } else {
-            [statusFilter, triggerFilter, methodFilter].forEach((filter) => {
-                setFilterData(filter, localTags);
-            });
-
-            const statusCodeTag = localTags.find((tag) =>
-                tag.tag.includes(`**${statusCodeFilter.title}**`)
-            );
-            if (statusCodeTag) {
-                const ranges = statusCodeCol.elements as { value: number; label: string }[];
-
-                const codeRange = ranges.find((c) => c?.value && c.value === statusCodeTag.value);
-                if (codeRange) {
-                    statusCodeFilter.tag = `**${statusCodeFilter.title}** is **${codeRange.label}**`;
-                    statusCodeFilter = statusCodeFilter;
-                }
-            } else {
-                statusCodeFilter.tag = null;
-            }
-
-            const createdAtTag = localTags.find((tag) =>
-                tag.tag.includes(`**${createdAtFilter.title}**`)
-            );
-            if (createdAtTag) {
-                const now = new Date();
-
-                const diff = now.getTime() - new Date(createdAtTag.value as string).getTime();
-                const ranges = createdAtCol.elements as { value: string; label: string }[];
-                const dateRange = ranges.reduce((prev, curr) => {
-                    if (parseInt(curr.value) < diff && curr.value > prev.value) {
-                        return curr;
-                    }
-                    return prev;
-                });
-                if (dateRange) {
-                    createdAtFilter.tag = `**${createdAtFilter.title}** is **${dateRange.label}**`;
-                    createdAtFilter = createdAtFilter;
-                }
-            } else {
-                createdAtFilter.tag = null;
-            }
-
-            // Reasinging the filters to trigger reactivity
-            statusFilter = statusFilter;
-            triggerFilter = triggerFilter;
-            methodFilter = methodFilter;
-            statusCodeFilter = statusCodeFilter;
-            createdAtFilter = createdAtFilter;
-        }
-    });
-
-    function setFilterData(filter: FilterData, list: TagValue[]) {
-        const tagData = list.find((tag) => tag.tag.includes(`**${filter.title}**`));
-        if (tagData) {
-            filter.tag = tagData.tag;
-            if (Array.isArray(tagData.value) && tagData.value?.length) {
-                const values = tagData.value as string[];
-                filter.options.forEach((option) => {
-                    option.checked = values.includes(option.value);
-                });
-            }
-        } else {
-            filter.tag = null;
-            resetOptions(filter);
-        }
-    }
-
-    function resetOptions(filter: FilterData) {
-        filter.options.forEach((option) => {
-            option.checked = false;
-        });
-    }
-
-    function addFilterAndApply(
-        colId: string,
-        colTitle: string,
-        operator: ValidOperators,
-        value: string,
-        arrayValues: string[] = []
-    ) {
-        const tagList = $tags.filter((tag) => tag.tag.includes(colTitle));
-        tagList.forEach((tag) => queries.removeFilter(tag));
-        if (value || arrayValues?.length) {
-            if (colId === statusCodeFilter.id) {
-                addStatusCodeFilter(value, colId);
-            } else if (colId === createdAtFilter.id) {
-                addCreatedAtFilter(value, colId);
-            } else {
-                addFilter($columns, colId, operator, value, arrayValues);
-            }
-        }
-        queries.apply();
-        trackEvent(Submit.ApplyQuickFilter, {
-            source: 'function_executions',
-            column: colId,
-            value: value || arrayValues.join(', ')
-        });
-    }
-
-    function addStatusCodeFilter(value: string, colId: string) {
-        addFilter($columns, colId, ValidOperators.LessThanOrEqual, parseInt(value));
-        addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, parseInt(value) - 99);
-    }
-    function addCreatedAtFilter(value: string, colId: string) {
-        const now = new Date();
-        const isoValue = new Date(now.getTime() - parseInt(value));
-        addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, isoValue.toISOString());
-        addFilter($columns, colId, ValidOperators.LessThanOrEqual, now.toISOString());
-    }
-</script>
-
-{#each [statusFilter, triggerFilter, methodFilter] as filter}
-    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill
-            button
-            on:click={() => (filter.show = !filter.show)}
-            event="apply_quick_filter"
-            eventData={{ source: 'function_execution', column: filter.title }}>
-            {#key filter.tag}
-                <span use:tagFormat>
-                    {filter?.tag ?? filter.title}
-                </span>
-            {/key}
-            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
-            </span>
-        </Pill>
-        <svelte:fragment slot="list">
-            {#each filter.options as option (option.value + option.checked)}
-                <SelectSearchCheckbox
-                    padding={8}
-                    bind:value={option.checked}
-                    on:click={() => {
-                        option.checked = !option.checked;
-                        addFilterAndApply(
-                            filter.id,
-                            filter.title,
-                            filter.operator,
-                            filter?.array ? null : option.checked ? option.value : null,
-                            filter?.array
-                                ? (filter.options
-                                      .filter((opt) => opt.checked)
-                                      .map((opt) => opt.value) ?? [])
-                                : []
-                        );
-                    }}>
-                    {option.label}
-                </SelectSearchCheckbox>
-            {/each}
-            {#if filter.options.some((option) => option.checked)}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-                        filter.tag = null;
-                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
-                    }}>
-                    Clear selection
-                </DropListItem>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{/each}
-{#each [statusCodeFilter, createdAtFilter] as filter}
-    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill
-            button
-            on:click={() => (filter.show = !filter.show)}
-            event="apply_quick_filter"
-            eventData={{ source: 'function_execution', column: filter.title }}>
-            {#key filter.tag}
-                <span use:tagFormat>
-                    {filter?.tag ?? filter.title}
-                </span>
-            {/key}
-            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
-            </span>
-        </Pill>
-        <svelte:fragment slot="list">
-            {#each filter.options as option (option.value + option.checked)}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-
-                        addFilterAndApply(
-                            filter.id,
-                            filter.title,
-                            filter.operator,
-                            filter?.array ? null : option.value,
-                            []
-                        );
-                    }}>
-                    {option.label}
-                </DropListItem>
-            {/each}
-            {#if filter?.tag}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-                        filter.tag = null;
-                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
-                    }}>
-                    Clear selection
-                </DropListItem>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{/each}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/sheet.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/sheet.svelte
new file mode 100644
index 000000000..fd6e2bee1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/sheet.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+    import Button from '$lib/elements/forms/button.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import {
+        Accordion,
+        Badge,
+        InteractiveText,
+        Icon,
+        Layout,
+        Sheet,
+        Tag,
+        Typography,
+        Tooltip,
+        Status
+    } from '@appwrite.io/pink-svelte';
+    import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
+    import { capitalize } from '$lib/helpers/string';
+    import { Copy } from '$lib/components';
+    import { logStatusConverter } from './store';
+    import { LogsRequest, LogsResponse } from '$lib/components/logs';
+
+    export let selectedLogId: string;
+    export let logs: Models.Execution[];
+    export let logging: boolean;
+    export let open = false;
+
+    function nextLog() {
+        const currentIndex = logs.findIndex((log) => log.$id === selectedLogId);
+        if (currentIndex < logs.length - 1) {
+            selectedLogId = logs[currentIndex + 1].$id;
+        }
+    }
+    function previousLog() {
+        const currentIndex = logs.findIndex((log) => log.$id === selectedLogId);
+        if (currentIndex > 0) {
+            selectedLogId = logs[currentIndex - 1].$id;
+        }
+    }
+
+    $: if (!open) {
+        selectedLogId = null;
+    }
+
+    $: selectedLog = logs?.find((log) => log.$id === selectedLogId);
+    $: isFirstLog = logs.findIndex((log) => log.$id === selectedLogId) === 0;
+    $: isLastLog = logs.findIndex((log) => log.$id === selectedLogId) === logs.length - 1;
+
+    let sheet: HTMLDivElement;
+    function handleClickOutside(event: MouseEvent) {
+        if (sheet && !sheet.contains(event.target as Node)) {
+            open = false;
+        }
+    }
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div style="position: absolute; top: 0; " bind:this={sheet}>
+    <Sheet bind:open closeOnBlur={false}>
+        <div slot="header" style:width="100%">
+            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Layout.Stack direction="row" gap="m" alignItems="center">
+                    <Typography.Text variant="m-400">Execution ID</Typography.Text>
+                    <Copy value={selectedLog?.$id}>
+                        <Tag size="s" variant="code">{selectedLog?.$id}</Tag>
+                    </Copy>
+                </Layout.Stack>
+                <Layout.Stack direction="row" gap="xs" alignItems="center" inline>
+                    <Button icon text size="xs" on:click={previousLog} disabled={isFirstLog}>
+                        <Icon icon={IconChevronUp} />
+                    </Button>
+                    <Button icon text size="xs" on:click={nextLog} disabled={isLastLog}>
+                        <Icon icon={IconChevronDown} />
+                    </Button>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+        {#if selectedLog}
+            <Layout.Stack gap="xl">
+                <Accordion title="Details" open>
+                    <Layout.Stack gap="xxxl">
+                        <Layout.Stack gap="xxxl" direction="row" wrap="wrap">
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Method
+                                </Typography.Text>
+                                <Typography.Text variant="m-400">
+                                    {selectedLog.requestMethod}
+                                </Typography.Text>
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Status code
+                                </Typography.Text>
+                                <span>
+                                    <Badge
+                                        content={selectedLog.responseStatusCode.toString()}
+                                        variant="secondary"
+                                        type={selectedLog?.responseStatusCode >= 400
+                                            ? 'error'
+                                            : selectedLog.responseStatusCode === 0
+                                              ? undefined
+                                              : 'success'} />
+                                </span>
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Status
+                                </Typography.Text>
+
+                                <Tooltip
+                                    disabled={!selectedLog?.scheduledAt ||
+                                        selectedLog.status !== 'scheduled'}
+                                    maxWidth="400px">
+                                    <div>
+                                        <Status
+                                            status={logStatusConverter(selectedLog.status)}
+                                            label={capitalize(selectedLog.status)}>
+                                        </Status>
+                                    </div>
+                                    <span slot="tooltip">
+                                        {`Scheduled to execute on ${toLocaleDateTime(selectedLog.scheduledAt)}`}
+                                    </span>
+                                </Tooltip>
+                            </Layout.Stack>
+
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Triggered by
+                                </Typography.Text>
+                                <Typography.Text variant="m-400">
+                                    {capitalize(selectedLog.trigger)}
+                                </Typography.Text>
+                            </Layout.Stack>
+
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Duration
+                                </Typography.Text>
+                                <Typography.Text variant="m-400">
+                                    {calculateTime(selectedLog.duration)}
+                                </Typography.Text>
+                            </Layout.Stack>
+
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Created
+                                </Typography.Text>
+                                <Typography.Text variant="m-400">
+                                    {capitalize(timeFromNow(selectedLog.$createdAt))}
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                        <Layout.Stack gap="xs" inline alignItems="flex-start">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                Path
+                            </Typography.Text>
+                            <div>
+                                <InteractiveText
+                                    text={selectedLog.requestPath}
+                                    variant="copy-code"
+                                    isVisible />
+                            </div>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion title="Request" open>
+                    <LogsRequest {selectedLog} />
+                </Accordion>
+                <Accordion title="Response" open hideDivider>
+                    <LogsResponse {selectedLog} product="function" {logging} />
+                </Accordion>
+            </Layout.Stack>
+        {/if}
+    </Sheet>
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/store.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/store.ts
new file mode 100644
index 000000000..3e36a4f57
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/store.ts
@@ -0,0 +1,139 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Execution ID', type: 'string', width: { min: 200, max: 250 } },
+    {
+        id: 'requestPath',
+        title: 'Path',
+        type: 'string',
+        width: { min: 200 },
+        format: 'string'
+    },
+
+    {
+        id: 'trigger',
+        title: 'Trigger',
+        type: 'string',
+        hide: true,
+        width: { min: 90, max: 200 },
+        array: true,
+        format: 'enum',
+        elements: [
+            { value: 'http', label: 'HTTP' },
+            { value: 'schedule', label: 'Schedule' },
+            { value: 'event', label: 'Event' }
+        ]
+    },
+    {
+        id: 'requestMethod',
+        title: 'Method',
+        type: 'string',
+        hide: true,
+        width: { min: 90, max: 200 },
+        array: true,
+        format: 'enum',
+        elements: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']
+    },
+    {
+        id: 'responseStatusCode',
+        title: 'Status code',
+        type: 'integer',
+        width: { min: 100, max: 200 },
+        format: 'integer',
+        elements: [
+            {
+                value: 299,
+                label: 'Success (200-299)'
+            },
+            {
+                value: 399,
+                label: 'Redirect (300-399)'
+            },
+            {
+                value: 499,
+                label: 'Client error (400-499)'
+            },
+            {
+                value: 599,
+                label: 'Server error (500-599)'
+            }
+        ]
+    },
+
+    {
+        id: 'status',
+        title: 'Status',
+        type: 'enum',
+        width: { min: 130, max: 200 },
+        array: true,
+        format: 'enum',
+        elements: ['completed', 'failed', 'waiting', 'scheduled', 'processing', 'cancelled']
+    },
+    {
+        id: 'duration',
+        title: 'Duration',
+        type: 'integer',
+        width: { min: 80, max: 200 },
+
+        format: 'integer',
+        elements: [
+            {
+                value: 1,
+                label: 'more than 1 second'
+            },
+            {
+                value: 5,
+                label: 'more than 5 seconds'
+            },
+            {
+                value: 30,
+                label: 'more than 30 seconds'
+            }
+        ]
+    },
+    {
+        id: '$createdAt',
+        title: 'Created',
+        type: 'datetime',
+        width: { min: 120, max: 200 },
+        format: 'datetime',
+        elements: [
+            {
+                value: 5 * 60 * 1000,
+                label: 'last 5 minutes'
+            },
+            {
+                value: 60 * 60 * 1000,
+                label: 'last 1 hour'
+            },
+            {
+                value: 24 * 60 * 60 * 1000,
+                label: 'last 24 hours'
+            }
+        ]
+    }
+]);
+
+export function logStatusConverter(status: string) {
+    // ['completed', 'failed', 'waiting', 'scheduled', 'processing', 'cancelled']
+
+    switch (status) {
+        case 'completed':
+            return 'complete';
+        case 'scheduled':
+            return 'processing';
+        case 'processing':
+            return 'processing';
+        case 'waiting':
+            return 'waiting';
+        case 'queued':
+            return 'waiting';
+        case 'peding':
+            return 'pending';
+        case 'cancelled':
+            return 'waiting';
+        case 'failed':
+            return 'failed';
+    }
+}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/table.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/table.svelte
index 31b2d0fe5..91efa2654 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/table.svelte
@@ -1,154 +1,86 @@
 <script lang="ts">
-    import { DropList, DropListItem, Id } from '$lib/components';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
-    import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
-    import { type Models } from '@appwrite.io/console';
+    import { Id } from '$lib/components';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Column } from '$lib/helpers/types';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { Pill } from '$lib/elements';
-    import { calculateTime } from '$lib/helpers/timeConversion';
-    import { log } from '$lib/stores/logs';
+    import type { Models } from '@appwrite.io/console';
+    import { Badge, Status, Table, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import Sheet from './sheet.svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+    import { logStatusConverter } from './store';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
     import { func } from '../store';
-    import Delete from './delete.svelte';
-    import { Button } from '$lib/elements/forms';
-
-    let showDropdown = [];
-    let showDelete = false;
-
-    let selectedExecution: Models.Execution = null;
 
     export let columns: Column[];
-    export let data;
+    export let logs: Models.ExecutionList;
 
-    let execution: Record<string, Models.Execution> = {};
-
-    $: data.executions.executions.forEach((s) => {
-        execution[s.$id] = s;
-    });
-
-    function showLogs(execution: Models.Execution) {
-        $log.show = true;
-        $log.func = $func;
-        $log.data = execution;
-    }
+    let selectedLogId: string = null;
+    let open = false;
 </script>
 
-<TableScroll>
-    <TableHeader>
-        {#each columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root {columns} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each data.executions.executions as execution, index (execution.$id)}
-            <TableRow>
-                {#each columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key column.id}
-                                <TableCell width={column.width} title="Execution ID">
-                                    <Id value={execution.$id}>{execution.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'status'}
-                            <TableCell width={column.width} title={column.title}>
-                                {@const status = execution.status}
-                                <div
-                                    use:tooltip={{
-                                        content: `Scheduled to execute on ${toLocaleDateTime(execution.scheduledAt)}`,
-                                        disabled: !execution?.scheduledAt || status !== 'scheduled'
-                                    }}>
-                                    <Pill
-                                        warning={status === 'waiting' || status === 'building'}
-                                        danger={status === 'failed'}
-                                        info={status === 'completed' || status === 'ready'}>
-                                        {#if status === 'scheduled'}
-                                            <span class="icon-clock" aria-hidden="true" />
-                                            {timeFromNow(execution.scheduledAt)}
-                                        {:else}
-                                            {status}
-                                        {/if}
-                                    </Pill>
-                                </div>
-                            </TableCell>
-                        {:else if column.id === '$createdAt'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {timeFromNow(execution.$createdAt)}
-                            </TableCellText>
-                        {:else if column.id === 'trigger'}
-                            <TableCell width={column.width} title={column.title}>
-                                <Pill>
-                                    <span class="text u-trim">{execution.trigger}</span>
-                                </Pill>
-                            </TableCell>
-                        {:else if column.id === 'requestMethod'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {execution.requestMethod}
-                            </TableCellText>
-                        {:else if column.id === 'responseStatusCode'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {execution.responseStatusCode}
-                            </TableCellText>
-                        {:else if column.id === 'requestPath'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {execution.requestPath}
-                            </TableCellText>
-                        {:else if column.id === 'duration'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {calculateTime(execution.duration)}
-                            </TableCellText>
-                        {/if}
+    </svelte:fragment>
+    {#each logs.executions as log}
+        <Table.Row.Button
+            {root}
+            on:click={(e) => {
+                e.stopPropagation();
+                open = true;
+                selectedLogId = log.$id;
+            }}>
+            {#each columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Id value={log.$id}>{log.$id}</Id>
+                        {/key}
+                    {:else if column.id === '$createdAt'}
+                        <DualTimeView time={log.$createdAt} />
+                    {:else if column.id === 'requestPath'}
+                        <Typography.Code size="m">
+                            {log.requestPath}
+                        </Typography.Code>
+                    {:else if column.id === 'responseStatusCode'}
+                        <Badge
+                            variant="secondary"
+                            type={log.responseStatusCode >= 400
+                                ? 'error'
+                                : log.responseStatusCode === 0
+                                  ? undefined
+                                  : 'success'}
+                            content={log.responseStatusCode.toString()} />
+                    {:else if column.id === 'requestMethod'}
+                        <Typography.Code size="m">
+                            {log.requestMethod}
+                        </Typography.Code>
+                    {:else if column.id === 'trigger'}
+                        {capitalize(log.trigger)}
+                    {:else if column.id === 'status'}
+                        {@const status = log.status}
+                        <Tooltip
+                            disabled={!log?.scheduledAt || status !== 'scheduled'}
+                            maxWidth="400px">
+                            <div>
+                                <Status
+                                    status={logStatusConverter(status)}
+                                    label={capitalize(status)}>
+                                </Status>
+                            </div>
+                            <span slot="tooltip">
+                                {`Scheduled to execute on ${toLocaleDateTime(log.scheduledAt)}`}
+                            </span>
+                        </Tooltip>
+                    {:else if column.id === 'duration'}
+                        {formatTimeDetailed(log.duration)}
                     {/if}
-                {/each}
-                <TableCell width={40} showOverflow>
-                    <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
-                        <Button
-                            round
-                            text
-                            ariaLabel="More options"
-                            on:click={() => {
-                                showDropdown[index] = !showDropdown[index];
-                            }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </Button>
-                        <svelte:fragment slot="list">
-                            <DropListItem
-                                icon="terminal"
-                                on:click={() => {
-                                    showDropdown = [];
-                                    showLogs(execution);
-                                }}>
-                                Logs
-                            </DropListItem>
-                            <DropListItem
-                                icon="trash"
-                                event="execution_delete"
-                                on:click={() => {
-                                    selectedExecution = execution;
-                                    showDropdown = [];
-                                    showDelete = true;
-                                }}>
-                                Delete
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </TableCell>
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+        </Table.Row.Button>
+    {/each}
+</Table.Root>
 
-{#if selectedExecution}
-    <Delete {selectedExecution} bind:showDelete />
-{/if}
+<Sheet bind:open bind:selectedLogId logs={logs.executions} logging={$func.logging} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte
index e1a31320c..465aae173 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteFunctions } from '$lib/stores/roles';
     import { func } from './store';
 
-    const projectId = $page.params.project;
-    const functionId = $page.params.function;
-    const path = `${base}/project-${$page.params.region}-${projectId}/functions/function-${functionId}`;
+    const projectId = page.params.project;
+    const functionId = page.params.function;
+    const path = `${base}/project-${page.params.region}-${projectId}/functions/function-${functionId}`;
     const tabs = [
         {
             href: path,
@@ -45,7 +45,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/functions`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/functions`}>
             {$func?.name}
         </CoverTitle>
         {#if $func?.$id}
@@ -57,7 +57,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/quickFilters.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/quickFilters.svelte
deleted file mode 100644
index efbbe4f06..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/quickFilters.svelte
+++ /dev/null
@@ -1,281 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { DropList, DropListItem } from '$lib/components';
-    import {
-        addFilter,
-        queries,
-        queryParamToMap,
-        tagFormat,
-        tags,
-        ValidOperators,
-        type TagValue
-    } from '$lib/components/filters/store';
-    import { Pill, SelectSearchCheckbox } from '$lib/elements';
-    import type { Column } from '$lib/helpers/types';
-    import { type Writable } from 'svelte/store';
-
-    export let columns: Writable<Column[]>;
-
-    type FilterData = {
-        title: string;
-        id: string;
-        array: boolean;
-        show: boolean;
-        tag: string;
-        operator: ValidOperators;
-        options: { value: string; label: string; checked: boolean }[];
-    };
-
-    function buildFilterCol(col: Column, customOperator = null): FilterData {
-        return {
-            title: col.title,
-            id: col.id,
-            show: false,
-            array: col?.array,
-            tag: null,
-            operator: customOperator ?? ValidOperators.Equal,
-            options: col?.elements?.map((element) => {
-                return {
-                    value: (element?.value ?? element) as string,
-                    label: (element?.label ?? element) as string,
-                    checked: false
-                };
-            })
-        };
-    }
-
-    const statusCol = $columns.find((col) => col.id === 'status');
-    let statusFilter = buildFilterCol(statusCol);
-    const typeCol = $columns.find((col) => col.id === 'type');
-    let typeFilter = buildFilterCol(typeCol);
-    const sizeCol = $columns.find((col) => col.id === 'size');
-    let sizeFilter = buildFilterCol(sizeCol);
-    const buildTimeCol = $columns.find((col) => col.id === 'buildTime');
-    let buildTimeFilter = buildFilterCol(buildTimeCol);
-
-    let localQueries = new Map<TagValue, string>();
-
-    afterNavigate((p) => {
-        const paramQueries = p.to.url.searchParams.get('query');
-        localQueries = queryParamToMap(paramQueries || '[]');
-        const localTags = Array.from(localQueries.keys());
-
-        if (!localTags?.length) {
-            statusFilter.tag = null;
-            typeFilter.tag = null;
-            buildTimeFilter.tag = null;
-            [statusFilter, typeFilter].forEach((filter) => {
-                resetOptions(filter);
-            });
-        } else {
-            [statusFilter, typeFilter].forEach((filter) => {
-                setFilterData(filter, localTags);
-            });
-
-            const buildTimeTag = localTags.find((tag) =>
-                tag.tag.includes(`**${buildTimeFilter.title}**`)
-            );
-            if (buildTimeTag) {
-                const now = new Date();
-
-                const diff = now.getTime() - new Date(buildTimeTag.value as string).getTime();
-                const ranges = buildTimeCol.elements as { value: string; label: string }[];
-                const dateRange = ranges.reduce((prev, curr) => {
-                    if (parseInt(curr.value) < diff && curr.value > prev.value) {
-                        return curr;
-                    }
-                    return prev;
-                });
-                if (dateRange) {
-                    buildTimeFilter.tag = `**${buildTimeFilter.title}** is **${dateRange.label}**`;
-                    buildTimeFilter = buildTimeFilter;
-                }
-            } else {
-                buildTimeFilter.tag = null;
-            }
-
-            const sizeTag = localTags.find((tag) => tag.tag.includes(`**${sizeFilter.title}**`));
-            if (sizeTag) {
-                const size = sizeTag.value as string;
-                const ranges = sizeCol.elements as { value: string; label: string }[];
-                // find smallest range that is bigger than size
-                const sizeRange = ranges.reduce((prev, curr) => {
-                    if (parseInt(size) >= parseInt(curr.value)) {
-                        return curr;
-                    }
-                    return prev;
-                });
-                if (sizeRange) {
-                    sizeFilter.tag = `**${sizeFilter.title}** is **${sizeRange.label}**`;
-                    sizeFilter = sizeFilter;
-                }
-            } else {
-                sizeFilter.tag = null;
-            }
-
-            // Reasinging the filters to trigger reactivity
-            statusFilter = statusFilter;
-            typeFilter = typeFilter;
-            sizeFilter = sizeFilter;
-            buildTimeFilter = buildTimeFilter;
-        }
-    });
-
-    function setFilterData(filter: FilterData, list: TagValue[]) {
-        const tagData = list.find((tag) => tag.tag.includes(`**${filter.title}**`));
-        if (tagData) {
-            filter.tag = tagData.tag;
-            if (Array.isArray(tagData.value) && tagData.value?.length) {
-                const values = tagData.value as string[];
-                filter.options.forEach((option) => {
-                    option.checked = values.includes(option.value);
-                });
-            }
-        } else {
-            filter.tag = null;
-            resetOptions(filter);
-        }
-    }
-
-    function resetOptions(filter: FilterData) {
-        filter.options.forEach((option) => {
-            option.checked = false;
-        });
-    }
-
-    function addFilterAndApply(
-        colId: string,
-        colTitle: string,
-        operator: ValidOperators,
-        value: string,
-        arrayValues: string[] = []
-    ) {
-        const tagList = $tags.filter((tag) => tag.tag.includes(colTitle));
-        tagList.forEach((tag) => queries.removeFilter(tag));
-        if (value || arrayValues?.length) {
-            if (colId === buildTimeFilter.id) {
-                addBuildTimeFilter(value, colId);
-            } else if (colId === sizeFilter.id) {
-                addSizeFilter(value, colId);
-            } else {
-                addFilter($columns, colId, operator, value, arrayValues);
-            }
-        }
-        queries.apply();
-        trackEvent(Submit.ApplyQuickFilter, {
-            source: 'function_deployments',
-            column: colId,
-            value: value || arrayValues.join(', ')
-        });
-    }
-
-    function addSizeFilter(value: string, colId: string) {
-        addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, value);
-    }
-    function addBuildTimeFilter(value: string, colId: string) {
-        const now = new Date();
-        const isoValue = new Date(now.getTime() - parseInt(value));
-        addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, isoValue.toISOString());
-        addFilter($columns, colId, ValidOperators.LessThanOrEqual, now.toISOString());
-    }
-</script>
-
-{#each [typeFilter] as filter}
-    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill
-            button
-            on:click={() => (filter.show = !filter.show)}
-            event="apply_quick_filter"
-            eventData={{ source: 'function_deployments', column: filter.title }}>
-            {#key filter.tag}
-                <span use:tagFormat>
-                    {filter?.tag ?? filter.title}
-                </span>
-            {/key}
-            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
-            </span>
-        </Pill>
-        <svelte:fragment slot="list">
-            {#each filter.options as option (option.value + option.checked)}
-                <SelectSearchCheckbox
-                    padding={8}
-                    bind:value={option.checked}
-                    on:click={() => {
-                        option.checked = !option.checked;
-                        addFilterAndApply(
-                            filter.id,
-                            filter.title,
-                            filter.operator,
-                            filter?.array ? null : option.checked ? option.value : null,
-                            filter?.array
-                                ? (filter.options
-                                      .filter((opt) => opt.checked)
-                                      .map((opt) => opt.value) ?? [])
-                                : []
-                        );
-                    }}>
-                    {option.label}
-                </SelectSearchCheckbox>
-            {/each}
-            {#if filter.options.some((option) => option.checked)}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-                        filter.tag = null;
-                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
-                    }}>
-                    Clear selection
-                </DropListItem>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{/each}
-{#each [sizeFilter] as filter}
-    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill
-            button
-            on:click={() => (filter.show = !filter.show)}
-            event="apply_quick_filter"
-            eventData={{ source: 'function_deployments', column: filter.title }}>
-            {#key filter.tag}
-                <span use:tagFormat>
-                    {filter?.tag ?? filter.title}
-                </span>
-            {/key}
-            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
-            </span>
-        </Pill>
-        <svelte:fragment slot="list">
-            {#each filter.options as option (option.value + option.checked)}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-
-                        addFilterAndApply(
-                            filter.id,
-                            filter.title,
-                            filter.operator,
-                            filter?.array ? null : option.value,
-                            []
-                        );
-                    }}>
-                    {option.label}
-                </DropListItem>
-            {/each}
-            {#if filter?.tag}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-                        filter.tag = null;
-                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
-                    }}>
-                    Clear selection
-                </DropListItem>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{/each}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte
index 639a15d47..ddf24e799 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte
@@ -1,37 +1,45 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Modal } from '$lib/components';
+    import { Confirm } from '$lib/components';
     import { func } from './store';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
 
     export let show = false;
     export let selectedDeployment: Models.Deployment = null;
+    export let redirect = false;
     let error: string;
 
     async function redeploy() {
         try {
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.createBuild(
+            const deployment = await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.createDuplicateDeployment(
                     $func.$id,
                     selectedDeployment.$id,
-                    selectedDeployment.buildId
+                    selectedDeployment?.buildId || undefined
                 );
-            addNotification({
-                type: 'success',
-                message: `Redeploying ${$func.name}`
-            });
+
             trackEvent(Submit.FunctionRedeploy);
 
             invalidate(Dependencies.FUNCTION);
             invalidate(Dependencies.DEPLOYMENTS);
             show = false;
+            addNotification({
+                type: 'success',
+                message: `Redeploying ${$func.name}`
+            });
+            if (redirect) {
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployments/deployment-${deployment.$id}`
+                );
+            }
         } catch (e) {
             error = e.message;
 
@@ -40,13 +48,7 @@
     }
 </script>
 
-<Modal
-    title="Redeploy function"
-    size="big"
-    bind:show
-    bind:error
-    onSubmit={redeploy}
-    headerDivider={false}>
+<Confirm title="Redeploy function" bind:open={show} bind:error onSubmit={redeploy}>
     <p class="text">
         Are you sure you want to redeploy <b>{$func.name}</b>? Redeploying may affect your
         production code.
@@ -56,4 +58,4 @@
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit>Redeploy</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
index 79e2782c2..fb956a65f 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-
     import DangerZone from './dangerZone.svelte';
     import ExecuteFunction from './executeFunction.svelte';
-    import UpdateConfiguration from './updateConfiguration.svelte';
     import UpdateEvents from './updateEvents.svelte';
     import UpdateLogging from './updateLogging.svelte';
     import UpdateName from './updateName.svelte';
@@ -12,45 +10,51 @@
     import UpdateSchedule from './updateSchedule.svelte';
     import UpdateScopes from './updateScopes.svelte';
     import UpdateTimeout from './updateTimeout.svelte';
-    import UpdateVariables from '../../../updateVariables.svelte';
-
-    import { func } from '../store';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Alert, Heading } from '$lib/components';
+    import { Alert } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import UpdateRepository from './updateRepository.svelte';
+    import UpdateBuildCommand from './updateBuildCommand.svelte';
+    import UpdateResourceLimits from './updateResourceLimits.svelte';
+    import { isCloud } from '$lib/system';
+    import UpdateVariables from '$routes/(console)/project-[region]-[project]/updateVariables.svelte';
+    import { page } from '$app/state';
 
     export let data;
     let showAlert = true;
 
-    const sdkCreateVariable = async (key: string, value: string) => {
+    const sdkCreateVariable = async (key: string, value: string, secret?: boolean) => {
         await sdk
-            .forProject($page.params.region, $page.params.project)
-            .functions.createVariable($func.$id, key, value);
+            .forProject(page.params.region, page.params.project)
+            .functions.createVariable(data.function.$id, key, value, secret);
         await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.FUNCTION)]);
     };
 
-    const sdkUpdateVariable = async (variableId: string, key: string, value: string) => {
+    const sdkUpdateVariable = async (
+        variableId: string,
+        key: string,
+        value: string,
+        secret?: boolean
+    ) => {
         await sdk
-            .forProject($page.params.region, $page.params.project)
-            .functions.updateVariable($func.$id, variableId, key, value);
+            .forProject(page.params.region, page.params.project)
+            .functions.updateVariable(data.function.$id, variableId, key, value, secret);
         await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.FUNCTION)]);
     };
 
     const sdkDeleteVariable = async (variableId: string) => {
         await sdk
-            .forProject($page.params.region, $page.params.project)
-            .functions.deleteVariable($func.$id, variableId);
+            .forProject(page.params.region, page.params.project)
+            .functions.deleteVariable(data.function.$id, variableId);
         await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.FUNCTION)]);
     };
 </script>
 
 <Container>
-    <Heading tag="h2" size="5">Settings</Heading>
-    {#if $func.version === 'v2' && showAlert}
+    {#if data.function.version === 'v2' && showAlert}
         <Alert
             type="warning"
             dismissible
@@ -68,7 +72,7 @@
             <svelte:fragment slot="buttons">
                 <Button
                     on:click={() =>
-                        trackEvent('click_open_website', {
+                        trackEvent(Click.WebsiteOpenClick, {
                             from: 'button',
                             source: 'function_keys_card',
                             destination: 'docs'
@@ -83,20 +87,29 @@
     {/if}
     <ExecuteFunction />
     <UpdateName />
-    <UpdateRuntime />
-    <UpdateConfiguration />
-    <UpdateLogging />
-    <UpdatePermissions />
-    <UpdateEvents />
-    <UpdateSchedule />
+    <UpdateRuntime runtimesList={data.runtimesList} />
+    {#key data.function.providerRepositoryId}
+        <UpdateRepository func={data.function} installations={data.installations} />
+    {/key}
+
     <UpdateVariables
         {sdkCreateVariable}
         {sdkUpdateVariable}
         {sdkDeleteVariable}
         isGlobal={false}
         globalVariableList={data.globalVariables}
-        variableList={data.variables} />
+        variableList={data.variables}
+        analyticsSource="function_settings" />
+    <UpdateBuildCommand func={data.function} />
+
+    <UpdatePermissions />
+    {#if isCloud}
+        <UpdateResourceLimits func={data.function} specs={data.specificationsList} />
+    {/if}
+    <UpdateEvents />
+    <UpdateSchedule />
     <UpdateTimeout />
+    <UpdateLogging func={data.function} />
     <UpdateScopes />
     <DangerZone />
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts
index 5fc5e80dc..cfccabca9 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts
@@ -1,10 +1,11 @@
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
-import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, depends }) => {
+export const load = async ({ params, depends, parent }) => {
     depends(Dependencies.VARIABLES);
-    depends(Dependencies.FUNCTIONS);
+    depends(Dependencies.FUNCTION);
+
+    const { runtimesList, specificationsList } = await parent();
 
     const [globalVariables, variables] = await Promise.all([
         sdk.forProject(params.region, params.project).projectApi.listVariables(),
@@ -31,6 +32,8 @@ export const load: PageLoad = async ({ params, depends }) => {
 
     return {
         variables,
-        globalVariables
+        globalVariables,
+        runtimesList,
+        specificationsList
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/dangerZone.svelte
index 2efabe367..1152f0337 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/dangerZone.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { BoxAvatar, CardGrid } from '$lib/components';
-    import Heading from '$lib/components/heading.svelte';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Delete from './deleteModal.svelte';
@@ -10,12 +9,9 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <Heading tag="h6" size="7">Delete function</Heading>
-    <p>
-        The function will be permanently deleted, including all deployments associated with it. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete function</svelte:fragment>
+    The function will be permanently deleted, including all deployments associated with it.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
@@ -30,4 +26,4 @@
     </svelte:fragment>
 </CardGrid>
 
-<Delete bind:showDelete />
+<Delete projectFunction={$func} bind:showDelete />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte
index 11f608766..15dc40585 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte
@@ -1,51 +1,56 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+    import { InputCheckbox } from '$lib/elements/forms';
 
     export let showDelete = false;
-    const functionId = $page.params.function;
+    export let projectFunction: Models.Function;
+
+    let error: string;
+    let confirmedDeletion = false;
 
     const handleSubmit = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.delete(functionId);
+                .forProject(page.params.region, page.params.project)
+                .functions.delete(projectFunction.$id);
             showDelete = false;
             addNotification({
                 type: 'success',
                 message: `Function has been deleted`
             });
-            await goto(`${base}/project-${$page.params.region}-${$page.params.project}/functions`);
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/functions`);
             trackEvent(Submit.FunctionDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.FunctionDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.FunctionDelete);
         }
     };
 </script>
 
-<Modal
-    title="Delete function"
-    bind:show={showDelete}
+<Confirm
     onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+    disabled={!confirmedDeletion}
+    title="Delete function"
+    bind:open={showDelete}
+    bind:error>
+    <p data-private>Are you sure you want to delete <strong>{projectFunction.name}</strong>?</p>
+
     <p data-private>
-        Are you sure you want to delete this function and all associated deployments from your
-        project?
+        The function and all associated deployments 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>
+
+    <InputCheckbox
+        size="s"
+        required
+        id="delete_function"
+        bind:checked={confirmedDeletion}
+        label="I understand and confirm" />
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/disconnectRepo.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/disconnectRepo.svelte
index 0cfa857b3..11424d98b 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/disconnectRepo.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/disconnectRepo.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import { Confirm } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -13,7 +13,7 @@
     import { Runtime } from '@appwrite.io/console';
 
     export let show = false;
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
     let error = '';
 
     const dispatch = createEventDispatcher();
@@ -24,7 +24,7 @@
                 throw new Error(`Invalid runtime: ${$func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -63,14 +63,7 @@
     }
 </script>
 
-<Modal
-    title="Disconnect Git repository"
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Confirm title="Disconnect Git repository" bind:open={show} bind:error onSubmit={handleSubmit}>
     <p data-private>
         Are you sure you want to disconnect <b>{$func.name}</b>? This will affect future deployments
         to this function.
@@ -79,4 +72,4 @@
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button secondary submit>Disconnect</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte
index 2212d0ad8..7155d476f 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte
@@ -1,30 +1,41 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { CardGrid, Heading, SvgIcon } from '$lib/components';
+    import { CardGrid, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { func } from '../store';
+    import { capitalize } from '$lib/helpers/string';
 </script>
 
 <CardGrid>
-    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-        <div class="avatar" style={`--p-image-size: ${32 / 16}rem`} aria-hidden="true">
-            <SvgIcon size={64} iconSize="large" name={$func.runtime.split('-')[0]}></SvgIcon>
-        </div>
-        <div class="u-flex-vertical u-gap-4">
-            <Heading tag="h6" size="7">{$func.name}</Heading>
+    <Typography.Title size="s">{$func.name}</Typography.Title>
 
-            <p class="text u-capitalize">{$func.runtime}</p>
-        </div>
-    </div>
     <svelte:fragment slot="aside">
-        <div class="u-flex u-main-space-between">
-            <div>
-                <p>Created at: {toLocaleDateTime($func.$createdAt)}</p>
-                <p>Last updated at: {toLocaleDateTime($func.$updatedAt)}</p>
-            </div>
-        </div>
+        <Layout.Stack gap="xxxl" direction="row" wrap="wrap">
+            <Layout.Stack gap="xxxs" inline>
+                <Typography.Caption variant="400">Runtime</Typography.Caption>
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                    <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                        <SvgIcon size={16} iconSize="small" name={$func.runtime.split('-')[0]} />
+                        {capitalize($func.runtime)}
+                    </Layout.Stack>
+                </Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="xxxs" inline>
+                <Typography.Caption variant="400">Updated</Typography.Caption>
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                    {toLocaleDateTime($func.$updatedAt)}
+                </Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="xxxs" inline>
+                <Typography.Caption variant="400">Created</Typography.Caption>
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                    {toLocaleDateTime($func.$createdAt)}
+                </Typography.Text>
+            </Layout.Stack>
+        </Layout.Stack>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
deleted file mode 100644
index 4cc29540e..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
+++ /dev/null
@@ -1,296 +0,0 @@
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { BoxAvatar, EmptySearch, Modal, PaginationInline } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { InputChoice, InputSearch, InputSelect, InputText, Button } from '$lib/elements/forms';
-    import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { Runtime, type Models } from '@appwrite.io/console';
-    import { func, repositories } from '../store';
-    import { invalidate } from '$app/navigation';
-    import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
-    import { sortBranches } from './updateConfiguration.svelte';
-    import { installations } from '$lib/wizards/functions/store';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    export let show: boolean;
-
-    const functionId = $page.params.function;
-
-    let selectedRepoId: string;
-    let selectedInstallationId: string;
-    let step = 1;
-    let search: string;
-    let repositoriesList: Models.ProviderRepository[];
-    let branchesList: Models.BranchList;
-    let offset = 0;
-    let selectedBranch: string;
-    let selectedDir: string;
-    let silentMode = false;
-    let error = '';
-
-    let installationsOptions = $installations.installations.map((installation) => {
-        return {
-            value: installation.$id,
-            label: installation.organization
-        };
-    });
-
-    function getProviderIcon(provider: string) {
-        if (provider === 'github') {
-            return `icon-github`;
-        }
-
-        return '';
-    }
-
-    async function handleSubmit() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $func.runtime)) {
-                throw new Error(`Invalid runtime: ${$func.runtime}`);
-            }
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.update(
-                    functionId,
-                    $func.name,
-                    $func.runtime,
-                    $func.execute || undefined,
-                    $func.events || undefined,
-                    $func.schedule || undefined,
-                    $func.timeout || undefined,
-                    $func.enabled || undefined,
-                    $func.logging || undefined,
-                    $func.entrypoint,
-                    $func.commands || undefined,
-                    $func.scopes || undefined,
-                    selectedInstallationId,
-                    selectedRepoId,
-                    selectedBranch,
-                    silentMode,
-                    selectedDir
-                );
-            await invalidate(Dependencies.FUNCTION);
-            addNotification({
-                type: 'success',
-                message: `${$func.name} git configuration has been updated successfully`
-            });
-            trackEvent(Submit.FunctionUpdateConfiguration);
-            show = false;
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.FunctionUpdateConfiguration);
-        }
-    }
-
-    async function getRepos() {
-        if (!show || !selectedInstallationId) return;
-
-        if (
-            !$repositories ||
-            $repositories.installationId !== selectedInstallationId ||
-            $repositories.search !== search
-        ) {
-            $repositories.repositories = (
-                await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .vcs.listRepositories(selectedInstallationId, search || undefined)
-            ).providerRepositories;
-        }
-
-        $repositories.search = search;
-        $repositories.installationId = selectedInstallation.$id;
-
-        repositoriesList = $repositories.repositories;
-    }
-    async function getBranches() {
-        if (!show || !selectedInstallationId) return;
-        branchesList = await sdk
-            .forProject($page.params.region, $page.params.project)
-            .vcs.listRepositoryBranches(selectedInstallationId, selectedRepoId);
-
-        branchesList.branches = sortBranches(branchesList.branches);
-
-        selectedBranch = branchesList?.branches[0].name;
-    }
-
-    $: if (search !== null) {
-        offset = 0;
-        getRepos();
-    }
-
-    $: selectedRepo = (repositoriesList ?? []).find((repo) => repo.id === selectedRepoId) ?? null;
-    $: selectedInstallation =
-        ($installations?.installations ?? []).find(
-            (installation) => installation.$id === selectedInstallationId
-        ) ?? null;
-</script>
-
-<Modal
-    title="Git configuration"
-    headerDivider={false}
-    bind:show
-    size="big"
-    bind:error
-    onSubmit={handleSubmit}>
-    <p class="text">
-        Configure a Git repository that will trigger your function deployments when updated.
-    </p>
-    {#if step === 1}
-        {#await getRepos()}
-            Fetching repositories..
-        {:then}
-            <div class="u-flex u-gap-16">
-                <div class="u-width-full-line">
-                    <InputSelect
-                        options={installationsOptions}
-                        id="installations"
-                        label="installation"
-                        showLabel={false}
-                        bind:value={selectedInstallationId} />
-                </div>
-                <div class="u-width-full-line">
-                    <InputSearch placeholder="Search repositories" bind:value={search} />
-                </div>
-            </div>
-
-            <p class="text">
-                Manage organization configuration in your <a
-                    class="link"
-                    href={`${base}/project-${$page.params.region}-${$page.params.project}/settings`}
-                    >project settings</a
-                >.
-            </p>
-            {#if repositoriesList.length}
-                <ul class="table is-remove-outer-styles u-sep-block-start">
-                    {#each repositoriesList as repo}
-                        <li class="table-row">
-                            <label class="table-col u-cursor-pointer">
-                                <div class="u-flex u-cross-center u-gap-8">
-                                    <input
-                                        class="is-small u-margin-inline-end-8"
-                                        type="radio"
-                                        name="repositories"
-                                        bind:group={selectedRepoId}
-                                        value={repo.id} />
-                                    <div class="avatar is-size-x-small">
-                                        <img src="" alt={repo.name} />
-                                    </div>
-                                    <div class="u-flex u-gap-8">
-                                        <span class="text">{repo.name}</span>
-                                        {#if repo.private}
-                                            <span
-                                                class="icon-lock-closed"
-                                                style="font-size: var(--icon-size-small)"
-                                                aria-hidden="true" />
-                                        {/if}
-                                        <time class="u-color-text-gray" datetime={repo.pushedAt}>
-                                            {timeFromNow(repo.pushedAt)}
-                                        </time>
-                                    </div>
-                                </div>
-                            </label>
-                        </li>
-                    {/each}
-                </ul>
-                <div class="u-flex u-margin-block-start-32 u-main-space-between">
-                    <p class="text">Total results: {repositoriesList.length}</p>
-                    <PaginationInline
-                        limit={5}
-                        bind:offset
-                        sum={repositoriesList.length}
-                        hidePages />
-                </div>
-            {:else if search}
-                <EmptySearch hidePages>
-                    <div class="common-section">
-                        <div class="u-text-center common-section">
-                            <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
-                            <p>There are no repositories 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/products/functions/deployment"
-                                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 repositories.</p>
-                            <p class="text u-line-height-1-5">
-                                Need a hand? Learn more in our <a
-                                    href="https://appwrite.io/docs/products/functions/deployment"
-                                    target="_blank"
-                                    rel="noopener noreferrer">
-                                    documentation</a
-                                >.
-                            </p>
-                        </div>
-                    </div>
-                </EmptySearch>
-            {/if}
-        {/await}
-    {:else}
-        {#await getBranches()}
-            Fetching branches..
-        {:then}
-            <BoxAvatar>
-                <svelte:fragment slot="image">
-                    <div class="avatar">
-                        <span class={getProviderIcon(selectedInstallation.provider)} />
-                    </div>
-                </svelte:fragment>
-                <svelte:fragment slot="title">
-                    <h6 class="u-bold u-trim-1">{selectedRepo.name}</h6>
-                </svelte:fragment>
-                <p>Last updated: {toLocaleDateTime(selectedRepo.pushedAt)}</p>
-            </BoxAvatar>
-
-            <InputSelectSearch
-                required={true}
-                id="branch"
-                label="Branch"
-                placeholder="main"
-                bind:value={selectedBranch}
-                bind:search={selectedBranch}
-                on:select={(event) => {
-                    selectedBranch = event.detail.value;
-                }}
-                name="branch"
-                options={branchesList?.branches?.map((branch) => {
-                    return {
-                        value: branch.name,
-                        label: branch.name
-                    };
-                }) ?? []} />
-            <InputText
-                id="root"
-                label="Root directory"
-                placeholder="functions/my-function"
-                bind:value={selectedDir} />
-            <InputChoice
-                id="silent"
-                label="Silent mode"
-                tooltip="Don't create comments and checks when pushing to this repository"
-                bind:value={silentMode} />
-        {/await}
-    {/if}
-
-    <svelte:fragment slot="footer">
-        {#if step === 1}
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
-            <Button secondary disabled={!selectedRepoId} on:click={() => step++}>Next</Button>
-        {:else}
-            <Button secondary on:click={() => step--}>Back</Button>
-            <Button submit>Deploy now</Button>
-        {/if}
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateBuildCommand.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateBuildCommand.svelte
new file mode 100644
index 000000000..91c6eff22
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateBuildCommand.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { Runtime, type Models } from '@appwrite.io/console';
+    import { page } from '$app/state';
+
+    export let func: Models.Function;
+    let buildCommand = func.commands;
+
+    async function updateLogging() {
+        try {
+            if (!isValueOfStringEnum(Runtime, func.runtime)) {
+                throw new Error(`Invalid runtime: ${func.runtime}`);
+            }
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.update(
+                    func.$id,
+                    func.name,
+                    func.runtime,
+                    func.execute || undefined,
+                    func.events || undefined,
+                    func.schedule || undefined,
+                    func.timeout || undefined,
+                    func.enabled || undefined,
+                    func.logging || undefined,
+                    func.entrypoint || undefined,
+                    buildCommand || undefined,
+                    func.scopes || undefined,
+                    func.installationId || undefined,
+                    func.providerRepositoryId || undefined,
+                    func.providerBranch || undefined,
+                    func.providerSilentMode || undefined,
+                    func.providerRootDirectory || undefined
+                );
+            await invalidate(Dependencies.FUNCTION);
+            addNotification({
+                type: 'success',
+                message: 'Build command has been updated'
+            });
+            trackEvent(Submit.FunctionUpdateBuildCommand);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateBuildCommand);
+        }
+    }
+</script>
+
+<Form onSubmit={updateLogging}>
+    <CardGrid>
+        <svelte:fragment slot="title">Build command</svelte:fragment>
+        Define the command used to build your function before deployment.
+        <svelte:fragment slot="aside">
+            <InputText
+                label="Build command"
+                id="buildCommand"
+                placeholder="npm install"
+                bind:value={buildCommand} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={func.commands === buildCommand} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateConfiguration.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateConfiguration.svelte
deleted file mode 100644
index 0ca624ec4..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateConfiguration.svelte
+++ /dev/null
@@ -1,354 +0,0 @@
-<script context="module" lang="ts">
-    export function sortBranches(branches: Models.Branch[]) {
-        return branches.sort((a, b) => {
-            if (a.name === 'main' || a.name === 'master') {
-                return -1;
-            }
-
-            return a.name > b.name ? 1 : -1;
-        });
-    }
-</script>
-
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import {
-        Alert,
-        AvatarGroup,
-        Box,
-        CardGrid,
-        Collapsible,
-        CollapsibleItem,
-        EyebrowHeading,
-        Heading,
-        SvgIcon
-    } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import {
-        Button,
-        Form,
-        FormList,
-        InputChoice,
-        InputText,
-        InputTextarea
-    } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { Runtime, type Models } from '@appwrite.io/console';
-    import { func } from '../store';
-    import GitInstallationModal from '$routes/(console)/project-[region]-[project]/settings/GitInstallationModal.svelte';
-    import GitConfigurationModal from './gitConfigurationModal.svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { onMount } from 'svelte';
-    import DisconnectRepo from './disconnectRepo.svelte';
-    import { Pill } from '$lib/elements';
-    import { wizard } from '$lib/stores/wizard';
-    import ConnectExisting from '$lib/wizards/functions/connectExisting.svelte';
-    import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
-    import { installations } from '$lib/wizards/functions/store';
-    import { isSelfHosted } from '$lib/system';
-    import { consoleVariables } from '$routes/(console)/store';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    const functionId = $page.params.function;
-    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-
-    let entrypoint: string;
-    let commands: string;
-    let showGit = false;
-    let branchesList: Models.BranchList;
-    let selectedBranch: string;
-    let silentMode = false;
-    let selectedDir: string;
-    let showDisconnect = false;
-
-    let repository: Models.ProviderRepository | null | false = false;
-
-    onMount(() => {
-        entrypoint = $func?.entrypoint;
-        commands = $func?.commands;
-        selectedBranch = $func?.providerBranch;
-        silentMode = $func?.providerSilentMode ?? false;
-        selectedDir = $func?.providerRootDirectory;
-
-        if ($page.url.searchParams.has('github-installed')) {
-            wizard.start(ConnectExisting);
-        }
-
-        loadRepository();
-    });
-
-    async function loadRepository() {
-        try {
-            if ($func.installationId && $func.providerRepositoryId) {
-                repository = await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .vcs.getRepository($func.installationId, $func.providerRepositoryId);
-            }
-        } catch (err) {
-            console.warn(err);
-        } finally {
-            if (repository === false) {
-                repository = null;
-            }
-        }
-    }
-
-    enum ProviderNames {
-        github = 'GitHub',
-        gitlab = 'GitLab',
-        bitBucket = 'BitBucket',
-        azure = 'Azure'
-    }
-
-    function getRepositoryLink(repository: Models.ProviderRepository) {
-        switch (repository.provider) {
-            case 'github':
-                return `https://github.com/${repository.organization}/${repository.name}`;
-            default:
-                return '';
-        }
-    }
-
-    async function updateConfiguration() {
-        try {
-            if (!isValueOfStringEnum(Runtime, $func.runtime)) {
-                throw new Error(`Invalid runtime: ${$func.runtime}`);
-            }
-            await sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.update(
-                    functionId,
-                    $func.name,
-                    $func.runtime,
-                    $func.execute || undefined,
-                    $func.events || undefined,
-                    $func.schedule || undefined,
-                    $func.timeout || undefined,
-                    $func.enabled || undefined,
-                    $func.logging || undefined,
-                    entrypoint,
-                    commands,
-                    $func.scopes || undefined,
-                    $func.installationId || undefined,
-                    $func.providerRepositoryId || undefined,
-                    selectedBranch,
-                    silentMode,
-                    selectedDir,
-                    $func.specification || undefined
-                );
-            await invalidate(Dependencies.FUNCTION);
-            addNotification({
-                type: 'success',
-                message: `${$func.name} git configuration has been updated successfully`
-            });
-            trackEvent(Submit.FunctionUpdateConfiguration);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.FunctionUpdateConfiguration);
-        }
-    }
-
-    async function getBranches(installation: string, repo: string) {
-        branchesList = await sdk
-            .forProject($page.params.region, $page.params.project)
-            .vcs.listRepositoryBranches(installation, repo);
-        branchesList.branches = sortBranches(branchesList.branches);
-
-        selectedBranch = $func?.providerBranch ?? branchesList.branches[0].name;
-    }
-
-    $: if ($func?.installationId && $func?.providerRepositoryId) {
-        getBranches($func.installationId, $func.providerRepositoryId);
-    }
-
-    $: isUpdateButtonEnabled =
-        entrypoint !== $func?.entrypoint ||
-        commands !== $func?.commands ||
-        selectedBranch !== $func?.providerBranch ||
-        silentMode !== $func?.providerSilentMode ||
-        selectedDir !== $func?.providerRootDirectory;
-</script>
-
-<Form onSubmit={updateConfiguration}>
-    <CardGrid>
-        <Heading tag="h6" size="7">Configuration</Heading>
-        <p class="text">
-            Connect a Git repository for automatic deployments, or set install and build commands
-            for your function.
-        </p>
-        <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    required
-                    hideRequired
-                    label="Entrypoint"
-                    id="Entrypoint"
-                    placeholder="Enter an entrypoint (e.g. 'index.js')"
-                    bind:value={entrypoint} />
-            </FormList>
-            <Collapsible>
-                {#if repository === false}
-                    <CollapsibleItem>
-                        <svelte:fragment slot="title">
-                            <span class="u-margin-inline-end-16">Git settings</span>
-                        </svelte:fragment>
-                        <div class="card-git card is-border-dashed is-no-shadow common-section">
-                            <div class="u-flex u-gap-8 u-cross-center u-main-center">
-                                <div class="loader u-margin-16" />
-                                Loading repository...
-                            </div>
-                        </div>
-                    </CollapsibleItem>
-                {:else}
-                    <CollapsibleItem>
-                        <svelte:fragment slot="title">
-                            <span class="u-margin-inline-end-16">Git settings</span>
-                            {#if !repository}
-                                <Pill>
-                                    <EyebrowHeading tag="h6" size="3" style="line-height: unset">
-                                        NOT CONNECTED
-                                    </EyebrowHeading>
-                                </Pill>
-                            {/if}
-                        </svelte:fragment>
-                        {#if repository}
-                            <Box radius="small">
-                                <div class="u-flex u-gap-8">
-                                    <SvgIcon name={repository.provider} iconSize="xlarge" />
-                                    <div class="u-line-height-1-5">
-                                        <h6 class="u-bold u-trim-1">
-                                            {repository.name}
-                                            {#if repository.private}
-                                                <span
-                                                    class="icon-lock-closed u-color-text-gray"
-                                                    style="font-size: var(--icon-size-small)"
-                                                    aria-hidden="true" />
-                                            {/if}
-                                        </h6>
-                                        <p class="u-color-text-gray">
-                                            Last updated: {toLocaleDateTime(repository.pushedAt)}
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="u-margin-block-start-24">
-                                    <FormList>
-                                        <InputSelectSearch
-                                            required={true}
-                                            id="branch"
-                                            label="Branch"
-                                            placeholder="main"
-                                            interactiveOutput
-                                            bind:value={selectedBranch}
-                                            bind:search={selectedBranch}
-                                            on:select={(event) => {
-                                                selectedBranch = event.detail.value;
-                                            }}
-                                            name="branch"
-                                            options={branchesList?.branches?.map((branch) => {
-                                                return {
-                                                    value: branch.name,
-                                                    label: branch.name
-                                                };
-                                            }) ?? []} />
-                                        <InputText
-                                            id="root"
-                                            label="Root directory"
-                                            placeholder="functions/my-function"
-                                            bind:value={selectedDir} />
-                                        <InputChoice
-                                            id="silent"
-                                            label="Silent mode"
-                                            tooltip="Don't create comments when pushing to this repository"
-                                            bind:value={silentMode} />
-                                    </FormList>
-                                </div>
-                                <div
-                                    class="u-margin-block-start-24 u-flex u-gap-16 u-main-end u-flex-wrap">
-                                    <Button text on:click={() => (showDisconnect = true)}>
-                                        Disconnect repository
-                                    </Button>
-                                    <Button secondary href={getRepositoryLink(repository)} external>
-                                        View on {ProviderNames[repository.provider] ??
-                                            'unknown provider'}
-                                        <span class="icon-external-link" />
-                                    </Button>
-                                </div>
-                            </Box>
-                        {:else}
-                            {#if isSelfHosted && !isVcsEnabled}
-                                <Alert class="common-section" type="info">
-                                    <svelte:fragment slot="title">
-                                        Installing Git to a self-hosted instance
-                                    </svelte:fragment>
-                                    When installing Git in a locally hosted Appwrite project, you must
-                                    first configure your environment variables.
-                                    <svelte:fragment slot="buttons">
-                                        <Button
-                                            href="https://appwrite.io/docs/advanced/self-hosting/functions"
-                                            external
-                                            text>
-                                            Learn more
-                                        </Button>
-                                    </svelte:fragment>
-                                </Alert>
-                            {/if}
-                            <article
-                                class="card-git card is-border-dashed is-no-shadow common-section">
-                                <div class="u-flex u-cross-center u-flex-vertical u-gap-32">
-                                    <div class="u-flex u-cross-center u-gap-8">
-                                        <AvatarGroup
-                                            bordered
-                                            icons={['github', 'gitlab', 'bitBucket', 'azure']} />
-
-                                        <span class="icon-arrow-narrow-right" />
-                                        <div class="avatar">
-                                            <SvgIcon
-                                                name={$func.runtime.split('-')[0]}
-                                                type="grayscale"
-                                                size={80} />
-                                        </div>
-                                    </div>
-                                    <Button
-                                        secondary
-                                        disabled={isSelfHosted && !isVcsEnabled}
-                                        on:click={() => wizard.start(ConnectExisting)}>
-                                        <span class="text">Connect Git</span>
-                                    </Button>
-                                </div>
-                            </article>
-                        {/if}
-                    </CollapsibleItem>
-                {/if}
-                <CollapsibleItem>
-                    <svelte:fragment slot="title">Build settings</svelte:fragment>
-                    <FormList>
-                        <InputTextarea
-                            label="Commands"
-                            placeholder="Enter an install command (e.g. 'npm install')"
-                            id="install"
-                            tooltip="Enter a single command or chain multiple commands with the && operator"
-                            bind:value={commands} />
-                    </FormList>
-                </CollapsibleItem>
-            </Collapsible>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button disabled={!isUpdateButtonEnabled} submit>Update</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Form>
-
-{#if !$installations?.total && showGit}
-    <GitInstallationModal bind:showGitInstall={showGit} />
-{:else}
-    <GitConfigurationModal bind:show={showGit} />
-{/if}
-
-<DisconnectRepo bind:show={showDisconnect} on:success={loadRepository} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateEvents.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateEvents.svelte
index 3fb9789ae..3e2677462 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateEvents.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateEvents.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
     import CardGrid from '$lib/components/cardGrid.svelte';
     import Empty from '$lib/components/empty.svelte';
-    import Heading from '$lib/components/heading.svelte';
-
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import Form from '$lib/elements/forms/form.svelte';
-    import { TableCell, TableCellText } from '$lib/elements/table';
-    import TableList from '$lib/elements/table/tableList.svelte';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -17,17 +13,16 @@
     import { func } from '../store';
     import { EventModal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import DropList from '$lib/components/dropList.svelte';
-    import DropListItem from '$lib/components/dropListItem.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Link, Table, Typography } from '@appwrite.io/pink-svelte';
 
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
     const eventSet: Writable<Set<string>> = writable(new Set($func.events));
     let showEvents = false;
     let eventValue: string;
     let isDisabled = true;
-    let showDropdown: boolean[] = [];
 
     async function updateEvents() {
         try {
@@ -35,7 +30,7 @@
                 throw new Error(`Invalid runtime: ${$func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -96,57 +91,37 @@
 
 <Form onSubmit={updateEvents}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="events">Events</Heading>
-        <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
+        <svelte:fragment slot="title">Events</svelte:fragment>
+        Set the events that will trigger your function. Maximum 100 events allowed.
         <svelte:fragment slot="aside">
             {#if $eventSet.size}
-                <TableList>
-                    {#each Array.from($eventSet) as event, i}
-                        <li class="table-row">
-                            <TableCellText title="id">
-                                {event}
-                            </TableCellText>
-                            <TableCell showOverflow title="options" width={40}>
-                                <DropList
-                                    bind:show={showDropdown[i]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <button
-                                        class="button is-text is-only-icon"
-                                        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="pencil"
-                                            on:click={() => {
-                                                showDropdown[i] = false;
-                                                showEvents = true;
-                                                eventValue = event;
-                                            }}>
-                                            Edit
-                                        </DropListItem>
-                                        <DropListItem
-                                            icon="trash"
-                                            on:click={async () => {
-                                                $eventSet.delete(event);
-                                                eventSet.set($eventSet);
-                                            }}>
-                                            Delete
-                                        </DropListItem>
-                                    </svelte:fragment>
-                                </DropList>
-                            </TableCell>
-                        </li>
+                <Table.Root columns={1} let:root>
+                    {#each Array.from($eventSet) as event}
+                        <Table.Row.Base {root}>
+                            <Table.Cell {root}>
+                                <Layout.Stack
+                                    direction="row"
+                                    justifyContent="space-between"
+                                    alignItems="center">
+                                    {event}
+                                    <Button
+                                        extraCompact
+                                        ariaLabel="delete event"
+                                        on:click={() => {
+                                            $eventSet.delete(event);
+                                            eventSet.set($eventSet);
+                                        }}>
+                                        <Icon icon={IconX} size="s" />
+                                    </Button>
+                                </Layout.Stack>
+                            </Table.Cell>
+                        </Table.Row.Base>
                     {/each}
-                </TableList>
-
-                <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>
+                </Table.Root>
+                <div>
+                    <Button secondary on:click={() => (showEvents = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add event
                     </Button>
                 </div>
             {:else}
@@ -161,12 +136,12 @@
 </Form>
 
 <EventModal bind:show={showEvents} initialValue={eventValue} on:created={handleEvent}>
-    <p class="text">
-        Select events in your Appwrite project that will trigger your function. <a
+    <Typography.Text
+        >Select events in your Appwrite project that will trigger your function.
+        <Link.Anchor
             href="https://appwrite.io/docs/advanced/platform/events"
             target="_blank"
             rel="noopener noreferrer"
-            class="link">Learn more about Appwrite Events</a
-        >.
-    </p>
+            class="link">Learn more about Appwrite Events</Link.Anchor
+        >.</Typography.Text>
 </EventModal>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateLogging.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateLogging.svelte
index cb459b42a..94e922790 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateLogging.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateLogging.svelte
@@ -1,61 +1,53 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList } from '$lib/elements/forms';
-    import InputSwitch from '$lib/elements/forms/inputSwitch.svelte';
+    import { Button, Form, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
-    import { onMount } from 'svelte';
-    import { func } from '../store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { Runtime } from '@appwrite.io/console';
-    import { base } from '$app/paths';
+    import { Runtime, type Models } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
-    const functionId = $page.params.function;
-    let functionLogging: boolean = null;
+    export let func: Models.Function;
+    let logging = func.logging;
 
-    onMount(async () => {
-        functionLogging ??= $func.logging;
-    });
-
-    async function updateLogging() {
+    async function update() {
         try {
-            if (!isValueOfStringEnum(Runtime, $func.runtime)) {
-                throw new Error(`Invalid runtime: ${$func.runtime}`);
+            if (!isValueOfStringEnum(Runtime, func.runtime)) {
+                throw new Error(`Invalid runtime: ${func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
-                    functionId,
-                    $func.name,
-                    $func.runtime,
-                    $func.execute || undefined,
-                    $func.events || undefined,
-                    $func.schedule || undefined,
-                    $func.timeout || undefined,
-                    $func.enabled || undefined,
-                    functionLogging,
-                    $func.entrypoint || undefined,
-                    $func.commands || undefined,
-                    $func.scopes || undefined,
-                    $func.installationId || undefined,
-                    $func.providerRepositoryId || undefined,
-                    $func.providerBranch || undefined,
-                    $func.providerSilentMode || undefined,
-                    $func.providerRootDirectory || undefined,
-                    $func.specification || undefined
+                    func.$id,
+                    func.name,
+                    func.runtime,
+                    func.execute || undefined,
+                    func.events || undefined,
+                    func.schedule || undefined,
+                    func.timeout || undefined,
+                    func.enabled || undefined,
+                    logging,
+                    func.entrypoint || undefined,
+                    func.commands || undefined,
+                    func.scopes || undefined,
+                    func.installationId || undefined,
+                    func.providerRepositoryId || undefined,
+                    func.providerBranch || undefined,
+                    func.providerSilentMode || undefined,
+                    func.providerRootDirectory || undefined,
+                    func.specification || undefined
                 );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
                 type: 'success',
                 message:
-                    $func.name +
+                    func.name +
                     ' execution logs settings have been ' +
-                    (functionLogging ? 'enabled' : 'disabled')
+                    (logging ? 'enabled' : 'disabled')
             });
             trackEvent(Submit.FunctionUpdateLogging);
         } catch (error) {
@@ -68,30 +60,18 @@
     }
 </script>
 
-<Form onSubmit={updateLogging}>
+<Form onSubmit={update}>
     <CardGrid>
-        <Heading tag="h6" size="7">Execution logs</Heading>
-        <p>
-            Enable or disable execution logs. We recommend disabling them for better performance in
-            production.
-        </p>
+        <svelte:fragment slot="title">Logging</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputSwitch label="Logs" id="logging" bind:value={functionLogging}>
-                    <svelte:fragment slot="description">
-                        <p>
-                            When disabled, execution logs and errors will not be shown in the <a
-                                href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/executions`}
-                                class="link">
-                                Executions</a> tab
-                        </p>
-                    </svelte:fragment>
-                </InputSwitch>
-            </FormList>
+            <InputSwitch label="Logs" id="logging" bind:value={logging} />
+            <Typography.Text>
+                When disabled, executions will exclude logs and errors, and will be slightly faster.
+            </Typography.Text>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={$func.logging === functionLogging} submit>Update</Button>
+            <Button disabled={func.logging === logging} submit>Update</Button>
         </svelte:fragment>
     </CardGrid>
 </Form>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateName.svelte
index 6c6f47c4d..01ae9f554 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateName.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -12,7 +12,7 @@
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
 
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
     let functionName: string = null;
 
     onMount(async () => {
@@ -25,7 +25,7 @@
                 throw new Error(`Invalid runtime: ${$func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     functionName,
@@ -64,17 +64,14 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
-            <ul>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Enter name"
-                    autocomplete={false}
-                    bind:value={functionName} />
-            </ul>
+            <InputText
+                id="name"
+                label="Name"
+                placeholder="Enter name"
+                required
+                bind:value={functionName} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updatePermissions.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updatePermissions.svelte
index fcf46d2fc..82c2813a2 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updatePermissions.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -13,8 +13,9 @@
     import { symmetricDifference } from '$lib/helpers/array';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
+    import { Link } from '$lib/elements';
 
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
 
     let arePermsDisabled = true;
     let permissions: string[] = [];
@@ -29,7 +30,7 @@
                 throw new Error(`Invalid runtime: ${$func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -74,16 +75,11 @@
 
 <Form onSubmit={updatePermissions}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="permissions">Execute access</Heading>
-        <p>
-            Choose who can execute this function using the client API. Learn more about <a
-                href="https://appwrite.io/docs/advanced/platform/permissions"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                Permissions
-            </a>.
-        </p>
+        <svelte:fragment slot="title">Execute access</svelte:fragment>
+        Select who can execute this function using the client API.
+        <Link href="https://appwrite.io/docs/advanced/platform/permissions" external>
+            Learn more</Link
+        >.
         <svelte:fragment slot="aside">
             <Roles bind:roles={permissions} />
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte
new file mode 100644
index 000000000..ba627b4ac
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte
@@ -0,0 +1,278 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Runtime, type Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import DisconnectRepo from './disconnectRepo.svelte';
+    import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs';
+    import {
+        Empty,
+        Fieldset,
+        Icon,
+        Layout,
+        Skeleton,
+        Card as PinkCard,
+        Input,
+        Selector
+    } from '@appwrite.io/pink-svelte';
+    import Card from '$lib/components/card.svelte';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { page } from '$app/state';
+    import SelectRootModal from '$lib/components/git/selectRootModal.svelte';
+
+    export let func: Models.Function;
+    export let installations: Models.InstallationList;
+
+    let branchesList: Models.BranchList;
+    let selectedBranch = func?.providerBranch;
+    let silentMode = func?.providerSilentMode ?? false;
+    let selectedDir = func?.providerRootDirectory;
+    let showDisconnect = false;
+    let showConnectRepo = false;
+    let showSelectRoot = false;
+    let repository: Models.ProviderRepository | null | false = false;
+
+    onMount(() => {
+        selectedBranch = func?.providerBranch;
+        silentMode = func?.providerSilentMode ?? false;
+        selectedDir = func?.providerRootDirectory;
+        const inst = installations?.installations.find(
+            (installation) => installation.$id === func?.installationId
+        );
+        installation.set(inst ?? installations?.installations[0]);
+        loadRepository();
+    });
+
+    async function loadRepository() {
+        try {
+            if (func.installationId && func.providerRepositoryId) {
+                repository = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.getRepository(func.installationId, func.providerRepositoryId);
+                repositoryStore.set(repository);
+            }
+        } catch (err) {
+            console.warn(err);
+        } finally {
+            if (repository === false) {
+                repository = null;
+            }
+        }
+    }
+    async function updateConfiguration() {
+        try {
+            if (!isValueOfStringEnum(Runtime, func.runtime)) {
+                throw new Error(`Invalid runtime: ${func.runtime}`);
+            }
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.update(
+                    func.$id,
+                    func.name,
+                    func.runtime,
+                    func.execute || undefined,
+                    func.events || undefined,
+                    func.schedule || undefined,
+                    func.timeout || undefined,
+                    func.enabled || undefined,
+                    func.logging || undefined,
+                    func.entrypoint || undefined,
+                    func.commands || undefined,
+                    func.scopes || undefined,
+                    func.installationId || undefined,
+                    func.providerRepositoryId || undefined,
+                    selectedBranch,
+                    silentMode,
+                    selectedDir
+                );
+            await invalidate(Dependencies.FUNCTION);
+            addNotification({
+                type: 'success',
+                message: `${func.name} git configuration has been updated successfully`
+            });
+            trackEvent(Submit.FunctionUpdateConfiguration);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateConfiguration);
+        }
+    }
+    async function getBranches(installation: string, repo: string) {
+        branchesList = await sdk
+            .forProject(page.params.region, page.params.project)
+            .vcs.listRepositoryBranches(installation, repo);
+        branchesList.branches = sortBranches(branchesList.branches);
+
+        selectedBranch = func?.providerBranch ?? branchesList.branches[0].name;
+    }
+
+    $: if (func?.installationId && func?.providerRepositoryId) {
+        getBranches(func.installationId, func.providerRepositoryId);
+    }
+
+    $: isUpdateButtonEnabled =
+        selectedBranch !== func?.providerBranch ||
+        silentMode !== func?.providerSilentMode ||
+        selectedDir !== func?.providerRootDirectory;
+
+    async function connect(selectedInstallationId: string, selectedRepository: string) {
+        try {
+            if (!isValueOfStringEnum(Runtime, func.runtime)) {
+                throw new Error(`Invalid runtime: ${func.runtime}`);
+            }
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.update(
+                    func.$id,
+                    func.name,
+                    func.runtime as Runtime,
+                    func.execute || undefined,
+                    func.events || undefined,
+                    func.schedule || undefined,
+                    func.timeout || undefined,
+                    func.enabled || undefined,
+                    func.logging || undefined,
+                    func.entrypoint,
+                    func.commands || undefined,
+                    func.scopes || undefined,
+                    selectedInstallationId,
+                    selectedRepository,
+                    'main',
+                    undefined,
+                    undefined,
+                    undefined
+                );
+            await invalidate(Dependencies.FUNCTION);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+<Form onSubmit={updateConfiguration}>
+    <CardGrid hideFooter={!repository}>
+        <svelte:fragment slot="title">Git repository</svelte:fragment>
+        Automatically deploy changes for every commit pushed to your Git repository.
+        <svelte:fragment slot="aside">
+            {#if repository === false}
+                <Layout.Stack gap="xl">
+                    <Card padding="xs" radius="s" variant="secondary">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" gap="s">
+                                <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
+                                <Layout.Stack gap="xxxs">
+                                    <Skeleton variant="line" width={100} height={20} />
+                                    <Skeleton variant="line" width={200} height={15} />
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+
+                    <Fieldset legend="Branch">
+                        <Layout.Stack gap="xl">
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width="100%" height={32} />
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width="100%" height={32} />
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width="100%" height={15} />
+                                <Skeleton variant="line" width="100%" height={15} />
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Fieldset>
+                </Layout.Stack>
+            {:else if repository}
+                <Layout.Stack gap="xl">
+                    <RepositoryCard {repository} on:disconnect={() => (showDisconnect = true)} />
+                    <Fieldset legend="Branch">
+                        <Layout.Stack gap="xl">
+                            <Input.ComboBox
+                                required={true}
+                                id="branch"
+                                label="Production branch"
+                                placeholder="main"
+                                interactiveOutput
+                                bind:value={selectedBranch}
+                                bind:search={selectedBranch}
+                                on:select={(event) => {
+                                    selectedBranch = event.detail.value;
+                                }}
+                                name="branch"
+                                options={branchesList?.branches?.map((branch) => {
+                                    return {
+                                        value: branch.name,
+                                        label: branch.name
+                                    };
+                                }) ?? []} />
+                            <Layout.Stack direction="row" gap="s" alignItems="flex-end">
+                                <InputText
+                                    id="root"
+                                    label="Root directory"
+                                    placeholder="Select directory"
+                                    bind:value={selectedDir} />
+                                <Button secondary size="s" on:click={() => (showSelectRoot = true)}
+                                    >Select</Button>
+                            </Layout.Stack>
+
+                            <Selector.Checkbox
+                                size="s"
+                                id="silentMode"
+                                label="Silent mode"
+                                description="If selected, comments will not be created when pushing changes to this repository."
+                                bind:checked={silentMode} />
+                        </Layout.Stack>
+                    </Fieldset>
+                </Layout.Stack>
+            {:else if func.installationId || installations?.total}
+                <PinkCard.Base padding="none" border="dashed">
+                    <Empty
+                        type="secondary"
+                        title="No repository is connected to this function yet"
+                        description="Connect to enable automatic deployments">
+                        <svelte:fragment slot="actions">
+                            <Button secondary on:click={() => (showConnectRepo = true)}>
+                                <Icon icon={IconGithub} size="s" slot="start" />
+                                Connect Git repository
+                            </Button>
+                        </svelte:fragment>
+                    </Empty>
+                </PinkCard.Base>
+            {:else}
+                <ConnectGit callbackState={{ newInstallation: 'true' }} />
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={!isUpdateButtonEnabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+{#if showConnectRepo}
+    <ConnectRepoModal bind:show={showConnectRepo} {connect} product="functions" />
+{/if}
+
+{#if showDisconnect}
+    <DisconnectRepo bind:show={showDisconnect} on:success={loadRepository} />
+{/if}
+{#if showSelectRoot}
+    <SelectRootModal bind:show={showSelectRoot} product="sites" bind:rootDir={selectedDir} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateResourceLimits.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateResourceLimits.svelte
new file mode 100644
index 000000000..e50a07cc9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateResourceLimits.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Button, Form, InputSelect } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { Runtime, type Models } from '@appwrite.io/console';
+    import Link from '$lib/elements/link.svelte';
+    import { Alert } from '@appwrite.io/pink-svelte';
+    import { upgradeURL } from '$lib/stores/billing';
+    import { isCloud } from '$lib/system';
+    import { organization } from '$lib/stores/organization';
+    import { page } from '$app/state';
+
+    export let func: Models.Function;
+    export let specs: Models.SpecificationList;
+    let specification = func.specification;
+
+    async function updateLogging() {
+        try {
+            if (!isValueOfStringEnum(Runtime, func.runtime)) {
+                throw new Error(`Invalid runtime: ${func.runtime}`);
+            }
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .functions.update(
+                    func.$id,
+                    func.name,
+                    func.runtime,
+                    func.execute || undefined,
+                    func.events || undefined,
+                    func.schedule || undefined,
+                    func.timeout || undefined,
+                    func.enabled || undefined,
+                    func.logging || undefined,
+                    func.entrypoint || undefined,
+                    func.commands || undefined,
+                    func.scopes || undefined,
+                    func.installationId || undefined,
+                    func.providerRepositoryId || undefined,
+                    func.providerBranch || undefined,
+                    func.providerSilentMode || undefined,
+                    func.providerRootDirectory || undefined
+                );
+            await invalidate(Dependencies.FUNCTION);
+            addNotification({
+                type: 'success',
+                message: 'Resource limits have been updated'
+            });
+            trackEvent(Submit.FunctionUpdateLogging);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateLogging);
+        }
+    }
+
+    const options = specs.specifications.map((spec) => ({
+        label: `${spec.cpus} CPU, ${spec.memory} MB RAM`,
+        value: spec.slug,
+        disabled: !spec.enabled
+    }));
+</script>
+
+<Form onSubmit={updateLogging}>
+    <CardGrid>
+        <svelte:fragment slot="title">Resource limits</svelte:fragment>
+        Define your function's compute specifications, including CPU and memory, to optimize performance
+        for your workloads. <Link
+            href="https://appwrite.io/docs/advanced/platform/compute"
+            external>
+            Learn more
+        </Link>.
+        <svelte:fragment slot="aside">
+            <InputSelect
+                label="CPU and memory"
+                id="resources"
+                required
+                disabled={options.length < 1}
+                bind:value={specification}
+                {options} />
+            {#if isCloud && $organization.billingPlan === BillingPlan.FREE}
+                <Alert.Inline title="Customizing specs available with Pro or Scale plans">
+                    Upgrade to Pro or Scale to adjust your CPU and RAM beyond the default.
+                    <svelte:fragment slot="actions">
+                        <Button href={$upgradeURL} compact>Upgrade</Button>
+                    </svelte:fragment>
+                </Alert.Inline>
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={func.specification === specification} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRuntime.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRuntime.svelte
index 9359cee1d..6ffb262fe 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRuntime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRuntime.svelte
@@ -1,37 +1,32 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
-    import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Button, Form, FormList } from '$lib/elements/forms';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { func } from '../store';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import { specificationsList } from '$lib/stores/specifications';
-    import { runtimesList } from '$lib/stores/runtimes';
     import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { Runtime } from '@appwrite.io/console';
-    import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import SpecificationsTooltip from '$lib/wizards/functions/components/specificationsTooltip.svelte';
+    import { Runtime, type Models } from '@appwrite.io/console';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import Link from '$lib/elements/link.svelte';
 
-    const functionId = $page.params.function;
-    let runtime: string = null;
-    let specification: string = null;
+    export let runtimesList: Models.RuntimeList;
+    const functionId = page.params.function;
+    let runtime: string = $func.runtime;
+    let entrypoint = $func.entrypoint;
 
     let options = [];
     let specificationOptions = [];
 
     onMount(async () => {
-        runtime ??= $func.runtime;
-        specification ??= $func.specification;
-
-        let runtimes = await $runtimesList;
         let allowedSpecifications = (await $specificationsList).specifications;
-        options = runtimes.runtimes.map((runtime) => ({
+        options = runtimesList.runtimes.map((runtime) => ({
             label: `${runtime.name} - ${runtime.version}`,
             value: runtime.$id
         }));
@@ -51,7 +46,7 @@
                 throw new Error(`Invalid runtime: ${runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -62,7 +57,7 @@
                     $func.timeout || undefined,
                     $func.enabled || undefined,
                     $func.logging || undefined,
-                    $func.entrypoint || undefined,
+                    entrypoint || undefined,
                     $func.commands || undefined,
                     $func.scopes || undefined,
                     $func.installationId || undefined,
@@ -70,53 +65,57 @@
                     $func.providerBranch || undefined,
                     $func.providerSilentMode || undefined,
                     $func.providerRootDirectory || undefined,
-                    specification
+                    $func.specification || undefined
                 );
-
             await invalidate(Dependencies.FUNCTION);
             addNotification({
                 message: 'Runtime settings have been updated',
                 type: 'success'
             });
-            trackEvent(Submit.FunctionUpdateName);
+            trackEvent(Submit.FunctionUpdateRuntime, { runtime });
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
-            trackError(error, Submit.FunctionUpdateName);
+            trackError(error, Submit.FunctionUpdateRuntime);
         }
     }
 
-    $: isUpdateButtonEnabled = runtime !== $func?.runtime || specification !== $func?.specification;
+    $: isUpdateButtonEnabled = runtime !== $func?.runtime || entrypoint !== $func?.entrypoint;
 </script>
 
 <Form onSubmit={updateRuntime}>
     <CardGrid>
-        <Heading tag="h6" size="7">Runtime</Heading>
-
+        <svelte:fragment slot="title">Runtime</svelte:fragment>
+        <Typography.Text>
+            Select the runtime for executing your function and define its entrypoint. Version
+            changes apply on redeploy and can be updated here. <Link external href="#"
+                >Learn more</Link
+            >.
+        </Typography.Text>
         <svelte:fragment slot="aside">
-            <FormList>
+            <Layout.Stack gap="l">
                 <InputSelect
                     label="Runtime"
                     id="runtime"
                     placeholder="Select runtime"
                     bind:value={runtime}
                     {options}
+                    required />
+                <InputText
+                    label="Entrypoint"
+                    id="entrypoint"
                     required
-                    hideRequired />
+                    placeholder="Enter entrypoint"
+                    bind:value={$func.entrypoint} />
                 <InputSelect
                     label="CPU and memory"
                     id="size"
                     placeholder="Select runtime specification"
-                    bind:value={specification}
-                    options={specificationOptions}
-                    popover={isCloud && $organization?.billingPlan === BillingPlan.FREE
-                        ? SpecificationsTooltip
-                        : null}
-                    required
-                    hideRequired />
-            </FormList>
+                    bind:value={$func.specification}
+                    options={specificationOptions} />
+            </Layout.Stack>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateSchedule.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateSchedule.svelte
index 39011af4e..87b61c7cb 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateSchedule.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateSchedule.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputCron } from '$lib/elements/forms';
+    import { Button, Form, InputCron } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { func } from '../store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
+    import { Link } from '$lib/elements';
     import { parseExpression } from 'cron-parser';
 
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
     let functionSchedule: string = null;
 
     onMount(async () => {
@@ -29,7 +30,7 @@
             // an error is shown if invalid.
             parseExpression(functionSchedule);
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -68,23 +69,13 @@
 
 <Form onSubmit={updateSchedule}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="schedule">Schedule</Heading>
-        <p>
-            Set a Cron schedule to trigger your function. Leave blank for no schedule. <a
-                href="https://appwrite.io/docs/products/functions/execution#schedule"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                More details on Cron syntax here</a
-            >.
-        </p>
+        <svelte:fragment slot="title">Schedule</svelte:fragment>
+        Set a Cron schedule to trigger your function. Leave blank for no schedule.
+        <Link href="https://appwrite.io/docs/products/functions/execution#schedule" external>
+            Learn more</Link
+        >.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputCron
-                    bind:value={functionSchedule}
-                    label="Schedule (Cron Syntax)"
-                    id="schedule" />
-            </FormList>
+            <InputCron bind:value={functionSchedule} label="Schedule (Cron syntax)" id="schedule" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateScopes.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateScopes.svelte
index 5d3ab9c88..0442d0bc2 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateScopes.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateScopes.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -13,8 +13,9 @@
     import { Runtime } from '@appwrite.io/console';
     import Scopes from '$routes/(console)/project-[region]-[project]/overview/keys/scopes.svelte';
     import { symmetricDifference } from '$lib/helpers/array';
+    import { Link } from '$lib/elements';
 
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
     let functionScopes: string[] = null;
 
     onMount(async () => {
@@ -27,7 +28,7 @@
                 throw new Error(`Invalid runtime: ${$func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -68,16 +69,12 @@
 
 <Form onSubmit={updateScopes}>
     <CardGrid>
-        <Heading tag="h6" size="7">Scopes</Heading>
-        <p class="text">
-            Select scopes to grant the dynamic key generated temporarily for your function. It is
-            best practice to allow only necessary permissions. <a
-                href="https://appwrite.io/docs/advanced/platform/api-keys#scopes"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more</a
-            >.
-        </p>
+        <svelte:fragment slot="title">Scopes</svelte:fragment>
+        Select scopes to grant the dynamic key generated temporarily for your function. It is best practice
+        to allow only necessary permissions.
+        <Link href="https://appwrite.io/docs/advanced/platform/api-keys#scopes" external
+            >Learn more</Link
+        >.
         <svelte:fragment slot="aside">
             {#if functionScopes !== null}
                 <Scopes bind:scopes={functionScopes} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateTimeout.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateTimeout.svelte
index 5ecacc841..a7a60bcd8 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateTimeout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateTimeout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputNumber } from '$lib/elements/forms';
+    import { Button, Form, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -12,7 +12,7 @@
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
 
-    const functionId = $page.params.function;
+    const functionId = page.params.function;
     let timeout: number = null;
 
     onMount(async () => {
@@ -25,7 +25,7 @@
                 throw new Error(`Invalid runtime: ${$func.runtime}`);
             }
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .functions.update(
                     functionId,
                     $func.name,
@@ -64,17 +64,15 @@
 
 <Form onSubmit={updateTimeout}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="timeout">Timeout</Heading>
-        <p>Limit the execution time of your function. Maximum value is 900 seconds (15 minutes).</p>
+        <svelte:fragment slot="title">Timeout</svelte:fragment>
+        Limit the execution time of your function. The maximum value is 900 seconds (15 minutes).
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputNumber
-                    min={1}
-                    max={900}
-                    id="time"
-                    label="Time (in seconds)"
-                    bind:value={timeout} />
-            </FormList>
+            <InputNumber
+                min={1}
+                max={900}
+                id="time"
+                label="Time (in seconds)"
+                bind:value={timeout} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/store.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/store.ts
index b38f241a9..3df9875a4 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/store.ts
@@ -1,6 +1,8 @@
+import { derived, get, writable, type Writable } from 'svelte/store';
+import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
+import type { Column } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
 import { page } from '$app/stores';
-import { derived, writable, type Writable } from 'svelte/store';
-import type { Models } from '@appwrite.io/console';
 
 export const func = derived(page, ($page) => $page.data.function as Models.Function);
 export const deploymentList = derived(
@@ -23,3 +25,146 @@ export const repositories: Writable<{
 });
 
 export const showCreateDeployment: Writable<boolean> = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Deployment ID', type: 'string', width: { min: 210, max: 250 } },
+    {
+        id: 'status',
+        title: 'Status',
+        type: 'enum',
+        width: { min: 110, max: 140 },
+        array: true,
+        format: 'enum',
+        elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
+        filter: false
+    },
+    {
+        id: 'buildDuration',
+        title: 'Build duration',
+        type: 'integer',
+        width: { min: 110 },
+        elements: [
+            {
+                value: 15,
+                label: 'more than 15 seconds'
+            },
+            {
+                value: 60,
+                label: 'more than 1 minute'
+            },
+            {
+                value: 5 * 60,
+                label: 'more than 5 minutes'
+            }
+        ],
+        filter: false
+    },
+    {
+        id: 'totalSize',
+        title: 'Total size',
+        type: 'integer',
+        width: { min: 140, max: 160 },
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'sourceSize',
+        title: 'Source size',
+        type: 'integer',
+        hide: true,
+        width: { min: 140, max: 160 },
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'buildSize',
+        title: 'Build size',
+        type: 'integer',
+        hide: true,
+        width: { min: 110, max: 130 },
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'type',
+        title: 'Source',
+        type: 'string',
+        width: { min: 140, max: 160 },
+        array: true,
+        format: 'enum',
+        elements: [
+            { value: 'manual', label: 'Manual' },
+            { value: 'cli', label: 'CLI' },
+            { value: 'vcs', label: 'Git' }
+        ]
+    },
+    {
+        id: '$updatedAt',
+        title: 'Updated',
+        type: 'datetime',
+        width: { min: 150, max: 180 },
+        format: 'datetime'
+    }
+]);
+
+export function getOutputDownload(funcId: string, deploymentId: string) {
+    const p = get(page);
+    return (
+        sdk
+            .forProject(p.params.region, p.params.project)
+            .functions.getDeploymentDownload(
+                funcId,
+                deploymentId.toString(),
+                DeploymentDownloadType.Output
+            ) + '&mode=admin'
+    );
+}
+export function getSourceDownload(funcId: string, deploymentId: string) {
+    const p = get(page);
+
+    return (
+        sdk
+            .forProject(p.params.region, p.params.project)
+            .functions.getDeploymentDownload(
+                funcId,
+                deploymentId.toString(),
+                DeploymentDownloadType.Source
+            ) + '&mode=admin'
+    );
+}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte
index ce79e188f..e5cf9ce3b 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte
@@ -1,38 +1,39 @@
 <script lang="ts">
-    import { DropList, DropListItem, DropListLink, Id } from '$lib/components';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
+    import { Id } from '$lib/components';
     import type { PageData } from './$types';
     import { type Models } from '@appwrite.io/console';
     import type { Column } from '$lib/helpers/types';
-    import { Pill } from '$lib/elements';
-    import { calculateTime } from '$lib/helpers/timeConversion';
-    import DeploymentSource from './deploymentSource.svelte';
-    import DeploymentBy from './deploymentBy.svelte';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
     import { timer } from '$lib/actions/timer';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { func } from './store';
-    import { page } from '$app/stores';
-    import Delete from './delete.svelte';
-    import Activate from './activate.svelte';
-    import RedeployModal from './redeployModal.svelte';
+    import { page } from '$app/state';
+    import Activate from './(modals)/activateModal.svelte';
+    import RedeployModal from './(modals)/redeployModal.svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import Cancel from './cancel.svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import Cancel from './(modals)/cancelDeploymentModal.svelte';
     import { base } from '$app/paths';
+    import { ActionMenu, Icon, Status, Table } from '@appwrite.io/pink-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import {
+        IconDotsHorizontal,
+        IconLightningBolt,
+        IconRefresh,
+        IconTrash,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';
+    import { Button } from '$lib/elements/forms';
+    import { DeploymentCreatedBy, DeploymentSource } from '$lib/components/git';
+    import Delete from './(modals)/deleteModal.svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { deploymentStatusConverter } from '$lib/stores/git';
+    import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
+    import { Menu } from '$lib/components/menu';
 
     export let columns: Column[];
     export let data: PageData;
 
-    let showDropdown = [];
     let showDelete = false;
     let showActivate = false;
     let showRedeploy = false;
@@ -43,157 +44,124 @@
     function handleActivate() {
         invalidate(Dependencies.DEPLOYMENTS);
     }
-
-    function getDownload(deploymentId: string) {
-        return (
-            sdk
-                .forProject($page.params.region, $page.params.project)
-                .functions.getDeploymentDownload($func.$id, deploymentId)
-                .toString() + '&mode=admin'
-        );
-    }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        {#each columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root columns={[...columns, { id: 'actions', width: 40 }]} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>
+                {title}
+            </Table.Header.Cell>
         {/each}
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each data.deploymentList.deployments as deployment, index (deployment.$id)}
-            <TableRow>
-                {#each columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key column.id}
-                                <TableCell width={column.width} title="Deployment ID">
-                                    <Id value={deployment.$id}>{deployment.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'status'}
-                            <TableCell width={column.width} title={column.title}>
-                                {@const status = deployment.status}
-                                {#if data?.activeDeployment?.$id === deployment?.$id}
-                                    <Pill success>
-                                        <span class="icon-lightning-bolt" aria-hidden="true" />
-                                        <span class="text u-trim">active</span>
-                                    </Pill>
-                                {:else}
-                                    <Pill
-                                        danger={status === 'failed'}
-                                        warning={status === 'building'}
-                                        info={status === 'ready'}>
-                                        {status}
-                                    </Pill>
-                                {/if}
-                            </TableCell>
-                        {:else if column.id === 'type'}
-                            <TableCell width={column.width} title={column.title}>
-                                <DeploymentSource {deployment} />
-                            </TableCell>
-                        {:else if column.id === '$createdAt'}
-                            <TableCellText width={column.width} title={column.title}>
-                                <DeploymentBy {deployment} type="create" />
-                            </TableCellText>
-                        {:else if column.id === '$updatedAt'}
-                            <TableCellText width={column.width} title={column.title}>
-                                <DeploymentBy {deployment} type="update" />
-                            </TableCellText>
-                        {:else if column.id === 'buildTime'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {#if ['processing', 'building'].includes(deployment.status)}
-                                    <span use:timer={{ start: deployment.$createdAt }} />
-                                {:else}
-                                    {calculateTime(deployment.buildTime)}
-                                {/if}
-                            </TableCellText>
-                        {:else if column.id === 'size'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {calculateSize(deployment.size)}
-                            </TableCellText>
-                        {:else if column.id === 'buildSize'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {calculateSize(deployment.buildSize)}
-                            </TableCellText>
+        <Table.Header.Cell column="actions" {root} />
+    </svelte:fragment>
+    {#each data.deploymentList.deployments as deployment (deployment.$id)}
+        <Table.Row.Link
+            {root}
+            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployment-${deployment.$id}`}>
+            {#each columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Id value={deployment.$id}>{deployment.$id}</Id>
+                        {/key}
+                    {:else if column.id === 'status'}
+                        {@const status = deployment.status}
+
+                        {#if data?.activeDeployment?.$id === deployment?.$id}
+                            <Status status="complete" label="Active" />
+                        {:else}
+                            <Status
+                                status={deploymentStatusConverter(status)}
+                                label={capitalize(status)} />
                         {/if}
+                    {:else if column.id === 'type'}
+                        <DeploymentSource {deployment} />
+                    {:else if column.id === '$updatedAt'}
+                        <DeploymentCreatedBy {deployment} />
+                    {:else if column.id === 'buildDuration'}
+                        {#if ['waiting'].includes(deployment.status)}
+                            -
+                        {:else if ['processing', 'building'].includes(deployment.status)}
+                            <span use:timer={{ start: deployment.$createdAt }}></span>
+                        {:else}
+                            {formatTimeDetailed(deployment.buildDuration)}
+                        {/if}
+                    {:else if column.id === 'totalSize'}
+                        {calculateSize(deployment.totalSize)}
+                    {:else if column.id === 'sourceSize'}
+                        {calculateSize(deployment.sourceSize)}
+                    {:else if column.id === 'buildSize'}
+                        {calculateSize(deployment.buildSize)}
                     {/if}
-                {/each}
-                <TableCell width={40} showOverflow>
-                    <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
-                        <button
-                            class="button is-only-icon is-text"
-                            aria-label="More options"
-                            on:click|preventDefault={() => {
-                                showDropdown[index] = !showDropdown[index];
-                            }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </button>
-                        <svelte:fragment slot="list">
-                            <DropListItem
-                                icon="refresh"
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="actions" {root}>
+                <Menu>
+                    <Button text icon size="s">
+                        <Icon size="s" icon={IconDotsHorizontal} />
+                    </Button>
+
+                    <svelte:fragment slot="menu" let:toggle>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button
+                                trailingIcon={IconRefresh}
                                 on:click={() => {
                                     selectedDeployment = deployment;
                                     showRedeploy = true;
-                                    showDropdown = [];
+                                    toggle();
+                                    trackEvent(Click.FunctionsRedeployClick);
                                 }}>
                                 Redeploy
-                            </DropListItem>
-                            {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
-                                <DropListItem
-                                    icon="lightning-bolt"
+                            </ActionMenu.Item.Button>
+                            {#if deployment.status === 'ready' && deployment.$id !== $func.deploymentId}
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconLightningBolt}
                                     on:click={() => {
                                         selectedDeployment = deployment;
                                         showActivate = true;
-                                        showDropdown = [];
+                                        toggle();
                                     }}>
                                     Activate
-                                </DropListItem>
+                                </ActionMenu.Item.Button>
                             {/if}
-                            <DropListLink
-                                icon="terminal"
-                                href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
-                                Logs
-                            </DropListLink>
-                            <DropListLink
-                                icon="download"
-                                href={getDownload(deployment.$id)}
-                                on:click={() => (showDropdown[index] = false)}>
-                                Download
-                            </DropListLink>
+
+                            <DownloadActionMenuItem {deployment} {toggle} />
+
                             {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
-                                <DropListItem
-                                    icon="x-circle"
-                                    event="deployment_cancel"
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconXCircle}
                                     on:click={() => {
                                         selectedDeployment = deployment;
-                                        showDropdown = [];
+                                        toggle();
+
                                         showCancel = true;
+                                        trackEvent(Click.FunctionsDeploymentCancelClick);
                                     }}>
                                     Cancel
-                                </DropListItem>
+                                </ActionMenu.Item.Button>
                             {/if}
                             {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
-                                <DropListItem
-                                    icon="trash"
+                                <ActionMenu.Item.Button
+                                    trailingIcon={IconTrash}
+                                    status="danger"
                                     on:click={() => {
                                         selectedDeployment = deployment;
-                                        showDropdown = [];
+                                        toggle();
+
                                         showDelete = true;
+                                        trackEvent(Click.FunctionsDeploymentDeleteClick);
                                     }}>
                                     Delete
-                                </DropListItem>
+                                </ActionMenu.Item.Button>
                             {/if}
-                        </svelte:fragment>
-                    </DropList>
-                </TableCell>
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                        </ActionMenu.Root>
+                    </svelte:fragment>
+                </Menu>
+            </Table.Cell>
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
 
 {#if selectedDeployment}
     <Delete {selectedDeployment} bind:showDelete />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index ee66b1694..30c05dd10 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
-    import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
-    import { BarChart } from '$lib/charts';
-    import { page } from '$app/stores';
-    import type { PageData } from './$types';
-    import { formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Container, Usage } from '$lib/layout';
+    import { page } from '$app/state';
     import { base } from '$app/paths';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
-    export let data: PageData;
+    export let data;
     $: total = data.executionsTotal;
     $: count = data.executions;
     $: gbHoursTotal = data.executionsMbSecondsTotal / 1000 / 3600;
@@ -15,58 +12,28 @@
 </script>
 
 <Container>
-    <div class="u-flex u-main-space-between common-section">
-        <Heading tag="h2" size="5">Functions</Heading>
-        <SecondaryTabs>
-            <SecondaryTabsItem
-                href={`${base}/project-${data.project.region}-${data.project.$id}/functions/function-${data.function.$id}/usage/24h`}
-                disabled={($page.params.period ?? '24h') === '24h'}>
-                24h
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                href={`${base}/project-${data.project.region}-${data.project.$id}/functions/function-${data.function.$id}/usage/30d`}
-                disabled={$page.params.period === '30d'}>
-                30d
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                href={`${base}/project-${data.project.region}-${data.project.$id}/functions/function-${data.function.$id}/usage/90d`}
-                disabled={$page.params.period === '90d'}>
-                90d
-            </SecondaryTabsItem>
-        </SecondaryTabs>
-    </div>
-    {#if count}
-        <Card>
-            <Heading tag="h6" size="6">{formatNumberWithCommas(total)}</Heading>
-            <p>Executions</p>
-            <div class="u-margin-block-start-16" />
-            <BarChart
-                series={[
-                    {
-                        name: 'Count of function executions over time',
-                        data: [...count.map((e) => [e.date, e.value])]
-                    }
-                ]} />
-        </Card>
-    {/if}
+    <Layout.Stack gap="l">
+        {#if count}
+            <Usage
+                path={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/usage`}
+                countMetadata={{
+                    legend: 'Executions',
+                    title: 'Total executions'
+                }}
+                {total}
+                {count} />
+        {/if}
 
-    {#if mbSecondsCount}
-        <Card>
-            <Heading tag="h6" size="6">{formatNumberWithCommas(gbHoursTotal)}</Heading>
-            <p>GB Hours</p>
-            <div class="u-margin-block-start-16" />
-            <BarChart
-                series={[
-                    {
-                        name: 'Count of gbHours over time',
-                        data: [
-                            ...mbSecondsCount.map((e) => [
-                                e.date,
-                                Math.ceil((e.value / 1000 / 3600) * 1000) / 1000
-                            ])
-                        ]
-                    }
-                ]} />
-        </Card>
-    {/if}
+        {#if mbSecondsCount}
+            <Usage
+                hidePeriodSelect
+                path={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/usage`}
+                countMetadata={{
+                    legend: 'GB hours',
+                    title: 'Total GB hours'
+                }}
+                total={gbHoursTotal}
+                count={mbSecondsCount} />
+        {/if}
+    </Layout.Stack>
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.ts
index 18656e091..6b93366f8 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.ts
@@ -11,7 +11,7 @@ export const load: PageLoad = async ({ params }) => {
             : FunctionUsageRange.ThirtyDays;
         return sdk
             .forProject(params.region, params.project)
-            .functions.getFunctionUsage(params.function, period);
+            .functions.getUsage(params.function, period);
     } catch (e) {
         error(e.code, e.message);
     }
diff --git a/src/routes/(console)/project-[region]-[project]/functions/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/header.svelte
index aab1d3d83..9cbab48b0 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/header.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    $: projectId = $page.params.project;
-    $: path = `${base}/project-${$page.params.region}-${projectId}/functions`;
+    $: projectId = page.params.project;
+    $: path = `${base}/project-${page.params.region}-${projectId}/functions`;
     $: tabs = [
         {
             href: path,
@@ -18,20 +19,25 @@
             href: `${path}/templates`,
             title: 'Templates',
             event: 'templates'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage'
         }
     ];
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle>Functions</CoverTitle>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Functions</Typography.Title>
     </svelte:fragment>
 
     <Tabs>
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
index d07d9690a..f1e393732 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
@@ -1,35 +1,44 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip.js';
-    import {
-        Collapsible,
-        CollapsibleItem,
-        EmptySearch,
-        Heading,
-        Pagination,
-        SvgIcon
-    } from '$lib/components';
-    import { Button, InputSearch } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import { EmptyFilter, EmptySearch, Paginator, SearchQuery, SvgIcon } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import { Container, ContainerButton } from '$lib/layout';
-    import { app } from '$lib/stores/app';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { canWriteFunctions } from '$lib/stores/roles';
-    import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
     import type { Models } from '@appwrite.io/console';
     import { functionsList } from '../store';
-    import { debounce } from '$lib/helpers/debounce';
+    import {
+        Accordion,
+        AvatarGroup,
+        Layout,
+        Selector,
+        Tooltip,
+        Typography,
+        Card as PinkCard
+    } from '@appwrite.io/pink-svelte';
     import { capitalize } from '$lib/helpers/string';
+    import Card from '$lib/components/card.svelte';
+    import Link from '$lib/elements/link.svelte';
+    import Avatar from '$lib/components/avatar.svelte';
+    import { getIconFromRuntime } from '$lib/stores/runtimes';
 
     export let data;
 
-    function applyFilter(filter: string, value: string, event: Event) {
-        const add = (event.target as EventTarget & HTMLInputElement).checked;
-        const target = new URL($page.url);
-        if (add) {
-            target.searchParams.append(filter, value);
+    let offset = 0;
+
+    function applyFilter(filter: string, value: string, event: CustomEvent) {
+        const target = new URL(page.url);
+        if (event?.detail) {
+            if (
+                !target.searchParams
+                    .getAll(filter)
+                    .some((n) => n.toLowerCase() === value.toLowerCase())
+            ) {
+                target.searchParams.append(filter, value);
+            }
         } else {
             const previous = target.searchParams
                 .getAll(filter)
@@ -38,11 +47,12 @@
             previous.forEach((n) => target.searchParams.append(filter, n));
         }
         target.searchParams.delete('page');
+        offset = 0;
         goto(target.toString());
     }
 
     function clearSearch() {
-        const target = new URL($page.url);
+        const target = new URL(page.url);
         target.search = '';
         goto(target.toString());
     }
@@ -59,62 +69,12 @@
         return [...baseRuntimes.values()];
     }
 
-    function getIconFromRuntime(runtime: string) {
-        switch (true) {
-            case runtime.includes('node'):
-                return 'node';
-            case runtime.includes('php'):
-                return 'php';
-            case runtime.includes('ruby'):
-                return 'ruby';
-            case runtime.includes('python'):
-                return 'python';
-            case runtime.includes('dart'):
-                return 'dart';
-            case runtime.includes('bun'):
-                return 'bun';
-            case runtime.includes('go'):
-                return 'go';
-            case runtime.includes('deno'):
-                return 'deno';
-            default:
-                return undefined;
-        }
-    }
-
-    function applySearch(event: CustomEvent<string>) {
-        debounce(() => {
-            const value = event.detail;
-            const target = new URL($page.url);
-
-            if (value.length > 0) {
-                target.searchParams.set('search', value);
-            } else {
-                target.searchParams.delete('search');
-            }
-            target.searchParams.delete('page');
-            goto(target.toString(), { keepFocus: true });
-        }, 250)();
-    }
-
-    $: isChecked = (useCase: string) => {
-        return $page.url.searchParams
+    const isChecked = (useCase: string) => {
+        return page.url.searchParams
             .getAll('useCase')
             .some((param) => param.toLowerCase() === useCase.toLowerCase());
     };
 
-    $: getErrorMessage = () => {
-        const searchParams = $page.url.searchParams;
-        const paramsArray = Array.from(searchParams.entries());
-
-        if (paramsArray.length === 1) {
-            const [_, value] = paramsArray[0];
-            return `Sorry, we couldn't find "${value}".`;
-        } else if (paramsArray.length > 1) {
-            return `Sorry, we couldn't find any results with the applied filters.`;
-        }
-    };
-
     $: buttonDisabled = isServiceLimited(
         'functions',
         $organization?.billingPlan,
@@ -123,186 +83,156 @@
 </script>
 
 <Container>
-    <div class="u-flex u-gap-8 u-cross-center">
-        <Heading tag="h2" size="5">Templates</Heading>
-        <div class="tag eyebrow-heading-3">
-            <span class="text u-x-small">Experimental</span>
-        </div>
-    </div>
-    <div class="grid-300px-1fr u-margin-block-start-24">
-        <section>
-            <InputSearch
-                placeholder="Search templates"
-                value={$page.url.searchParams.get('search')}
-                on:clear={clearSearch}
-                on:change={applySearch} />
-            <div class="u-margin-block-start-24">
-                <Collapsible>
-                    <CollapsibleItem>
-                        <svelte:fragment slot="title">Use case</svelte:fragment>
-                        <ul class="form-list u-row-gap-16">
-                            {#each [...data.useCases] as useCase}
-                                <li class="form-item">
-                                    <label class="u-flex u-cross-center u-gap-16">
-                                        <input
-                                            type="checkbox"
-                                            class="is-small"
-                                            checked={isChecked(useCase)}
-                                            on:change={(e) => applyFilter('useCase', useCase, e)} />
-                                        <span class="u-trim-1">{capitalize(useCase)}</span>
-                                    </label>
-                                </li>
+    <Layout.GridFraction start={1} end={3} gap="xxl">
+        <Layout.Stack gap="xl">
+            <SearchQuery placeholder="Search template" />
+            <Layout.Stack>
+                <Accordion title="Use case">
+                    <Layout.Stack>
+                        {#each [...data.useCases] as useCase}
+                            <Layout.Stack direction="row" gap="s">
+                                <Selector.Checkbox
+                                    id={useCase}
+                                    size="s"
+                                    label={useCase === 'ai'
+                                        ? useCase.toUpperCase()
+                                        : capitalize(useCase)}
+                                    checked={isChecked(useCase)}
+                                    on:change={(e) => {
+                                        console.log(useCase, e);
+                                        applyFilter('useCase', useCase, e);
+                                    }} />
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion title="Runtime">
+                    <Layout.Stack>
+                        {#each [...data.runtimes] as runtime}
+                            <!-- {@const icon = getIconFromRuntime(runtime)} -->
+                            <Layout.Stack direction="row" gap="s">
+                                <Selector.Checkbox
+                                    id={runtime}
+                                    size="s"
+                                    label={runtime?.split('-')?.join(' ')}
+                                    checked={page.url.searchParams
+                                        .getAll('runtime')
+                                        .includes(runtime)}
+                                    on:change={(e) => applyFilter('runtime', runtime, e)} />
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+            </Layout.Stack>
+
+            <Card radius="s" padding="xs">
+                <Layout.Stack gap="xxxs">
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                        Contribute
+                    </Typography.Text>
+                    <Typography.Text variant="m-400">
+                        Got a function template idea? <Link
+                            variant="muted"
+                            external
+                            href="https://github.com/appwrite/templates/blob/main/CONTRIBUTING.md"
+                            >View the contribution guidelines.
+                        </Link>
+                    </Typography.Text>
+                </Layout.Stack>
+            </Card>
+        </Layout.Stack>
+        <Layout.Stack gap="l">
+            {#if data.templates?.length > 0}
+                <Paginator items={data.templates} limit={12} hidePages={false} hasLimit bind:offset>
+                    {#snippet children(paginatedItems: typeof data.templates)}
+                        <Layout.Grid columns={2} columnsXL={3} columnsXS={1}>
+                            {#each paginatedItems as template}
+                                {@const baseRuntimes = getBaseRuntimes(template.runtimes)}
+                                {@const displayed = baseRuntimes.slice(0, 2)}
+                                {@const hidden = baseRuntimes.slice(1, -1)}
+                                <PinkCard.Base radius="m" padding="xs">
+                                    <Layout.Stack
+                                        height="100%"
+                                        justifyContent="space-between"
+                                        gap="xl">
+                                        <Layout.Stack gap="xxxs">
+                                            <Typography.Text
+                                                variant="m-500"
+                                                color="--fgcolor-neutral-primary">
+                                                {template.name}
+                                            </Typography.Text>
+
+                                            <Typography.Text variant="m-400">
+                                                {template.tagline}
+                                            </Typography.Text>
+                                        </Layout.Stack>
+
+                                        <Layout.Stack
+                                            direction="row"
+                                            justifyContent="space-between"
+                                            alignItems="center">
+                                            <AvatarGroup>
+                                                {#each displayed as runtime}
+                                                    {@const icon = getIconFromRuntime(runtime.name)}
+                                                    {#if icon}
+                                                        <Avatar alt={runtime.name} size="xs">
+                                                            <SvgIcon name={icon} iconSize="small" />
+                                                        </Avatar>
+                                                    {/if}
+                                                {/each}
+                                                {#if hidden.length}
+                                                    <Tooltip>
+                                                        <Avatar
+                                                            alt="hidden runtime number"
+                                                            size="xs">
+                                                            <span style:font-size="10px">
+                                                                +{hidden.length}
+                                                            </span>
+                                                        </Avatar>
+                                                        <span slot="tooltip">
+                                                            {hidden.map((n) => n.name).join(', ')}
+                                                        </span>
+                                                    </Tooltip>
+                                                {/if}
+                                            </AvatarGroup>
+                                            <Layout.Stack
+                                                direction="row"
+                                                gap="s"
+                                                alignItems="center"
+                                                inline>
+                                                <Button
+                                                    href={`${base}/project-${page.params.region}-${page.params.project}/functions/templates/template-${template.id}`}
+                                                    text>
+                                                    <span class="text">Details</span>
+                                                </Button>
+                                                {#if $canWriteFunctions}
+                                                    <ContainerButton
+                                                        title="functions"
+                                                        disabled={buttonDisabled}
+                                                        buttonType="secondary"
+                                                        buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${template.id}`}
+                                                        showIcon={false}
+                                                        buttonText="Create"
+                                                        buttonEventData={{
+                                                            source: 'functions_template'
+                                                        }}
+                                                        buttonEvent="create_function" />
+                                                {/if}
+                                            </Layout.Stack>
+                                        </Layout.Stack>
+                                    </Layout.Stack>
+                                </PinkCard.Base>
                             {/each}
-                        </ul>
-                    </CollapsibleItem>
-                    <CollapsibleItem>
-                        <svelte:fragment slot="title">Runtime</svelte:fragment>
-                        <ul class="form-list u-row-gap-16">
-                            {#each [...data.runtimes] as runtime}
-                                {@const icon = getIconFromRuntime(runtime)}
-                                <li class="form-item">
-                                    <label class="u-flex u-cross-center u-gap-16">
-                                        <input
-                                            type="checkbox"
-                                            class="is-small"
-                                            checked={$page.url.searchParams
-                                                .getAll('runtime')
-                                                .includes(runtime)}
-                                            on:change={(e) => applyFilter('runtime', runtime, e)} />
-                                        <div
-                                            class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
-                                            <div class="avatar is-size-x-small">
-                                                <SvgIcon name={icon} iconSize="small" />
-                                            </div>
-                                            <div class="u-trim-1 u-capitalize">
-                                                {runtime?.split('-')?.join(' ')}
-                                            </div>
-                                        </div>
-                                    </label>
-                                </li>
-                            {/each}
-                        </ul>
-                    </CollapsibleItem>
-                </Collapsible>
-            </div>
-
-            <section class="card u-margin-block-start-24">
-                <h4 class="body-text-1 u-bold">Contribute</h4>
-                <p class="u-margin-block-start-16">
-                    Have an idea for a function template? View our <a
-                        class="link"
-                        href="https://github.com/appwrite/templates/blob/main/CONTRIBUTING.md"
-                        target="_blank">contribution guidelines</a
-                    >.
-                </p>
-            </section>
-        </section>
-        <section>
-            {#if data.templates.length > 0}
-                <ul
-                    class="grid-box"
-                    style="--grid-item-size:22rem; --grid-item-size-small-screens:19rem">
-                    {#each data.templates as template}
-                        {@const baseRuntimes = getBaseRuntimes(template.runtimes)}
-                        {@const displayed = baseRuntimes.slice(0, 2)}
-                        {@const hidden = baseRuntimes.slice(1, -1)}
-                        <li>
-                            <article class="card u-min-height-100-percent">
-                                <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
-                                    <h2
-                                        class="body-text-1 u-bold u-trim-1 functions-template-title">
-                                        {template.name}
-                                    </h2>
-                                    <ul class="avatars-group is-with-border">
-                                        {#each displayed as runtime}
-                                            {@const icon = getIconFromRuntime(runtime.name)}
-                                            {#if icon}
-                                                <li
-                                                    class="avatars-group-item functions-avatar-holder">
-                                                    <div class="avatar is-size-small">
-                                                        <img
-                                                            style:--p-text-size="20px"
-                                                            src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                                                            alt={icon}
-                                                            aria-hidden="true"
-                                                            aria-label={icon} />
-                                                    </div>
-                                                </li>
-                                            {/if}
-                                        {/each}
-                                        {#if hidden.length}
-                                            <li class="avatars-group-item functions-avatar-holder">
-                                                <div
-                                                    class="avatar is-size-small"
-                                                    use:tooltip={{
-                                                        content: hidden
-                                                            .map((n) => n.name)
-                                                            .join(', ')
-                                                    }}>
-                                                    +{hidden.length}
-                                                </div>
-                                            </li>
-                                        {/if}
-                                    </ul>
-                                </div>
-
-                                <p class="u-margin-block-start-20 u-trim-2 u-break-word">
-                                    {template.tagline}
-                                </p>
-
-                                <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
-                                    <Button
-                                        href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/templates/template-${template.id}`}
-                                        text>
-                                        <span class="text">View details</span>
-                                    </Button>
-                                    {#if $canWriteFunctions}
-                                        <ContainerButton
-                                            title="functions"
-                                            disabled={buttonDisabled}
-                                            buttonType="secondary"
-                                            buttonMethod={() => connectTemplate(template)}
-                                            showIcon={false}
-                                            buttonText="Create function"
-                                            buttonEvent="create_function" />
-                                    {/if}
-                                </div>
-                            </article>
-                        </li>
-                    {/each}
-                </ul>
-            {:else}
-                <EmptySearch hidePagination>
-                    <div class="common-section">
-                        <div class="u-text-center common-section">
-                            <b class="body-text-2 u-bold">{getErrorMessage()}</b>
-                            <p>There are no templates that match your search.</p>
-                        </div>
-                        <div class="u-flex u-gap-16 common-section u-main-center">
-                            <Button secondary on:click={clearSearch}>Clear search</Button>
-                        </div>
-                    </div>
+                        </Layout.Grid>
+                    {/snippet}
+                </Paginator>
+            {:else if data?.search}
+                <EmptySearch hidePagination search={data.search}>
+                    <Button secondary on:click={clearSearch}>Clear search</Button>
                 </EmptySearch>
+            {:else if data?.filter}
+                <EmptyFilter resource="templates"></EmptyFilter>
             {/if}
-            <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
-                <p class="text">Total templates: {data.sum}</p>
-                <Pagination limit={data.limit} offset={data.offset} sum={data.sum} />
-            </div>
-        </section>
-    </div>
+        </Layout.Stack>
+    </Layout.GridFraction>
 </Container>
-
-<style>
-    :global(.theme-light .functions-avatar-holder .avatar) {
-        background-color: var(--p-avatar-bg-color-default);
-        --p-avatar-bg-color-default: hsl(var(--color-neutral-0));
-    }
-
-    :global(.theme-light .functions-template-title) {
-        color: hsl(var(--color-neutral-70));
-    }
-
-    :global(.theme-dark .functions-template-title) {
-        color: hsl(var(--color-neutral-15));
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts
index 0b29728e1..6c252e152 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts
@@ -1,16 +1,12 @@
-import { CARD_LIMIT, Dependencies } from '$lib/constants';
-import { getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
+import { Dependencies } from '$lib/constants';
+import { getSearch } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, route, depends, parent, params }) => {
+export const load: PageLoad = async ({ url, depends, parent, params }) => {
     depends(Dependencies.FUNCTIONS);
 
-    const limit = CARD_LIMIT;
-    const page = getPage(url);
     const search = getSearch(url);
-    const view = getView(params.project, url, route, View.Grid);
-    const offset = pageToOffset(page, limit);
     const filter = {
         useCases: url.searchParams.getAll('useCase'),
         runtimes: url.searchParams.getAll('runtime')
@@ -51,14 +47,11 @@ export const load: PageLoad = async ({ url, route, depends, parent, params }) =>
     });
 
     return {
-        offset,
-        limit,
-        view,
         filter,
         runtimes,
         useCases,
-        sum: templates.length,
-        templates: templates.splice(((page === 0 ? 1 : page) - 1) * limit, limit),
+        search,
+        templates,
         functions: await sdk.forProject(params.region, params.project).functions.list()
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
index e07244345..4f5ca68a1 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
@@ -1,106 +1,104 @@
 <script lang="ts">
-    import { Card, Collapsible, Heading } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Card } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container, ContainerButton } from '$lib/layout';
     import { isCloud } from '$lib/system';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
-    import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
     import { template } from './store';
     import { app } from '$lib/stores/app';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { functionsList } from '../../store';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import {
+        Layout,
+        Typography,
+        Card as PinkCard,
+        Image,
+        Badge,
+        Divider,
+        Icon
+    } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { capitalize } from '$lib/helpers/string';
+    import { IconExternalLink } from '@appwrite.io/pink-icons-svelte';
 
     $: buttonDisabled =
         isCloud && isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total);
 </script>
 
 <Container>
-    <div class="grid-300px-1fr">
-        <section>
-            <Collapsible>
-                <li class="collapsible-item-divider collapsible-item">
-                    <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
-                        Use cases
-                        <span class="inline-tag">{$template.useCases.length}</span>
-                    </h3>
-                    <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
-                        {#each $template.useCases as useCase}
-                            <Pill>{useCase}</Pill>
-                        {/each}
-                    </div>
-                </li>
-                <li class="collapsible-item-divider collapsible-item">
-                    <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
-                        Runtimes
-                        <span class="inline-tag">{$template.runtimes.length}</span>
-                    </h3>
-                    <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
-                        {#each $template.runtimes as runtime}
-                            <Pill>{runtime.name}</Pill>
-                        {/each}
-                    </div>
-                </li>
-                <li class="collapsible-item-divider collapsible-item">
-                    <section class="card u-margin-block-start-24">
-                        <h4 class="body-text-1 u-bold">Published by</h4>
-                        <img
-                            class="u-margin-block-start-8"
-                            src={$app.themeInUse === 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
-                            width="120"
-                            height="22"
-                            alt="Appwrite" />
-                    </section>
-                </li>
-            </Collapsible>
-        </section>
-        <section>
-            <Card>
-                <Heading size="7" tag="h3">
-                    <span class="u-flex u-cross-center u-gap-16 functions-avatar-holder">
-                        <div class="avatar is-size-small">
-                            <span
-                                style:--p-text-size="20px"
-                                class={$template.icon}
-                                aria-hidden="true" />
-                        </div>
-                        {$template.name}
-                    </span>
-                </Heading>
-                <p class="u-margin-block-start-24">{$template.tagline}</p>
+    <Layout.GridFraction start={1} end={3} gap="xxl">
+        <div>
+            <PinkCard.Base radius="s" padding="s">
+                <Layout.Stack gap="s">
+                    <Typography.Text color="--fgcolor-neutral-tertiary"
+                        >Published by</Typography.Text>
+                    <Image
+                        fit="contain"
+                        src={$app.themeInUse === 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
+                        width={120}
+                        height={22}
+                        alt="Appwrite" />
+                </Layout.Stack>
+            </PinkCard.Base>
+        </div>
+        <Card radius="m" padding="s">
+            <Layout.Stack gap="xl">
+                <Layout.Stack gap="l">
+                    <Layout.Stack gap="xxs">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                            About
+                        </Typography.Text>
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                            {$template.tagline}
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Layout.Stack gap="xxs">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                            Use cases
+                        </Typography.Text>
+                        <Layout.Stack direction="row" gap="xs" wrap="wrap">
+                            {#each $template.useCases as useCase}
+                                <Badge variant="secondary" size="s" content={capitalize(useCase)} />
+                            {/each}
+                        </Layout.Stack>
+                    </Layout.Stack>
+                    <Layout.Stack gap="xxs">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                            Runtimes
+                        </Typography.Text>
+                        <Layout.Stack direction="row" gap="xs" wrap="wrap">
+                            {#each $template.runtimes as runtime}
+                                <Badge variant="secondary" size="s" content={runtime.name} />
+                            {/each}
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Layout.Stack>
 
-                <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24 u-flex-wrap">
+                <Divider />
+
+                <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
                     <Button
-                        text
+                        secondary
                         href={`https://github.com/${$template.providerOwner}/${$template.providerRepositoryId}`}
                         external>
                         View source
-                        <span class="icon-external-link" />
+                        <Icon icon={IconExternalLink} size="s" slot="end" />
                     </Button>
                     {#if $canWriteFunctions}
                         <ContainerButton
                             title="functions"
                             disabled={buttonDisabled}
-                            buttonMethod={() => connectTemplate($template)}
+                            buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${$template.id}`}
                             showIcon={false}
                             buttonText="Create function"
                             buttonEvent="create_function" />
                     {/if}
-                </div>
-            </Card>
-        </section>
-    </div>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card>
+    </Layout.GridFraction>
 </Container>
-
-<style>
-    :global(.theme-dark .collapsible-item-divider:where(:not(:last-child))) {
-        border-block-end: solid 0.0625rem hsl(var(--color-neutral-85));
-    }
-
-    :global(.theme-light .collapsible-item-divider:where(:not(:last-child))) {
-        border-block-end: solid 0.0625rem hsl(var(--color-neutral-10));
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte
index 5ce5a84de..2fc2c6e42 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { template } from './store';
@@ -9,7 +9,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            href={`${base}/project-${$page.params.region}-${$page.params.project}/functions/templates`}>
+            href={`${base}/project-${page.params.region}-${page.params.project}/functions/templates`}>
             {$template.name}
         </CoverTitle>
         <Id value={$template.id} event="user">{$template.id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
new file mode 100644
index 000000000..a91d5a6f3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Container, Usage } from '$lib/layout';
+
+    export let data;
+    $: total = data.deploymentsTotal;
+    $: count = data.deployments;
+</script>
+
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/functions/usage`}
+        countMetadata={{
+            legend: 'Functions',
+            title: 'Total functions'
+        }}
+        {total}
+        {count} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.ts
new file mode 100644
index 000000000..ced4841d8
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { FunctionUsageRange } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(FunctionUsageRange, params.period)
+        ? params.period
+        : FunctionUsageRange.ThirtyDays;
+    try {
+        return sdk.forProject(params.region, params.project).functions.listUsage(period);
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[region]-[project]/functions/wizard/step1.svelte b/src/routes/(console)/project-[region]-[project]/functions/wizard/step1.svelte
deleted file mode 100644
index d8c08dd1e..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/wizard/step1.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-    import { CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, InputSelect, FormList } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { onMount } from 'svelte';
-    import { createFunction } from './store';
-    import { runtimesList } from '$lib/stores/runtimes';
-
-    let showCustomId = false;
-
-    let options = [];
-
-    onMount(async () => {
-        options = (await $runtimesList).runtimes.map((runtime) => ({
-            label: `${runtime.name} - ${runtime.version}`,
-            value: runtime.$id
-        }));
-    });
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Configuration</svelte:fragment>
-    <svelte:fragment slot="subtitle">Create your new Appwrite Function.</svelte:fragment>
-    <FormList>
-        <InputText
-            label="Name"
-            id="name"
-            placeholder="Function name"
-            autofocus
-            bind:value={$createFunction.name}
-            required />
-        <InputText
-            label="Entrypoint"
-            id="entrypoint"
-            placeholder="Entrypoint"
-            bind:value={$createFunction.entrypoint}
-            required />
-        <InputSelect
-            label="Runtime"
-            id="runtime"
-            placeholder="Select runtime"
-            bind:value={$createFunction.runtime}
-            {options}
-            required />
-        {#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
-                autofocus
-                bind:show={showCustomId}
-                name="Function"
-                bind:id={$createFunction.id}
-                fullWidth />
-        {/if}
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/wizard/step2.svelte b/src/routes/(console)/project-[region]-[project]/functions/wizard/step2.svelte
deleted file mode 100644
index bac95bfbe..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/wizard/step2.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { createFunction } from './store';
-    import { Roles } from '$lib/components/permissions';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose which users have permission to execute this function using Client SDKs. For more
-        information, visit our <a
-            href="https://appwrite.io/docs/advanced/platform/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            permissions documentation
-        </a>.
-    </svelte:fragment>
-
-    <Roles bind:roles={$createFunction.execute} />
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/wizard/step3.svelte b/src/routes/(console)/project-[region]-[project]/functions/wizard/step3.svelte
deleted file mode 100644
index 79bbc1ed2..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/wizard/step3.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { Button } from '$lib/elements/forms';
-    import { Empty } from '$lib/components';
-    import { createFunction } from './store';
-    import { EventModal } from '$lib/components';
-    import { TableList, TableCellText, TableCell } from '$lib/elements/table';
-
-    let showCreate = false;
-
-    let eventSet = new Set<string>();
-
-    function handleCreated(event: CustomEvent) {
-        eventSet.add(event.detail);
-        $createFunction.events = Array.from(eventSet);
-    }
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Events</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Set the events that will trigger your function. Maximum 100 events allowed.<a
-            href="https://appwrite.io/docs/advanced/platform/events"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Learn more about events.
-        </a>.
-    </svelte:fragment>
-
-    {#if $createFunction?.events?.length}
-        <TableList>
-            {#each $createFunction.events as event}
-                <li class="table-row">
-                    <TableCellText title="id">
-                        {event}
-                    </TableCellText>
-                    <TableCell showOverflow title="options" width={40}>
-                        <button
-                            class="button is-text is-only-icon"
-                            aria-label="delete id"
-                            on:click|preventDefault={() => {
-                                eventSet.delete(event);
-                                $createFunction.events = Array.from(eventSet);
-                            }}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    </TableCell>
-                </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 on:click={() => (showCreate = !showCreate)}>Add an event</Empty>
-    {/if}
-</WizardStep>
-
-{#if showCreate}
-    <EventModal bind:show={showCreate} on:created={handleCreated}>
-        <p class="text">
-            Select events in your Appwrite project that will trigger your function. <a
-                href="https://appwrite.io/docs/advanced/platform/events"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more about Appwrite Events</a
-            >.
-        </p>
-    </EventModal>
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/wizard/step4.svelte b/src/routes/(console)/project-[region]-[project]/functions/wizard/step4.svelte
deleted file mode 100644
index 4d889bdaa..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/wizard/step4.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { FormList, InputCron } from '$lib/elements/forms';
-    import { createFunction } from './store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Schedule</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Set a Cron schedule to trigger your function. Leave blank for no schedule. <a
-            href="https://appwrite.io/docs/products/functions/execution#schedule"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">More details on Cron syntax here</a
-        >.
-    </svelte:fragment>
-    <FormList>
-        <InputCron
-            bind:value={$createFunction.schedule}
-            label="Schedule (Cron Syntax)"
-            id="schedule" />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/wizard/step5.svelte b/src/routes/(console)/project-[region]-[project]/functions/wizard/step5.svelte
deleted file mode 100644
index de82a6657..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/wizard/step5.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { createFunction } from './store';
-    import Create from '../../createVariable.svelte';
-    import { DropList, DropListItem, Secret, Empty, Output } from '$lib/components';
-    import type { Models } from '@appwrite.io/console';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import { Button } from '$lib/elements/forms';
-
-    let showCreate = false;
-
-    let selectedVar: Partial<Models.Variable> = null;
-    let showDropdown = [];
-
-    function handleCreated(dispatchEvent: CustomEvent) {
-        createFunction.update((n) => {
-            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;
-        });
-    }
-    function handleUpdated(dispatchEvent: CustomEvent) {
-        createFunction.update((n) => {
-            n.vars = n.vars.map((v) => (v.key === selectedVar.key ? dispatchEvent.detail : v));
-            return n;
-        });
-    }
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Variables</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Create the environment variables or secret keys that will be passed to your function. <a
-            href="https://appwrite.io/docs/advanced/platform/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            permissions documentation
-        </a>.
-    </svelte:fragment>
-    {#if $createFunction.vars.length}
-        <Table noStyles>
-            <TableHeader>
-                <TableCellHead>Key</TableCellHead>
-                <TableCellHead>Value</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-
-            <TableBody>
-                {#each $createFunction.vars as variable, i}
-                    <TableRow>
-                        <TableCell title="key">
-                            <Output value={variable.key}>
-                                {variable.key}
-                            </Output>
-                        </TableCell>
-                        <TableCell showOverflow title="value">
-                            <Secret copyEvent="variable" value={variable.value} />
-                        </TableCell>
-                        <TableCell showOverflow title="options">
-                            <DropList bind:show={showDropdown[i]} placement="bottom-start" noArrow>
-                                <Button
-                                    text
-                                    round
-                                    ariaLabel="more options"
-                                    on:click={() => (showDropdown[i] = !showDropdown[i])}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </Button>
-                                <svelte:fragment slot="list">
-                                    <DropListItem
-                                        icon="pencil"
-                                        on:click={() => {
-                                            selectedVar = $createFunction.vars[i];
-                                            showDropdown[i] = false;
-                                            showCreate = true;
-                                        }}>
-                                        Edit
-                                    </DropListItem>
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            $createFunction.vars.splice(i, 1);
-                                            $createFunction = $createFunction;
-                                            showDropdown[i] = false;
-                                        }}>
-                                        Delete
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </TableCell>
-                    </TableRow>
-                {/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}
-        <Empty on:click={() => (showCreate = !showCreate)}>Create a variable</Empty>
-    {/if}
-</WizardStep>
-
-{#if showCreate}
-    <Create
-        isGlobal={false}
-        bind:selectedVar
-        bind:showCreate
-        on:created={handleCreated}
-        on:updated={handleUpdated} />
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/wizard/store.ts b/src/routes/(console)/project-[region]-[project]/functions/wizard/store.ts
deleted file mode 100644
index 3edb18648..000000000
--- a/src/routes/(console)/project-[region]-[project]/functions/wizard/store.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Models } from '@appwrite.io/console';
-import { writable } from 'svelte/store';
-
-export const createFunction = writable<{
-    id?: string;
-    name: string;
-    entrypoint: string;
-    execute: string[];
-    runtime: string;
-    vars?: Partial<Models.Variable>[];
-    events?: string[];
-    schedule?: string;
-    timeout?: number;
-}>({
-    id: null,
-    name: null,
-    entrypoint: null,
-    execute: [],
-    runtime: null,
-    vars: [],
-    events: [],
-    schedule: null,
-    timeout: null
-});
diff --git a/src/routes/(console)/project-[region]-[project]/get-started/+layout.ts b/src/routes/(console)/project-[region]-[project]/get-started/+layout.ts
new file mode 100644
index 000000000..b246d4faf
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/get-started/+layout.ts
@@ -0,0 +1,10 @@
+import Breadcrumbs from '../overview/breadcrumbs.svelte';
+import Header from '../overview/header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/get-started/+page.svelte b/src/routes/(console)/project-[region]-[project]/get-started/+page.svelte
new file mode 100644
index 000000000..1e51cb268
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/get-started/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import Onboard from '../overview/onboard.svelte';
+</script>
+
+<svelte:head>
+    <title>Console - Appwrite</title>
+</svelte:head>
+
+<Onboard platforms={page.data.project.platforms} pingCount={page.data.project.pingCount} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte
index a0b2b1877..f24af0b59 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import {
         addSubPanel,
         registerCommands,
@@ -14,16 +14,17 @@
     import { topicsSearcher } from '$lib/commandCenter/searchers/topics';
     import { canWriteMessages } from '$lib/stores/roles';
     import { project } from '../store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     // TODO: finalize the commands
     $: $registerCommands([
         {
             label: 'Create message',
-            keys: $page.url.pathname.endsWith('messaging') ? ['c'] : ['c', 'm'],
+            keys: page.url.pathname.endsWith('messaging') ? ['c'] : ['c', 'm'],
             callback() {
                 addSubPanel(CreateMessagePanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'messaging',
             disabled: !$canWriteMessages
         },
@@ -34,7 +35,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/messaging/topics`);
             },
             disabled:
-                $page.url.pathname.endsWith('topics') || $page.url.pathname.includes('message-'),
+                page.url.pathname.endsWith('topics') || page.url.pathname.includes('message-'),
             group: 'messaging',
             rank: 1
         },
@@ -45,7 +46,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/messaging/providers`);
             },
             disabled:
-                $page.url.pathname.endsWith('providers') || $page.url.pathname.includes('message-'),
+                page.url.pathname.endsWith('providers') || page.url.pathname.includes('message-'),
             group: 'messaging',
             rank: 2
         }
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index b4c899568..9e9f35912 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -1,35 +1,20 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import {
         Empty,
         EmptyFilter,
         EmptySearch,
-        FloatingActionBar,
-        Heading,
         Id,
-        Modal,
         PaginationWithLimit,
         SearchQuery,
         ViewSelector
     } from '$lib/components';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import { MessagingProviderType } from '@appwrite.io/console';
-    import type { PageData } from './$types';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
     import FailedModal from './failedModal.svelte';
     import MessageStatusPill from './messageStatusPill.svelte';
@@ -43,34 +28,48 @@
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteMessages } from '$lib/stores/roles';
+    import {
+        Badge,
+        FloatingActionBar,
+        Layout,
+        Link,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { Confirm } from '$lib/components';
     import { onDestroy, onMount } from 'svelte';
     import { stopPolling, pollMessagesStatus } from './helper';
 
-    export let data: PageData;
+    export let data;
     let selected: string[] = [];
     let showDelete = false;
     let deleting = false;
     let showFailed = false;
     let errors: string[] = [];
-    let showCreateDropdownDesktop = false;
-    let showCreateDropdownMobile = false;
-    let showCreateDropdownEmpty = false;
+
     const columns = writable<Column[]>([
-        { id: '$id', title: 'Message ID', type: 'string', show: true, width: 140 },
-        { id: 'message', title: 'Message', type: 'string', show: false, filter: false, width: 140 },
-        { id: 'providerType', title: 'Type', type: 'string', show: true, width: 100 },
-        { id: 'status', title: 'Status', type: 'string', show: true, width: 120 },
-        { id: 'scheduledAt', title: 'Scheduled at', type: 'datetime', show: true, width: 120 },
-        { id: 'deliveredAt', title: 'Delivered at', type: 'datetime', show: false, width: 120 }
+        { id: '$id', title: 'Message ID', type: 'string', width: 200 },
+        {
+            id: 'message',
+            title: 'Message',
+            type: 'string',
+            hide: true,
+            filter: false,
+            width: { min: 140 }
+        },
+        { id: 'providerType', title: 'Type', type: 'string', width: { min: 100 } },
+        { id: 'status', title: 'Status', type: 'string', width: { min: 120 } },
+        { id: 'scheduledAt', title: 'Scheduled at', type: 'datetime', width: { min: 120 } },
+        { id: 'deliveredAt', title: 'Delivered at', type: 'datetime', width: { min: 120 } }
     ]);
 
-    const project = $page.params.project;
+    const project = page.params.project;
 
     async function handleDelete() {
         showDelete = false;
 
         const promises = selected.map((id) =>
-            sdk.forProject($page.params.region, $page.params.project).messaging.delete(id)
+            sdk.forProject(page.params.region, page.params.project).messaging.delete(id)
         );
 
         try {
@@ -107,152 +106,95 @@
 </script>
 
 <Container>
-    <ContainerHeader title="Messages">
-        {#if $canWriteMessages}
-            <div class="is-only-mobile">
-                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
-            </div>
-        {/if}
-    </ContainerHeader>
-    <div class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-16">
-        <SearchQuery
-            fullWidth
-            search={data.search}
-            placeholder="Search by message ID, description, type, or status">
-            <div class="is-not-mobile u-width-full-line">
-                <div class="u-flex u-gap-16 u-main-end">
-                    <Filters query={data.query} {columns} />
-                    <ViewSelector
-                        view={data.view}
-                        {columns}
-                        hideView
-                        allowNoColumns
-                        showColsTextMobile />
-                    {#if $canWriteMessages}
-                        <CreateMessageDropdown
-                            bind:showCreateDropdown={showCreateDropdownDesktop} />
-                    {/if}
-                </div>
-            </div>
-        </SearchQuery>
-        <div class="is-only-mobile u-flex u-gap-16">
-            <div class="u-flex-basis-50-percent">
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile
-                    fullWidthMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <Filters query={data.query} {columns} fullWidthMobile />
-            </div>
-        </div>
-    </div>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by description, type, status, or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Filters query={data.query} {columns} analyticsSource="messaging_messages" />
+            <ViewSelector view={data.view} {columns} hideView />
+            {#if $canWriteMessages}
+                <CreateMessageDropdown />
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.messages.total}
-        <TableScroll>
-            <TableHeader>
-                {#if $canWriteMessages}
-                    <TableCellHeadCheck
-                        bind:selected
-                        pageItemsIds={data.messages.messages.map((d) => d.$id)} />
-                {/if}
-                {#each $columns as column}
-                    {#if column.show}
-                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
-                    {/if}
+        <Table.Root
+            columns={$columns}
+            allowSelection={$canWriteMessages}
+            let:root
+            bind:selectedRows={selected}>
+            <svelte:fragment slot="header" let:root>
+                {#each $columns as { id, title }}
+                    <Table.Cell column={id} {root}>{title}</Table.Cell>
                 {/each}
-            </TableHeader>
-            <TableBody>
-                {#each data.messages.messages as message (message.$id)}
-                    <TableRowLink
-                        href={`${base}/project-${$page.params.region}-${project}/messaging/message-${message.$id}`}>
-                        {#if $canWriteMessages}
-                            <TableCellCheck
-                                bind:selectedIds={selected}
-                                id={message.$id}
-                                disabled={message.status === 'processing'} />
-                        {/if}
-                        {#each $columns as column (column.id)}
-                            {#if column.show}
-                                {#if column.id === '$id'}
-                                    {#key $columns}
-                                        <TableCell title={column.title} width={column.width}>
-                                            <Id value={message.$id}>{message.$id}</Id>
-                                        </TableCell>
-                                    {/key}
-                                {:else if column.id === 'message'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {#if message.providerType === MessagingProviderType.Push}
-                                            {message.data.title}
-                                        {:else if message.providerType === MessagingProviderType.Sms}
-                                            {message.data.content}
-                                        {:else if message.providerType === MessagingProviderType.Email}
-                                            {message.data.subject}
-                                        {:else}
-                                            Invalid provider
-                                        {/if}
-                                    </TableCellText>
-                                {:else if column.id === 'providerType'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        <ProviderType type={message.providerType} size="s" />
-                                    </TableCellText>
-                                {:else if column.id === 'status'}
-                                    <TableCellText title="Status">
-                                        <span class="u-inline-flex u-gap-12 u-cross-center">
-                                            <MessageStatusPill status={message.status} />
-                                            {#if message.status === 'failed'}
-                                                <Button
-                                                    link
-                                                    on:click={(e) => {
-                                                        e.preventDefault();
-                                                        errors = message.deliveryErrors;
-                                                        showFailed = true;
-                                                    }}>Details</Button>
-                                            {/if}
-                                        </span>
-                                    </TableCellText>
-                                {:else if column.type === 'datetime'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {#if !message[column.id]}
-                                            -
-                                        {:else}
-                                            {toLocaleDateTime(message[column.id])}
-                                        {/if}
-                                    </TableCellText>
+            </svelte:fragment>
+            {#each data.messages.messages as message (message.$id)}
+                <Table.Row.Link
+                    {root}
+                    id={message.$id}
+                    href={`${base}/project-${project}/messaging/message-${message.$id}`}>
+                    {#each $columns as column (column.id)}
+                        <Table.Cell column={column.id} {root}>
+                            {#if column.id === '$id'}
+                                {#key $columns}
+                                    <Id value={message.$id}>{message.$id}</Id>
+                                {/key}
+                            {:else if column.id === 'message'}
+                                {#if message.providerType === MessagingProviderType.Push}
+                                    {message.data.title}
+                                {:else if message.providerType === MessagingProviderType.Sms}
+                                    {message.data.content}
+                                {:else if message.providerType === MessagingProviderType.Email}
+                                    {message.data.subject}
                                 {:else}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {message[column.id]}
-                                    </TableCellText>
+                                    Invalid provider
                                 {/if}
+                            {:else if column.id === 'providerType'}
+                                <ProviderType type={message.providerType} size="xs" />
+                            {:else if column.id === 'status'}
+                                <Layout.Stack direction="row" gap="s">
+                                    <MessageStatusPill status={message.status} />
+                                    {#if message.status === 'failed'}
+                                        <Link.Button
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                errors = message.deliveryErrors;
+                                                showFailed = true;
+                                            }}>Details</Link.Button>
+                                    {/if}
+                                </Layout.Stack>
+                            {:else if column.type === 'datetime'}
+                                {#if !message[column.id]}
+                                    -
+                                {:else}
+                                    {toLocaleDateTime(message[column.id])}
+                                {/if}
+                            {:else}
+                                {message[column.id]}
                             {/if}
-                        {/each}
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </TableScroll>
+                        </Table.Cell>
+                    {/each}
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
 
-        <FloatingActionBar show={selected.length > 0}>
-            <div class="u-flex u-cross-center u-main-space-between actions">
-                <div class="u-flex u-cross-center u-gap-8">
-                    <span class="indicator body-text-2 u-bold">{selected.length}</span>
-                    <p>
-                        <span class="is-only-desktop">
-                            {selected.length > 1 ? 'messages' : 'message'}
-                        </span>
+        {#if selected.length > 0}
+            <FloatingActionBar>
+                <svelte:fragment slot="start">
+                    <Badge content={selected.length.toString()} />
+                    <span>
+                        {selected.length > 1 ? 'messages' : 'message'}
                         selected
-                    </p>
-                </div>
-
-                <div class="u-flex u-cross-center u-gap-8">
+                    </span>
+                </svelte:fragment>
+                <svelte:fragment slot="end">
                     <Button text on:click={() => (selected = [])}>Cancel</Button>
-                    <Button secondary on:click={() => (showDelete = true)}>
-                        <p>Delete</p>
-                    </Button>
-                </div>
-            </div>
-        </FloatingActionBar>
+                    <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+                </svelte:fragment>
+            </FloatingActionBar>
+        {/if}
 
         <PaginationWithLimit
             name="Messages"
@@ -273,22 +215,14 @@
                 </Button>
                 <Button
                     secondary
-                    href={`${base}/project-${$page.params.region}-${$page.params.project}/messaging`}>
+                    href={`${base}/project-${page.params.region}-${page.params.project}/messaging`}>
                     Clear search
                 </Button>
             </div>
         </EmptySearch>
     {:else}
         <Empty single target="message" on:click={() => ($showCreate = true)}>
-            <div class="u-text-center">
-                <Heading size="7" tag="h2" trimmed={false}>
-                    Create your first message to get started.
-                </Heading>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Need a hand? Learn more in our documentation.
-                </p>
-            </div>
-            <div class="u-flex u-flex-wrap u-gap-16 u-main-center">
+            <svelte:fragment slot="actions">
                 <Button
                     external
                     href="https://appwrite.io/docs/products/messaging/messages"
@@ -298,36 +232,22 @@
                     Documentation
                 </Button>
                 {#if $canWriteMessages}
-                    <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
-                        <Button
-                            secondary
-                            on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
-                            event="create_message">
+                    <CreateMessageDropdown let:toggle>
+                        <Button secondary on:click={toggle} event="create_message">
                             <span class="text">Create message</span>
                         </Button>
                     </CreateMessageDropdown>
                 {/if}
-            </div>
+            </svelte:fragment>
         </Empty>
     {/if}
 </Container>
 
 <FailedModal bind:show={showFailed} {errors} />
 
-<Modal
-    title="Delete messages"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
+<Confirm title="Delete messages" bind:open={showDelete} onSubmit={handleDelete} disabled={deleting}>
+    <Typography.Text>
         Are you sure you want to delete <b>{selected.length}</b>
         {selected.length > 1 ? 'messages' : 'message'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.ts b/src/routes/(console)/project-[region]-[project]/messaging/+page.ts
index 1380807df..0436e02e7 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.ts
@@ -18,8 +18,8 @@ export const load: PageLoad = async ({ depends, url, route, params }) => {
 
     const page = getPage(url);
     const search = getSearch(url);
-    const view = getView(params.project, url, route, View.Grid);
-    const limit = getLimit(params.project, url, route, CARD_LIMIT);
+    const view = getView(url, route, View.Grid);
+    const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/actions.svelte b/src/routes/(console)/project-[region]-[project]/messaging/actions.svelte
index f52264348..5ec9db9b4 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/actions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/actions.svelte
@@ -1,49 +1,52 @@
 <script lang="ts">
-    import { DropList, DropListItem } from '$lib/components';
     import { createEventDispatcher } from 'svelte';
     import { targetsById } from './wizard/store';
     import UserTargetsModal from './userTargetsModal.svelte';
     import TopicsModal from './topicsModal.svelte';
     import { topicsById } from './store';
     import type { MessagingProviderType } from '@appwrite.io/console';
+    import { ActionMenu, Popover } from '@appwrite.io/pink-svelte';
 
-    export let showDropdown: boolean;
     export let showUserTargets: boolean;
     export let showTopics: boolean;
     export let providerType: MessagingProviderType = null;
 
     const dispatch = createEventDispatcher();
-
-    $: if (showUserTargets || showTopics) {
-        showDropdown = false;
-    }
 </script>
 
-<DropList bind:show={showDropdown} placement="bottom-end" fixed>
-    <slot />
-    <svelte:fragment slot="list">
-        <DropListItem on:click={() => (showTopics = true)}>Select topics</DropListItem>
-        <DropListItem on:click={() => (showUserTargets = true)}>Select targets</DropListItem>
+<Popover let:toggle placement="bottom-start" padding="none">
+    <slot {toggle} />
+    <svelte:fragment slot="tooltip">
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button on:click={() => (showTopics = true)}
+                >Select topics</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button on:click={() => (showUserTargets = true)}
+                >Select targets</ActionMenu.Item.Button>
+        </ActionMenu.Root>
     </svelte:fragment>
-</DropList>
+</Popover>
 
-<TopicsModal
-    {providerType}
-    bind:show={showTopics}
-    bind:topicsById={$topicsById}
-    on:update={(e) => {
-        showTopics = false;
-        dispatch('addTopics', e.detail);
-    }} />
-<UserTargetsModal
-    title="Select targets"
-    {providerType}
-    bind:show={showUserTargets}
-    bind:targetsById={$targetsById}
-    on:update={(e) => {
-        showUserTargets = false;
-        dispatch('addTargets', e.detail);
-    }}>
-    <svelte:fragment slot="description"
-        >Select existing targets to which you want to send this message.</svelte:fragment>
-</UserTargetsModal>
+{#if showTopics}
+    <TopicsModal
+        {providerType}
+        bind:show={showTopics}
+        bind:topicsById={$topicsById}
+        on:update={(e) => {
+            showTopics = false;
+            dispatch('addTopics', e.detail);
+        }} />
+{/if}
+{#if showUserTargets}
+    <UserTargetsModal
+        title="Select targets"
+        {providerType}
+        bind:show={showUserTargets}
+        bind:targetsById={$targetsById}
+        on:update={(e) => {
+            showUserTargets = false;
+            dispatch('addTargets', e.detail);
+        }}>
+        <svelte:fragment slot="description"
+            >Select existing targets to which you want to send this message.</svelte:fragment>
+    </UserTargetsModal>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
index 2e825950c..8c5fe3210 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -11,11 +11,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/messaging`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/messaging`,
             title: 'Messaging'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/(components)/schedule.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/(components)/schedule.svelte
new file mode 100644
index 000000000..115c5a4d2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/(components)/schedule.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { Button, InputDate, InputSelect, InputTime } from '$lib/elements/forms';
+    import Helper from '$lib/elements/forms/helper.svelte';
+    import { isSameDay, toLocaleDateISO, toLocaleTimeISO } from '$lib/helpers/date';
+    import { wizard } from '$lib/stores/wizard';
+    import { Modal } from '$lib/components';
+    import { Layout } from '@appwrite.io/pink-svelte';
+
+    export let targets: string[];
+    export let scheduledAt: string;
+
+    let when: 'now' | 'later' = 'now';
+    let now = new Date();
+    let minDate: string;
+    let date: string;
+    let time: string;
+    let dateTime: Date;
+    let showConfirmation = false;
+
+    let totalTargets = targets?.length ?? 0;
+
+    const options = [
+        { label: 'Now', value: 'now' },
+        { label: 'Schedule', value: 'later' }
+    ];
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23',
+        timeZoneName: 'longGeneric'
+    };
+
+    async function submit() {
+        $wizard.interceptorNotificationEnabled = true;
+        await $wizard.finalAction();
+        showConfirmation = false;
+    }
+
+    $: if (when === 'now') {
+        date = time = '';
+    }
+    $: if (when === 'later') {
+        now = new Date();
+    }
+    $: minDate = toLocaleDateISO(now.getTime());
+    $: minTime = isSameDay(new Date(date), new Date(minDate))
+        ? toLocaleTimeISO(now.getTime())
+        : '00:00';
+    $: dateTime = new Date(`${date}T${time}`);
+    $: if (!isNaN(dateTime.getTime())) {
+        scheduledAt = dateTime.toISOString();
+    }
+</script>
+
+<Layout.Stack>
+    <InputSelect id="when" required {options} bind:value={when} />
+    <InputDate
+        id="date"
+        label="Date"
+        disabled={when === 'now'}
+        required={when === 'later'}
+        min={minDate}
+        bind:value={date} />
+    <InputTime
+        id="time"
+        label="Time"
+        disabled={when === 'now'}
+        required={when === 'later'}
+        min={minTime}
+        bind:value={time} />
+    <Helper type="neutral">
+        {#if when === 'now'}
+            The message will be sent immediately
+        {:else if !dateTime || isNaN(dateTime.getTime())}
+            The message will be sent later
+        {:else}
+            The message will be sent at {dateTime.toLocaleString('en', formatOptions)}
+        {/if}
+    </Helper>
+</Layout.Stack>
+{#if showConfirmation}
+    <Modal title="Send message" bind:show={showConfirmation} onSubmit={submit}>
+        <p>
+            You are about to send a message to an estimated <span class="u-bold"
+                >{totalTargets}</span> recipients. Would you like to proceed?
+        </p>
+        <p class="u-bold">This action is irreversible.</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showConfirmation = false)}>Cancel</Button>
+            <Button secondary submit>Send</Button>
+        </svelte:fragment>
+    </Modal>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/(components)/targets.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/(components)/targets.svelte
new file mode 100644
index 000000000..9d59547ae
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/(components)/targets.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+    import Card from '$lib/components/card.svelte';
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import { writable } from 'svelte/store';
+    import Actions from '../../../actions.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { Icon, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+
+    export let type: MessagingProviderType;
+    export let topics: Models.Message['topics'];
+    export let targets: Models.Message['targets'];
+
+    let showTopics = false;
+    let showUserTargets = false;
+
+    const topicsById = writable<Record<string, Models.Topic>>({});
+    const targetsById = writable<Record<string, Models.Target>>({});
+
+    function addTopics(event: CustomEvent<Record<string, Models.Topic>>) {
+        $topicsById = event.detail;
+    }
+
+    function removeTopic(topicId: string) {
+        const { [topicId]: _, ...rest } = $topicsById;
+        $topicsById = rest;
+    }
+
+    function addTargets(event: CustomEvent<Record<string, Models.Target>>) {
+        $targetsById = event.detail;
+    }
+
+    function removeTarget(targetId: string) {
+        const { [targetId]: _, ...rest } = $targetsById;
+        $targetsById = rest;
+    }
+
+    function getTotal(topic: Models.Topic): number {
+        switch (type) {
+            case MessagingProviderType.Email:
+                return topic.emailTotal;
+            case MessagingProviderType.Sms:
+                return topic.smsTotal;
+            case MessagingProviderType.Push:
+                return topic.pushTotal;
+            default:
+                return 0;
+        }
+    }
+
+    $: hasTopics = Object.keys($topicsById).length > 0;
+    $: hasTargets = Object.keys($targetsById).length > 0;
+    $: topics = Object.keys($topicsById);
+    $: targets = Object.keys($targetsById);
+</script>
+
+{#if !hasTargets && !hasTopics}
+    <Card>
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <Actions
+                providerType={type}
+                bind:showUserTargets
+                bind:showTopics
+                on:addTargets={addTargets}
+                on:addTopics={addTopics}
+                let:toggle>
+                <Button secondary icon on:click={toggle}>
+                    <Icon icon={IconPlus} size="s" />
+                </Button>
+            </Actions>
+            <div class="common-section">
+                <span class="text"> Select targets to get started</span>
+            </div>
+        </div>
+    </Card>
+{:else}
+    <Layout.Stack>
+        <Table.Root columns={[{ id: 'target' }, { id: 'actions', width: 40 }]} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="target" {root}>Target</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each Object.entries($topicsById) as [topicId, topic] (topicId)}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="target" {root}>
+                        {topic.name}
+                        ({getTotal(topic)} targets)
+                    </Table.Cell>
+                    <Table.Cell column="actions" {root}>
+                        <div class="u-flex u-main-end">
+                            <button
+                                class="button is-text is-only-icon"
+                                type="button"
+                                aria-label="delete"
+                                on:click={() => removeTopic(topicId)}>
+                                <span class="icon-x u-font-size-20" aria-hidden="true"></span>
+                            </button>
+                        </div>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+            {#each Object.entries($targetsById) as [targetId, target] (targetId)}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="target" {root}>
+                        {target.name ? target.name : target.identifier}
+                    </Table.Cell>
+
+                    <Table.Cell column="actions" {root}>
+                        <div class="u-flex u-main-end">
+                            <button
+                                class="button is-text is-only-icon"
+                                type="button"
+                                aria-label="delete"
+                                on:click={() => removeTarget(targetId)}>
+                                <span class="icon-x u-font-size-20" aria-hidden="true"></span>
+                            </button>
+                        </div>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
+        <div>
+            <Actions
+                providerType={type}
+                bind:showUserTargets
+                bind:showTopics
+                on:addTargets={addTargets}
+                on:addTopics={addTopics}
+                let:toggle>
+                <Button secondary on:click={toggle}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add
+                </Button>
+            </Actions>
+        </div>
+    </Layout.Stack>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
new file mode 100644
index 000000000..352715d43
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import { ID, MessagingProviderType } from '@appwrite.io/console';
+    import CustomId from '$lib/components/customId.svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import InputText from '$lib/elements/forms/inputText.svelte';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
+    import Targets from './(components)/targets.svelte';
+    import Schedule from './(components)/schedule.svelte';
+    import InputSwitch from '$lib/elements/forms/inputSwitch.svelte';
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+    let showCustomId = false;
+    let id: string;
+    let subject: string;
+    let content: string;
+    let topics: string[];
+    let users: string[];
+    let targets: string[];
+    let draft: boolean = false;
+    let html: boolean = false;
+    let scheduledAt: string = undefined;
+
+    async function create() {
+        try {
+            const messageId = id || ID.unique();
+
+            const response = await sdk
+                .forProject(page.params.region, page.params.project)
+                .messaging.createEmail(
+                    messageId,
+                    subject,
+                    content,
+                    topics,
+                    users,
+                    targets,
+                    undefined,
+                    undefined,
+                    undefined,
+                    draft,
+                    html,
+                    scheduledAt
+                );
+            let message = '';
+            switch (response.status) {
+                case 'draft':
+                    message = 'The message has been saved as draft.';
+                    break;
+                case 'processing':
+                    message = 'The message is queued for processing.';
+                    break;
+                case 'scheduled':
+                    message = 'The message has been scheduled.';
+                    break;
+            }
+            addNotification({
+                type: 'success',
+                message
+            });
+            trackEvent(Submit.MessagingMessageCreate, {
+                providerType: 'email',
+                status: response.status
+            });
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${response.$id}`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingMessageCreate);
+        }
+    }
+
+    function saveAsDraft() {
+        draft = true;
+        formComponent.triggerSubmit();
+    }
+</script>
+
+<Wizard
+    title="Create email message"
+    columnSize="s"
+    href={`${base}/project-${page.params.region}-${page.params.project}/messaging/`}
+    bind:showExitModal
+    column
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Message">
+                <Layout.Stack>
+                    <InputText
+                        id="subject"
+                        label="Subject"
+                        required
+                        placeholder="Enter subject"
+                        bind:value={subject}>
+                    </InputText>
+                    {#if !showCustomId}
+                        <div>
+                            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}
+                                ><Icon icon={IconPencil} /> Message ID</Tag>
+                        </div>
+                    {:else}
+                        <CustomId autofocus bind:show={showCustomId} name="Message" bind:id />
+                    {/if}
+                    <InputTextarea
+                        id="message"
+                        label="Message"
+                        required
+                        placeholder="Type here..."
+                        bind:value={content}>
+                    </InputTextarea>
+                    <InputSwitch label="HTML mode" id="html" bind:value={html}>
+                        <svelte:fragment slot="description">
+                            Enable the HTML mode if your message contains HTML tags.
+                        </svelte:fragment>
+                    </InputSwitch>
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Targets">
+                <Targets type={MessagingProviderType.Email} bind:topics bind:targets />
+            </Fieldset>
+            <Fieldset legend="Schedule">
+                <Schedule bind:scheduledAt {targets} />
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button fullWidthMobile secondary on:click={saveAsDraft}>Save as draft</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
new file mode 100644
index 000000000..82d12a36f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
@@ -0,0 +1,210 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Icon, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable, type Writable } from 'svelte/store';
+    import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
+    import PushPhone from '../../pushPhone.svelte';
+    import CustomId from '$lib/components/customId.svelte';
+    import { IconPencil, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import InputText from '$lib/elements/forms/inputText.svelte';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
+    import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
+    import Targets from './(components)/targets.svelte';
+    import Schedule from './(components)/schedule.svelte';
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+    let showCustomId = false;
+    let id: string;
+    let file: Models.File;
+    let data: Writable<[string, string][]> = writable([['', '']]);
+    let title: string;
+    let body: string;
+    let topics: string[];
+    let users: string[];
+    let targets: string[];
+    let draft: boolean;
+    let scheduledAt: string;
+
+    async function create() {
+        try {
+            const messageId = id || ID.unique();
+            const fileCompoundId = file ? `${file.bucketId}:${file.$id}` : undefined;
+            const customData: Record<string, string> = {};
+            for (const item of $data) {
+                if (item[0] === '') continue;
+                customData[item[0]] = item[1];
+            }
+
+            const response = await sdk
+                .forProject(page.params.region, page.params.project)
+                .messaging.createPush(
+                    messageId,
+                    title,
+                    body,
+                    topics,
+                    users,
+                    targets,
+                    customData,
+                    undefined,
+                    fileCompoundId,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    draft,
+                    scheduledAt
+                );
+            let message = '';
+            switch (response.status) {
+                case 'draft':
+                    message = 'The message has been saved as draft.';
+                    break;
+                case 'processing':
+                    message = 'The message is queued for processing.';
+                    break;
+                case 'scheduled':
+                    message = 'The message has been scheduled.';
+                    break;
+            }
+            addNotification({
+                type: 'success',
+                message
+            });
+            trackEvent(Submit.MessagingMessageCreate, {
+                providerType: 'push',
+                status: response.status
+            });
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${response.$id}`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingMessageCreate);
+        }
+    }
+
+    function saveAsDraft() {
+        draft = true;
+        formComponent.triggerSubmit();
+    }
+</script>
+
+<Wizard
+    title="Create push message"
+    href={`${base}/project-${page.params.region}-${page.params.project}/messaging/`}
+    bind:showExitModal
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Message">
+                <Layout.Stack>
+                    <InputText
+                        id="title"
+                        label="Title"
+                        required
+                        placeholder="Enter title"
+                        bind:value={title}>
+                    </InputText>
+                    {#if !showCustomId}
+                        <div>
+                            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}
+                                ><Icon icon={IconPencil} /> Message ID</Tag>
+                        </div>
+                    {:else}
+                        <CustomId autofocus bind:show={showCustomId} name="Message" bind:id />
+                    {/if}
+                    <InputTextarea
+                        id="message"
+                        label="Message"
+                        placeholder="Type here..."
+                        required
+                        maxlength={1000}
+                        bind:value={body}>
+                    </InputTextarea>
+                    <InputFilePicker bind:value={file} label="Media" />
+                </Layout.Stack>
+            </Fieldset>
+            <Fieldset legend="Custom data">
+                <Layout.Stack gap="l">
+                    <Typography.Text>
+                        A key/value payload of additional metadata that's hidden from users. Use
+                        this to include information to support logic such as redirection and
+                        routing.
+                    </Typography.Text>
+                    <Layout.Stack gap="s">
+                        {#each $data as [key, value], index}
+                            <Layout.Stack direction="row" alignItems="flex-end">
+                                <InputText
+                                    id={`key-${index}`}
+                                    bind:value={key}
+                                    placeholder="Enter key"
+                                    label={index === 0 ? 'Key' : undefined} />
+                                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                                    <InputText
+                                        id={`value-${index}`}
+                                        bind:value
+                                        placeholder="Enter value"
+                                        label={index === 0 ? 'Value' : undefined} />
+                                    <Button
+                                        icon
+                                        compact
+                                        disabled={(!key || !value) && index === 0}
+                                        on:click={() => {
+                                            if (index === 0 && $data?.length === 1) {
+                                                $data = [['', '']];
+                                            } else {
+                                                $data.splice(index, 1);
+                                                $data = $data;
+                                            }
+                                        }}>
+                                        <span class="icon-x" aria-hidden="true"></span>
+                                    </Button>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/each}
+                        <div>
+                            <Button
+                                compact
+                                disabled={$data.length > 0 && $data[$data.length - 1][0] === ''}
+                                on:click={() => ($data = [...$data, ['', '']])}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Add data
+                            </Button>
+                        </div>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Fieldset>
+            <Fieldset legend="Targets">
+                <Targets type={MessagingProviderType.Push} bind:topics bind:targets />
+            </Fieldset>
+            <Fieldset legend="Schedule">
+                <Schedule bind:scheduledAt {targets} />
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+    <PushPhone {title} {body} slot="aside" />
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button fullWidthMobile secondary on:click={saveAsDraft}>Save as draft</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
new file mode 100644
index 000000000..e71f479f8
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import { ID, MessagingProviderType } from '@appwrite.io/console';
+    import CustomId from '$lib/components/customId.svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
+    import Targets from './(components)/targets.svelte';
+    import Schedule from './(components)/schedule.svelte';
+    import SmsPhone from '../../smsPhone.svelte';
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+    let showCustomId = false;
+    let id: string;
+    let content: string;
+    let topics: string[];
+    let users: string[];
+    let targets: string[];
+    let draft: boolean;
+    let scheduledAt: string;
+
+    async function create() {
+        try {
+            const messageId = id || ID.unique();
+
+            const response = await sdk
+                .forProject(page.params.region, page.params.project)
+                .messaging.createSms(
+                    messageId,
+                    content,
+                    topics,
+                    users,
+                    targets,
+                    draft,
+                    scheduledAt
+                );
+            let message = '';
+            switch (response.status) {
+                case 'draft':
+                    message = 'The message has been saved as draft.';
+                    break;
+                case 'processing':
+                    message = 'The message is queued for processing.';
+                    break;
+                case 'scheduled':
+                    message = 'The message has been scheduled.';
+                    break;
+            }
+            addNotification({
+                type: 'success',
+                message
+            });
+            trackEvent(Submit.MessagingMessageCreate, {
+                providerType: 'email',
+                status: response.status
+            });
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${response.$id}`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingMessageCreate);
+        }
+    }
+
+    function saveAsDraft() {
+        draft = true;
+        formComponent.triggerSubmit();
+    }
+</script>
+
+<Wizard
+    title="Create SMS message"
+    href={`${base}/project-${page.params.region}-${page.params.project}/messaging/`}
+    bind:showExitModal
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Message">
+                <Layout.Stack>
+                    <InputTextarea
+                        id="message"
+                        label="Message"
+                        required
+                        maxlength={900}
+                        placeholder="Type here..."
+                        bind:value={content}>
+                    </InputTextarea>
+                    {#if !showCustomId}
+                        <div>
+                            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}
+                                ><Icon icon={IconPencil} /> Message ID</Tag>
+                        </div>
+                    {:else}
+                        <CustomId autofocus bind:show={showCustomId} name="Message" bind:id />
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Targets">
+                <Targets type={MessagingProviderType.Sms} bind:topics bind:targets />
+            </Fieldset>
+            <Fieldset legend="Schedule">
+                <Schedule bind:scheduledAt {targets} />
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+    <SmsPhone {content} slot="aside" />
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button fullWidthMobile secondary on:click={saveAsDraft}>Save as draft</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/+page.svelte
new file mode 100644
index 000000000..cb6fe1e58
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let data;
+</script>
+
+<svelte:component this={data.component} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/+page.ts b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/+page.ts
new file mode 100644
index 000000000..d21793d27
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/+page.ts
@@ -0,0 +1,30 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { MessagingProviderType } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import Push from './(type)/push.svelte';
+import Email from './(type)/email.svelte';
+import Sms from './(type)/sms.svelte';
+
+function getComponent(type: string) {
+    switch (type) {
+        case MessagingProviderType.Push:
+            return Push;
+        case MessagingProviderType.Email:
+            return Email;
+        case MessagingProviderType.Sms:
+            return Sms;
+        default:
+            return null;
+    }
+}
+
+export const load: PageLoad = async ({ params }) => {
+    if (!isValueOfStringEnum(MessagingProviderType, params.type)) {
+        error(401, 'Invalid provider type');
+    }
+
+    return {
+        component: getComponent(params.type)
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create.svelte
index 1e25d6ebc..713a8d5a8 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import { WizardWithSteps } from '$lib/layout';
+    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
     import Step1 from './wizard/step1.svelte';
     import Step2 from './wizard/step2.svelte';
     import Step3 from './wizard/step3.svelte';
@@ -13,7 +13,7 @@
     import { wizard } from '$lib/stores/wizard';
     import { providerType, messageParams } from './wizard/store';
     import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     async function create() {
         try {
@@ -23,7 +23,7 @@
             switch ($providerType) {
                 case MessagingProviderType.Email:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createEmail(
                             messageId,
                             $messageParams[$providerType].subject,
@@ -41,7 +41,7 @@
                     break;
                 case MessagingProviderType.Sms:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createSms(
                             messageId,
                             $messageParams[$providerType].content,
@@ -66,7 +66,7 @@
                         }
 
                         response = await sdk
-                            .forProject($page.params.region, $page.params.project)
+                            .forProject(page.params.region, page.params.project)
                             .messaging.createPush(
                                 messageId,
                                 $messageParams[$providerType].title,
@@ -161,4 +161,4 @@
     $wizard.finalAction = create;
 </script>
 
-<Wizard title="Create message" steps={stepsComponents} finalAction="Send" />
+<WizardWithSteps title="Create message" steps={stepsComponents} finalAction="Send" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte b/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte
index 4e23952a0..49e018a16 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte
@@ -1,70 +1,26 @@
 <script lang="ts">
-    import { DropList, DropListItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { wizard } from '$lib/stores/wizard';
     import { providers } from './providers/store';
-    import Create from './create.svelte';
-    import { messageParams, providerType, targetsById } from './wizard/store';
-    import { topicsById } from './store';
-    import { MessagingProviderType } from '@appwrite.io/console';
-
-    export let showCreateDropdown = false;
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
-    <slot>
-        <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_message">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create message</span>
+<Popover let:toggle padding="none" placement="bottom-end">
+    <slot {toggle}>
+        <Button on:click={toggle} event="create_message">
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create message
         </Button>
     </slot>
-    <svelte:fragment slot="list">
+    <ActionMenu.Root slot="tooltip">
         {#each Object.entries(providers) as [type, option]}
-            <DropListItem
-                icon={option.icon}
-                on:click={() => {
-                    if (
-                        type !== MessagingProviderType.Email &&
-                        type !== MessagingProviderType.Sms &&
-                        type !== MessagingProviderType.Push
-                    )
-                        return;
-                    $providerType = type;
-                    $topicsById = {};
-                    $targetsById = {};
-                    const common = {
-                        topics: [],
-                        users: [],
-                        targets: []
-                    };
-                    switch (type) {
-                        case MessagingProviderType.Email:
-                            $messageParams[$providerType] = {
-                                ...common,
-                                subject: '',
-                                content: ''
-                            };
-                            break;
-                        case MessagingProviderType.Sms:
-                            $messageParams[$providerType] = {
-                                ...common,
-                                content: ''
-                            };
-                            break;
-                        case MessagingProviderType.Push:
-                            $messageParams[$providerType] = {
-                                ...common,
-                                title: '',
-                                body: '',
-                                data: [['', '']]
-                            };
-                            break;
-                    }
-                    showCreateDropdown = false;
-                    wizard.start(Create);
-                }}>
+            <ActionMenu.Item.Anchor
+                leadingIcon={option.icon}
+                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/create-${type}`}>
                 {option.name}
-            </DropListItem>
+            </ActionMenu.Item.Anchor>
         {/each}
-    </svelte:fragment>
-</DropList>
+    </ActionMenu.Root>
+</Popover>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/failedModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/failedModal.svelte
index 0663097c6..b107eb0e8 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/failedModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/failedModal.svelte
@@ -7,13 +7,14 @@
     export let errors: string[];
 </script>
 
-<Modal title="Message error" headerDivider={false} bind:show size="big">
+<Modal title="Message error" bind:show>
     <div class="box u-flex-vertical u-gap-24">
         <p class="u-inline-flex u-cross-center u-gap-8">
             <span
                 class="icon-exclamation-circle u-font-size-20"
                 aria-hidden="true"
-                style="color:hsl(var(--color-danger-100));" />Message failed
+                style="color:hsl(var(--color-danger-100));"></span
+            >Message failed
         </p>
         <p>
             The message has been processed with errors. Please refer to the logs below for more
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/header.svelte
index 7c3b5aba3..d0e5082cf 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
-    const path = `${base}/project-${$page.params.region}-${projectId}/messaging`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/messaging`;
     const tabs = [
         {
             href: path,
@@ -30,13 +30,13 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle>Messaging</CoverTitle>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Messaging</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/helper.ts b/src/routes/(console)/project-[region]-[project]/messaging/helper.ts
index ffca9ed3d..608558146 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/helper.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/helper.ts
@@ -1,15 +1,26 @@
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { sdk } from '$lib/stores/sdk';
-import { type Models } from '@appwrite.io/console';
-import { get } from 'svelte/store';
+import { MessagingProviderType, type Models } from '@appwrite.io/console';
+
+export function getProviderText(type: MessagingProviderType | Models.Provider['type']): string {
+    switch (type) {
+        case MessagingProviderType.Email:
+            return 'Email';
+        case MessagingProviderType.Sms:
+            return 'SMS';
+        case MessagingProviderType.Push:
+            return 'Push';
+        default:
+            return '';
+    }
+}
 
 /** Stores active polling intervals for messages. */
 const messageIntervals = new Map<string, ReturnType<typeof setInterval>>();
 
 /** Checks the status of a message and stops polling if it's no longer processing. */
 function checkMessageStatus(message: Models.Message) {
-    const $page = get(page);
-    sdk.forProject($page.params.region, $page.params.project)
+    sdk.forProject(page.params.region, page.params.project)
         .messaging.getMessage(message.$id)
         .then((msg) => {
             if (msg.status !== 'processing') {
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
index 3a96376c1..e1b7bc473 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -12,11 +12,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/messaging`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/messaging`,
             title:
                 $message.data.title ?? $message.data.subject ?? $message.data.content ?? 'Message'
         }
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/cancelModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/cancelModal.svelte
index d37b8b43b..1b169a93a 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/cancelModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/cancelModal.svelte
@@ -7,7 +7,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
     import { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let show = false;
     export let message: Models.Message & { data: Record<string, unknown> };
@@ -16,7 +16,7 @@
         try {
             if (message.providerType == MessagingProviderType.Email) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateEmail(
                         message.$id,
                         undefined,
@@ -28,7 +28,7 @@
                     );
             } else if (message.providerType == MessagingProviderType.Sms) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateSms(
                         message.$id,
                         undefined,
@@ -39,7 +39,7 @@
                     );
             } else if (message.providerType == MessagingProviderType.Push) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updatePush(
                         message.$id,
                         undefined,
@@ -78,14 +78,7 @@
     };
 </script>
 
-<Modal
-    title="Cancel scheduling"
-    bind:show
-    onSubmit={update}
-    headerDivider={false}
-    size="small"
-    icon="exclamation"
-    state="warning">
+<Modal title="Cancel scheduling" bind:show onSubmit={update}>
     <div class="u-flex-vertical u-gap-16">
         <p data-private>
             Are you sure you want to cancel the scheduling of <span class="u-bold"
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/delete.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/delete.svelte
index 4ffdf4b2d..11c55fd91 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/delete.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
@@ -11,12 +11,10 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Delete message</Heading>
-    <p>
-        The message will be permanently deleted{message.status === 'scheduled'
-            ? ', and its delivery will be canceled'
-            : ''}. This action is irreversible.
-    </p>
+    <svelte:fragment slot="title">Delete message</svelte:fragment>
+    The message will be permanently deleted{message.status === 'scheduled'
+        ? ', and its delivery will be canceled'
+        : ''}. This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte
index 103a642ce..ce46b9da0 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte
@@ -1,23 +1,23 @@
 <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 } from '$lib/elements/forms';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import type { Models } from '@appwrite.io/console';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let show = false;
     export let message: Models.Message & { data: Record<string, unknown> };
 
+    let error: string;
     let description = message.data.title ?? message.data.subject ?? message.data.content ?? '';
 
     const deleteMessage = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.delete(message.$id);
             show = false;
             let notificationMessage = '';
@@ -38,25 +38,16 @@
                 message: notificationMessage
             });
             trackEvent(Submit.MessagingMessageDelete);
-            await goto(`${base}/project-${$page.params.region}-${$page.params.project}/messaging`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingMessageDelete);
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/messaging`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MessagingMessageDelete);
         }
     };
 </script>
 
-<Modal
-    title="Delete message"
-    bind:show
-    onSubmit={deleteMessage}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
+<Confirm onSubmit={deleteMessage} title="Delete message" bind:open={show} bind:error>
+    <p>
         Are you sure you want to delete
         {#if description}
             <span class="u-bold">{description}</span>{:else}
@@ -77,8 +68,4 @@
             here.
         {/if}
     </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/emailMessage.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/emailMessage.svelte
index b781e4071..c05b60fd5 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/emailMessage.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/emailMessage.svelte
@@ -1,21 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import {
-        Button,
-        Form,
-        FormList,
-        InputSwitch,
-        InputText,
-        InputTextarea
-    } from '$lib/elements/forms';
+    import { Button, Form, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let message: Models.Message & { data: Record<string, string> };
 
@@ -33,7 +26,7 @@
     async function update() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.updateEmail(
                     message.$id,
                     undefined,
@@ -69,21 +62,29 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={!isDraft}>
-        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
-        </div>
+        <svelte:fragment slot="title">Message</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText id="subject" label="Subject" disabled={!isDraft} bind:value={subject}
-                ></InputText>
-                <InputTextarea id="message" label="Message" disabled={!isDraft} bind:value={content}
-                ></InputTextarea>
-                <InputSwitch label="HTML mode" id="html" bind:value={html}>
-                    <svelte:fragment slot="description">
-                        Enable the HTML mode if your message contains HTML tags.
-                    </svelte:fragment>
-                </InputSwitch>
-            </FormList>
+            <InputText
+                required
+                id="subject"
+                label="Subject"
+                disabled={!isDraft}
+                bind:value={subject}></InputText>
+            <InputTextarea
+                required
+                id="message"
+                label="Message"
+                disabled={!isDraft}
+                bind:value={content}></InputTextarea>
+            <InputSwitch
+                label="HTML mode"
+                id="html"
+                bind:value={html}
+                on:change={() => trackEvent(Submit.MessagingUpdateHtmlMode)}>
+                <svelte:fragment slot="description">
+                    Enable the HTML mode if your message contains HTML tags.
+                </svelte:fragment>
+            </InputSwitch>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button {disabled} submit>Update</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte
index a1409d8df..d25dc6afd 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { message } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/messaging`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/messaging`}>
             {$message.data.title ?? $message.data.subject ?? $message.data.content ?? 'Message'}
         </CoverTitle>
         <Id value={$message.$id} event="message">{$message.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/overview.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/overview.svelte
index f5acb4713..419ac2b31 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/overview.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/overview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import ProviderType from '../providerType.svelte';
     import MessageStatusPill from '../messageStatusPill.svelte';
@@ -9,6 +9,8 @@
     import SendModal from './sendModal.svelte';
     import ScheduleModal from './scheduleModal.svelte';
     import CancelModal from './cancelModal.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { onDestroy, onMount } from 'svelte';
     import { stopPolling, pollMessagesStatus } from '../helper';
 
@@ -31,13 +33,9 @@
 </script>
 
 <CardGrid hideFooter={['processing', 'sent'].includes(message.status)}>
-    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-        <ProviderType type={message.providerType} size="l">
-            <Heading tag="h6" size="7">
-                <ProviderType type={message.providerType} noIcon />
-            </Heading>
-        </ProviderType>
-    </div>
+    <ProviderType type={message.providerType} size="s" let:text>
+        <Typography.Title size="s">{text}</Typography.Title>
+    </ProviderType>
     <svelte:fragment slot="aside">
         <div class="u-flex u-main-space-between">
             <div data-private>
@@ -58,7 +56,12 @@
     <svelte:fragment slot="actions">
         {#if message.status === 'draft'}
             <div class="u-flex u-gap-16">
-                <Button text on:click={() => (showSchedule = true)}>Schedule</Button>
+                <Button
+                    text
+                    on:click={() => {
+                        showSchedule = true;
+                        trackEvent(Click.MessagingScheduleClick);
+                    }}>Schedule</Button>
                 <Button secondary on:click={() => (showSend = true)}>Send message</Button>
             </div>
         {:else if message.status === 'scheduled'}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/pushMessage.svelte
index e180260bf..7e7e2a930 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/pushMessage.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/pushMessage.svelte
@@ -1,17 +1,6 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import {
-        Button,
-        Form,
-        FormItem,
-        FormItemPart,
-        FormList,
-        Helper,
-        InputFilePicker,
-        InputText,
-        InputTextarea,
-        Label
-    } from '$lib/elements/forms';
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, InputFilePicker, InputText, InputTextarea } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import PushPhone from '../pushPhone.svelte';
     import { onMount } from 'svelte';
@@ -20,10 +9,11 @@
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { validateData } from '../wizard/pushFormList.svelte';
-    import { page } from '$app/stores';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
-    /* eslint  @typescript-eslint/no-explicit-any: 'off' */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     export let message: Models.Message & { data: Record<string, any> };
 
     let title = '';
@@ -31,7 +21,6 @@
     let file: Models.File = null;
     let originalCustomData: [string, string][] = [['', '']];
     let customData: [string, string][] = [['', '']];
-    let dataError = '';
     let disabled = true;
 
     onMount(async () => {
@@ -39,7 +28,7 @@
         body = message.data.body;
         if (message.data?.image) {
             file = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.getFile(message.data.image?.bucketId, message.data.image?.fileId);
         }
 
@@ -61,7 +50,7 @@
                 return acc;
             }, {});
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.updatePush(
                     message.$id,
                     undefined,
@@ -89,7 +78,6 @@
         }
     }
 
-    $: dataError = validateData(customData || []);
     $: disabled =
         title === message.data.title &&
         body === message.data.body &&
@@ -103,97 +91,72 @@
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status != 'draft'}>
+    <CardGrid hideFooter={message.status !== 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
+            <Typography.Title size="s">Message</Typography.Title>
             <div class="u-flex u-margin-block-start-24 u-width-full-line">
                 <PushPhone {title} {body} />
             </div>
         </div>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="title"
-                    label="Title"
-                    disabled={message.status !== 'draft'}
-                    bind:value={title} />
-                <InputTextarea
-                    id="message"
-                    label="Message"
-                    disabled={message.status !== 'draft'}
-                    bind:value={body} />
-                <FormItem>
-                    <InputFilePicker
-                        disabled={message.status !== 'draft'}
-                        bind:value={file}
-                        label="Media"
-                        optionalText="(Optional)" />
-                </FormItem>
-                <form class="form">
-                    <FormItem>
-                        <Label
-                            tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
-                            >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
-                    </FormItem>
-                    <div class=" u-grid u-gap-8">
-                        <ul class="form-list" style="--p-form-list-gap: 1rem">
-                            {#each customData || [] as _, rowIndex}
-                                <FormItem isMultiple>
-                                    <InputText
-                                        id={`${rowIndex}-key`}
-                                        isMultiple
-                                        fullWidth
-                                        disabled={message.status != 'draft'}
-                                        bind:value={customData[rowIndex][0]}
-                                        placeholder="Enter key"
-                                        label="Key"
-                                        showLabel={false} />
-                                    <InputText
-                                        id={`${rowIndex}-value`}
-                                        isMultiple
-                                        fullWidth
-                                        disabled={message.status != 'draft'}
-                                        bind:value={customData[rowIndex][1]}
-                                        placeholder="Enter value"
-                                        label="Value"
-                                        showLabel={false}
-                                        required />
-                                    <FormItemPart alignEnd>
-                                        <Button
-                                            text
-                                            disabled={message.status != 'draft'}
-                                            on:click={() => {
-                                                if (customData.length === 1) {
-                                                    customData = [['', '']];
-                                                    return;
-                                                }
-
-                                                customData = customData.filter(
-                                                    (_, i) => i !== rowIndex
-                                                );
-                                            }}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </Button>
-                                    </FormItemPart>
-                                </FormItem>
-                            {/each}
-                        </ul>
-                        {#if dataError}
-                            <Helper type="warning">{dataError}</Helper>
-                        {/if}
-                        <Button
-                            noMargin
-                            text
-                            disabled={customData && customData[customData.length - 1][0] === ''}
-                            on:click={() => {
-                                customData = [...customData, ['', '']];
-                            }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add data</span>
-                        </Button>
-                    </div>
-                </form>
-            </FormList>
+            <InputText
+                required
+                id="title"
+                label="Title"
+                disabled={message.status !== 'draft'}
+                bind:value={title} />
+            <InputTextarea
+                required
+                id="message"
+                label="Message"
+                disabled={message.status !== 'draft'}
+                bind:value={body} />
+            <InputFilePicker
+                disabled={message.status !== 'draft'}
+                bind:value={file}
+                label="Media"
+                optionalText="(Optional)" />
+            <Layout.Stack gap="s">
+                {#each customData || [] as [key, value], index}
+                    <Layout.Stack direction="row" alignItems="flex-end">
+                        <InputText
+                            id={`key-${index}`}
+                            bind:value={key}
+                            placeholder="Enter key"
+                            label={index === 0 ? 'Key' : undefined} />
+                        <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                            <InputText
+                                id={`value-${index}`}
+                                bind:value
+                                placeholder="Enter value"
+                                label={index === 0 ? 'Value' : undefined} />
+                            <Button
+                                icon
+                                compact
+                                disabled={(!key || !value) && index === 0}
+                                on:click={() => {
+                                    if (customData.length === 1) {
+                                        customData = [['', '']];
+                                        return;
+                                    }
+                                    customData = customData.filter((_, i) => i !== index);
+                                }}>
+                                <span class="icon-x" aria-hidden="true"></span>
+                            </Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                {/each}
+                <div>
+                    <Button
+                        compact
+                        disabled={customData.length > 0 &&
+                            customData[customData.length - 1][0] === ''}
+                        on:click={() => (customData = [...customData, ['', '']])}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add data
+                    </Button>
+                </div>
+            </Layout.Stack>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button {disabled} submit>Update</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/scheduleModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/scheduleModal.svelte
index 5dc3e417d..b069218d6 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/scheduleModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/scheduleModal.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Modal } from '$lib/components';
-    import { Button, FormList, InputDate, InputTime, Helper } from '$lib/elements/forms';
+    import { Button, InputDate, InputTime, Helper } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
     import { Dependencies } from '$lib/constants';
     import { isSameDay, toLocaleDateISO, toLocaleTimeISO } from '$lib/helpers/date';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let show = false;
     export let message: Models.Message & { data: Record<string, unknown> };
@@ -46,7 +46,7 @@
         try {
             if (message.providerType == MessagingProviderType.Email) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateEmail(
                         message.$id,
                         undefined,
@@ -62,7 +62,7 @@
                     );
             } else if (message.providerType == MessagingProviderType.Sms) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateSms(
                         message.$id,
                         undefined,
@@ -74,7 +74,7 @@
                     );
             } else if (message.providerType == MessagingProviderType.Push) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updatePush(
                         message.$id,
                         undefined,
@@ -105,6 +105,7 @@
             });
             show = false;
         } catch (error) {
+            show = false;
             addNotification({
                 message: error.message,
                 type: 'error'
@@ -120,16 +121,13 @@
     $: dateTime = new Date(`${date}T${time}`);
 </script>
 
-<Modal title="Schedule message" bind:show onSubmit={update} headerDivider={false} size="big">
+<Modal title="Schedule message" bind:show onSubmit={update}>
     <div>
-        <FormList>
-            <div
-                class="u-grid u-gap-16"
-                style="grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr;">
-                <InputDate id="date" label="Date" required={true} min={minDate} bind:value={date} />
-                <InputTime id="time" label="Time" required={true} min={minTime} bind:value={time} />
-            </div>
-        </FormList>
+        <div class="u-grid u-gap-16" style="grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr;">
+            <InputDate id="date" label="Date" required={true} min={minDate} bind:value={date} />
+            <InputTime id="time" label="Time" required={true} min={minTime} bind:value={time} />
+        </div>
+
         <Helper type="neutral">
             {#if !dateTime || isNaN(dateTime.getTime())}
                 The message will be sent later
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/sendModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/sendModal.svelte
index c48544080..3fb7c5d22 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/sendModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/sendModal.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
     import { Dependencies } from '$lib/constants';
-    import { page } from '$app/stores';
+    import { Dialog, Layout } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
+    import { page } from '$app/state';
 
     export let show = false;
     export let message: Models.Message & { data: Record<string, unknown> };
@@ -31,7 +31,7 @@
         try {
             if (message.providerType == MessagingProviderType.Email) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateEmail(
                         message.$id,
                         undefined,
@@ -43,7 +43,7 @@
                     );
             } else if (message.providerType == MessagingProviderType.Sms) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateSms(
                         message.$id,
                         undefined,
@@ -54,7 +54,7 @@
                     );
             } else if (message.providerType == MessagingProviderType.Push) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updatePush(
                         message.$id,
                         undefined,
@@ -84,6 +84,7 @@
             });
             show = false;
         } catch (error) {
+            show = false;
             addNotification({
                 message: error.message,
                 type: 'error'
@@ -95,7 +96,7 @@
     };
 </script>
 
-<Modal title="Send message" bind:show onSubmit={update} headerDivider={false} size="small">
+<Dialog title="Send message" bind:open={show}>
     <div class="u-flex-vertical u-gap-16">
         <p data-private>
             You are about to send a message to an estimated <span class="u-bold"
@@ -105,7 +106,9 @@
         <p class="u-bold">This action is irreversible.</p>
     </div>
     <svelte:fragment slot="footer">
-        <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button submit>Send</Button>
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button on:click={update}>Send</Button>
+        </Layout.Stack>
     </svelte:fragment>
-</Modal>
+</Dialog>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/smsMessage.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/smsMessage.svelte
index 4ab95ec87..4b94430c1 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/smsMessage.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/smsMessage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, InputTextarea } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import SMSPhone from '../smsPhone.svelte';
     import { onMount } from 'svelte';
@@ -9,7 +9,8 @@
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     export let message: Models.Message & { data: Record<string, string> };
 
@@ -23,7 +24,7 @@
     async function update() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.updateSms(message.$id, undefined, undefined, undefined, content);
             await invalidate(Dependencies.MESSAGING_MESSAGE);
             addNotification({
@@ -46,17 +47,15 @@
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
+            <Typography.Title size="s">Message</Typography.Title>
             <SMSPhone {content} />
         </div>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputTextarea
-                    id="message"
-                    label="Message"
-                    disabled={message.status != 'draft'}
-                    bind:value={content}></InputTextarea>
-            </FormList>
+            <InputTextarea
+                id="message"
+                label="Message"
+                disabled={message.status != 'draft'}
+                bind:value={content}></InputTextarea>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button {disabled} submit>Update</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTargets.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTargets.svelte
index b08b4591f..af5f00e77 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTargets.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTargets.svelte
@@ -1,21 +1,6 @@
 <script lang="ts">
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import {
-        CardGrid,
-        Heading,
-        Empty,
-        PaginationInline,
-        EmptySearch,
-        Alert
-    } from '$lib/components';
+    import { CardGrid, Empty, PaginationInline, EmptySearch } from '$lib/components';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -26,7 +11,9 @@
     import { Button, Form } from '$lib/elements/forms';
     import UserTargetsModal from '../userTargetsModal.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { page } from '$app/stores';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Alert, Icon, Layout, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     export let message: Models.Message & { data: Record<string, unknown> };
     export let selectedTargetsById: Record<string, Models.Target>;
@@ -58,15 +45,15 @@
         try {
             if (message.providerType == MessagingProviderType.Email) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateEmail(message.$id, undefined, undefined, targetIds);
             } else if (message.providerType == MessagingProviderType.Sms) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateSms(message.$id, undefined, undefined, targetIds);
             } else if (message.providerType == MessagingProviderType.Push) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updatePush(message.$id, undefined, undefined, targetIds);
             }
             await invalidate(Dependencies.MESSAGING_MESSAGE);
@@ -124,7 +111,7 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={!isDraft}>
-        <Heading tag="h6" size="7" id="variables">Targets</Heading>
+        <Typography.Title size="s">Targets</Typography.Title>
         <svelte:fragment slot="aside">
             {@const sum = targetIds.length || Object.values(recipients).length}
             {@const dataSource =
@@ -135,113 +122,82 @@
             {#if hasDeletedUsers}
                 <div class:u-padding-block-end-16={dataSource.length}>
                     {#if hasDeletedUsers && !dataSource.length}
-                        <Alert type="info">
-                            <svelte:fragment slot="title"
-                                >There are no targets to show</svelte:fragment>
-                            This message was sent to users who are no longer available, so their information
-                            cannot be displayed.
-                        </Alert>
+                        <Alert.Inline status="info" title="There are no targets to show">
+                            This message was sent to users who are no longer available, so their
+                            information cannot be displayed.
+                        </Alert.Inline>
                     {:else}
-                        <Alert
-                            type="info"
+                        <Alert.Inline
+                            status="info"
                             dismissible={dataSource.length > 0}
                             on:dismiss={() => (hasDeletedUsers = false)}>
                             This message was sent to users who are no longer available, so their
                             information cannot be displayed.
-                        </Alert>
+                        </Alert.Inline>
                     {/if}
                 </div>
             {/if}
 
             {#if sum && dataSource.length}
-                <div class="u-flex u-cross-center u-main-space-between">
-                    <div class="u-width-full-line u-flex u-main-space-between">
-                        <span class="eyebrow-heading-3">Target</span>
-
-                        {#if recipientsAvailable}
-                            <span class="eyebrow-heading-3">Identifier</span>
-
-                            <!-- empty header -->
-                            <span class="eyebrow-heading-3" />
-                        {/if}
-                    </div>
-                    {#if isDraft}
-                        <Button
-                            text
-                            noMargin
-                            on:click={() => {
-                                showTargets = true;
-                            }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add</span>
-                        </Button>
-                    {/if}
-                </div>
+                {#if isDraft}
+                    <Layout.Stack direction="row-reverse">
+                        <div>
+                            <Button secondary on:click={() => (showTargets = true)}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Add
+                            </Button>
+                        </div>
+                    </Layout.Stack>
+                {/if}
 
                 <div class="u-flex u-flex-vertical u-gap-24">
-                    <Table noMargin noStyles>
-                        <TableHeader>
-                            <TableCellHead style="padding: 0" />
-
-                            {#if recipientsAvailable}
-                                <TableCellHead style="padding: 0" />
-                            {/if}
-
-                            <TableCellHead width={25} style="padding: 0" />
-                        </TableHeader>
-                        <TableBody>
-                            <TableRow />
-                            <!-- dataSource contains objects with $id, providerType, name & identifier -->
-                            {#each dataSource.slice(offset, offset + limit) as source (source['$id'])}
-                                <TableRow>
-                                    <TableCell title="Target">
-                                        <div class="u-flex u-cross-center">
-                                            <span class="title">
-                                                <span class="u-line-height-1-5">
-                                                    <span class="body-text-2" data-private>
-                                                        {#if source['providerType'] === MessagingProviderType.Push}
-                                                            {source['name']}
-                                                        {:else}
-                                                            {source['identifier']}
-                                                        {/if}
-                                                    </span>
-                                                </span></span>
-                                        </div>
-                                    </TableCell>
-                                    {#if recipientsAvailable}
-                                        <TableCell title="Identifier">
-                                            <span class="body-text-2" data-private>
-                                                {source['name']}
-                                            </span>
-                                        </TableCell>
+                    <Table.Root
+                        let:root
+                        columns={[
+                            { id: 'target' },
+                            { id: 'identifier', hide: !recipientsAvailable },
+                            { id: 'actions', width: 40 }
+                        ]}>
+                        <svelte:fragment slot="header" let:root>
+                            <Table.Header.Cell column="target" {root}>Target</Table.Header.Cell>
+                            <Table.Header.Cell column="identifier" {root}
+                                >Identifier</Table.Header.Cell>
+                            <Table.Header.Cell column="actions" {root} />
+                        </svelte:fragment>
+                        {#each dataSource.slice(offset, offset + limit) as source (source['$id'])}
+                            <Table.Row.Base {root}>
+                                <Table.Cell column="target" {root}>
+                                    {#if source['providerType'] === MessagingProviderType.Push}
+                                        {source['name']}
+                                    {:else}
+                                        {source['identifier']}
                                     {/if}
-
-                                    <TableCell title="Remove">
-                                        {#if isDraft}
-                                            <div
-                                                class="u-flex u-main-end"
-                                                style="--p-button-size: 1.25rem">
-                                                <Button
-                                                    text
-                                                    class="is-only-icon"
-                                                    ariaLabel="delete"
-                                                    disabled={!isDraft}
-                                                    on:click={() => removeTarget(source['$id'])}>
-                                                    <span
-                                                        class="icon-x u-font-size-20"
-                                                        aria-hidden="true" />
-                                                </Button>
-                                            </div>
-                                        {/if}
-                                    </TableCell>
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </Table>
-                    <div class="u-flex u-main-space-between">
-                        <p class="text">Total targets: {sum}</p>
-                        <PaginationInline {sum} {limit} bind:offset />
-                    </div>
+                                </Table.Cell>
+                                <Table.Cell column="identifier" {root}>
+                                    {source['name']}
+                                </Table.Cell>
+                                <Table.Cell column="actions" {root}>
+                                    {#if isDraft}
+                                        <Button
+                                            text
+                                            class="is-only-icon"
+                                            ariaLabel="delete"
+                                            disabled={!isDraft}
+                                            on:click={() => removeTarget(source['$id'])}>
+                                            <span class="icon-x u-font-size-20" aria-hidden="true"
+                                            ></span>
+                                        </Button>
+                                    {/if}
+                                </Table.Cell>
+                            </Table.Row.Base>
+                        {/each}
+                    </Table.Root>
+                    {#if sum > limit}
+                        <div class="u-flex u-main-space-between">
+                            <p class="text">Total targets: {sum}</p>
+                            <PaginationInline total={sum} {limit} bind:offset />
+                        </div>
+                    {/if}
                 </div>
             {:else if isDraft}
                 <Empty on:click={() => (showTargets = true)}>Add a target</Empty>
@@ -251,10 +207,7 @@
                         No targets have been selected.
                         <p>
                             Need a hand? Check out our <Button
-                                link
-                                external
-                                href="https://appwrite.io/docs/products/messaging/targets"
-                                text>
+                                href="https://appwrite.io/docs/products/messaging/targets">
                                 documentation</Button
                             >.
                         </p>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTopics.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTopics.svelte
index 00c61ca8d..c0dd34cba 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTopics.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/updateTopics.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
     import { type Models, MessagingProviderType } from '@appwrite.io/console';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, EmptySearch } from '$lib/components';
+    import { CardGrid, Empty, PaginationInline, EmptySearch } from '$lib/components';
     import TopicsModal from '../topicsModal.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -20,7 +12,9 @@
     import { onMount } from 'svelte';
     import { getTotal } from '../wizard/store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { page } from '$app/stores';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
     export let message: Models.Message;
     export let selectedTopicsById: Record<string, Models.Topic>;
@@ -51,15 +45,15 @@
         try {
             if (message.providerType == MessagingProviderType.Email) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateEmail(message.$id, topicIds);
             } else if (message.providerType == MessagingProviderType.Sms) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updateSms(message.$id, topicIds);
             } else if (message.providerType == MessagingProviderType.Push) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .messaging.updatePush(message.$id, topicIds);
             }
             await invalidate(Dependencies.MESSAGING_MESSAGE);
@@ -90,78 +84,59 @@
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status !== 'draft'}>
-        <Heading tag="h6" size="7" id="variables">Topics</Heading>
+    <CardGrid hideFooter={message.status != 'draft'}>
+        <Typography.Title size="s">Topics</Typography.Title>
         <svelte:fragment slot="aside">
             {@const sum = topicIds.length}
             {#if sum}
-                <div class="u-flex u-cross-center u-main-space-between">
-                    <div>
-                        <span class="eyebrow-heading-3">Topic</span>
-                    </div>
-                    {#if message.status === 'draft'}
+                <Layout.Stack direction="row-reverse">
+                    {#if message.status == 'draft'}
                         <Button
-                            text
-                            noMargin
+                            secondary
                             on:click={() => {
                                 showTopics = true;
                             }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add
                         </Button>
                     {/if}
-                </div>
-                <div class="u-flex u-flex-vertical u-gap-24">
-                    <Table noMargin noStyles>
-                        <TableHeader>
-                            <TableCellHead style="padding: 0" />
-                            <TableCellHead width={40} style="padding: 0" />
-                        </TableHeader>
-                        <TableBody>
-                            {#each topics.slice(offset, offset + limit) as topic (topic.$id)}
-                                <TableRow>
-                                    <TableCell title="Topic">
-                                        <div class="u-flex u-cross-center">
-                                            <span class="title">
-                                                <span class="u-line-height-1-5">
-                                                    <span class="body-text-2 u-bold" data-private>
-                                                        {topic.name}
-                                                    </span>
-                                                    <span class="collapsible-button-optional">
-                                                        ({getTotal(topic)} targets)
-                                                    </span>
-                                                </span>
-                                            </span>
-                                        </div>
-                                    </TableCell>
-                                    <TableCell title="Remove" width={40}>
-                                        {#if message.status === 'draft'}
-                                            <div
-                                                class="u-flex u-main-end"
-                                                style="--p-button-size: 1.25rem">
-                                                <Button
-                                                    text
-                                                    class="is-only-icon"
-                                                    ariaLabel="delete"
-                                                    disabled={message.status !== 'draft'}
-                                                    on:click={() => removeTopic(topic.$id)}>
-                                                    <span
-                                                        class="icon-x u-font-size-20"
-                                                        aria-hidden="true" />
-                                                </Button>
-                                            </div>
-                                        {/if}
-                                    </TableCell>
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </Table>
+                </Layout.Stack>
+                <Table.Root columns={[{ id: 'topic' }, { id: 'actions', width: 40 }]} let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="topic" {root}>Topic</Table.Header.Cell>
+                        <Table.Header.Cell column="actions" {root} />
+                    </svelte:fragment>
+                    {#each topics.slice(offset, offset + limit) as topic (topic.$id)}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="topic" {root}>
+                                {topic.name}
+                                ({getTotal(topic)} targets)
+                            </Table.Cell>
+                            <Table.Cell column="actions" {root}>
+                                {#if message.status === 'draft'}
+                                    <div class="u-flex u-main-end" style="--p-button-size: 1.25rem">
+                                        <Button
+                                            text
+                                            class="is-only-icon"
+                                            ariaLabel="delete"
+                                            disabled={message.status != 'draft'}
+                                            on:click={() => removeTopic(topic.$id)}>
+                                            <span class="icon-x u-font-size-20" aria-hidden="true"
+                                            ></span>
+                                        </Button>
+                                    </div>
+                                {/if}
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
+                {#if sum > limit}
                     <div class="u-flex u-main-space-between">
                         <p class="text">Total topics: {sum}</p>
-                        <PaginationInline {sum} {limit} bind:offset />
+                        <PaginationInline total={sum} {limit} bind:offset />
                     </div>
-                </div>
-            {:else if message.status === 'draft'}
+                {/if}
+            {:else if message.status == 'draft'}
                 <Empty on:click={() => (showTopics = true)}>Add a topic</Empty>
             {:else}
                 <EmptySearch hidePagination>
@@ -169,10 +144,7 @@
                         No topics have been selected.
                         <p>
                             Need a hand? Check out our <Button
-                                link
-                                external
-                                href="https://appwrite.io/docs/products/messaging/topics"
-                                text>
+                                href="https://appwrite.io/docs/products/messaging/topics">
                                 documentation</Button
                             >.
                         </p>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/messageStatusPill.svelte b/src/routes/(console)/project-[region]-[project]/messaging/messageStatusPill.svelte
index 49f2684cb..172b76a7f 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/messageStatusPill.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/messageStatusPill.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-    import { Pill } from '$lib/elements';
+    import { Badge } from '@appwrite.io/pink-svelte';
+    import type { ComponentProps } from 'svelte';
 
     export let status: string;
+
+    function getType(status: string): ComponentProps<Badge>['type'] {
+        if (status === 'processing') return 'warning';
+        if (status === 'sent') return 'success';
+        if (status === 'failed') return 'error';
+        return undefined;
+    }
 </script>
 
-<Pill
-    info={status === 'scheduled'}
-    warning={status === 'processing'}
-    success={status === 'sent'}
-    danger={status === 'failed'}
-    on:click>
-    <span class="text u-trim">
-        {status}
-    </span>
-</Pill>
+<Badge variant="secondary" type={getType(status)} on:click content={status} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/provider.svelte b/src/routes/(console)/project-[region]-[project]/messaging/provider.svelte
index a78eb75c0..425f0d115 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/provider.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/provider.svelte
@@ -60,46 +60,30 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
+    import { IconMail } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
 
     export let provider: Providers | string;
     export let name: string = '';
     export let noIcon = false;
-    export let size: 's' | 'm' | 'l' = 'm';
+    export let size: 'xs' | 's' | 'm' | 'l' = 'm';
 
     const { icon, displayName } = getProviderDisplayNameAndIcon(provider);
-
-    let textSize = '1.25rem';
-    switch (size) {
-        case 's':
-            textSize = '1rem';
-            break;
-        case 'l':
-            textSize = '1.5rem';
-            break;
-    }
 </script>
 
 {#if icon === ''}
     Invalid provider
 {:else}
-    <div class="u-inline-flex u-cross-center u-gap-8">
+    <Layout.Stack direction="row" alignItems="center">
         {#if !noIcon}
-            <div
-                class="avatar"
-                class:is-size-large={size === 'l'}
-                class:is-size-small={size === 's'}>
-                {#if provider === Providers.SMTP}
-                    <span style:--p-text-size={textSize} class="icon-mail" />
-                {:else}
-                    <img
-                        style:--p-text-size={textSize}
-                        src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                        alt={name || displayName} />
-                {/if}
-            </div>
+            {#if provider === Providers.SMTP}
+                <Icon icon={IconMail} {size} />
+            {:else}
+                <img src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`} alt={provider} />
+            {/if}
         {/if}
         <slot>
             {name || displayName}
         </slot>
-    </div>
+    </Layout.Stack>
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providerType.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providerType.svelte
index 91f16310e..46f62ec92 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providerType.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providerType.svelte
@@ -1,36 +1,27 @@
 <script lang="ts">
     import type { Models } from '@appwrite.io/console';
     import { MessagingProviderType } from '@appwrite.io/console';
+    import { IconAnnotation, IconDeviceMobile, IconMail } from '@appwrite.io/pink-icons-svelte';
+    import { Avatar, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import type { ComponentType } from 'svelte';
+    import { getProviderText } from './helper';
 
     export let type: MessagingProviderType | Models.Provider['type'];
     export let noIcon = false;
-    export let size: 's' | 'm' | 'l' = 'm';
+    export let size: 'xs' | 's' | 'm' | 'l' = 'm';
 
-    let icon = '';
-    let text = '';
+    const text = getProviderText(type);
+    let icon: ComponentType;
 
     switch (type) {
         case MessagingProviderType.Email:
-            icon = 'icon-mail';
-            text = 'Email';
+            icon = IconMail;
             break;
         case MessagingProviderType.Sms:
-            icon = 'icon-annotation';
-            text = 'SMS';
+            icon = IconAnnotation;
             break;
         case MessagingProviderType.Push:
-            icon = 'icon-device-mobile';
-            text = 'Push';
-            break;
-    }
-
-    let textSize = '1.25rem';
-    switch (size) {
-        case 's':
-            textSize = '1rem';
-            break;
-        case 'l':
-            textSize = '1.5rem';
+            icon = IconDeviceMobile;
             break;
     }
 </script>
@@ -38,17 +29,14 @@
 {#if text === ''}
     Invalid provider type
 {:else}
-    <div class="u-inline-flex u-cross-center u-gap-8">
+    <Layout.Stack inline direction="row" alignItems="center">
         {#if !noIcon}
-            <div
-                class="avatar"
-                class:is-size-large={size === 'l'}
-                class:is-size-small={size === 's'}>
-                <span class={icon} style:font-size={textSize} aria-hidden="true" />
-            </div>
+            <Avatar {size}>
+                <Icon {icon} size="s" />
+            </Avatar>
         {/if}
-        <slot>
+        <slot {text}>
             {text}
         </slot>
-    </div>
+    </Layout.Stack>
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
index 04910aae7..8aed8a13b 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -1,72 +1,46 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
-        Empty,
         EmptySearch,
         SearchQuery,
         PaginationWithLimit,
-        Heading,
         ViewSelector,
         EmptyFilter
     } from '$lib/components';
     import { Container } from '$lib/layout';
-    import type { PageData } from './$types';
     import { columns } from './store';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import CreateProviderDropdown from './createProviderDropdown.svelte';
     import Table from './table.svelte';
     import { base } from '$app/paths';
     import { canWriteProviders } from '$lib/stores/roles';
+    import { Card, Layout, Empty, Icon } from '@appwrite.io/pink-svelte';
+    import { View } from '$lib/helpers/load';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
-    export let data: PageData;
-
-    let showCreateDropdownMobile = false;
-    let showCreateDropdownDesktop = false;
-    let showCreateDropdownEmpty = false;
+    export let data;
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Providers</Heading>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search providers" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
+            <ViewSelector view={View.Table} {columns} hideView />
             {#if $canWriteProviders}
-                <div class="is-only-mobile">
-                    <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
-                </div>
+                <CreateProviderDropdown let:toggle>
+                    <Button on:click={toggle} event="create_provider">
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create provider
+                    </Button>
+                </CreateProviderDropdown>
             {/if}
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery search={data.search} placeholder="Search provider">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                {#if $canWriteProviders}
-                    <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
-                {/if}
-            </div>
-        </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
-            </div>
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.providers.total}
         <Table {data} />
 
@@ -85,40 +59,31 @@
             </div>
             <Button
                 secondary
-                href={`${base}/project-${$page.params.region}-${$page.params.project}/messaging/providers`}>
+                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/providers`}>
                 Clear search
             </Button>
         </EmptySearch>
     {:else}
-        <Empty single target="provider">
-            <div class="u-text-center">
-                <Heading size="7" tag="h2" trimmed={false}>
-                    Create your first provider to get started.
-                </Heading>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Need a hand? Learn more in our documentation.
-                </p>
-            </div>
-            <div class="u-flex u-flex-wrap u-gap-16 u-main-center">
-                <Button
-                    external
-                    href="https://appwrite.io/docs/products/messaging/providers"
-                    text
-                    event="empty_documentation"
-                    ariaLabel={`create provider`}>
-                    Documentation
-                </Button>
-                {#if $canWriteProviders}
-                    <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
-                        <Button
-                            secondary
-                            on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
-                            event="create_provider">
-                            <span class="text">Create provider</span>
-                        </Button>
-                    </CreateProviderDropdown>
-                {/if}
-            </div>
-        </Empty>
+        <Card.Base padding="none">
+            <Empty
+                title="Create your first provider"
+                description="Need a hand? Learn more in our documentation.">
+                <slot name="actions" slot="actions">
+                    <Button
+                        external
+                        href="https://appwrite.io/docs/products/messaging/providers"
+                        text
+                        event="empty_documentation"
+                        size="s">Documentation</Button>
+                    {#if $canWriteProviders}
+                        <CreateProviderDropdown let:toggle>
+                            <Button on:click={toggle} event="create_provider" secondary>
+                                Create provider
+                            </Button>
+                        </CreateProviderDropdown>
+                    {/if}
+                </slot>
+            </Empty>
+        </Card.Base>
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.ts b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.ts
index 8a2e10922..e8f6bf337 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.ts
@@ -18,8 +18,8 @@ export const load: PageLoad = async ({ depends, url, route, params }) => {
 
     const page = getPage(url);
     const search = getSearch(url);
-    const view = getView(params.project, url, route, View.Grid);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const view = getView(url, route, View.Grid);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/apple.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/apple.svelte
new file mode 100644
index 000000000..e8b0b55ec
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/apple.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="apple" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/firebase.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/firebase.svelte
new file mode 100644
index 000000000..94c2c327e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/firebase.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="firebase" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/index.ts b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/index.ts
new file mode 100644
index 000000000..fc443c19a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/index.ts
@@ -0,0 +1,9 @@
+export { default as IconApple } from './apple.svelte';
+export { default as IconFirebase } from './firebase.svelte';
+export { default as IconMailgun } from './mailgun.svelte';
+export { default as IconSendgrid } from './sendgrid.svelte';
+export { default as IconTwilio } from './twilio.svelte';
+export { default as IconMsg91 } from './msg91.svelte';
+export { default as IconTelesign } from './telesign.svelte';
+export { default as IconTextMagic } from './textmagic.svelte';
+export { default as IconVonage } from './vonage.svelte';
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/mailgun.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/mailgun.svelte
new file mode 100644
index 000000000..7bd6c1c1b
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/mailgun.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="mailgun" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/msg91.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/msg91.svelte
new file mode 100644
index 000000000..36c971bb4
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/msg91.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="msg91" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/sendgrid.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/sendgrid.svelte
new file mode 100644
index 000000000..02dfbf27e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/sendgrid.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="sendgrid" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/telesign.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/telesign.svelte
new file mode 100644
index 000000000..749faa8b6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/telesign.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="telesign" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/textmagic.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/textmagic.svelte
new file mode 100644
index 000000000..46bd4c43f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/textmagic.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="textmagic" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/twilio.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/twilio.svelte
new file mode 100644
index 000000000..2a58cc18c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/twilio.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="twilio" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/components/vonage.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/vonage.svelte
new file mode 100644
index 000000000..960c69ca9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/components/vonage.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="vonage" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte
index 321e4143e..5b8cef881 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Provider from './wizard/provider.svelte';
     import Settings from './wizard/settings.svelte';
     import { sdk } from '$lib/stores/sdk';
@@ -10,10 +8,18 @@
     import { base } from '$app/paths';
     import { project } from '../../store';
     import { wizard } from '$lib/stores/wizard';
-    import { provider, providerParams } from './wizard/store';
-    import { ID, type Models } from '@appwrite.io/console';
-    import { Providers } from '../provider.svelte';
-    import { page } from '$app/stores';
+    import { provider, providerParams, providerType } from './wizard/store';
+    import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
+    import { getProviderDisplayNameAndIcon, Providers } from '../provider.svelte';
+    import { page } from '$app/state';
+    import { Button, Form } from '$lib/elements/forms';
+    import { ActionList, Card, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { IconBookOpen, IconInfo, IconUserGroup } from '@appwrite.io/pink-icons-svelte';
+    import { newMemberModal } from '$lib/stores/organization';
+    import { getProviderText } from '../helper';
+    import { providers } from './store';
+    import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
 
     async function create() {
         try {
@@ -22,7 +28,7 @@
             switch ($provider) {
                 case Providers.Twilio:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createTwilioProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -34,7 +40,7 @@
                     break;
                 case Providers.Msg91:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createMsg91Provider(
                             providerId,
                             $providerParams[$provider].name,
@@ -46,7 +52,7 @@
                     break;
                 case Providers.Telesign:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createTelesignProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -58,7 +64,7 @@
                     break;
                 case Providers.Textmagic:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createTextmagicProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -70,7 +76,7 @@
                     break;
                 case Providers.Vonage:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createVonageProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -82,7 +88,7 @@
                     break;
                 case Providers.Mailgun:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createMailgunProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -98,7 +104,7 @@
                     break;
                 case Providers.Sendgrid:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createSendgridProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -112,7 +118,7 @@
                     break;
                 case Providers.SMTP:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createSmtpProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -132,7 +138,7 @@
                     break;
                 case Providers.FCM:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createFcmProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -142,7 +148,7 @@
                     break;
                 case Providers.APNS:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.createApnsProvider(
                             providerId,
                             $providerParams[$provider].name,
@@ -174,16 +180,63 @@
             trackError(error, Submit.MessagingProviderCreate);
         }
     }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Provider',
-        component: Provider
-    });
-    stepsComponents.set(2, {
-        label: 'Settings',
-        component: Settings
-    });
 </script>
 
-<Wizard title="Create provider" steps={stepsComponents} on:finish={create} />
+<Wizard title="Create provider" columnSize="l">
+    <Form onSubmit={create} isModal={false}>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Provider">
+                <Provider />
+            </Fieldset>
+            <Fieldset legend="Settings">
+                <Settings />
+            </Fieldset>
+            <Layout.Stack justifyContent="flex-end" direction="row">
+                <Button submit>Create</Button>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card.Base padding="s">
+            <Layout.Stack gap="s">
+                <Typography.Text variant="m-500">Need a hand?</Typography.Text>
+                <ActionList.Root>
+                    {#if providers[$providerType].providers[$provider].needAHand}
+                        {@const needAHand = providers[$providerType].providers[$provider].needAHand}
+                        <ActionList.Item.Accordion
+                            hasDivider
+                            title={`How to enable ${getProviderText($provider)} ${
+                                $providerType == MessagingProviderType.Push ||
+                                $providerType == MessagingProviderType.Sms
+                                    ? `${getProviderDisplayNameAndIcon($provider).displayName} notifications`
+                                    : getProviderText($provider)
+                            }?`}
+                            icon={IconInfo}>
+                            <Layout.Stack>
+                                {#each needAHand as p}
+                                    <p>
+                                        {@html p}
+                                    </p>
+                                {/each}
+                            </Layout.Stack>
+                        </ActionList.Item.Accordion>
+                    {/if}
+                    <ActionList.Item.Anchor
+                        hasDivider
+                        href={`https://appwrite.io/docs/products/messaging/${$provider}`}
+                        title="Read the guide in the docs"
+                        icon={IconBookOpen} />
+                    <ActionList.Item.Button
+                        on:click={() => {
+                            $newMemberModal = true;
+                        }}
+                        title="Invite a team member"
+                        icon={IconUserGroup} />
+                </ActionList.Root>
+            </Layout.Stack>
+        </Card.Base>
+    </svelte:fragment>
+    {#if $newMemberModal}
+        <CreateMember bind:showCreate={$newMemberModal} />
+    {/if}
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/createProviderDropdown.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/createProviderDropdown.svelte
index 6c8ad722d..ea8f54839 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/createProviderDropdown.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/createProviderDropdown.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { DropList, DropListItem } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
     import { providers } from './store';
     import Create from './create.svelte';
@@ -8,21 +6,15 @@
     import { Providers } from '../provider.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { MessagingProviderType } from '@appwrite.io/console';
-
-    export let showCreateDropdown = false;
+    import { ActionMenu, Popover } from '@appwrite.io/pink-svelte';
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
-    <slot>
-        <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_provider">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create provider</span>
-        </Button>
-    </slot>
-    <svelte:fragment slot="list">
+<Popover let:toggle padding="none" placement="bottom-end">
+    <slot {toggle} />
+    <ActionMenu.Root slot="tooltip">
         {#each Object.entries(providers) as [type, option]}
-            <DropListItem
-                icon={option.icon}
+            <ActionMenu.Item.Button
+                leadingIcon={option.icon}
                 on:click={() => {
                     if (
                         type !== MessagingProviderType.Email &&
@@ -35,11 +27,10 @@
                     if (p && isValueOfStringEnum(Providers, p)) {
                         $provider = p;
                     }
-                    showCreateDropdown = false;
                     wizard.start(Create);
                 }}>
                 {option.name}
-            </DropListItem>
+            </ActionMenu.Item.Button>
         {/each}
-    </svelte:fragment>
-</DropList>
+    </ActionMenu.Root>
+</Popover>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
index 70ac7604f..09e53b779 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { writable } from 'svelte/store';
     import { provider } from './store';
@@ -21,11 +21,9 @@
     import { base } from '$app/paths';
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete provider</Heading>
-    </div>
-    <p>The provider's instance will be permanently deleted. This action is irreversible.</p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete provider</svelte:fragment>
+    The provider's instance will be permanently deleted. This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
index d22420cb4..cb0eb24a8 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
@@ -1,21 +1,20 @@
 <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 } from '$lib/elements/forms';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { provider } from './store';
     import { project } from '../../../store';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let showDelete = false;
-
+    let error: string;
     const deleteProvider = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.deleteProvider($provider.$id);
             showDelete = false;
             addNotification({
@@ -24,30 +23,15 @@
             });
             trackEvent(Submit.MessagingProviderDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/messaging/providers`
+                `${base}/project-${page.params.region}-${page.params.project}/messaging/providers`
             );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingProviderDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MessagingProviderDelete);
         }
     };
 </script>
 
-<Modal
-    title="Delete provider"
-    bind:show={showDelete}
-    onSubmit={deleteProvider}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
-        Are you sure you want to delete <b>{$provider.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>
+<Confirm onSubmit={deleteProvider} title="Delete provider" bind:open={showDelete} bind:error>
+    <span>Are you sure you want to delete <b>{$provider.name}</b> from '{$project.name}'?</span>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte
index c28e9d4cb..0c614a491 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { provider } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${$page.params.region}-${projectId}/messaging/providers`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/messaging/providers`}>
             {$provider?.name ? $provider?.name : '-'}
         </CoverTitle>
         <Id value={$provider?.$id} event="provider">{$provider?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateName.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateName.svelte
index b037c4e44..9c4170675 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateName.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import { provider } from './store';
@@ -9,7 +9,7 @@
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let providerName: string = null;
     onMount(async () => {
@@ -23,52 +23,52 @@
             switch ($provider.provider) {
                 case Providers.Twilio:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTwilioProvider(providerId, providerName);
                     break;
                 case Providers.Msg91:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateMsg91Provider(providerId, providerName);
                     break;
                 case Providers.Telesign:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTelesignProvider(providerId, providerName);
                     break;
                 case Providers.Textmagic:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTextmagicProvider(providerId, providerName);
                     break;
                 case Providers.Vonage:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateVonageProvider(providerId, providerName);
                     break;
                 case Providers.Mailgun:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateMailgunProvider(providerId, providerName);
                     break;
                 case Providers.Sendgrid:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateSendgridProvider(providerId, providerName);
                     break;
                 case Providers.SMTP:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateSmtpProvider(providerId, providerName);
                     break;
                 case Providers.FCM:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateFcmProvider(providerId, providerName);
                     break;
                 case Providers.APNS:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateApnsProvider(providerId, providerName);
                     break;
             }
@@ -92,8 +92,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul data-private>
                 <InputText
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateSettings.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
index b7a6eb2ec..b902515a5 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
@@ -8,11 +8,13 @@
     import { Dependencies } from '$lib/constants';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
     import SettingsFormList from '../settingsFormList.svelte';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
     import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
+    import { page } from '$app/state';
+    import { Link as PinkLink } from '@appwrite.io/pink-svelte';
+    import Link from '$lib/elements/link.svelte';
 
     export let inputs: (ProviderInput | ProviderInput[])[];
     export let providerType: MessagingProviderType;
@@ -80,7 +82,7 @@
             switch (provider) {
                 case Providers.Twilio:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTwilioProvider(
                             providerId,
                             undefined,
@@ -92,7 +94,7 @@
                     break;
                 case Providers.Msg91:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateMsg91Provider(
                             providerId,
                             undefined,
@@ -104,7 +106,7 @@
                     break;
                 case Providers.Telesign:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTelesignProvider(
                             providerId,
                             undefined,
@@ -116,7 +118,7 @@
                     break;
                 case Providers.Textmagic:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTextmagicProvider(
                             providerId,
                             undefined,
@@ -128,7 +130,7 @@
                     break;
                 case Providers.Vonage:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateVonageProvider(
                             providerId,
                             undefined,
@@ -140,7 +142,7 @@
                     break;
                 case Providers.Mailgun:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateMailgunProvider(
                             providerId,
                             undefined,
@@ -156,7 +158,7 @@
                     break;
                 case Providers.Sendgrid:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateSendgridProvider(
                             providerId,
                             undefined,
@@ -170,7 +172,7 @@
                     break;
                 case Providers.SMTP:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateSmtpProvider(
                             providerId,
                             undefined,
@@ -189,7 +191,7 @@
                     break;
                 case Providers.FCM:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateFcmProvider(
                             providerId,
                             undefined,
@@ -199,7 +201,7 @@
                     break;
                 case Providers.APNS:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateApnsProvider(
                             providerId,
                             undefined,
@@ -239,18 +241,13 @@
 
 <Form onSubmit={update}>
     <CardGrid>
-        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-            <Heading tag="h6" size="7">Settings</Heading>
-        </div>
-        <p>
-            Configure the settings to <Button
-                link
-                href={`https://appwrite.io/docs/products/messaging/${provider}`}
-                external>enable {displayName}</Button> to send {message}, or <Button
-                link
-                on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the
-            provider settings.
-        </p>
+        <svelte:fragment slot="title">Settings</svelte:fragment>
+        Configure the settings to <Link
+            external
+            href={`https://appwrite.io/docs/products/messaging/${provider}`}
+            >enable {displayName}</Link> to send {message}, or <PinkLink.Button
+            on:click={() => (newMemberModal = true)}>invite a team member</PinkLink.Button> to complete
+        the provider settings.
         <svelte:fragment slot="aside">
             <!-- Must wait until ready or else the files input won't be set properly -->
             {#if ready}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
index a18b6db6a..0ecc172d4 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -9,9 +9,11 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import Provider, { Providers } from '../../provider.svelte';
-    import ProviderType from '../../providerType.svelte';
     import { provider as providerData } from './store';
-    import { page } from '$app/stores';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProviderText } from '../../helper';
+    import { page } from '$app/state';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     let enabled: boolean = null;
 
@@ -26,32 +28,32 @@
             switch ($providerData.provider) {
                 case Providers.Twilio:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTwilioProvider(providerId, undefined, enabled);
                     break;
                 case Providers.Msg91:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateMsg91Provider(providerId, undefined, enabled);
                     break;
                 case Providers.Telesign:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTelesignProvider(providerId, undefined, enabled);
                     break;
                 case Providers.Textmagic:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateTextmagicProvider(providerId, undefined, enabled);
                     break;
                 case Providers.Vonage:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateVonageProvider(providerId, undefined, enabled);
                     break;
                 case Providers.Mailgun:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateMailgunProvider(
                             providerId,
                             undefined,
@@ -63,12 +65,12 @@
                     break;
                 case Providers.Sendgrid:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateSendgridProvider(providerId, undefined, enabled);
                     break;
                 case Providers.SMTP:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateSmtpProvider(
                             providerId,
                             undefined,
@@ -88,12 +90,12 @@
                     break;
                 case Providers.FCM:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateFcmProvider(providerId, undefined, enabled);
                     break;
                 case Providers.APNS:
                     response = await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .messaging.updateApnsProvider(providerId, undefined, enabled);
                     break;
             }
@@ -118,7 +120,7 @@
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         <Provider provider={$providerData.provider} size="l">
-            <Heading tag="h6" size="7">{$providerData.name}</Heading>
+            <Typography.Title size="s">{$providerData.name}</Typography.Title>
         </Provider>
     </div>
     <svelte:fragment slot="aside">
@@ -131,10 +133,10 @@
                         bind:value={enabled} />
                 </ul>
                 <div>
-                    <p class="title">
-                        Provider: <Provider noIcon provider={$providerData.provider} />
-                    </p>
-                    <p class="title">Type: <ProviderType noIcon type={$providerData.type} /></p>
+                    <Layout.Stack direction="row" gap="xs">
+                        <span>Provider:</span><Provider noIcon provider={$providerData.provider} />
+                    </Layout.Stack>
+                    <p class="title">Type: {getProviderText($providerData.type)}</p>
                     <p>Created: {toLocaleDateTime($providerData.$createdAt)}</p>
                 </div>
             </div>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormInput.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormInput.svelte
index 615e13353..72e17614f 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormInput.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormInput.svelte
@@ -2,7 +2,6 @@
     import {
         InputDomain,
         InputEmail,
-        InputFile,
         InputSelect,
         InputPhone,
         InputSwitch,
@@ -24,8 +23,13 @@
         FCMProviderParams,
         APNSProviderParams
     } from './store';
+    import TooltipPopover from './tooltipPopover.svelte';
+    import { Icon, Tooltip, Upload, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { removeFile } from '$lib/helpers/files';
 
     export let files: Record<string, FileList>;
+
     export let input: ProviderInput;
     export let params: Partial<
         | TwilioProviderParams
@@ -39,8 +43,6 @@
         | FCMProviderParams
         | APNSProviderParams
     >;
-    export let fullWidth = false;
-
     const popover = input.popover ? PopoverContent : null;
     const popoverProps = getPopoverProps(input);
 
@@ -61,62 +63,82 @@
         label={input.label}
         placeholder={input.placeholder}
         required={!input.optional}
-        tooltip={input.tooltip}
-        {popover}
-        {popoverProps}
-        {fullWidth}
-        bind:value={params[input.name]} />
+        bind:value={params[input.name]}>
+        <TooltipPopover slot="info" {popover} {popoverProps} tooltip={input.tooltip} />
+    </InputText>
 {:else if input.type === 'password'}
     <InputPassword
         id={input.name}
         label={input.label}
         placeholder={input.placeholder}
         required={!input.optional}
-        showPasswordButton
-        {popover}
-        {popoverProps}
-        {fullWidth}
-        bind:value={params[input.name]} />
+        bind:value={params[input.name]}>
+        <TooltipPopover slot="info" {popover} {popoverProps} tooltip={input.tooltip} />
+    </InputPassword>
 {:else if input.type === 'email'}
     <InputEmail
         id={input.name}
         label={input.label}
         placeholder={input.placeholder}
         required={!input.optional}
-        tooltip={input.tooltip}
-        {popover}
-        {popoverProps}
-        {fullWidth}
-        bind:value={params[input.name]} />
+        bind:value={params[input.name]}>
+        <TooltipPopover slot="info" {popover} {popoverProps} tooltip={input.tooltip} />
+    </InputEmail>
 {:else if input.type === 'domain'}
     <InputDomain
         id={input.name}
         label={input.label}
         placeholder={input.placeholder}
         required={!input.optional}
-        {popover}
-        {popoverProps}
-        {fullWidth}
-        bind:value={params[input.name]} />
+        bind:value={params[input.name]}>
+        <TooltipPopover slot="info" {popover} {popoverProps} tooltip={input.tooltip} />
+    </InputDomain>
 {:else if input.type === 'phone'}
     <InputPhone
         id={input.name}
         label={input.label}
         placeholder={input.placeholder}
         required={!input.optional}
-        {popover}
-        {popoverProps}
-        {fullWidth}
-        bind:value={params[input.name]} />
+        bind:value={params[input.name]}>
+        <TooltipPopover slot="info" {popover} {popoverProps} tooltip={input.tooltip} />
+    </InputPhone>
 {:else if input.type === 'file'}
-    <InputFile
-        label={input.label}
-        allowedFileExtensions={input.allowedFileExtensions}
-        required={!input.optional}
-        tooltip={input.tooltip}
-        {popover}
-        {popoverProps}
-        bind:files={files[input.name]} />
+    <Upload.Dropzone
+        extensions={['json']}
+        bind:files={files[input.name]}
+        required={!input.optional}>
+        <Layout.Stack alignItems="center" gap="s">
+            <Layout.Stack alignItems="center" gap="s">
+                <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
+                    <Typography.Text variant="l-500">
+                        Drag and drop service account JSON here or click to upload
+                    </Typography.Text>
+                    <Tooltip>
+                        <Layout.Stack alignItems="center" justifyContent="center" inline>
+                            <Icon icon={IconInfo} size="s" />
+                        </Layout.Stack>
+                        <svelte:fragment slot="tooltip">Only .json files allowed</svelte:fragment>
+                    </Tooltip>
+                </Layout.Stack>
+                <Typography.Caption variant="400">Max file size 10MB</Typography.Caption>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Upload.Dropzone>
+    {#if files[input.name]?.length}
+        {#key files[input.name]}
+            <Upload.List
+                files={files[input.name]?.length
+                    ? Array.from(files[input.name]).map((f) => {
+                          return {
+                              ...f,
+                              extension: f.type,
+                              removable: true
+                          };
+                      })
+                    : []}
+                on:remove={(e) => (files[input.name] = removeFile(e.detail, files[input.name]))} />
+        {/key}
+    {/if}
 {:else if input.type === 'switch'}
     <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
         <svelte:fragment slot="description">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormList.svelte
index 356ea4759..88f6a4bab 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormList.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { FormItem, FormList } from '$lib/elements/forms';
     import SettingsFormInput from './settingsFormInput.svelte';
     import type {
         ProviderInput,
@@ -31,18 +30,14 @@
     >;
 </script>
 
-<FormList>
-    {#each inputs as input}
-        {#if Array.isArray(input)}
-            <FormItem isMultiple>
-                {#each input as i}
-                    <div class="u-flex u-flex-basis-50-percent">
-                        <SettingsFormInput input={i} bind:params bind:files fullWidth />
-                    </div>
-                {/each}
-            </FormItem>
-        {:else}
-            <SettingsFormInput {input} bind:params bind:files />
-        {/if}
-    {/each}
-</FormList>
+{#each inputs as input}
+    {#if Array.isArray(input)}
+        {#each input as i}
+            <div class="u-flex u-flex-basis-50-percent">
+                <SettingsFormInput input={i} bind:params bind:files />
+            </div>
+        {/each}
+    {:else}
+        <SettingsFormInput {input} bind:params bind:files />
+    {/if}
+{/each}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts b/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts
index ae968d4ba..4d7d47402 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts
@@ -3,13 +3,26 @@ import { MessagingProviderType, SmtpEncryption } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
 import { Providers } from '../provider.svelte';
 import { base } from '$app/paths';
+import type { ComponentType } from 'svelte';
+import { IconAnnotation, IconDeviceMobile, IconMail } from '@appwrite.io/pink-icons-svelte';
+import {
+    IconApple,
+    IconFirebase,
+    IconMailgun,
+    IconMsg91,
+    IconSendgrid,
+    IconTelesign,
+    IconTextMagic,
+    IconTwilio,
+    IconVonage
+} from './components';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Provider ID', type: 'string', show: true },
-    { id: 'name', title: 'Name', type: 'string', show: true },
-    { id: 'provider', title: 'Provider', type: 'string', show: true },
-    { id: 'type', title: 'Type', type: 'string', show: true },
-    { id: 'enabled', title: 'Status', type: 'boolean', show: true }
+    { id: '$id', title: 'Provider ID', type: 'string' },
+    { id: 'name', title: 'Name', type: 'string' },
+    { id: 'provider', title: 'Provider', type: 'string' },
+    { id: 'type', title: 'Type', type: 'string' },
+    { id: 'enabled', title: 'Status', type: 'boolean' }
 ]);
 
 export type ProviderInput = {
@@ -35,32 +48,34 @@ export type ProviderInput = {
     options?: { label: string; value: string | number | boolean }[];
 };
 
-type ProvidersMap = {
-    [key in MessagingProviderType]: {
-        name: string;
-        text: string;
-        icon: string;
-        providers: {
-            [key in Providers]?: {
-                imageIcon?: string;
-                classIcon?: string;
-                title: string;
-                description: string;
-                needAHand?: string[];
-                configure: (ProviderInput | ProviderInput[])[];
-            };
+export type ProviderMapValue = {
+    name: string;
+    text: string;
+    icon: ComponentType;
+    providers: {
+        [key in Providers]?: {
+            imageIcon?: ComponentType;
+            classIcon?: ComponentType;
+            title: string;
+            description: string;
+            needAHand?: string[];
+            configure: (ProviderInput | ProviderInput[])[];
         };
     };
 };
 
+export type ProvidersMap = {
+    [key in MessagingProviderType]: ProviderMapValue;
+};
+
 export const providers: ProvidersMap = {
     [MessagingProviderType.Push]: {
         name: 'Push notification',
         text: 'notifications',
-        icon: 'device-mobile',
+        icon: IconDeviceMobile,
         providers: {
             [Providers.FCM]: {
-                imageIcon: 'firebase',
+                imageIcon: IconFirebase,
                 title: 'FCM',
                 description: 'Firebase Cloud Messaging',
                 needAHand: [
@@ -92,7 +107,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.APNS]: {
-                imageIcon: 'apple',
+                imageIcon: IconApple,
                 title: 'APNS',
                 description: 'Apple Push Notification Service',
                 configure: [
@@ -185,10 +200,10 @@ export const providers: ProvidersMap = {
     [MessagingProviderType.Email]: {
         name: 'Email',
         text: 'emails',
-        icon: 'mail',
+        icon: IconMail,
         providers: {
             [Providers.Mailgun]: {
-                imageIcon: 'mailgun',
+                imageIcon: IconMailgun,
                 title: 'Mailgun',
                 description: '',
                 configure: [
@@ -255,7 +270,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.Sendgrid]: {
-                imageIcon: 'sendgrid',
+                imageIcon: IconSendgrid,
                 title: 'SendGrid',
                 description: '',
                 configure: [
@@ -304,7 +319,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.SMTP]: {
-                classIcon: 'mail',
+                classIcon: IconMail,
                 title: 'SMTP',
                 description: 'Generic SMTP server',
                 configure: [
@@ -400,10 +415,10 @@ export const providers: ProvidersMap = {
     [MessagingProviderType.Sms]: {
         name: 'SMS',
         text: 'SMS',
-        icon: 'annotation',
+        icon: IconAnnotation,
         providers: {
             [Providers.Twilio]: {
-                imageIcon: 'twilio',
+                imageIcon: IconTwilio,
                 title: 'Twilio',
                 description: '',
                 needAHand: [
@@ -445,7 +460,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.Msg91]: {
-                imageIcon: 'msg91',
+                imageIcon: IconMsg91,
                 title: 'MSG91',
                 description: '',
                 configure: [
@@ -483,7 +498,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.Telesign]: {
-                imageIcon: 'telesign',
+                imageIcon: IconTelesign,
                 title: 'Telesign',
                 description: '',
                 configure: [
@@ -513,7 +528,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.Textmagic]: {
-                imageIcon: 'textmagic',
+                imageIcon: IconTextMagic,
                 title: 'Textmagic',
                 description: '',
                 configure: [
@@ -543,7 +558,7 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.Vonage]: {
-                imageIcon: 'vonage',
+                imageIcon: IconVonage,
                 title: 'Vonage',
                 description: '',
                 configure: [
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
index e41526641..47f1b776e 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
@@ -1,31 +1,22 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
     import { columns } from './store';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import Provider from '../provider.svelte';
     import ProviderType from '../providerType.svelte';
-    import { Pill } from '$lib/elements';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { sdk } from '$lib/stores/sdk';
     import { canWriteProviders } from '$lib/stores/roles';
-    import { page } from '$app/stores';
+    import { Badge, FloatingActionBar, Icon, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { IconCheckCircle } from '@appwrite.io/pink-icons-svelte';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { page } from '$app/state';
 
     export let data: PageData;
 
@@ -37,7 +28,7 @@
         showDelete = false;
 
         const promises = selectedIds.map((id) =>
-            sdk.forProject($page.params.region, $page.params.project).messaging.deleteProvider(id)
+            sdk.forProject(page.params.region, page.params.project).messaging.deleteProvider(id)
         );
 
         try {
@@ -65,102 +56,77 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        {#if $canWriteProviders}
-            <TableCellHeadCheck
-                bind:selected={selectedIds}
-                pageItemsIds={data.providers.providers.map((d) => d.$id)} />
-        {/if}
-        {#each $columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root
+    columns={$columns}
+    allowSelection={$canWriteProviders}
+    let:root
+    bind:selectedRows={selectedIds}>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.providers.providers as provider (provider.$id)}
-            <TableRowLink
-                href={$canWriteProviders
-                    ? `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${provider.$id}`
-                    : '#'}>
-                {#if $canWriteProviders}
-                    <TableCellCheck bind:selectedIds id={provider.$id} />
-                {/if}
-                {#each $columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key $columns}
-                                <TableCell title={column.title} width={column.width}>
-                                    <Id value={provider.$id}>{provider.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'provider'}
-                            <TableCellText title={column.title} width={column.width}>
-                                <Provider provider={provider.provider} size="s" />
-                            </TableCellText>
-                        {:else if column.id === 'type'}
-                            <TableCellText title={column.title} width={column.width}>
-                                <ProviderType type={provider.type} size="s" />
-                            </TableCellText>
-                        {:else if column.id === 'enabled'}
-                            <TableCellText title={column.title} width={column.width}>
-                                <Pill success={provider.enabled}>
-                                    {#if provider.enabled}
-                                        <span class="icon-check-circle" aria-hidden="true"></span>
-                                    {/if}
-                                    <span class="text u-trim">
-                                        {provider.enabled ? 'enabled' : 'disabled'}
-                                    </span>
-                                </Pill>
-                            </TableCellText>
-                        {:else}
-                            <TableCellText title={column.title} width={column.width}>
-                                {provider[column.id]}
-                            </TableCellText>
-                        {/if}
+    </svelte:fragment>
+    {#each data.providers.providers as provider (provider.$id)}
+        <svelte:component
+            this={$canWriteProviders ? Table.Row.Link : Table.Row.Base}
+            id={provider.$id}
+            href={$canWriteProviders
+                ? `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${provider.$id}`
+                : undefined}
+            {root}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key $columns}
+                            <Id value={provider.$id}>{provider.$id}</Id>
+                        {/key}
+                    {:else if column.id === 'provider'}
+                        <Provider provider={provider.provider} />
+                    {:else if column.id === 'type'}
+                        <ProviderType type={provider.type} size="xs" />
+                    {:else if column.id === 'enabled'}
+                        <Badge
+                            variant="secondary"
+                            type={provider.enabled ? 'success' : undefined}
+                            content={provider.enabled ? 'enabled' : 'disabled'}>
+                            <svelte:fragment slot="start">
+                                {#if provider.enabled}
+                                    <Icon icon={IconCheckCircle} size="s" />
+                                {/if}
+                            </svelte:fragment>
+                        </Badge>
+                    {:else}
+                        {provider[column.id]}
                     {/if}
-                {/each}
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+        </svelte:component>
+    {/each}
+</Table.Root>
 
-<FloatingActionBar show={selectedIds.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedIds.length > 1 ? 'providers' : 'provider'}
-                </span>
+{#if selectedIds.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedIds.length.toString()} />
+            <span>
+                {selectedIds.length > 1 ? 'providers' : 'provider'}
                 selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
             <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-<Modal
+<Confirm
     title="Delete providers"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
+    bind:open={showDelete}
     onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
+    disabled={deleting}>
+    <Typography.Text>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'providers' : 'provider'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/tooltipPopover.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/tooltipPopover.svelte
new file mode 100644
index 000000000..6ddfa5276
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/tooltipPopover.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Popover, Tooltip } from '@appwrite.io/pink-svelte';
+    import type { Component } from 'svelte';
+
+    export let tooltip: string | undefined = undefined;
+    export let popover: Component = null;
+    export let popoverProps: Record<string, unknown> = {};
+</script>
+
+{#if tooltip}
+    <Tooltip>
+        <Icon icon={IconInfo} size="s" />
+        <p slot="tooltip">{tooltip}</p>
+    </Tooltip>
+{:else if popover}
+    <Popover let:toggle>
+        <Button extraCompact size="s" on:click={toggle}>
+            <Icon size="s" icon={IconInfo} />
+        </Button>
+        <svelte:component this={popover} {...popoverProps} slot="tooltip" />
+    </Popover>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
index 06840afca..5bea03bd1 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
@@ -3,7 +3,7 @@
     import { providerType, provider, providerParams } from './store';
     import { CustomId, LabelCard } from '$lib/components';
     import { providers } from '../store';
-    import { FormList, InputText } from '$lib/elements/forms';
+    import { InputText } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { Providers } from '../../provider.svelte';
     import { SmtpEncryption } from '@appwrite.io/console';
@@ -12,6 +12,14 @@
     let showCustomId = false;
     let id: string = null;
 
+    $: {
+        name;
+        id;
+        $provider;
+
+        beforeSubmit();
+    }
+
     async function beforeSubmit() {
         switch ($provider) {
             case Providers.Twilio:
@@ -133,46 +141,41 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Provider</svelte:fragment>
-    <div class="u-sep-block-start u-padding-block-end-32" />
-    <FormList gap={16}>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="Provider name"
-            bind:value={name}
-            autofocus
-            required />
+    <InputText
+        id="name"
+        label="Name"
+        placeholder="Provider 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">
-                        Provider ID
-                    </span></Pill>
-            </div>
-        {:else}
-            <CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />
-        {/if}
-        <p class="u-margin-block-start-24">
-            Select a provider you would like to enable for sending {providers[$providerType].text}.
-        </p>
-        <div class="grid-box">
-            {#each Object.entries(providers[$providerType].providers) as [value, option]}
-                <LabelCard
-                    name="provider"
-                    {value}
-                    bind:group={$provider}
-                    imageIcon={option.imageIcon}
-                    icon={option.classIcon}>
-                    <svelte:fragment slot="title">{option.title}</svelte:fragment>
-                    {#if option.description}
-                        {option.description}
-                    {/if}
-                </LabelCard>
-            {/each}
+    {#if !showCustomId}
+        <div>
+            <Pill button on:click={() => (showCustomId = !showCustomId)}
+                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
+                    Provider ID
+                </span></Pill>
         </div>
-    </FormList>
+    {:else}
+        <CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />
+    {/if}
+    <p class="u-margin-block-start-24">
+        Select a provider you would like to enable for sending {providers[$providerType].text}.
+    </p>
+    <div class="grid-box">
+        {#each Object.entries(providers[$providerType].providers) as [value, option]}
+            <LabelCard
+                name="provider"
+                {value}
+                bind:group={$provider}
+                icon={option.classIcon ?? option.imageIcon}>
+                <svelte:fragment slot="title">{option.title}</svelte:fragment>
+                {#if option.description}
+                    {option.description}
+                {/if}
+            </LabelCard>
+        {/each}
+    </div>
 </WizardStep>
 
 <style lang="scss">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/settings.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/settings.svelte
index a96fd4663..fb503a445 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/settings.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/settings.svelte
@@ -4,22 +4,17 @@
     import { providers } from '../store';
     import { providerType, provider, providerParams } from './store';
     import SettingsFormList from '../settingsFormList.svelte';
-    import { newMemberModal } from '$lib/stores/organization';
-    import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
-    import Provider from '../../provider.svelte';
-    import { MessagingProviderType } from '@appwrite.io/console';
-    import ProviderTypeComponent from '$routes/(console)/project-[region]-[project]/messaging/providerType.svelte';
-    import {
-        Collapsible,
-        CollapsibleItem,
-        ClickableList,
-        ClickableListItem
-    } from '$lib/components';
 
     let files: Record<string, FileList> = {};
-    const inputs = providers[$providerType].providers[$provider].configure;
-    let open = false;
+    $: inputs = providers[$providerType].providers[$provider].configure;
 
+    $: {
+        files;
+        $providerType;
+        $provider;
+
+        beforeSubmit();
+    }
     onMount(() => {
         const flattened = [];
         for (const i of inputs) {
@@ -30,7 +25,11 @@
             }
         }
         for (const input of flattened) {
-            if (input.type === 'file' && $providerParams[$provider][input.name].length > 0) {
+            if (
+                input.type === 'file' &&
+                $providerParams[$provider] &&
+                $providerParams[$provider][input.name].length > 0
+            ) {
                 const dataTransfer = new DataTransfer();
                 const f = new File(
                     [$providerParams[$provider][input.name]],
@@ -55,7 +54,6 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Settings</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Set up the credentials below to enable {providers[$providerType].providers[$provider].title}
         for sending
@@ -63,120 +61,4 @@
     </svelte:fragment>
 
     <SettingsFormList bind:files {inputs} bind:params={$providerParams[$provider]} />
-
-    <div class="need-a-hand u-flex-vertical u-gap-8">
-        <p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
-
-        <div>
-            {#if providers[$providerType].providers[$provider].needAHand}
-                {@const needAHand = providers[$providerType].providers[$provider].needAHand}
-                <div
-                    class="how-to-enable u-padding-inline-8 u-padding-0"
-                    style={!open ? '' : 'background-color: hsl(var(--p-bg-color-hover));'}>
-                    <Collapsible>
-                        <CollapsibleItem withIndentation bind:open>
-                            <svelte:fragment slot="beforetitle">
-                                <div class="u-flex u-cross-center u-gap-16">
-                                    <div class="avatar is-size-small">
-                                        <span
-                                            class="icon-info"
-                                            style:--p-text-size="1.25rem"
-                                            aria-hidden="true" />
-                                    </div>
-                                    <span class="title body-text-2 u-small" class:u-bold={open}
-                                        >How to enable <Provider provider={$provider} noIcon />
-                                        {#if $providerType == MessagingProviderType.Push}notifications{:else}<ProviderTypeComponent
-                                                type={$providerType}
-                                                noIcon />{/if} service?</span>
-                                </div>
-                            </svelte:fragment>
-                            <div class="u-flex-vertical u-gap-16">
-                                {#each needAHand as p}
-                                    <p>
-                                        {@html p}
-                                    </p>
-                                {/each}
-                            </div>
-                        </CollapsibleItem>
-                    </Collapsible>
-                </div>
-                <div class="u-margin-block-start-4 u-sep-block-end" />
-            {/if}
-
-            <ClickableList>
-                <ClickableListItem
-                    href={`https://appwrite.io/docs/products/messaging/${$provider}`}
-                    external>
-                    <div class="u-flex u-cross-center u-main-space-between">
-                        <div class="u-flex u-cross-center u-gap-16">
-                            <div class="avatar is-size-small">
-                                <span
-                                    class="icon-book-open"
-                                    style:--p-text-size="1.25rem"
-                                    aria-hidden="true" />
-                            </div>
-                            <p>Read the full guide in the documentation</p>
-                        </div>
-                        <span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true" />
-                    </div>
-                </ClickableListItem>
-                <ClickableListItem on:click={() => ($newMemberModal = true)}>
-                    <div class="u-flex u-cross-center u-main-space-between">
-                        <div class="u-flex u-cross-center u-gap-16">
-                            <div class="avatar is-size-small">
-                                <span
-                                    class="icon-user-group"
-                                    style:--p-text-size="1.25rem"
-                                    aria-hidden="true" />
-                            </div>
-                            <p>Invite a team member to complete this step</p>
-                        </div>
-                        <span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true" />
-                    </div>
-                </ClickableListItem>
-            </ClickableList>
-        </div>
-    </div>
 </WizardStep>
-
-<CreateMember bind:showCreate={$newMemberModal} />
-
-<style lang="scss">
-    .need-a-hand {
-        --p-bg-color-hover: var(--color-neutral-5);
-        .how-to-enable {
-            border-radius: var(--border-radius-small);
-
-            &:hover,
-            &:focus {
-                background-color: hsl(var(--p-bg-color-hover));
-
-                .title {
-                    font-weight: 600;
-                }
-            }
-        }
-
-        :global(.clickable-list) {
-            --color-border: var(--color-neutral-5);
-            --p-clickable-button-bg-color-hover: var(--color-border);
-
-            :global(.theme-dark) & {
-                --color-border: var(--color-neutral-85);
-            }
-        }
-
-        :global(.clickable-list-button) {
-            padding-inline: 0.5rem;
-        }
-
-        :global(.theme-dark) & {
-            --p-bg-color-hover: var(--color-neutral-85);
-        }
-    }
-
-    :global(.clickable-list-button):hover p,
-    :global(.clickable-list-button):focus p {
-        font-weight: 600;
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/pushPhone.svelte b/src/routes/(console)/project-[region]-[project]/messaging/pushPhone.svelte
index 758982e65..75374179a 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/pushPhone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/pushPhone.svelte
@@ -11,7 +11,7 @@
         class="u-flex u-flex-vertical card u-margin-inline-start-24 u-margin-inline-end-24 u-gap-8">
         <div class="u-flex u-main-space-between header">
             <div class="u-flex u-gap-4 u-cross-center">
-                <span class="u-icon icon-bell u-line-height-1" /><span class=""
+                <span class="u-icon icon-bell u-line-height-1"></span><span class=""
                     >{$project.name}</span>
             </div>
             <div class="u-flex u-cross-center">now</div>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index 960d0eb29..1da34450c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
         EmptySearch,
         SearchQuery,
         PaginationWithLimit,
-        Heading,
-        ViewSelector,
-        EmptyFilter
+        EmptyFilter,
+        ViewSelector
     } from '$lib/components';
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
@@ -17,87 +16,80 @@
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import { showCreate } from './store';
-    import { View } from '$lib/helpers/load';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import Table from './table.svelte';
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteTopics } from '$lib/stores/roles';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { View } from '$lib/helpers/load';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export let data: PageData;
 
-    const project = $page.params.project;
+    const project = page.params.project;
     const columns = writable<Column[]>([
-        { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
-        { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
-        { id: 'emailTotal', title: 'Email Subscribers', type: 'integer', show: false, width: 140 },
-        { id: 'smsTotal', title: 'SMS Subscribers', type: 'integer', show: false, width: 140 },
-        { id: 'pushTotal', title: 'Push Subscribers', type: 'integer', show: false, width: 140 },
+        { id: '$id', title: 'Topic ID', type: 'string', width: 200 },
+        { id: 'name', title: 'Name', type: 'string', width: { min: 140 } },
+        {
+            id: 'emailTotal',
+            title: 'Email Subscribers',
+            type: 'integer',
+            hide: true,
+            width: { min: 140 }
+        },
+        {
+            id: 'smsTotal',
+            title: 'SMS Subscribers',
+            type: 'integer',
+            hide: true,
+            width: { min: 140 }
+        },
+        {
+            id: 'pushTotal',
+            title: 'Push Subscribers',
+            type: 'integer',
+            hide: true,
+            width: { min: 140 }
+        },
         {
             id: 'total',
             title: 'Subscribers',
             type: 'integer',
-            show: true,
             filter: false,
-            width: 140
+            width: { min: 140 }
         },
-        { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
+        { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 140 } }
     ]);
 
     const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
-        await goto(
-            `${base}/project-${$page.params.region}-${project}/messaging/topics/topic-${event.detail.$id}`
-        );
+        await goto(`${base}/project-${project}/messaging/topics/topic-${event.detail.$id}`);
     };
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Topics</Heading>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Filters query={data.query} {columns} analyticsSource="messaging_topics_filter" />
+            <ViewSelector view={View.Table} {columns} hideView />
             {#if $canWriteTopics}
-                <div class="is-only-mobile">
-                    <Button on:click={() => ($showCreate = true)} event="create_topic">
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create topic</span>
-                    </Button>
-                </div>
+                <Button
+                    on:click={() => {
+                        $showCreate = true;
+                        trackEvent(Click.MessagingTopicCreateClick);
+                    }}
+                    event="create_topic">
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create topic
+                </Button>
             {/if}
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery search={data.search} placeholder="Search by name or ID">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                {#if $canWriteTopics}
-                    <Button on:click={() => ($showCreate = true)} event="create_topic">
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create topic</span>
-                    </Button>
-                {/if}
-            </div>
-        </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
-            </div>
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.topics.total}
         <Table columns={$columns} {data} />
 
@@ -116,7 +108,7 @@
             </div>
             <Button
                 secondary
-                href={`${base}/project-${$page.params.region}-${$page.params.project}/messaging/topics`}>
+                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics`}>
                 Clear Search
             </Button>
         </EmptySearch>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.ts b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.ts
index 2f3c2d76b..8ae6d78f3 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ depends, url, route, params }) => {
     depends(Dependencies.MESSAGING_TOPICS);
     const page = getPage(url);
     const search = getSearch(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte
index 98ff228a6..623b45a58 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CustomId, Modal } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let showCreate = false;
 
@@ -19,7 +20,7 @@
     const create = async () => {
         try {
             const topic = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.createTopic(id ?? ID.unique(), name);
             name = '';
             showCreate = false;
@@ -44,26 +45,24 @@
     }
 </script>
 
-<Modal title="Create topic" {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <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"> Topic ID </span>
-                </Pill>
-            </div>
-        {:else}
-            <CustomId autofocus bind:show={showCustomId} name="Topic" bind:id />
-        {/if}
-    </FormList>
+<Modal title="Create topic" {error} bind:show={showCreate} onSubmit={create}>
+    <InputText
+        id="name"
+        label="Name"
+        placeholder="Enter name"
+        autofocus={true}
+        required
+        bind:value={name} />
+    {#if !showCustomId}
+        <div>
+            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" slot="start" />
+                Topic ID
+            </Tag>
+        </div>
+    {:else}
+        <CustomId autofocus bind:show={showCustomId} name="Topic" bind:id />
+    {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte
index a2953d8cc..6a99009d2 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte
@@ -1,19 +1,8 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
     import { invalidate } from '$app/navigation';
@@ -21,8 +10,10 @@
     import { sdk } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Column } from '$lib/helpers/types';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { canWriteTopics } from '$lib/stores/roles';
+    import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let columns: Column[];
     export let data: PageData;
@@ -35,7 +26,7 @@
         showDelete = false;
 
         const promises = selectedIds.map((id) =>
-            sdk.forProject($page.params.region, $page.params.project).messaging.deleteTopic(id)
+            sdk.forProject(page.params.region, page.params.project).messaging.deleteTopic(id)
         );
 
         try {
@@ -61,93 +52,55 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
-        {#if $canWriteTopics}
-            <TableCellHeadCheck
-                bind:selected={selectedIds}
-                pageItemsIds={data.topics.topics.map((d) => d.$id)} />
-        {/if}
-        {#each columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root {columns} allowSelection={$canWriteTopics} let:root bind:selectedRows={selectedIds}>
+    <svelte:fragment slot="header" let:root>
+        {#each columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.topics.topics as topic (topic.$id)}
-            <TableRowLink
-                href={`${base}/project-${$page.params.region}-${$page.params.project}/messaging/topics/topic-${topic.$id}`}>
-                {#if $canWriteTopics}
-                    <TableCellCheck bind:selectedIds id={topic.$id} />
-                {/if}
-                {#each columns as column (column.id)}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key column.id}
-                                <TableCell title={column.title} width={column.width}>
-                                    <Id value={topic.$id}>{topic.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.type === 'datetime'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {#if !topic[column.id]}
-                                    -
-                                {:else}
-                                    {toLocaleDateTime(topic[column.id])}
-                                {/if}
-                            </TableCellText>
-                        {:else if column.id === 'total'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {topic.emailTotal + topic.smsTotal + topic.pushTotal}
-                            </TableCellText>
-                        {:else}
-                            <TableCellText title={column.title} width={column.width}>
-                                {topic[column.id]}
-                            </TableCellText>
-                        {/if}
+    </svelte:fragment>
+    {#each data.topics.topics as topic (topic.$id)}
+        <Table.Row.Link
+            {root}
+            id={topic.$id}
+            href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics/topic-${topic.$id}`}>
+            {#each columns as column (column.id)}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Id value={topic.$id}>{topic.$id}</Id>
+                        {/key}
+                    {:else if column.type === 'datetime'}
+                        {topic[column.id] ? toLocaleDateTime(topic[column.id]) : '-'}
+                    {:else if column.id === 'total'}
+                        {topic.emailTotal + topic.smsTotal + topic.pushTotal}
+                    {:else}
+                        {topic[column.id]}
                     {/if}
-                {/each}
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
 
-<FloatingActionBar show={selectedIds.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedIds.length > 1 ? 'topics' : 'topic'}
-                </span>
+{#if selectedIds.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedIds.length.toString()} />
+            <span>
+                {selectedIds.length > 1 ? 'topics' : 'topic'}
                 selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
             <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-<Modal
-    title="Delete topics"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
+<Confirm title="Delete topics" bind:open={showDelete} onSubmit={handleDelete} disabled={deleting}>
+    <Typography.Text>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'topics' : 'topic'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte
index 2d94abb94..015c066ee 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { registerCommands } from '$lib/commandCenter';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
 
-    const topicId = $page.params.topic;
+    const topicId = page.params.topic;
 
     $: $registerCommands([
         {
@@ -16,7 +16,7 @@
                 );
             },
             keys: ['g', 's'],
-            disabled: $page.url.pathname.endsWith('subscribers'),
+            disabled: page.url.pathname.endsWith('subscribers'),
             group: 'topics',
             rank: 1
         },
@@ -28,7 +28,7 @@
                 );
             },
             keys: ['g', 'a'],
-            disabled: $page.url.pathname.endsWith('activity'),
+            disabled: page.url.pathname.endsWith('activity'),
             group: 'topics',
             rank: 1
         },
@@ -40,7 +40,7 @@
                 );
             },
             keys: ['g', 'o'],
-            disabled: $page.url.pathname.endsWith(`topic-${topicId}`),
+            disabled: page.url.pathname.endsWith(`topic-${topicId}`),
             group: 'topics',
             rank: 1
         }
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
index 724ea6be3..11abad571 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
         EmptySearch,
         SearchQuery,
         PaginationWithLimit,
-        Heading,
         ViewSelector,
         EmptyFilter
     } from '$lib/components';
     import { Container } from '$lib/layout';
     import { ID, type Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import Table from './table.svelte';
@@ -27,22 +25,24 @@
     import { writable } from 'svelte/store';
     import type { Column } from '$lib/helpers/types';
     import { base } from '$app/paths';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
-    export let data: PageData;
+    export let data;
     let showAdd = false;
     let subscribersByTargetId: Record<string, Models.Subscriber> = {};
     const columns = writable<Column[]>([
-        { id: '$id', title: 'Subscriber ID', type: 'string', show: true, width: 140 },
-        { id: 'userName', title: 'Name', type: 'string', show: true, filter: false, width: 100 },
-        { id: 'targetId', title: 'Target ID', type: 'string', show: true, width: 140 },
-        { id: 'target', title: 'Target', type: 'string', show: true, filter: false, width: 140 },
-        { id: 'type', title: 'Type', type: 'string', show: true, width: 80 },
-        { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 100 }
+        { id: '$id', title: 'Subscriber ID', type: 'string', width: 200 },
+        { id: 'userName', title: 'Name', type: 'string', filter: false, width: { min: 80 } },
+        { id: 'targetId', title: 'Target ID', type: 'string', width: { min: 200 } },
+        { id: 'target', title: 'Target', type: 'string', filter: false, width: { min: 140 } },
+        { id: 'type', title: 'Type', type: 'string', width: { min: 80 } },
+        { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 100 } }
     ]);
 
     onMount(() => {
         $targetsById = {};
-        for (const subscriber of $page.data.subscribers.subscribers) {
+        for (const subscriber of page.data.subscribers.subscribers) {
             const { target } = subscriber;
             $targetsById[target.$id] = target;
             subscribersByTargetId[target.$id] = subscriber;
@@ -58,8 +58,8 @@
         );
         const promises = targetIds.map(async (targetId) => {
             const subscriber = await sdk
-                .forProject($page.params.region, $page.params.project)
-                .messaging.createSubscriber($page.params.topic, ID.unique(), targetId);
+                .forProject(page.params.region, page.params.project)
+                .messaging.createSubscriber(page.params.topic, ID.unique(), targetId);
             subscribersByTargetId[targetId] = subscriber;
         });
 
@@ -84,50 +84,23 @@
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Subscribers</Heading>
-            <div class="is-only-mobile">
-                <Button on:click={() => (showAdd = true)} event="create_subscriber">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add subscriber</span>
-                </Button>
-            </div>
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery
-            search={data.search}
-            placeholder="Search by subscriber ID, target ID, user ID, or type">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                <Button on:click={() => (showAdd = true)} event="create_subscriber">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add subscriber</span>
-                </Button>
-            </div>
-        </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
-            </div>
-        </div>
-    </div>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery placeholder="Search by type or IDs"></SearchQuery>
+        <Layout.Stack direction="row" inline>
+            <Filters query={data.query} {columns} analyticsSource="messaging_topics" />
+            <ViewSelector view={View.Table} {columns} hideView />
+            <Button
+                on:click={() => {
+                    showAdd = true;
+                    trackEvent(Click.MessagingTargetCreateClick);
+                }}
+                event="create_subscriber">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add subscriber
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.subscribers.total}
         <Table columns={$columns} {data} />
 
@@ -146,8 +119,7 @@
             </div>
             <Button
                 secondary
-                href={`${base}/project-${$page.params.region}-${$page.params.project}/messaging/topics/topic-${$page.params.topic}/subscribers`}>
-                Clear Search
+                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics/topic-${page.params.topic}/subscribers`}>
             </Button>
         </EmptySearch>
     {:else}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.ts b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.ts
index 34a9e0eb6..d4b3e9cc8 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
 
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const search = getSearch(url);
     const query = getQuery(url);
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/activity/+page.ts
index f60702362..933026955 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
index f9603532d..192f6c07f 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
@@ -1,20 +1,20 @@
 <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 } from '$lib/elements/forms';
+    import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { topic } from './store';
     import { project } from '../../../store';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let showDelete = false;
+    let error: string;
     const deleteTopic = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.deleteTopic($topic.$id);
 
             showDelete = false;
@@ -24,30 +24,15 @@
             });
             trackEvent(Submit.MessagingTopicDelete);
             await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/messaging/topics`
+                `${base}/project-${page.params.region}-${page.params.project}/messaging/topics`
             );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingTopicDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MessagingTopicDelete);
         }
     };
 </script>
 
-<Modal
-    title="Delete topic"
-    bind:show={showDelete}
-    onSubmit={deleteTopic}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
-        Are you sure you want to delete <b>{$topic.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>
+<Confirm onSubmit={deleteTopic} title="Delete topic" bind:open={showDelete} bind:error>
+    <span>Are you sure you want to delete <b>{$topic.name}</b> from '{$project.name}'?</span>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte
index b0818da8d..c0f0814f4 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteTopics } from '$lib/stores/roles';
     import { topic } from './store';
 
-    const projectId = $page.params.project;
-    const topicId = $page.params.topic;
-    const path = `${base}/project-${$page.params.region}-${projectId}/messaging/topics/topic-${topicId}`;
+    const projectId = page.params.project;
+    const topicId = page.params.topic;
+    const path = `${base}/project-${page.params.region}-${projectId}/messaging/topics/topic-${topicId}`;
     const tabs = [
         {
             href: path,
@@ -32,7 +32,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/messaging/topics`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/messaging/topics`}>
             {$topic.name}
         </CoverTitle>
         <Id value={$topic.$id} event="topic">{$topic.$id}</Id>
@@ -42,7 +42,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
index 4758bcd6f..74dea57b0 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { topic, topicTotal } from '../store';
     import DeleteTopic from '../deleteTopic.svelte';
@@ -7,10 +7,8 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete topic</Heading>
-    </div>
+<CardGrid>
+    <svelte:fragment slot="title">Delete topic</svelte:fragment>
     <p>
         The topic will be permanently deleted, including all data associated with this topic. This
         action is irreversible.
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/details.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/details.svelte
index be120ba35..6c855a568 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/details.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/details.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { topic, topicTotal } from '../store';
 </script>
 
 <CardGrid>
-    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-        <Heading tag="h6" size="7">Details</Heading>
-    </div>
+    <svelte:fragment slot="title">Details</svelte:fragment>
     <svelte:fragment slot="aside">
         <div class="u-flex u-main-space-between">
             <div data-private>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
index 434aeefab..007705655 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import { topic } from '../store';
@@ -8,7 +8,7 @@
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let name: string = null;
 
@@ -19,7 +19,7 @@
     async function updateName() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.updateTopic($topic.$id, name);
             await invalidate(Dependencies.MESSAGING_TOPIC);
             addNotification({
@@ -39,7 +39,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
+        <svelte:fragment slot="title">Name</svelte:fragment>
 
         <svelte:fragment slot="aside">
             <ul data-private>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
index 2d4e5a280..38d2cfd71 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -12,7 +12,7 @@
     import { symmetricDifference } from '$lib/helpers/array';
     import { topic } from '../store';
 
-    const topicId = $page.params.topic;
+    const topicId = page.params.topic;
 
     let arePermsDisabled = true;
     let permissions: string[] = [];
@@ -24,7 +24,7 @@
     async function updatePermissions() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .messaging.updateTopic(topicId, undefined, permissions);
             await invalidate(Dependencies.MESSAGING_TOPIC);
             addNotification({
@@ -46,7 +46,7 @@
 
 <Form onSubmit={updatePermissions}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="permissions">Subscription access</Heading>
+        <svelte:fragment slot="title">Subscription access</svelte:fragment>
         <p>
             Choose who can subscribe to this topic using the client API. Learn more about <a
                 href="https://appwrite.io/docs/advanced/platform/permissions"
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte
index 668a0c1c1..63c8ff2f7 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte
@@ -2,30 +2,21 @@
     import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellCheck,
-        TableCellHead,
-        TableCellHeadCheck,
-        TableCellText,
-        TableHeader,
-        TableRowLink,
-        TableScroll
-    } from '$lib/elements/table';
     import { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
     import ProviderType from '../../providerType.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { targetsById } from '../../store';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
     import type { Column } from '$lib/helpers/types';
+    import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
+    import Confirm from '$lib/components/confirm.svelte';
 
     export let columns: Column[];
     export let data: PageData;
@@ -41,8 +32,8 @@
 
         async function deleteSubscriber(subscriberId: string) {
             await sdk
-                .forProject($page.params.region, $page.params.project)
-                .messaging.deleteSubscriber($page.params.topic, subscriberId);
+                .forProject(page.params.region, page.params.project)
+                .messaging.deleteSubscriber(page.params.topic, subscriberId);
             const { target } = subscribers[subscriberId];
             const { [target.$id]: _, ...rest } = $targetsById;
             $targetsById = rest;
@@ -82,103 +73,72 @@
     });
 </script>
 
-<TableScroll>
-    <TableHeader>
-        <TableCellHeadCheck
-            bind:selected={selectedIds}
-            pageItemsIds={data.subscribers.subscribers.map((d) => d.$id)} />
-        {#each columns as column}
-            {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
-            {/if}
+<Table.Root {columns} allowSelection let:root bind:selectedRows={selectedIds}>
+    <svelte:fragment slot="header" let:root>
+        {#each columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </TableHeader>
-    <TableBody>
-        {#each data.subscribers.subscribers as subscriber (subscriber.$id)}
-            {@const target = subscriber.target}
-            <TableRowLink
-                href={`${base}/project-${$project.region}-${$project.$id}/auth/user-${subscriber.target.userId}`}>
-                <TableCellCheck bind:selectedIds id={subscriber.$id} />
-
-                {#each columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key column.id}
-                                <TableCell title="Subscriber ID">
-                                    <Id value={subscriber.$id}>
-                                        {subscriber.$id}
-                                    </Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'targetId'}
-                            <TableCell title={column.title}>
-                                <Id value={subscriber[column.id]}>
-                                    {subscriber[column.id]}
-                                </Id>
-                            </TableCell>
-                        {:else if column.id === 'target'}
-                            <TableCell title={column.title}>
-                                {#if target.providerType === MessagingProviderType.Push}
-                                    {target.name}
-                                {:else}
-                                    {target.identifier}
-                                {/if}
-                            </TableCell>
-                        {:else if column.id === 'type'}
-                            <TableCellText title={column.title} width={column.width}>
-                                <ProviderType type={subscriber.target.providerType} size="s" />
-                            </TableCellText>
-                        {:else if column.id === '$createdAt'}
-                            <TableCellText title={column.title} width={column.width}>
-                                {toLocaleDateTime(subscriber[column.id])}
-                            </TableCellText>
+    </svelte:fragment>
+    {#each data.subscribers.subscribers as subscriber (subscriber.$id)}
+        {@const target = subscriber.target}
+        <Table.Row.Link
+            {root}
+            id={subscriber.$id}
+            href={`${base}/project-${$project.region}-${$project.$id}/auth/user-${subscriber.target.userId}`}>
+            {#each columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Id value={subscriber.$id}>
+                                {subscriber.$id}
+                            </Id>
+                        {/key}
+                    {:else if column.id === 'targetId'}
+                        <Id value={subscriber[column.id]}>
+                            {subscriber[column.id]}
+                        </Id>
+                    {:else if column.id === 'target'}
+                        {#if target.providerType === MessagingProviderType.Push}
+                            {target.name}
                         {:else}
-                            <TableCellText title={column.title} width={column.width}>
-                                {subscriber[column.id]}
-                            </TableCellText>
+                            {target.identifier}
                         {/if}
+                    {:else if column.id === 'type'}
+                        <ProviderType type={subscriber.target.providerType} size="xs" />
+                    {:else if column.id === '$createdAt'}
+                        {toLocaleDateTime(subscriber[column.id])}
+                    {:else}
+                        {subscriber[column.id]}
                     {/if}
-                {/each}
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</TableScroll>
+                </Table.Cell>
+            {/each}
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
 
-<FloatingActionBar show={selectedIds.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}
-                </span>
+{#if selectedIds.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedIds.length.toString()} />
+            <span>
+                {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}
                 selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
             <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
 
-<Modal
-    title="Delete subscriber"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
+<Confirm
+    title="Delete subscribers"
+    bind:open={showDelete}
     onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <p class="text" data-private>
+    disabled={deleting}>
+    <Typography.Text>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}?
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topicsModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topicsModal.svelte
index 6b9e949b9..b5080fcd1 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topicsModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topicsModal.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
     import { EmptySearch, Modal, PaginationInline } from '$lib/components';
-    import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
-    import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
+    import { Button, InputSearch } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { MessagingProviderType, type Models, Query } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
     import { getTotal } from './wizard/store';
-    import { page } from '$app/stores';
-    import ProviderType from './providerType.svelte';
+    import {
+        Badge,
+        Card,
+        Empty,
+        Layout,
+        Selector,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { getProviderText } from './helper';
+    import { page } from '$app/state';
 
     export let providerType: MessagingProviderType;
     export let show: boolean;
@@ -39,16 +47,8 @@
         if (!show) return;
         const queries = [Query.limit(5), Query.offset(offset)];
 
-        if (providerType === MessagingProviderType.Email) {
-            queries.push(Query.greaterThan('emailTotal', 0));
-        } else if (providerType === MessagingProviderType.Sms) {
-            queries.push(Query.greaterThan('smsTotal', 0));
-        } else if (providerType === MessagingProviderType.Push) {
-            queries.push(Query.greaterThan('pushTotal', 0));
-        }
-
         const response = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .messaging.listTopics(queries, search || undefined);
 
         if (response.total !== 0) {
@@ -75,10 +75,8 @@
         });
     }
 
-    function onTopicSelection(event: Event, topic: Models.Topic) {
-        const { checked } = event.currentTarget as HTMLInputElement;
-
-        if (checked) {
+    function onTopicSelection(event: CustomEvent<boolean>, topic: Models.Topic) {
+        if (event.detail) {
             selected = {
                 ...selected,
                 [topic.$id]: topic
@@ -109,115 +107,74 @@
     }
 </script>
 
-<Modal {title} bind:show onSubmit={submit} on:close={reset} headerDivider={false} size="big">
-    <div class="u-flex u-flex-vertical u-gap-32">
-        <p class="text">
-            Select existing topics you want to send this message to its targets. The message will be
-            sent only to
-            <ProviderType type={providerType} noIcon />
-            targets.
-        </p>
-        <div class="u-flex u-flex-vertical u-gap-16">
-            <InputSearch
-                autofocus
-                disabled={totalResults === 0 && !search}
-                placeholder="Search for topics"
-                bind:value={search} />
-            <div>
-                {#if Object.keys(topicResultsById).length > 0 && !emptyTopicsExists}
-                    <div class="u-flex-vertical u-gap-8">
-                        <FormList>
-                            <Table noMargin noStyles>
-                                <TableBody>
-                                    {#each Object.entries(topicResultsById) as [topicId, topic]}
-                                        <TableRow>
-                                            <TableCell>
-                                                <InputCheckbox
-                                                    id={topicId}
-                                                    disabled={!!topicsById[topicId]}
-                                                    checked={!!selected[topicId]}
-                                                    on:change={(event) =>
-                                                        onTopicSelection(event, topic)}>
-                                                    <svelte:fragment slot="description">
-                                                        <span class="title">
-                                                            <span class="u-line-height-1-5">
-                                                                <span
-                                                                    class="body-text-1 u-bold"
-                                                                    data-private>
-                                                                    {topic.name}
-                                                                </span>
-                                                                <span
-                                                                    class="collapsible-button-optional"
-                                                                    style="--p-toggle-optional-color: var(--color-neutral-50);">
-                                                                    ({getTotal(topic)} targets)
-                                                                </span>
-                                                            </span></span>
-                                                    </svelte:fragment>
-                                                </InputCheckbox>
-                                            </TableCell>
-                                        </TableRow>
-                                    {/each}
-                                </TableBody>
-                            </Table>
-                        </FormList>
-                        <div class="u-flex u-main-space-between u-cross-center">
-                            <p class="text">Total results: {totalResults}</p>
-                            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
-                        </div>
-                    </div>
-                {:else if search}
-                    <EmptySearch hidePagination>
-                        <div class="common-section">
-                            <div class="u-text-center common-section">
-                                <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
-                                <p>There are no topics 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/products/messaging/topics"
-                                    text
-                                    >Documentation
-                                </Button>
-                                <Button secondary on:click={() => (search = '')}
-                                    >Clear search
-                                </Button>
-                            </div>
-                        </div>
-                    </EmptySearch>
-                {:else}
-                    <EmptySearch hidePagination>
-                        <div class="common-section">
-                            <div class="u-text-center common-section">
-                                <p class="text u-line-height-1-5">
-                                    You have no topics{emptyTopicsExists
-                                        ? ` with ${providerType.toUpperCase()} targets`
-                                        : ''}. Create a topic to see them here.
-                                </p>
-                                <p class="text u-line-height-1-5">
-                                    Need a hand? Learn more in our
-                                    <Button
-                                        link
-                                        external
-                                        href="https://appwrite.io/docs/products/messaging/topics"
-                                        >documentation
-                                    </Button>
-                                    .
-                                </p>
-                            </div>
-                        </div>
-                    </EmptySearch>
-                {/if}
+<Modal {title} bind:show onSubmit={submit} on:close={reset}>
+    <Typography.Text>
+        Select existing topics you want to send this message to its targets. The message will be
+        sent only to {getProviderText(providerType)} targets.
+    </Typography.Text>
+    <Layout.Stack>
+        <InputSearch
+            autofocus
+            disabled={totalResults === 0 && !search}
+            placeholder="Search for topics"
+            bind:value={search} />
+        {#if Object.keys(topicResultsById).length > 0 && !emptyTopicsExists}
+            <Table.Root columns={1} let:root>
+                {#each Object.entries(topicResultsById) as [topicId, topic]}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Selector.Checkbox
+                                    id={topicId}
+                                    label={topic.name}
+                                    disabled={!!topicsById[topicId]}
+                                    checked={!!selected[topicId]}
+                                    on:change={(event) => onTopicSelection(event, topic)}>
+                                </Selector.Checkbox>
+                                <span>
+                                    ({getTotal(topic)} targets)
+                                </span>
+                            </Layout.Stack>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+            <div class="u-flex u-main-space-between u-cross-center">
+                <p class="text">Total results: {totalResults}</p>
+                <PaginationInline limit={5} bind:offset total={totalResults} hidePages />
             </div>
-        </div>
-    </div>
+        {:else if search}
+            <EmptySearch hidePagination {search}>
+                <Button size="s" secondary external on:click={() => (search = '')}>
+                    Clear search
+                </Button>
+            </EmptySearch>
+        {:else}
+            <Card.Base padding="none">
+                <Empty
+                    type="secondary"
+                    title={`You have no topics${
+                        emptyTopicsExists ? ` with ${providerType.toUpperCase()} targets` : ''
+                    }`}
+                    description={`Create a topic to see them here.`}>
+                    <Button
+                        size="s"
+                        slot="actions"
+                        secondary
+                        external
+                        href="https://appwrite.io/docs/products/messaging/topics"
+                        >Documentation</Button>
+                </Empty>
+            </Card.Base>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="footer">
-        <div class="u-flex u-gap-16 u-cross-center">
-            <div class="u-flex u-gap-8">
-                <span class="inline-tag"><span class="text">{selectedSize}</span></span>
-                <span class="body-text-2">Topics selected</span>
-            </div>
+        <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center">
+            <Layout.Stack inline direction="row" gap="xs" alignItems="center">
+                <Badge variant="secondary" content={selectedSize.toString()} />
+                <span>Topics selected</span>
+            </Layout.Stack>
             <Button submit disabled={!hasSelection}>Add</Button>
-        </div>
+        </Layout.Stack>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/userTargetsModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/userTargetsModal.svelte
index 9376454c9..dbc58a0bb 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/userTargetsModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/userTargetsModal.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
-    import {
-        Collapsible,
-        CollapsibleItem,
-        EmptySearch,
-        Modal,
-        PaginationInline
-    } from '$lib/components';
-    import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
+    import { EmptySearch, Modal, PaginationInline } from '$lib/components';
+    import { Button, InputSearch } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models, MessagingProviderType } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
-    import ProviderType from './providerType.svelte';
+    import { Accordion, Badge, Card, Empty, Layout, Selector } from '@appwrite.io/pink-svelte';
+    import { getProviderText } from './helper';
+    import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
 
     export let title: string;
     export let show: boolean;
@@ -36,6 +32,7 @@
 
     function submit() {
         dispatch('update', selected);
+        trackEvent(Submit.MessagingTargetUpdate);
         reset();
     }
 
@@ -50,7 +47,7 @@
         }
 
         const response = await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .users.list(queries, search || undefined);
 
         totalResults = response.total;
@@ -68,12 +65,10 @@
         });
     }
 
-    function onUserSelection(event: Event, userId: string) {
-        const { checked } = event.currentTarget as HTMLInputElement;
-
+    function onUserSelection(event: CustomEvent<boolean>, userId: string) {
         const user = userResultsById[userId];
 
-        if (checked) {
+        if (event.detail) {
             user.targets.forEach((target) => {
                 selected = {
                     ...selected,
@@ -88,10 +83,8 @@
         }
     }
 
-    function onTargetSelection(event: Event, target: Models.Target) {
-        const { checked } = event.currentTarget as HTMLInputElement;
-
-        if (checked) {
+    function onTargetSelection(event: CustomEvent<boolean>, target: Models.Target) {
+        if (event.detail) {
             selected = {
                 ...selected,
                 [target.$id]: target
@@ -131,161 +124,91 @@
     }
 </script>
 
-<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big" headerDivider={false}>
-    <div class="u-flex u-flex-vertical u-gap-32">
-        <slot name="description" />
-
-        <div class="u-flex u-flex-vertical u-gap-16">
-            <InputSearch
-                autofocus
-                disabled={totalResults === 0 && !search}
-                placeholder="Search by name, email, phone or ID"
-                bind:value={search} />
-            <div>
-                {#if Object.keys(userResultsById).length > 0}
-                    <div class="u-flex-vertical u-gap-8">
-                        <div class="u-sep-block-end">
-                            <Collapsible>
-                                {#each Object.entries(userResultsById) as [userId, user] (userId)}
-                                    {@const selectedCount = user.targets.filter(
-                                        (target) => selected[target.$id]
-                                    ).length}
-                                    <CollapsibleItem
-                                        withIndentation
-                                        disabled={!user.targets.length}>
-                                        <svelte:fragment slot="beforetitle">
-                                            <InputCheckbox
-                                                id={userId}
-                                                size="small"
-                                                disabled={!user.targets.length ||
-                                                    (user.targets.length > 0 &&
-                                                        user.targets.every(
-                                                            (target) => targetsById[target.$id]
-                                                        ))}
-                                                checked={selectedCount > 0 &&
-                                                    selectedCount === user.targets.length}
-                                                on:change={(event) =>
-                                                    onUserSelection(event, userId)} />
-                                        </svelte:fragment>
-                                        <svelte:fragment slot="title">
-                                            <span class="u-line-height-1-5">
-                                                <span
-                                                    class="user-name body-text-1 u-bold"
-                                                    data-private>
-                                                    {#if user.name}
-                                                        {user.name}
-                                                    {:else if user.email}
-                                                        {user.email}
-                                                    {:else if user.phone}
-                                                        {user.phone}
-                                                    {:else}
-                                                        {userId}
-                                                    {/if}
-                                                </span>
-                                            </span>
-                                        </svelte:fragment>
-                                        <svelte:fragment slot="subtitle">
-                                            {#if user.targets.length === 0}
-                                                (0 targets)
-                                            {:else}
-                                                ({selectedCount}/{user.targets.length} targets)
-                                            {/if}
-                                        </svelte:fragment>
-                                        <FormList>
-                                            {#each user.targets as target}
-                                                <div class="u-flex">
-                                                    <InputCheckbox
-                                                        id={target.$id}
-                                                        size="small"
-                                                        disabled={!!targetsById[target.$id]}
-                                                        checked={!!selected[target.$id]}
-                                                        on:change={(event) =>
-                                                            onTargetSelection(event, target)}>
-                                                        <svelte:fragment slot="description">
-                                                            <div class="u-inline-flex u-gap-8">
-                                                                <span
-                                                                    class="inline-tag u-normal u-x-small"
-                                                                    ><ProviderType
-                                                                        type={target.providerType}
-                                                                        noIcon /></span>
-                                                                {#if target.providerType !== MessagingProviderType.Push}
-                                                                    {target.identifier}
-                                                                {:else}
-                                                                    {target.name}
-                                                                {/if}
-                                                            </div>
-                                                        </svelte:fragment>
-                                                    </InputCheckbox>
-                                                </div>
-                                            {/each}
-                                        </FormList>
-                                    </CollapsibleItem>
-                                {/each}
-                            </Collapsible>
-                        </div>
-                        <div class="u-flex u-main-space-between u-cross-center">
-                            <p class="text">Total results: {totalResults}</p>
-                            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
-                        </div>
-                    </div>
-                {:else if search}
-                    <EmptySearch hidePagination>
-                        <div class="common-section">
-                            <div class="u-text-center common-section">
-                                <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
-                                <p>There are no Users that match your search.</p>
+<Modal {title} bind:show onSubmit={submit} on:close={reset}>
+    <slot name="description" />
+    <Layout.Stack>
+        <InputSearch
+            autofocus
+            disabled={totalResults === 0 && !search}
+            placeholder="Search by name, email, phone or ID"
+            bind:value={search} />
+        {#if Object.keys(userResultsById).length > 0}
+            {#each Object.entries(userResultsById) as [userId, user] (userId)}
+                {@const selectedCount = user.targets.filter(
+                    (target) => selected[target.$id]
+                ).length}
+                <Accordion
+                    selectable
+                    title={user.name
+                        ? user.name
+                        : user.email
+                          ? user.email
+                          : user.phone
+                            ? user.phone
+                            : userId}
+                    badge={user.targets.length === 0
+                        ? '0 targets'
+                        : `${selectedCount}/${user.targets.length} targets`}
+                    disabled={!user.targets.length}
+                    checked={selectedCount > 0 && selectedCount === user.targets.length}
+                    on:change={(event) => onUserSelection(event, userId)}>
+                    {#each user.targets as target}
+                        <Layout.Stack direction="row">
+                            <Selector.Checkbox
+                                id={target.$id}
+                                size="s"
+                                checked={!!selected[target.$id]}
+                                on:change={(event) => onTargetSelection(event, target)}>
+                            </Selector.Checkbox>
+                            <div class="u-inline-flex u-gap-8">
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    content={getProviderText(target.providerType)} />
+                                {#if target.providerType !== MessagingProviderType.Push}
+                                    {target.identifier}
+                                {:else}
+                                    {target.name}
+                                {/if}
                             </div>
-                            <div class="u-flex u-gap-16 common-section u-main-center">
-                                <Button
-                                    external
-                                    href="https://appwrite.io/docs/products/auth/accounts"
-                                    text>Documentation</Button>
-                                <Button secondary on:click={() => (search = '')}
-                                    >Clear search</Button>
-                            </div>
-                        </div>
-                    </EmptySearch>
-                {:else}
-                    <EmptySearch hidePagination>
-                        <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? Learn more in our <Button
-                                        link
-                                        external
-                                        href="https://appwrite.io/docs/products/auth/quick-start"
-                                        >documentation</Button
-                                    >.
-                                </p>
-                            </div>
-                        </div>
-                    </EmptySearch>
-                {/if}
+                        </Layout.Stack>
+                    {/each}
+                </Accordion>
+            {/each}
+            <div class="u-flex u-main-space-between u-cross-center">
+                <p class="text">Total results: {totalResults}</p>
+                <PaginationInline limit={5} bind:offset total={totalResults} hidePages />
             </div>
-        </div>
-    </div>
+        {:else if search}
+            <EmptySearch hidePagination {search}>
+                <Button size="s" secondary external on:click={() => (search = '')}>
+                    Clear search
+                </Button>
+            </EmptySearch>
+        {:else}
+            <Card.Base padding="none">
+                <Empty
+                    type="secondary"
+                    title="You have no users."
+                    description="Create a user to see them here.">
+                    <Button
+                        size="s"
+                        slot="actions"
+                        secondary
+                        external
+                        href="https://appwrite.io/docs/products/auth/quick-start"
+                        >Documentation</Button>
+                </Empty>
+            </Card.Base>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="footer">
-        <div class="u-flex u-gap-16 u-cross-center">
-            <div class="u-flex u-gap-8">
-                <span class="inline-tag"><span class="text">{selectedUsers}</span></span>
-                <span class="body-text-2">Users selected</span>
-            </div>
+        <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center">
+            <Layout.Stack inline direction="row" gap="xs" alignItems="center">
+                <Badge variant="secondary" content={selectedUsers.toString()} />
+                <span>Users selected</span>
+            </Layout.Stack>
             <Button submit disabled={!hasSelection}>Add</Button>
-        </div>
+        </Layout.Stack>
     </svelte:fragment>
 </Modal>
-
-<style lang="scss">
-    :global(.collapsible-wrapper:not(.is-disabled)) {
-        .user-name {
-            color: hsl(var(--color-neutral-80));
-
-            :global(.theme-dark) & {
-                color: hsl(var(--color-neutral-20));
-            }
-        }
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
index 19a9bd83a..fc262b1a8 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
@@ -2,7 +2,6 @@
     import { messageParams, providerType } from './store';
     import {
         Button,
-        FormList,
         InputEmail,
         InputRadio,
         InputSwitch,
@@ -15,7 +14,8 @@
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
 
     let showCustomId = false;
     let showTest = false;
@@ -25,9 +25,8 @@
     async function sendTestEmail() {
         const email = selected === 'self' ? $user.email : otherEmail;
         console.log(email);
-
         // TODO: replace with test method
-        sdk.forProject($page.params.region, $page.params.project).messaging.createEmail(
+        sdk.forProject(page.params.region, page.params.project).messaging.createEmail(
             ID.unique(),
             $messageParams[MessagingProviderType.Email]?.subject || undefined,
             $messageParams[MessagingProviderType.Email]?.content || undefined,
@@ -38,88 +37,84 @@
             undefined,
             undefined,
             undefined,
-            $messageParams[MessagingProviderType.Email]?.html || false,
-            undefined
+            $messageParams[MessagingProviderType.Email]?.html || false
         );
     }
 
     $: otherEmail = selected === 'self' ? '' : otherEmail;
 </script>
 
-<FormList>
-    <InputText
-        id="subject"
-        label="Subject"
+<InputText
+    id="subject"
+    label="Subject"
+    required
+    placeholder="Enter subject"
+    bind:value={$messageParams[$providerType]['subject']}>
+</InputText>
+<div class="u-colum-gap-2">
+    <InputTextarea
+        id="message"
+        label="Message"
         required
-        placeholder="Enter subject"
-        bind:value={$messageParams[$providerType]['subject']}>
-    </InputText>
-    <div class="u-colum-gap-2">
-        <InputTextarea
-            id="message"
-            label="Message"
-            required
-            placeholder="Type here..."
-            bind:value={$messageParams[$providerType]['content']}>
-        </InputTextarea>
-        <!-- <div class="u-flex u-main-end">
+        placeholder="Type here..."
+        bind:value={$messageParams[$providerType]['content']}>
+    </InputTextarea>
+    <!-- <div class="u-flex u-main-end">
             <Button text on:click={() => (showTest = true)}>Send test message</Button>
         </div> -->
-        <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestEmail} size="big">
-            <slot />
-            <InputRadio
-                label={$user.email}
-                bind:group={selected}
-                value="self"
-                id="self"
-                name="selected" />
-            <InputRadio
-                label="Other"
-                bind:group={selected}
-                value="other"
-                id="other"
-                name="selected">
-                <svelte:fragment slot="description">
-                    Enter the email address to which te test message will be
-                    <div
-                        on:click={() => (selected = 'other')}
-                        on:keyup|self={clickOnEnter}
-                        role="button"
-                        tabindex="0">
-                        <InputEmail
-                            showLabel={false}
-                            id="email"
-                            label="Email"
-                            placeholder="Enter email"
-                            bind:value={otherEmail} />
-                    </div>
-                </svelte:fragment>
-            </InputRadio>
-
-            <svelte:fragment slot="footer">
-                <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
-                <Button submit>Send</Button>
+    <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestEmail} size="l">
+        <slot />
+        <InputRadio
+            label={$user.email}
+            bind:group={selected}
+            value="self"
+            id="self"
+            name="selected" />
+        <InputRadio label="Other" bind:group={selected} value="other" id="other" name="selected">
+            <svelte:fragment slot="description">
+                Enter the email address to which te test message will be
+                <div
+                    on:click={() => (selected = 'other')}
+                    on:keyup|self={clickOnEnter}
+                    role="button"
+                    tabindex="0">
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Enter email"
+                        bind:value={otherEmail} />
+                </div>
             </svelte:fragment>
-        </Modal>
-    </div>
-    <InputSwitch label="HTML mode" id="html" bind:value={$messageParams[$providerType]['html']}>
-        <svelte:fragment slot="description">
-            Enable the HTML mode if your message contains HTML tags.
+        </InputRadio>
+
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
+            <Button submit>Send</Button>
         </svelte:fragment>
-    </InputSwitch>
-    {#if !showCustomId}
-        <div>
-            <Pill button on:click={() => (showCustomId = !showCustomId)}
-                ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                    Message ID
-                </span></Pill>
-        </div>
-    {:else}
-        <CustomId
-            autofocus
-            bind:show={showCustomId}
-            name="Message"
-            bind:id={$messageParams[$providerType].messageId}
-            fullWidth />
-    {/if}
-</FormList>
+    </Modal>
+</div>
+<InputSwitch
+    label="HTML mode"
+    id="html"
+    bind:value={$messageParams[$providerType]['html']}
+    on:change={() => {
+        trackEvent(Submit.MessagingUpdateHtmlMode);
+    }}>
+    <svelte:fragment slot="description">
+        Enable the HTML mode if your message contains HTML tags.
+    </svelte:fragment>
+</InputSwitch>
+{#if !showCustomId}
+    <div>
+        <Pill button on:click={() => (showCustomId = !showCustomId)}
+            ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
+                Message ID
+            </span></Pill>
+    </div>
+{:else}
+    <CustomId
+        autofocus
+        name="Message"
+        bind:show={showCustomId}
+        bind:id={$messageParams[$providerType].messageId} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
index 8b4ec7758..8c2eb200c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
@@ -27,9 +27,6 @@
     import { messageParams, providerType } from './store';
     import {
         Button,
-        FormItem,
-        FormItemPart,
-        FormList,
         Helper,
         InputEmail,
         InputRadio,
@@ -45,8 +42,10 @@
     import { sdk } from '$lib/stores/sdk';
     import PushPhone from '../pushPhone.svelte';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
     import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     let showCustomId = false;
     let showTest = false;
@@ -64,7 +63,7 @@
         console.log(email);
 
         // TODO: replace with test method
-        sdk.forProject($page.params.region, $page.params.project).messaging.createPush(
+        sdk.forProject(page.params.region, page.params.project).messaging.createPush(
             ID.unique(),
             $messageParams[MessagingProviderType.Push]?.title || undefined,
             $messageParams[MessagingProviderType.Push]?.body || undefined,
@@ -89,159 +88,130 @@
 </script>
 
 <div class="u-flex u-gap-24">
-    <FormList class="u-stretch u-cross-child-start">
-        <InputText
-            id="title"
-            label="Title"
+    <InputText
+        id="title"
+        label="Title"
+        required
+        placeholder="Enter title"
+        bind:value={$messageParams[MessagingProviderType.Push]['title']}>
+    </InputText>
+    <div class="u-colum-gap-2">
+        <InputTextarea
+            id="message"
+            label="Message"
+            placeholder="Type here..."
             required
-            placeholder="Enter title"
-            bind:value={$messageParams[MessagingProviderType.Push]['title']}>
-        </InputText>
-        <div class="u-colum-gap-2">
-            <InputTextarea
-                id="message"
-                label="Message"
-                placeholder="Type here..."
-                required
-                maxlength={1000}
-                bind:value={$messageParams[MessagingProviderType.Push]['body']}>
-            </InputTextarea>
-            <!-- TODO: Add support for draft messages -->
-            <!-- <div class="u-flex u-main-end">
+            maxlength={1000}
+            bind:value={$messageParams[MessagingProviderType.Push]['body']}>
+        </InputTextarea>
+        <!-- TODO: Add support for draft messages -->
+        <!-- <div class="u-flex u-main-end">
                 <Button text on:click={() => (showTest = true)}>Send test message</Button>
             </div> -->
-            <Modal
-                title="Send test message"
-                bind:show={showTest}
-                onSubmit={sendTestMessage}
-                size="big">
-                <slot />
-                <InputRadio
-                    label={$user.phone}
-                    bind:group={selected}
-                    value="self"
-                    id="self"
-                    name="selected" />
-                <InputRadio
-                    label="Other"
-                    bind:group={selected}
-                    value="other"
-                    id="other"
-                    name="selected">
-                    <svelte:fragment slot="description">
-                        Enter the phone number to which the test message will be
-                        <div
-                            on:click={() => (selected = 'other')}
-                            on:keyup|self={clickOnEnter}
-                            role="button"
-                            tabindex="0">
-                            <InputEmail
-                                showLabel={false}
-                                id="email"
-                                label="Email"
-                                placeholder="Enter email"
-                                bind:value={otherEmail} />
-                        </div>
-                    </svelte:fragment>
-                </InputRadio>
-
-                <svelte:fragment slot="footer">
-                    <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
-                    <Button submit>Send</Button>
+        <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestMessage} size="l">
+            <slot />
+            <InputRadio
+                label={$user.phone}
+                bind:group={selected}
+                value="self"
+                id="self"
+                name="selected" />
+            <InputRadio
+                label="Other"
+                bind:group={selected}
+                value="other"
+                id="other"
+                name="selected">
+                <svelte:fragment slot="description">
+                    Enter the phone number to which the test message will be
+                    <div
+                        on:click={() => (selected = 'other')}
+                        on:keyup|self={clickOnEnter}
+                        role="button"
+                        tabindex="0">
+                        <InputEmail
+                            id="email"
+                            label="Email"
+                            placeholder="Enter email"
+                            bind:value={otherEmail} />
+                    </div>
                 </svelte:fragment>
-            </Modal>
+            </InputRadio>
+
+            <svelte:fragment slot="footer">
+                <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
+                <Button submit>Send</Button>
+            </svelte:fragment>
+        </Modal>
+    </div>
+    <form class="form">
+        <InputFilePicker
+            bind:value={$messageParams[MessagingProviderType.Push].file}
+            label="Media" />
+        <Label
+            tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
+            >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
+
+        <div class=" u-grid u-gap-8">
+            <ul class="form-list" style="--p-form-list-gap: 1rem">
+                {#each customData || [] as _, rowIndex}
+                    <InputText
+                        id={`${rowIndex}-key`}
+                        bind:value={$messageParams[MessagingProviderType.Push].data[rowIndex][0]}
+                        placeholder="Enter key"
+                        label="Key" />
+
+                    <InputText
+                        id={`${rowIndex}-value`}
+                        bind:value={$messageParams[MessagingProviderType.Push].data[rowIndex][1]}
+                        placeholder="Enter value"
+                        label="Value"
+                        required />
+                    <Button
+                        text
+                        on:click={() => {
+                            if (customData.length === 1) {
+                                $messageParams[MessagingProviderType.Push].data = [['', '']];
+                                return;
+                            }
+
+                            $messageParams[MessagingProviderType.Push].data = customData.filter(
+                                (_, i) => i !== rowIndex
+                            );
+                        }}>
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </Button>
+                {/each}
+            </ul>
+            {#if dataError}
+                <Helper type="warning">{dataError}</Helper>
+            {/if}
+            <Button
+                text
+                disabled={customData && customData[customData.length - 1][0] === ''}
+                on:click={() => {
+                    $messageParams[MessagingProviderType.Push].data = [...customData, ['', '']];
+                }}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add data
+            </Button>
         </div>
-        <form class="form">
-            <FormList>
-                <FormItem>
-                    <InputFilePicker
-                        bind:value={$messageParams[MessagingProviderType.Push].file}
-                        label="Media" />
-                </FormItem>
-                <FormItem>
-                    <Label
-                        tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
-                        >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
-                </FormItem>
-            </FormList>
+    </form>
+    {#if !showCustomId}
+        <div>
+            <Pill button on:click={() => (showCustomId = !showCustomId)}
+                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
+                    Message ID
+                </span></Pill>
+        </div>
+    {:else}
+        <CustomId
+            autofocus
+            bind:show={showCustomId}
+            name="Message"
+            bind:id={$messageParams[$providerType].messageId} />
+    {/if}
 
-            <div class=" u-grid u-gap-8">
-                <ul class="form-list" style="--p-form-list-gap: 1rem">
-                    {#each customData || [] as _, rowIndex}
-                        <FormItem isMultiple>
-                            <InputText
-                                id={`${rowIndex}-key`}
-                                isMultiple
-                                fullWidth
-                                bind:value={$messageParams[MessagingProviderType.Push].data[
-                                    rowIndex
-                                ][0]}
-                                placeholder="Enter key"
-                                label="Key"
-                                showLabel={false} />
-
-                            <InputText
-                                id={`${rowIndex}-value`}
-                                isMultiple
-                                fullWidth
-                                bind:value={$messageParams[MessagingProviderType.Push].data[
-                                    rowIndex
-                                ][1]}
-                                placeholder="Enter value"
-                                label="Value"
-                                showLabel={false}
-                                required />
-                            <FormItemPart alignEnd>
-                                <Button
-                                    text
-                                    on:click={() => {
-                                        if (customData.length === 1) {
-                                            $messageParams[MessagingProviderType.Push].data = [
-                                                ['', '']
-                                            ];
-                                            return;
-                                        }
-
-                                        $messageParams[MessagingProviderType.Push].data =
-                                            customData.filter((_, i) => i !== rowIndex);
-                                    }}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </Button>
-                            </FormItemPart>
-                        </FormItem>
-                    {/each}
-                </ul>
-                {#if dataError}
-                    <Helper type="warning">{dataError}</Helper>
-                {/if}
-                <Button
-                    noMargin
-                    text
-                    disabled={customData && customData[customData.length - 1][0] === ''}
-                    on:click={() => {
-                        $messageParams[MessagingProviderType.Push].data = [...customData, ['', '']];
-                    }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add data</span>
-                </Button>
-            </div>
-        </form>
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}
-                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        Message ID
-                    </span></Pill>
-            </div>
-        {:else}
-            <CustomId
-                autofocus
-                bind:show={showCustomId}
-                name="Message"
-                bind:id={$messageParams[$providerType].messageId}
-                fullWidth />
-        {/if}
-    </FormList>
     <PushPhone
         title={$messageParams[$providerType]['title']}
         body={$messageParams[$providerType]['body']}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
index 681a280c3..8f6f940a6 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { messageParams, providerType } from './store';
-    import { Button, FormList, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
+    import { Button, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
     import SMSPhone from '../smsPhone.svelte';
+    import { page } from '$app/state';
 
     let showCustomId = false;
     let showTest = false;
@@ -17,9 +17,7 @@
 
     async function sendTestSMS() {
         // const email = selected === 'self' ? $user.email : otherEmail;
-
-        // TODO: replace with test method
-        sdk.forProject($page.params.region, $page.params.project).messaging.createSms(
+        sdk.forProject(page.params.region, page.params.project).messaging.createSms(
             ID.unique(),
             $messageParams[MessagingProviderType.Sms]?.content || undefined,
             $messageParams[MessagingProviderType.Sms]?.topics || [],
@@ -34,73 +32,70 @@
 </script>
 
 <div class="u-flex u-gap-24">
-    <FormList class="u-stretch u-cross-child-start">
-        <div class="u-colum-gap-2">
-            <InputTextarea
-                id="message"
-                label="Message"
-                required
-                maxlength={900}
-                placeholder="Type here..."
-                bind:value={$messageParams[$providerType]['content']}>
-            </InputTextarea>
-            <!-- TODO: Add support for draft messages -->
-            <!-- <div class="u-flex u-main-end">
+    <div class="u-colum-gap-2">
+        <InputTextarea
+            id="message"
+            label="Message"
+            required
+            maxlength={900}
+            placeholder="Type here..."
+            bind:value={$messageParams[$providerType]['content']}>
+        </InputTextarea>
+        <!-- TODO: Add support for draft messages -->
+        <!-- <div class="u-flex u-main-end">
                 <Button text on:click={() => (showTest = true)}>Send test message</Button>
             </div> -->
-            <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestSMS} size="big">
-                <slot />
-                <InputRadio
-                    label={$user.phone}
-                    bind:group={selected}
-                    value="self"
-                    id="self"
-                    name="selected" />
-                <InputRadio
-                    label="Other"
-                    bind:group={selected}
-                    value="other"
-                    id="other"
-                    name="selected">
-                    <svelte:fragment slot="description">
-                        Enter the phone number to which the test message will be
-                        <div
-                            on:click={() => (selected = 'other')}
-                            on:keyup|self={clickOnEnter}
-                            role="button"
-                            tabindex="0">
-                            <InputEmail
-                                showLabel={false}
-                                id="email"
-                                label="Email"
-                                placeholder="Enter email"
-                                bind:value={otherEmail} />
-                        </div>
-                    </svelte:fragment>
-                </InputRadio>
-
-                <svelte:fragment slot="footer">
-                    <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
-                    <Button submit>Send</Button>
+        <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestSMS} size="l">
+            <slot />
+            <InputRadio
+                label={$user.phone}
+                bind:group={selected}
+                value="self"
+                id="self"
+                name="selected" />
+            <InputRadio
+                label="Other"
+                bind:group={selected}
+                value="other"
+                id="other"
+                name="selected">
+                <svelte:fragment slot="description">
+                    Enter the phone number to which the test message will be
+                    <div
+                        on:click={() => (selected = 'other')}
+                        on:keyup|self={clickOnEnter}
+                        role="button"
+                        tabindex="0">
+                        <InputEmail
+                            id="email"
+                            label="Email"
+                            placeholder="Enter email"
+                            bind:value={otherEmail} />
+                    </div>
                 </svelte:fragment>
-            </Modal>
+            </InputRadio>
+
+            <svelte:fragment slot="footer">
+                <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
+                <Button submit>Send</Button>
+            </svelte:fragment>
+        </Modal>
+    </div>
+    {#if !showCustomId}
+        <div>
+            <Pill button on:click={() => (showCustomId = !showCustomId)}
+                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
+                    Message ID
+                </span></Pill>
         </div>
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}
-                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        Message ID
-                    </span></Pill>
-            </div>
-        {:else}
-            <CustomId
-                autofocus
-                bind:show={showCustomId}
-                name="Message"
-                bind:id={$messageParams[$providerType].messageId}
-                fullWidth />
-        {/if}
-    </FormList>
+    {:else}
+        <CustomId
+            autofocus
+            name="Message"
+            bind:show={showCustomId}
+            bind:id={$messageParams[$providerType].messageId} />
+    {/if}
+
     <SMSPhone content={$messageParams[$providerType]['content']} classes="is-only-desktop" />
 </div>
 <div class="u-flex u-main-center u-margin-block-start-24 is-not-desktop">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/step1.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/step1.svelte
index d29471b39..016aa07cb 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/step1.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/step1.svelte
@@ -6,12 +6,10 @@
     import SmsFormList from './smsFormList.svelte';
     import PushFormList, { validateData } from './pushFormList.svelte';
     import { MessagingProviderType } from '@appwrite.io/console';
-    import { Button } from '$lib/elements/forms';
+    import { Button } from '@appwrite.io/pink-svelte';
 
     let docsUrl = `https://appwrite.io/docs/products/messaging`;
 
-    async function beforeSubmit() {}
-
     const createMessage = (providerText: string) => {
         const vowels = ['a', 'e', 'i', 'o', 'u'];
         const firstLetter = providerText.toLowerCase().charAt(0);
@@ -36,18 +34,14 @@
     }
 </script>
 
+<!-- This component is probably not used anymore... -->
 <WizardStep
-    {beforeSubmit}
     nextDisabled={$providerType === MessagingProviderType.Push &&
         !!validateData($messageParams[MessagingProviderType.Push].data)}>
     <svelte:fragment slot="title">Message</svelte:fragment>
     <svelte:fragment slot="subtitle">
-        {createMessage(providers[$providerType].text)} Learn more in our <Button
-            link
-            external
-            text
-            href={docsUrl}>documentation</Button
-        >.
+        {createMessage(providers[$providerType].text)} Learn more in our
+        <Button.Anchor href={docsUrl}>documentation</Button.Anchor>.
     </svelte:fragment>
     {#if $providerType === MessagingProviderType.Email}
         <EmailFormList />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/step2.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/step2.svelte
index b922dd4a2..0aff3df75 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/step2.svelte
@@ -1,21 +1,14 @@
 <script lang="ts">
     import { Card } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { WizardStep } from '$lib/layout';
     import { messageParams, providerType, targetsById, getTotal } from './store';
     import Actions from '../actions.svelte';
     import { topicsById } from '../store';
     import type { Models } from '@appwrite.io/console';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Table } from '@appwrite.io/pink-svelte';
 
-    let showDropdown = false;
     let showTopics = false;
     let showUserTargets = false;
     let targetIdsLength = 0;
@@ -23,7 +16,6 @@
 
     function addTopics(event: CustomEvent<Record<string, Models.Topic>>) {
         $topicsById = event.detail;
-        showDropdown = false;
     }
 
     function removeTopic(topicId: string) {
@@ -33,7 +25,6 @@
 
     function addTargets(event: CustomEvent<Record<string, Models.Target>>) {
         $targetsById = event.detail;
-        showDropdown = false;
     }
 
     function removeTarget(targetId: string) {
@@ -63,13 +54,13 @@
             <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
                 <Actions
                     providerType={$providerType}
-                    bind:showDropdown
                     bind:showUserTargets
                     bind:showTopics
                     on:addTargets={addTargets}
-                    on:addTopics={addTopics}>
-                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
-                        <i class="icon-plus" />
+                    on:addTopics={addTopics}
+                    let:toggle>
+                    <Button secondary icon on:click={toggle}>
+                        <Icon icon={IconPlus} size="s" />
                     </Button>
                 </Actions>
                 <div class="common-section">
@@ -79,76 +70,73 @@
         </Card>
     {:else}
         <div class="table-wrapper">
-            <Table noMargin noStyles>
-                <TableHeader>
-                    <TableCellHead width={140}>Target</TableCellHead>
-                    <TableCellHead width={32} />
-                </TableHeader>
-                <TableBody>
-                    {#each Object.entries($topicsById) as [topicId, topic] (topicId)}
-                        <TableRow>
-                            <TableCell title="Target">
-                                <div class="u-flex u-cross-center">
-                                    <span class="title">
-                                        <span class="u-line-height-1-5">
-                                            <span class="body-text-2 u-bold" data-private>
-                                                {topic.name}
-                                            </span>
-                                            <span class="collapsible-button-optional">
-                                                ({getTotal(topic)} targets)
-                                            </span>
-                                        </span></span>
-                                </div>
-                            </TableCell>
-                            <TableCell title="Remove" width={40}>
-                                <div class="u-flex u-main-end">
-                                    <button
-                                        class="button is-text is-only-icon"
-                                        type="button"
-                                        aria-label="delete"
-                                        on:click={() => removeTopic(topicId)}>
-                                        <span class="icon-x u-font-size-20" aria-hidden="true" />
-                                    </button>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                    {#each Object.entries($targetsById) as [targetId, target] (targetId)}
-                        <TableRow>
-                            <TableCell title="Target">
-                                <div class="u-flex u-cross-center">
-                                    <span class="text">
-                                        {target.name ? target.name : target.identifier}
-                                    </span>
-                                </div>
-                            </TableCell>
-
-                            <TableCell title="Remove" width={40}>
-                                <div class="u-flex u-main-end">
-                                    <button
-                                        class="button is-text is-only-icon"
-                                        type="button"
-                                        aria-label="delete"
-                                        on:click={() => removeTarget(targetId)}>
-                                        <span class="icon-x u-font-size-20" aria-hidden="true" />
-                                    </button>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
+            <Table.Root columns={[{ id: 'target' }, { id: 'actions', width: 40 }]} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="target" {root}>Target</Table.Header.Cell>
+                    <Table.Header.Cell column="actions" {root} />
+                </svelte:fragment>
+                {#each Object.entries($topicsById) as [topicId, topic] (topicId)}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="target" {root}>
+                            <div class="u-flex u-cross-center">
+                                <span class="title">
+                                    <span class="u-line-height-1-5">
+                                        <span class="body-text-2 u-bold" data-private>
+                                            {topic.name}
+                                        </span>
+                                        <span class="collapsible-button-optional">
+                                            ({getTotal(topic)} targets)
+                                        </span>
+                                    </span></span>
+                            </div>
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <div class="u-flex u-main-end">
+                                <button
+                                    class="button is-text is-only-icon"
+                                    type="button"
+                                    aria-label="delete"
+                                    on:click={() => removeTopic(topicId)}>
+                                    <span class="icon-x u-font-size-20" aria-hidden="true"></span>
+                                </button>
+                            </div>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+                {#each Object.entries($targetsById) as [targetId, target] (targetId)}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="target" {root}>
+                            <div class="u-flex u-cross-center">
+                                <span class="text">
+                                    {target.name ? target.name : target.identifier}
+                                </span>
+                            </div>
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <div class="u-flex u-main-end">
+                                <button
+                                    class="button is-text is-only-icon"
+                                    type="button"
+                                    aria-label="delete"
+                                    on:click={() => removeTarget(targetId)}>
+                                    <span class="icon-x u-font-size-20" aria-hidden="true"></span>
+                                </button>
+                            </div>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
         </div>
         <Actions
             providerType={$providerType}
-            bind:showDropdown
             bind:showUserTargets
             bind:showTopics
             on:addTargets={addTargets}
-            on:addTopics={addTopics}>
-            <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add</span>
+            on:addTopics={addTopics}
+            let:toggle>
+            <Button text on:click={toggle}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add
             </Button>
         </Actions>
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/step3.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/step3.svelte
index 19d865909..2cbb54d0f 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/step3.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/step3.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormList, InputDate, InputSelect, InputTime } from '$lib/elements/forms';
+    import { Button, InputDate, InputSelect, InputTime } from '$lib/elements/forms';
     import Helper from '$lib/elements/forms/helper.svelte';
     import { WizardStep } from '$lib/layout';
     import { MessagingProviderType } from '@appwrite.io/console';
@@ -90,32 +90,27 @@
     <svelte:fragment slot="title">Schedule</svelte:fragment>
     <svelte:fragment slot="subtitle"
         >Schedule the time you want to deliver this message. Learn more in our <Button
-            link
-            external
-            text
             href={docsUrl}>documentation</Button
         >.</svelte:fragment>
-    <FormList>
-        <div
-            class="u-grid u-gap-24"
-            style="grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr 1fr;">
-            <InputSelect id="when" label="&nbsp;" {options} bind:value={when} />
-            <InputDate
-                id="date"
-                label="Date"
-                disabled={when === 'now'}
-                required={when === 'later'}
-                min={minDate}
-                bind:value={date} />
-            <InputTime
-                id="time"
-                label="Time"
-                disabled={when === 'now'}
-                required={when === 'later'}
-                min={minTime}
-                bind:value={time} />
-        </div>
-    </FormList>
+
+    <div class="u-grid u-gap-24" style="grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr 1fr;">
+        <InputSelect id="when" label="&nbsp;" {options} bind:value={when} />
+        <InputDate
+            id="date"
+            label="Date"
+            disabled={when === 'now'}
+            required={when === 'later'}
+            min={minDate}
+            bind:value={date} />
+        <InputTime
+            id="time"
+            label="Time"
+            disabled={when === 'now'}
+            required={when === 'later'}
+            min={minTime}
+            bind:value={time} />
+    </div>
+
     <Helper type="neutral">
         {#if when === 'now'}
             The message will be sent immediately
@@ -127,7 +122,7 @@
     </Helper>
 </WizardStep>
 
-<Modal title="Send message" bind:show={showConfirmation} headerDivider={false} onSubmit={submit}>
+<Modal title="Send message" bind:show={showConfirmation} onSubmit={submit}>
     <p>
         You are about to send a message to an estimated <span class="u-bold">{totalTargets}</span> recipients.
         Would you like to proceed?
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/checkbox.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/checkbox.svelte
new file mode 100644
index 000000000..4e4553957
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/checkbox.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    export let indeterminate = false;
+    export let checked = false;
+    export let fontSize: $$Props['fontSize'] = 'medium';
+
+    interface $$Props extends Partial<HTMLInputElement> {
+        indeterminate?: boolean;
+        checked?: boolean;
+        fontSize?: 'small' | 'medium';
+    }
+</script>
+
+<input
+    class:is-small={fontSize === 'small'}
+    type="checkbox"
+    bind:checked
+    {...$$restProps}
+    bind:indeterminate
+    on:change />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
new file mode 100644
index 000000000..3378bfe09
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { InputText } from '$lib/elements/forms/index.js';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { ExpirationInput } from '$lib/components';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { onboarding } from '../../store';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import Scopes from '../keys/scopes.svelte';
+    import { page } from '$app/state';
+
+    const projectId = page.params.project;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let scopes: string[] = [];
+    let name = '',
+        expire = '';
+
+    async function create() {
+        try {
+            const { $id } = await sdk.forConsole.projects.createKey(
+                projectId,
+                name,
+                scopes,
+                expire || undefined
+            );
+
+            if ($onboarding) {
+                await invalidate(Dependencies.PROJECT);
+            }
+
+            trackEvent(Submit.KeyCreate);
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/overview/keys/${$id}`
+            );
+            addNotification({
+                message: `API key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.KeyCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create API key"
+    href={`${base}/project-${page.params.region}-${page.params.project}/overview/keys/`}
+    bind:showExitModal
+    column
+    columnSize="s"
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Configuration">
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter key name"
+                        required
+                        bind:value={name} />
+
+                    <ExpirationInput bind:value={expire} />
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Scopes">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    <Scopes bind:scopes />
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
new file mode 100644
index 000000000..f2d86a684
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { type Models } from '@appwrite.io/console';
+    import { goto, invalidate } from '$app/navigation';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    export let keyType: 'api' | 'dev' = 'api';
+    export let key: Models.DevKey | Models.Key;
+
+    const projectId = page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+    const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+    const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+    let error: string;
+
+    async function handleDelete() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.deleteKey(projectId, key.$id)
+                : await sdk.forConsole.projects.deleteDevKey(projectId, key.$id);
+
+            await invalidate(dependency);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${key.name} has been deleted`
+            });
+            trackEvent(event);
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
+            );
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title="Delete {label} key" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this key?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
new file mode 100644
index 000000000..69aa6c30e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { goto, invalidate } from '$app/navigation';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    export let keyIds: string[] = [];
+    export let keyType: 'api' | 'dev' = 'api';
+
+    let error: string;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'dev';
+    const projectId = page.params.project;
+
+    async function handleDelete() {
+        const slug = isApiKey ? 'keys' : 'dev-keys';
+        const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+        const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+        try {
+            await Promise.all(
+                keyIds.map((key) =>
+                    isApiKey
+                        ? sdk.forConsole.projects.deleteKey(projectId, key)
+                        : sdk.forConsole.projects.deleteDevKey(projectId, key)
+                )
+            );
+
+            await invalidate(dependency);
+            showDelete = false;
+
+            addNotification({
+                type: 'success',
+                message: `${keyIds.length} ${label} key${keyIds.length > 1 ? 's' : ''} deleted`
+            });
+
+            trackEvent(event);
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
+            );
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        } finally {
+            keyIds = [];
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title={`Delete ${label} key`} bind:open={showDelete} bind:error>
+    <p>
+        Are you sure you want to delete <b>{keyIds.length}</b>
+        {label} key{keyIds.length > 1 ? 's' : ''}?
+    </p>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte
new file mode 100644
index 000000000..23615f2cf
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Box, CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../store';
+    import Delete from './delete.svelte';
+    import UpdateExpirationDate from './updateExpirationDate.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import Scopes from '../keys/scopes.svelte';
+    import { InteractiveText, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let key: Models.DevKey | Models.Key;
+    export let keyType: 'api' | 'dev' = 'api';
+
+    let name: string = null;
+    let scopes: string[] = null;
+
+    let showDelete = false;
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const event = isApiKey ? Submit.KeyUpdateName : Submit.DevKeyUpdateName;
+    const dependency = isApiKey ? Dependencies.KEY : Dependencies.DEV_KEY;
+
+    onMount(() => {
+        name ??= key.name;
+        if (isApiKey) {
+            scopes ??= (key as Models.Key).scopes;
+        }
+    });
+
+    function asApiKey(key: Models.Key | Models.DevKey) {
+        return key as Models.Key;
+    }
+
+    async function updateName() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.updateKey(
+                      $project.$id,
+                      key.$id,
+                      name,
+                      scopes,
+                      key.expire
+                  )
+                : await sdk.forConsole.projects.updateDevKey(
+                      $project.$id,
+                      key.$id,
+                      name,
+                      key.expire
+                  );
+            await invalidate(dependency);
+            trackEvent(event);
+            addNotification({
+                type: 'success',
+                message: `${label} key name has been updated`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, event);
+        }
+    }
+
+    async function updateScopes() {
+        try {
+            await sdk.forConsole.projects.updateKey(
+                $project.$id,
+                key.$id,
+                key.name,
+                scopes,
+                key.expire
+            );
+            await invalidate(Dependencies.KEY);
+            trackEvent(Submit.KeyUpdateScopes, {
+                scopes
+            });
+            addNotification({
+                type: 'success',
+                message: 'API key scopes have been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.KeyUpdateScopes);
+        }
+    }
+
+    let tiles: Record<string, string>;
+    $: tiles = {
+        Name: key.name,
+        'Last accessed': key.accessedAt ? toLocaleDate(key.accessedAt) : 'never',
+        'Expiration date': key.expire ? toLocaleDateTime(key.expire) : 'never',
+        Secret: key.secret
+    };
+</script>
+
+<svelte:head>
+    <title>{label} key - Appwrite</title>
+</svelte:head>
+
+<Container>
+    {@const accessedAt = key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
+    <CardGrid>
+        <svelte:fragment slot="title">Key details</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <Layout.GridFraction start={1} end={2} gap="xxxl" rowGap="xl">
+                {#each Object.entries(tiles) as [label, value]}
+                    <Layout.Stack gap="xxxs">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                            {label}
+                        </Typography.Text>
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                            {#if label === 'Secret'}
+                                <InteractiveText
+                                    variant="secret-code"
+                                    isVisible={false}
+                                    text={value} />
+                            {:else}
+                                {value}
+                            {/if}
+                        </Typography.Text>
+                    </Layout.Stack>
+                {/each}
+            </Layout.GridFraction>
+        </svelte:fragment>
+    </CardGrid>
+
+    <Form onSubmit={updateName}>
+        <CardGrid>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            Choose any name that will help you distinguish between {label} keys.
+            <svelte:fragment slot="aside">
+                <InputText
+                    id="name"
+                    label="Name"
+                    bind:value={name}
+                    required
+                    placeholder="Enter name" />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={name === key.name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    {#if isApiKey}
+        <Form onSubmit={updateScopes}>
+            {@const apiKey = asApiKey(key)}
+            <CardGrid>
+                <svelte:fragment slot="title">Scopes</svelte:fragment>
+                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.
+                <svelte:fragment slot="aside">
+                    {#if scopes !== null}
+                        <Scopes bind:scopes />
+                    {/if}
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button
+                        submit
+                        disabled={scopes &&
+                            apiKey?.scopes &&
+                            !symmetricDifference(scopes, apiKey.scopes).length}>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+    {/if}
+
+    <UpdateExpirationDate {keyType} {key} />
+
+    <CardGrid>
+        <svelte:fragment slot="title">Delete {label} key</svelte:fragment>
+        The {label} key will be permanently deleted. This action is irreversible.
+        <svelte:fragment slot="aside">
+            <Box>
+                <div class="u-flex u-gap-16">
+                    <div class="u-cross-child-center u-line-height-1-5">
+                        <h6 class="u-bold" data-private>{key.name}</h6>
+                        <p>Last accessed: {accessedAt}</p>
+                    </div>
+                </div>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete {keyType} {key} bind:showDelete />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
new file mode 100644
index 000000000..837142828
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { goto } from '$app/navigation';
+    import { Empty } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import type { Models } from '@appwrite.io/console';
+    import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { devKeyColumns, keyColumns, showDevKeysCreateModal } from '../store';
+    import { Badge, FloatingActionBar, Layout, Table } from '@appwrite.io/pink-svelte';
+    import DeleteBatch from './deleteBatch.svelte';
+    import { capitalize } from '$lib/helpers/string';
+
+    export let keyType: 'api' | 'dev' = 'api';
+    export let keys: Models.KeyList | Models.DevKeyList;
+
+    let showDeleteModal = false;
+    let selectedRows: string[] = [];
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+
+    function asApiKey(key: Models.Key | Models.DevKey) {
+        return key as Models.Key;
+    }
+
+    function getExpiryDetails(key: Models.Key | Models.DevKey): {
+        status: 'success' | 'warning' | 'error' | null;
+        message: string | null;
+    } {
+        const isExpired = key.expire !== null && new Date(key.expire) < new Date();
+        const isExpiring = key.expire && diffDays(new Date(), new Date(key.expire)) < 14;
+
+        return {
+            message: isExpired ? 'Expired' : isExpiring ? 'Expires soon' : null,
+            status: isExpired ? (isApiKey ? 'error' : 'warning') : isExpiring ? 'warning' : null
+        };
+    }
+
+    function getKeys(): Models.Key[] | Models.DevKey[] {
+        if (isApiKey) return keys['keys'] as Models.Key[];
+        else return keys['devKeys'] as Models.DevKey[];
+    }
+
+    function getDescription(): string {
+        if (isApiKey)
+            return 'Use API keys to authenticate your app’s requests in production, granting secure access to live data and services.';
+        else
+            return 'Dev keys allow bypassing rate limits and CORS errors in your development environment.';
+    }
+
+    const columns = isApiKey ? $keyColumns : $devKeyColumns;
+</script>
+
+{#if keys.total}
+    <Table.Root let:root {columns} bind:selectedRows allowSelection={$canWriteKeys}>
+        <svelte:fragment slot="header" let:root>
+            {#each columns as column}
+                <Table.Header.Cell column={column.id} {root}>{column.title}</Table.Header.Cell>
+            {/each}
+        </svelte:fragment>
+        {#each getKeys() as key (key.$id)}
+            <Table.Row.Link id={key.$id} href={`${slug}/${key.$id}`} {root}>
+                <Table.Cell {root}>
+                    {key.name}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {@const expiration = getExpiryDetails(key)}
+                    <Layout.Stack gap="s" direction="row">
+                        {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+
+                        {#if expiration.status}
+                            <Badge
+                                size="s"
+                                variant="secondary"
+                                type={expiration.status}
+                                content={expiration.message} />
+                        {/if}
+                    </Layout.Stack>
+                </Table.Cell>
+                {#if isApiKey}
+                    <Table.Cell {root}>
+                        {asApiKey(key).scopes.length} Scopes
+                    </Table.Cell>
+                {/if}
+            </Table.Row.Link>
+        {/each}
+    </Table.Root>
+{:else}
+    <Empty
+        single
+        allowCreate={$canWriteKeys}
+        href="https://appwrite.io/docs/advanced/platform/{slug}"
+        target="{label} key"
+        description={getDescription()}
+        on:click={() => {
+            if (isApiKey) {
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}/create`
+                );
+            } else {
+                $showDevKeysCreateModal = true;
+            }
+        }} />
+{/if}
+
+{#if selectedRows.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedRows.length.toString()} />
+            <span>
+                {capitalize(label)}
+                {selectedRows.length > 1 ? 'keys' : 'key'}
+                selected
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
+            <Button text on:click={() => (selectedRows = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDeleteModal = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
+
+<DeleteBatch {keyType} bind:keyIds={selectedRows} bind:showDelete={showDeleteModal} />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
new file mode 100644
index 000000000..830f999f2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
+    import { diffDays, isSameDay } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Alert } from '@appwrite.io/pink-svelte';
+    import { ExpirationInput } from '$lib/components';
+    import type { Models } from '@appwrite.io/console';
+    import { page } from '$app/stores';
+
+    export let keyType: 'api' | 'dev' = 'api';
+    export let key: Models.DevKey | Models.Key;
+
+    const projectId = $page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const expiryOptions = isApiKey ? 'default' : 'limited';
+    const dependency = isApiKey ? Dependencies.KEY : Dependencies.DEV_KEY;
+    const event = isApiKey ? Submit.KeyUpdateExpire : Submit.DevKeyUpdateExpire;
+
+    let expiration = key.expire;
+
+    async function updateExpire() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.updateKey(
+                      projectId,
+                      key.$id,
+                      key.name,
+                      (key as Models.Key).scopes,
+                      expiration
+                  )
+                : await sdk.forConsole.projects.updateDevKey(
+                      projectId,
+                      key.$id,
+                      key.name,
+                      expiration
+                  );
+
+            await invalidate(dependency);
+            trackEvent(event);
+            addNotification({
+                type: 'success',
+                message: `${label} key expiration has been updated`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, event);
+        }
+    }
+
+    let alertsDismissed = false;
+    $: isExpiring =
+        !alertsDismissed && key.expire && diffDays(new Date(), new Date(key.expire)) < 14;
+    $: isExpired = !alertsDismissed && key.expire !== null && new Date(key.expire) < new Date();
+
+    // for comparison's sake.
+    $: disableButton =
+        // expiration becomes `null` in `ExpirationInput`.
+        typeof key?.expire === 'undefined' && expiration === null
+            ? true
+            : isSameDay(new Date(expiration), new Date(key?.expire));
+</script>
+
+<Form onSubmit={updateExpire}>
+    <CardGrid>
+        <svelte:fragment slot="title">Expiration date</svelte:fragment>
+        Set a date after which your {label} key will expire.
+        <svelte:fragment slot="aside">
+            {#if isExpired || isExpiring}
+                <Alert.Inline
+                    status={isExpired && isApiKey ? 'error' : 'warning'}
+                    on:dismiss={() => (alertsDismissed = true)}
+                    title={`Your ${label} key ${isExpired ? 'has expired' : 'is about to expire'}`}>
+                    Update the expiration date to keep the key active.
+                </Alert.Inline>
+            {/if}
+            <ExpirationInput bind:value={expiration} {expiryOptions} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={disableButton} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
index f943168e5..6a4e996b1 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
@@ -1,4 +1,7 @@
 <script lang="ts" context="module">
+    import { total } from '$lib/helpers/array';
+    import type { Metric } from '$lib/sdk/usage';
+
     export function totalMetrics(set: Array<unknown>): number {
         if (!set) return 0;
         return total((set as Metric[]).map((c) => c.value));
@@ -6,35 +9,35 @@
 </script>
 
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
+    import { afterNavigate, goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { PlatformsPanel } from '$lib/commandCenter/panels';
-    import { Heading, Tab } from '$lib/components';
+    import { Tab, Tabs } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { Container, type UsagePeriods } from '$lib/layout';
-    import { onMount } from 'svelte';
-    import { onboarding, project } from '../store';
+    import { onMount, setContext, type Component } from 'svelte';
     import Bandwidth from './bandwidth.svelte';
-    import { createApiKey } from './keys/+page.svelte';
-    import Onboard from './onboard.svelte';
-    // import Realtime from './realtime.svelte';
     import Requests from './requests.svelte';
     import { usage } from './store';
     import { formatNum } from '$lib/helpers/string';
-    import { total } from '$lib/helpers/array';
-    import type { Metric } from '$lib/sdk/usage';
     import { periodToDates } from '$lib/layout/usage.svelte';
     import { canWriteProjects } from '$lib/stores/roles';
+    import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { writable, type Writable } from 'svelte/store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { SHOW_INIT_FEATURES } from '$lib/system';
 
-    $: projectId = $page.params.project;
-    $: path = `${base}/project-${$page.params.region}-${projectId}/overview`;
     let period: UsagePeriods = '30d';
+    $: path = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     onMount(handle);
     afterNavigate(handle);
 
+    const action = setContext<Writable<Component>>('overview-action', writable(null));
+
     async function handle() {
         const promise = changePeriod(period);
 
@@ -49,6 +52,10 @@
         return usage.load(dates.start, dates.end, dates.period);
     }
 
+    function isTabSelected(key: string) {
+        return page.url.pathname === `${path}/${key}`;
+    }
+
     $: $registerCommands([
         {
             label: 'Add platform',
@@ -56,19 +63,29 @@
             callback() {
                 addSubPanel(PlatformsPanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'integrations',
             disabled: !$canWriteProjects
         },
         {
             label: 'Create API Key',
-            icon: 'plus',
+            icon: IconPlus,
             callback() {
-                createApiKey();
+                goto(`${path}/keys/create`);
             },
             keys: ['c', 'k'],
             group: 'integrations',
             disabled: !$canWriteProjects
+        },
+        {
+            label: 'Create Dev Key',
+            icon: IconPlus,
+            callback() {
+                goto(`${path}/dev-keys/create`);
+            },
+            keys: ['c', 'd', 'k'],
+            group: 'integrations',
+            disabled: !$canWriteProjects
         }
     ]);
 
@@ -81,177 +98,154 @@
     <title>Console - Appwrite</title>
 </svelte:head>
 
-{#if $project}
-    <Container overlapCover>
-        {#if $onboarding}
-            <Onboard {projectId} />
-        {:else}
-            {#if $usage}
-                {@const storage = humanFileSize($usage.filesStorageTotal ?? 0)}
-                <section class="common-section">
-                    <div class="grid-dashboard-1s-2m-6l">
-                        <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
-                            <Bandwidth {period} on:change={(e) => changePeriod(e.detail)} />
+<Container overlapCover>
+    <Layout.Stack gap="xxl">
+        {#if $usage}
+            {@const storage = humanFileSize($usage.filesStorageTotal ?? 0)}
+            <Layout.Stack gap="xl">
+                <Layout.Stack gap="l" direction={$isSmallViewport ? 'column' : 'row'}>
+                    <Card.Base
+                        class="is-2-columns-medium-screen is-3-columns-large-screen"
+                        padding="s">
+                        <Bandwidth {period} on:change={(e) => changePeriod(e.detail)} />
+                    </Card.Base>
+                    <Card.Base
+                        class="is-2-columns-medium-screen is-3-columns-large-screen"
+                        padding="s">
+                        <Requests {period} on:change={(e) => changePeriod(e.detail)} />
+                    </Card.Base>
+                </Layout.Stack>
+
+                <Layout.Stack gap="xl" direction={$isSmallViewport ? 'column' : 'row'}>
+                    <Card.Link
+                        padding="s"
+                        href={`${base}/project-${page.params.region}-${page.params.project}/databases`}
+                        class="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>
+                                    <span class="text">Database</span>
+                                </div>
+                            </div>
+
+                            <div class="grid-item-1-start-end"></div>
+
+                            <div class="grid-item-1-end-start">
+                                <Typography.Title>
+                                    {formatNum($usage.documentsTotal ?? 0)}
+                                </Typography.Title>
+                                <Typography.Text>Documents</Typography.Text>
+                            </div>
                         </div>
-                        <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
-                            <Requests {period} on:change={(e) => changePeriod(e.detail)} />
+                    </Card.Link>
+                    <Card.Link
+                        padding="s"
+                        href={`${base}/project-${page.params.region}-${page.params.project}/storage`}
+                        class="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>
+                                    <span class="text">Storage</span>
+                                </div>
+                            </div>
+
+                            <div class="grid-item-1-start-end"></div>
+
+                            <div class="grid-item-1-end-start">
+                                <Typography.Title>
+                                    {storage.value}
+                                    <span class="body-text-2">{storage.unit}</span>
+                                </Typography.Title>
+                                <Typography.Text>Storage</Typography.Text>
+                            </div>
                         </div>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${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">
-                                        {formatNum($usage.documentsTotal ?? 0)}
-                                    </div>
-                                    <div>Documents</div>
-                                </div>
-
-                                <div class="grid-item-1-end-end">
-                                    <div class="text">
-                                        Databases: {formatNum($usage.databasesTotal ?? 0)}
-                                    </div>
+                    </Card.Link>
+                    <Card.Link
+                        padding="s"
+                        href={`${base}/project-${page.params.region}-${page.params.project}/auth`}
+                        class="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>
+                                    <span class="text">Auth</span>
                                 </div>
                             </div>
-                        </a>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${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>
 
-                                <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: {formatNum($usage.bucketsTotal ?? 0)}
-                                    </div>
+                            <div class="grid-item-1-end-start">
+                                <Typography.Title>
+                                    {formatNum($usage.usersTotal ?? 0)}
+                                </Typography.Title>
+                                <Typography.Text>Users</Typography.Text>
+                            </div>
+                        </div>
+                    </Card.Link>
+                    <Card.Link
+                        padding="s"
+                        href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
+                        class="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>
+                                    <span class="text">Functions</span>
                                 </div>
                             </div>
-                        </a>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${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-start-end" />
+                            <div class="grid-item-1-start-end"></div>
 
-                                <div class="grid-item-1-end-start">
-                                    <div class="heading-level-4">
-                                        {formatNum($usage.usersTotal ?? 0)}
-                                    </div>
-                                    <div>Users</div>
-                                </div>
+                            <div class="grid-item-1-end-start">
+                                <Typography.Title>
+                                    {formatNum($usage.executionsTotal ?? 0)}
+                                </Typography.Title>
+                                <Typography.Text>Executions</Typography.Text>
                             </div>
-                        </a>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${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">
-                                        {formatNum($usage.executionsTotal ?? 0)}
-                                    </div>
-                                    <div>Executions</div>
-                                </div>
-
-                                <div class="grid-item-1-end-end">
-                                    <div class="text" />
-                                </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>
-                </section>
-            {/if}
-
-            <section class="common-section u-margin-block-start-100">
-                <Heading tag="h2" size="5" id="integrations">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" role="tablist" data-sveltekit-noscroll>
-                        <Tab
-                            href={`${path}/platforms`}
-                            selected={$page.url.pathname === `${path}/platforms`}
-                            event="platforms">Platforms</Tab>
-                        <Tab
-                            href={`${path}/keys`}
-                            selected={$page.url.pathname === `${path}/keys`}
-                            event="keys">API keys</Tab>
-                    </ul>
-                </div>
-
-                <div class="u-margin-block-start-40">
-                    <slot />
-                </div>
-            </section>
+                        </div>
+                    </Card.Link>
+                    <!--                    <Card.Base-->
+                    <!--                        padding="s"-->
+                    <!--                        class="is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">-->
+                    <!--                        <Realtime />-->
+                    <!--                    </Card.Base>-->
+                </Layout.Stack>
+            </Layout.Stack>
         {/if}
-    </Container>
-{/if}
 
-<style>
-    @media (min-width: 1199px) {
-        .grid-dashboard-1s-2m-6l {
-            grid-template-columns: repeat(12, 1fr);
-        }
-
-        .is-3-columns-large-screen {
-            /* 6/12 = half */
-            grid-column: span 6;
-        }
-
-        .is-2-columns-large-screen {
-            /* 3/12 = 1/4 → fits 4 items per row */
-            grid-column: span 3;
-        }
-    }
-</style>
+        <Layout.Stack gap="xl">
+            <Typography.Title>Integrations</Typography.Title>
+            <Layout.Stack gap="xl" direction="row" justifyContent="space-between">
+                <Tabs>
+                    <Tab
+                        noscroll
+                        event="platforms"
+                        href={`${path}/platforms`}
+                        selected={isTabSelected('platforms')}>Platforms</Tab>
+                    <Tab
+                        noscroll
+                        event="keys"
+                        href={`${path}/keys`}
+                        selected={isTabSelected('keys')}>API keys</Tab>
+                    {#if SHOW_INIT_FEATURES}
+                        <Tab
+                            noscroll
+                            event="keys"
+                            href={`${path}/dev-keys`}
+                            selected={isTabSelected('dev-keys')}>Dev keys</Tab>
+                    {/if}
+                </Tabs>
+                {#if $action}
+                    <svelte:component this={$action} />
+                {/if}
+            </Layout.Stack>
+            <slot />
+        </Layout.Stack>
+    </Layout.Stack>
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/database-dark.png b/src/routes/(console)/project-[region]-[project]/overview/assets/database-dark.png
new file mode 100644
index 000000000..8adc3af2e
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/database-dark.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/database.png b/src/routes/(console)/project-[region]-[project]/overview/assets/database.png
new file mode 100644
index 000000000..d2428fc29
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/database.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/discord-dark.png b/src/routes/(console)/project-[region]-[project]/overview/assets/discord-dark.png
new file mode 100644
index 000000000..634a5a20a
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/discord-dark.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/discord.png b/src/routes/(console)/project-[region]-[project]/overview/assets/discord.png
new file mode 100644
index 000000000..db83f6917
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/discord.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-android-dark.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-android-dark.svg
new file mode 100644
index 000000000..df5eefca4
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-android-dark.svg
@@ -0,0 +1,45 @@
+<svg width="67" height="71" viewBox="0 0 67 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_6526_8437)">
+<rect x="5.30487" y="1.70477" width="56.439" height="56.439" rx="10" fill="white" fill-opacity="0.04" shape-rendering="crispEdges"/>
+<rect x="4.80487" y="1.20477" width="57.439" height="57.439" rx="10.5" stroke="#232325" stroke-opacity="0.9" shape-rendering="crispEdges"/>
+<rect x="4.80487" y="1.20477" width="57.439" height="57.439" rx="10.5" stroke="url(#paint0_linear_6526_8437)" stroke-opacity="0.16" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_6526_8437)">
+<rect x="8.30505" y="4.3847" width="50.677" height="50.677" rx="8" fill="#1D1D21"/>
+<rect x="8.82505" y="4.9047" width="49.637" height="49.637" rx="7.48" stroke="#232325" stroke-opacity="0.9" stroke-width="1.04"/>
+<rect x="8.82505" y="4.9047" width="49.637" height="49.637" rx="7.48" stroke="url(#paint1_linear_6526_8437)" stroke-opacity="0.16" stroke-width="1.04"/>
+</g>
+<path d="M38.8405 27.995L40.4166 25.2647C40.5055 25.1117 40.4517 24.9172 40.3007 24.8283C40.1498 24.7394 39.9533 24.7911 39.8664 24.9441L38.2696 27.7095C37.0513 27.1531 35.68 26.8429 34.2053 26.8429C32.7305 26.8429 31.3592 27.1531 30.1409 27.7095L28.5442 24.9441C28.4552 24.7911 28.2608 24.7394 28.1077 24.8283C27.9547 24.9172 27.903 25.1117 27.9919 25.2647L29.568 27.995C26.8502 29.4676 25.0093 32.2186 24.7053 35.439H43.7053C43.4012 32.2185 41.5604 29.4676 38.8405 27.995ZM29.8431 32.7708C29.4025 32.7708 29.0468 32.413 29.0468 31.9745C29.0468 31.5339 29.4046 31.1782 29.8431 31.1782C30.2837 31.1782 30.6394 31.536 30.6394 31.9745C30.6415 32.413 30.2837 32.7708 29.8431 32.7708ZM38.5654 32.7708C38.1249 32.7708 37.7691 32.413 37.7691 31.9745C37.7691 31.5339 38.1269 31.1782 38.5654 31.1782C39.006 31.1782 39.3617 31.536 39.3617 31.9745C39.3638 32.413 39.006 32.7708 38.5654 32.7708Z" fill="#97979B"/>
+<defs>
+<filter id="filter0_bd_6526_8437" x="0.14487" y="-3.45523" width="66.759" height="68.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.08"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6526_8437"/>
+<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="3.12"/>
+<feGaussianBlur stdDeviation="1.56"/>
+<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.24 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_6526_8437" result="effect2_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6526_8437" result="shape"/>
+</filter>
+<filter id="filter1_d_6526_8437" x="0.817053" y="4.3847" width="65.6529" height="65.6529" 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="7.488"/>
+<feGaussianBlur stdDeviation="3.744"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6526_8437" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6526_8437" x1="61.7439" y1="58.1438" x2="5.30487" y2="1.70477" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6526_8437" x1="58.982" y1="55.0617" x2="8.30506" y2="4.3847" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-android.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-android.svg
new file mode 100644
index 000000000..d11379ee9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-android.svg
@@ -0,0 +1,43 @@
+<svg width="67" height="70" viewBox="0 0 67 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_6526_8437)">
+<rect x="5.30487" y="0.704773" width="56.439" height="56.439" rx="10" fill="white" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<rect x="6.24087" y="1.64077" width="54.567" height="54.567" rx="9.064" stroke="url(#paint0_linear_6526_8437)" stroke-width="1.872" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_6526_8437)">
+<rect x="8.30505" y="3.38474" width="50.677" height="50.677" rx="8" fill="white"/>
+<rect x="8.82505" y="3.90474" width="49.637" height="49.637" rx="7.48" stroke="url(#paint1_linear_6526_8437)" stroke-width="1.04"/>
+</g>
+<path d="M38.8405 26.995L40.4166 24.2648C40.5055 24.1117 40.4517 23.9173 40.3007 23.8283C40.1498 23.7394 39.9533 23.7911 39.8664 23.9442L38.2696 26.7096C37.0513 26.1532 35.68 25.8429 34.2053 25.8429C32.7305 25.8429 31.3592 26.1532 30.1409 26.7096L28.5442 23.9442C28.4552 23.7911 28.2608 23.7394 28.1077 23.8283C27.9547 23.9173 27.903 24.1117 27.9919 24.2648L29.568 26.995C26.8502 28.4677 25.0093 31.2186 24.7053 34.439H43.7053C43.4012 31.2186 41.5604 28.4677 38.8405 26.995ZM29.8431 31.7709C29.4025 31.7709 29.0468 31.413 29.0468 30.9745C29.0468 30.534 29.4046 30.1782 29.8431 30.1782C30.2837 30.1782 30.6394 30.536 30.6394 30.9745C30.6415 31.413 30.2837 31.7709 29.8431 31.7709ZM38.5654 31.7709C38.1249 31.7709 37.7691 31.413 37.7691 30.9745C37.7691 30.534 38.1269 30.1782 38.5654 30.1782C39.006 30.1782 39.3617 30.536 39.3617 30.9745C39.3638 31.413 39.006 31.7709 38.5654 31.7709Z" fill="#97979B"/>
+<defs>
+<filter id="filter0_bd_6526_8437" x="1.14487" y="-3.45523" width="64.759" height="66.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.08"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6526_8437"/>
+<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="3.12"/>
+<feGaussianBlur stdDeviation="1.56"/>
+<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.02 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_6526_8437" result="effect2_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6526_8437" result="shape"/>
+</filter>
+<filter id="filter1_d_6526_8437" x="0.817053" y="3.38474" width="65.6529" height="65.653" 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="7.488"/>
+<feGaussianBlur stdDeviation="3.744"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6526_8437" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6526_8437" x1="33.5244" y1="0.704773" x2="33.5244" y2="57.1438" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.08"/>
+<stop offset="1" stop-color="white" stop-opacity="0.24"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6526_8437" x1="45.4682" y1="58.0736" x2="43.9901" y2="1.27319" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDF0"/>
+<stop offset="1" stop-color="#F2F2F8" stop-opacity="0.58"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-flutter-dark.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-flutter-dark.svg
new file mode 100644
index 000000000..898f6cd30
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-flutter-dark.svg
@@ -0,0 +1,45 @@
+<svg width="67" height="71" viewBox="0 0 67 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_6526_8437)">
+<rect x="5.30487" y="1.70477" width="56.439" height="56.439" rx="10" fill="white" fill-opacity="0.04" shape-rendering="crispEdges"/>
+<rect x="4.80487" y="1.20477" width="57.439" height="57.439" rx="10.5" stroke="#232325" stroke-opacity="0.9" shape-rendering="crispEdges"/>
+<rect x="4.80487" y="1.20477" width="57.439" height="57.439" rx="10.5" stroke="url(#paint0_linear_6526_8437)" stroke-opacity="0.16" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_6526_8437)">
+<rect x="8.30487" y="4.3847" width="50.677" height="50.677" rx="8" fill="#1D1D21"/>
+<rect x="8.82487" y="4.9047" width="49.637" height="49.637" rx="7.48" stroke="#232325" stroke-opacity="0.9" stroke-width="1.04"/>
+<rect x="8.82487" y="4.9047" width="49.637" height="49.637" rx="7.48" stroke="url(#paint1_linear_6526_8437)" stroke-opacity="0.16" stroke-width="1.04"/>
+</g>
+<path d="M24 30L26.9032 32.8421L39 21H33.1935L24 30ZM39 29.5263H33.1935L28.3548 34.2632L33.1935 39H39L34.1613 34.2632L39 29.5263Z" fill="#97979B"/>
+<defs>
+<filter id="filter0_bd_6526_8437" x="0.14487" y="-3.45523" width="66.759" height="68.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.08"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6526_8437"/>
+<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="3.12"/>
+<feGaussianBlur stdDeviation="1.56"/>
+<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.24 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_6526_8437" result="effect2_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6526_8437" result="shape"/>
+</filter>
+<filter id="filter1_d_6526_8437" x="0.81687" y="4.3847" width="65.6529" height="65.6529" 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="7.488"/>
+<feGaussianBlur stdDeviation="3.744"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6526_8437" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6526_8437" x1="61.7439" y1="58.1438" x2="5.30487" y2="1.70477" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6526_8437" x1="58.9818" y1="55.0617" x2="8.30487" y2="4.3847" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-flutter.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-flutter.svg
new file mode 100644
index 000000000..a8562409a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-flutter.svg
@@ -0,0 +1,43 @@
+<svg width="67" height="70" viewBox="0 0 67 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_6526_8437)">
+<rect x="5.30487" y="0.704773" width="56.439" height="56.439" rx="10" fill="white" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<rect x="6.24087" y="1.64077" width="54.567" height="54.567" rx="9.064" stroke="url(#paint0_linear_6526_8437)" stroke-width="1.872" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_6526_8437)">
+<rect x="8.30487" y="3.38474" width="50.677" height="50.677" rx="8" fill="white"/>
+<rect x="8.82487" y="3.90474" width="49.637" height="49.637" rx="7.48" stroke="url(#paint1_linear_6526_8437)" stroke-width="1.04"/>
+</g>
+<path d="M24 29L26.9032 31.8421L39 20H33.1935L24 29ZM39 28.5263H33.1935L28.3548 33.2632L33.1935 38H39L34.1613 33.2632L39 28.5263Z" fill="#97979B"/>
+<defs>
+<filter id="filter0_bd_6526_8437" x="1.14487" y="-3.45523" width="64.759" height="66.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.08"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6526_8437"/>
+<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="3.12"/>
+<feGaussianBlur stdDeviation="1.56"/>
+<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.02 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_6526_8437" result="effect2_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6526_8437" result="shape"/>
+</filter>
+<filter id="filter1_d_6526_8437" x="0.81687" y="3.38474" width="65.6529" height="65.653" 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="7.488"/>
+<feGaussianBlur stdDeviation="3.744"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6526_8437" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6526_8437" x1="33.5244" y1="0.704773" x2="33.5244" y2="57.1438" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.08"/>
+<stop offset="1" stop-color="white" stop-opacity="0.24"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6526_8437" x1="45.468" y1="58.0736" x2="43.9899" y2="1.27319" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDF0"/>
+<stop offset="1" stop-color="#F2F2F8" stop-opacity="0.58"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-ios-dark.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-ios-dark.svg
new file mode 100644
index 000000000..2ae552018
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-ios-dark.svg
@@ -0,0 +1,48 @@
+<svg width="67" height="71" viewBox="0 0 67 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bd_6526_8437)">
+        <rect x="5.30487" y="1.70477" width="56.439" height="56.439" rx="10" fill="white" fill-opacity="0.04" shape-rendering="crispEdges"/>
+        <rect x="4.80487" y="1.20477" width="57.439" height="57.439" rx="10.5" stroke="#232325" stroke-opacity="0.9" shape-rendering="crispEdges"/>
+        <rect x="4.80487" y="1.20477" width="57.439" height="57.439" rx="10.5" stroke="url(#paint0_linear_6526_8437)" stroke-opacity="0.16" shape-rendering="crispEdges"/>
+    </g>
+    <g filter="url(#filter1_d_6526_8437)">
+        <mask id="path-3-inside-1_6526_8437" fill="white">
+            <path d="M8.30507 12.3847C8.30507 7.96642 11.8868 4.3847 16.3051 4.3847H50.982C55.4003 4.3847 58.982 7.96643 58.982 12.3847V47.0617C58.982 51.4799 55.4003 55.0617 50.982 55.0617H16.3051C11.8868 55.0617 8.30507 51.4799 8.30507 47.0617V12.3847Z"/>
+        </mask>
+        <path d="M8.30507 12.3847C8.30507 7.96642 11.8868 4.3847 16.3051 4.3847H50.982C55.4003 4.3847 58.982 7.96643 58.982 12.3847V47.0617C58.982 51.4799 55.4003 55.0617 50.982 55.0617H16.3051C11.8868 55.0617 8.30507 51.4799 8.30507 47.0617V12.3847Z" fill="#1D1D21"/>
+        <path d="M16.3051 5.3847H50.982V3.3847H16.3051V5.3847ZM57.982 12.3847V47.0617H59.982V12.3847H57.982ZM50.982 54.0617H16.3051V56.0617H50.982V54.0617ZM9.30507 47.0617V12.3847H7.30507V47.0617H9.30507ZM16.3051 54.0617C12.4391 54.0617 9.30507 50.9277 9.30507 47.0617H7.30507C7.30507 52.0322 11.3345 56.0617 16.3051 56.0617V54.0617ZM57.982 47.0617C57.982 50.9277 54.848 54.0617 50.982 54.0617V56.0617C55.9526 56.0617 59.982 52.0322 59.982 47.0617H57.982ZM50.982 5.3847C54.848 5.3847 57.982 8.51871 57.982 12.3847H59.982C59.982 7.41414 55.9526 3.3847 50.982 3.3847V5.3847ZM16.3051 3.3847C11.3345 3.3847 7.30507 7.41414 7.30507 12.3847H9.30507C9.30507 8.51871 12.4391 5.3847 16.3051 5.3847V3.3847Z" fill="#232325" fill-opacity="0.9" mask="url(#path-3-inside-1_6526_8437)"/>
+        <path d="M16.3051 5.3847H50.982V3.3847H16.3051V5.3847ZM57.982 12.3847V47.0617H59.982V12.3847H57.982ZM50.982 54.0617H16.3051V56.0617H50.982V54.0617ZM9.30507 47.0617V12.3847H7.30507V47.0617H9.30507ZM16.3051 54.0617C12.4391 54.0617 9.30507 50.9277 9.30507 47.0617H7.30507C7.30507 52.0322 11.3345 56.0617 16.3051 56.0617V54.0617ZM57.982 47.0617C57.982 50.9277 54.848 54.0617 50.982 54.0617V56.0617C55.9526 56.0617 59.982 52.0322 59.982 47.0617H57.982ZM50.982 5.3847C54.848 5.3847 57.982 8.51871 57.982 12.3847H59.982C59.982 7.41414 55.9526 3.3847 50.982 3.3847V5.3847ZM16.3051 3.3847C11.3345 3.3847 7.30507 7.41414 7.30507 12.3847H9.30507C9.30507 8.51871 12.4391 5.3847 16.3051 5.3847V3.3847Z" fill="url(#paint1_linear_6526_8437)" fill-opacity="0.16" mask="url(#path-3-inside-1_6526_8437)"/>
+    </g>
+    <path d="M41.349 35.371C41.0438 36.0697 40.6825 36.7129 40.2639 37.3043C39.6933 38.1104 39.2261 38.6684 38.8661 38.9783C38.308 39.4869 37.71 39.7474 37.0697 39.7622C36.61 39.7622 36.0556 39.6326 35.4103 39.3696C34.7629 39.1079 34.1679 38.9783 33.6238 38.9783C33.0533 38.9783 32.4413 39.1079 31.7868 39.3696C31.1313 39.6326 30.6032 39.7696 30.1994 39.7832C29.5854 39.8091 28.9733 39.5412 28.3624 38.9783C27.9725 38.6413 27.4847 38.0635 26.9005 37.245C26.2736 36.371 25.7582 35.3574 25.3544 34.2019C24.922 32.9538 24.7053 31.7452 24.7053 30.5751C24.7053 29.2347 24.9975 28.0787 25.5829 27.11C26.043 26.3319 26.655 25.7181 27.4211 25.2675C28.1871 24.8169 29.0148 24.5872 29.9062 24.5725C30.3939 24.5725 31.0335 24.722 31.8283 25.0159C32.6209 25.3107 33.1298 25.4602 33.3529 25.4602C33.5197 25.4602 34.085 25.2854 35.0434 24.9369C35.9497 24.6137 36.7146 24.4798 37.3413 24.5325C39.0393 24.6683 40.315 25.3317 41.1633 26.5267C39.6447 27.4385 38.8935 28.7156 38.9085 30.354C38.9222 31.6301 39.3893 32.6921 40.3075 33.5352C40.7236 33.9266 41.1883 34.229 41.7053 34.4439C41.5931 34.7661 41.4748 35.0747 41.349 35.371ZM37.4546 20.185C37.4546 21.1853 37.0859 22.1192 36.3509 22.9836C35.4639 24.0112 34.391 24.605 33.2276 24.5113C33.2127 24.3913 33.2041 24.265 33.2041 24.1323C33.2041 23.1721 33.626 22.1445 34.3751 21.3043C34.749 20.8788 35.2247 20.5251 35.8015 20.2429C36.377 19.965 36.9214 19.8112 37.4335 19.7849C37.4484 19.9186 37.4546 20.0524 37.4546 20.185V20.185Z" fill="#97979B"/>
+    <defs>
+        <filter id="filter0_bd_6526_8437" x="0.14487" y="-3.45523" width="66.759" height="68.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.08"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6526_8437"/>
+            <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="3.12"/>
+            <feGaussianBlur stdDeviation="1.56"/>
+            <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.24 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_6526_8437" result="effect2_dropShadow_6526_8437"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6526_8437" result="shape"/>
+        </filter>
+        <filter id="filter1_d_6526_8437" x="0.817069" y="4.3847" width="65.653" height="65.6529" 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="7.488"/>
+            <feGaussianBlur stdDeviation="3.744"/>
+            <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.03 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6526_8437"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6526_8437" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_6526_8437" x1="61.7439" y1="58.1438" x2="5.30487" y2="1.70477" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0.02"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6526_8437" x1="58.982" y1="55.0617" x2="8.30507" y2="4.3847" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0.02"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-ios.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-ios.svg
new file mode 100644
index 000000000..f39255858
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-ios.svg
@@ -0,0 +1,43 @@
+<svg width="67" height="70" viewBox="0 0 67 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_6526_8437)">
+<rect x="5.30487" y="0.704773" width="56.439" height="56.439" rx="10" fill="white" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<rect x="6.24087" y="1.64077" width="54.567" height="54.567" rx="9.064" stroke="url(#paint0_linear_6526_8437)" stroke-width="1.872" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_6526_8437)">
+<rect x="8.30507" y="3.38474" width="50.677" height="50.677" rx="8" fill="white"/>
+<rect x="8.82507" y="3.90474" width="49.637" height="49.637" rx="7.48" stroke="url(#paint1_linear_6526_8437)" stroke-width="1.04"/>
+</g>
+<path d="M41.349 34.3709C41.0438 35.0697 40.6825 35.7129 40.2639 36.3042C39.6933 37.1103 39.2261 37.6684 38.8661 37.9782C38.308 38.4868 37.71 38.7473 37.0697 38.7621C36.61 38.7621 36.0556 38.6325 35.4103 38.3696C34.7629 38.1078 34.1679 37.9782 33.6238 37.9782C33.0533 37.9782 32.4413 38.1078 31.7868 38.3696C31.1313 38.6325 30.6032 38.7696 30.1994 38.7831C29.5854 38.8091 28.9733 38.5412 28.3624 37.9782C27.9725 37.6412 27.4847 37.0634 26.9005 36.2449C26.2736 35.3709 25.7582 34.3573 25.3544 33.2018C24.922 31.9537 24.7053 30.7451 24.7053 29.575C24.7053 28.2347 24.9975 27.0787 25.5829 26.1099C26.043 25.3318 26.655 24.718 27.4211 24.2674C28.1871 23.8168 29.0148 23.5872 29.9062 23.5725C30.3939 23.5725 31.0335 23.722 31.8283 24.0158C32.6209 24.3106 33.1298 24.4601 33.3529 24.4601C33.5197 24.4601 34.085 24.2853 35.0434 23.9368C35.9497 23.6136 36.7146 23.4798 37.3413 23.5325C39.0393 23.6683 40.315 24.3316 41.1633 25.5266C39.6447 26.4384 38.8935 27.7156 38.9085 29.3539C38.9222 30.63 39.3893 31.692 40.3075 32.5352C40.7236 32.9265 41.1883 33.229 41.7053 33.4438C41.5931 33.766 41.4748 34.0746 41.349 34.3709ZM37.4546 19.185C37.4546 20.1852 37.0859 21.1191 36.3509 21.9835C35.4639 23.0111 34.391 23.605 33.2276 23.5113C33.2127 23.3913 33.2041 23.265 33.2041 23.1323C33.2041 22.172 33.626 21.1444 34.3751 20.3042C34.749 19.8788 35.2247 19.525 35.8015 19.2429C36.377 18.9649 36.9214 18.8112 37.4335 18.7849C37.4484 18.9186 37.4546 19.0523 37.4546 19.185V19.185Z" fill="#97979B"/>
+<defs>
+<filter id="filter0_bd_6526_8437" x="1.14487" y="-3.45523" width="64.759" height="66.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.08"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6526_8437"/>
+<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="3.12"/>
+<feGaussianBlur stdDeviation="1.56"/>
+<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.02 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_6526_8437" result="effect2_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6526_8437" result="shape"/>
+</filter>
+<filter id="filter1_d_6526_8437" x="0.817069" y="3.38474" width="65.653" height="65.653" 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="7.488"/>
+<feGaussianBlur stdDeviation="3.744"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6526_8437"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6526_8437" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6526_8437" x1="33.5244" y1="0.704773" x2="33.5244" y2="57.1438" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.08"/>
+<stop offset="1" stop-color="white" stop-opacity="0.24"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6526_8437" x1="45.4682" y1="58.0736" x2="43.9901" y2="1.27319" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDF0"/>
+<stop offset="1" stop-color="#F2F2F8" stop-opacity="0.58"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-reactnative-dark.png b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-reactnative-dark.png
new file mode 100644
index 000000000..ad36c9482
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-reactnative-dark.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-reactnative.png b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-reactnative.png
new file mode 100644
index 000000000..ce3eb2d7a
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-reactnative.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-web-dark.png b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-web-dark.png
new file mode 100644
index 000000000..32089778c
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-web-dark.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-web.png b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-web.png
new file mode 100644
index 000000000..a0928c81f
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-web.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/users-dark.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/users-dark.svg
new file mode 100644
index 000000000..ccdbfafc6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/users-dark.svg
@@ -0,0 +1,89 @@
+<svg width="260" height="181" viewBox="0 0 260 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7233_4628)">
+<g opacity="0.6" filter="url(#filter0_bddddd_7233_4628)">
+<rect x="23.3203" y="24.2158" width="243.194" height="201.787" rx="9.3312" fill="#1D1D21"/>
+<rect x="23.8203" y="24.7158" width="242.194" height="200.787" rx="8.8312" stroke="white" stroke-opacity="0.2"/>
+</g>
+<path d="M33.3979 44.0585V39.3813H34.4126V44.1169C34.4126 45.8276 35.1086 46.6829 36.5005 46.6829C37.9079 46.6829 38.6117 45.8276 38.6117 44.1169V39.3813H39.6264V44.0585C39.6264 45.2249 39.3582 46.1114 38.8216 46.7179C38.2929 47.3167 37.5191 47.6161 36.5005 47.6161C35.4818 47.6161 34.7081 47.3167 34.1794 46.7179C33.6584 46.1114 33.3979 45.2249 33.3979 44.0585ZM40.6658 45.5865H41.6456C41.6611 45.9442 41.8167 46.2358 42.1121 46.4613C42.4076 46.6868 42.8003 46.7996 43.2902 46.7996C43.7101 46.7996 44.0523 46.7179 44.3166 46.5546C44.5888 46.3836 44.7249 46.162 44.7249 45.8898C44.7249 45.742 44.6938 45.6176 44.6316 45.5165C44.5771 45.4155 44.5149 45.3377 44.4449 45.2833C44.3827 45.2211 44.2661 45.1705 44.095 45.1316C43.924 45.085 43.7918 45.0578 43.6985 45.05C43.6051 45.0344 43.4341 45.0111 43.1852 44.98C42.8042 44.9333 42.4893 44.8828 42.2405 44.8284C41.9916 44.7662 41.7467 44.6767 41.5056 44.5601C41.2646 44.4357 41.0857 44.2724 40.9691 44.0702C40.8524 43.8603 40.7941 43.6075 40.7941 43.312C40.7941 42.7755 41.0118 42.3439 41.4473 42.0173C41.8905 41.683 42.4504 41.5197 43.1269 41.5275C43.8268 41.5352 44.3944 41.7024 44.8299 42.029C45.2653 42.3478 45.5064 42.8066 45.553 43.4054H44.5733C44.5344 43.0943 44.3827 42.8416 44.1184 42.6472C43.8617 42.445 43.5313 42.3439 43.1269 42.3439C42.707 42.3439 42.3688 42.4256 42.1121 42.5889C41.8633 42.7522 41.7389 42.9699 41.7389 43.2421C41.7389 43.3976 41.77 43.5259 41.8322 43.627C41.9022 43.7281 42.0149 43.8097 42.1705 43.8719C42.3338 43.9264 42.4815 43.9691 42.6137 44.0002C42.7537 44.0236 42.9597 44.0508 43.2319 44.0819C43.5429 44.1208 43.8034 44.1596 44.0134 44.1985C44.2233 44.2374 44.4411 44.2996 44.6666 44.3851C44.8921 44.4707 45.0709 44.5718 45.2031 44.6884C45.3431 44.805 45.4558 44.9606 45.5414 45.155C45.6269 45.3416 45.6697 45.5632 45.6697 45.8198C45.6697 46.3641 45.4403 46.7996 44.9815 47.1262C44.5305 47.4528 43.9667 47.6161 43.2902 47.6161C42.5048 47.6161 41.8711 47.4372 41.389 47.0795C40.9146 46.7218 40.6736 46.2242 40.6658 45.5865ZM49.3558 47.6161C48.4693 47.6161 47.7539 47.3361 47.2096 46.7763C46.673 46.2164 46.4048 45.4816 46.4048 44.5718C46.4048 43.6697 46.6653 42.9388 47.1863 42.3789C47.7073 41.8113 48.3877 41.5275 49.2275 41.5275C50.075 41.5275 50.7516 41.7802 51.257 42.2856C51.7624 42.7833 52.0268 43.4715 52.0501 44.3501C52.0501 44.4357 52.0424 44.5718 52.0268 44.7584H47.4079V44.84C47.4234 45.4155 47.5984 45.882 47.9328 46.2397C48.2749 46.5896 48.7259 46.7646 49.2858 46.7646C49.7135 46.7646 50.075 46.6596 50.3705 46.4497C50.6738 46.2319 50.876 45.9326 50.9771 45.5515H51.9452C51.8285 46.1581 51.5369 46.6557 51.0704 47.0445C50.6038 47.4256 50.0323 47.6161 49.3558 47.6161ZM47.4662 43.9652H51.0237C50.9771 43.4598 50.7943 43.0671 50.4755 42.7872C50.1567 42.5072 49.7446 42.3673 49.2391 42.3673C48.7881 42.3673 48.3915 42.515 48.0494 42.8105C47.7073 43.106 47.5129 43.4909 47.4662 43.9652ZM55.7776 41.5974H56.0459V42.5306H55.5677C55 42.5306 54.5918 42.7211 54.3429 43.1021C54.1019 43.4831 53.9814 43.9536 53.9814 44.5134V47.5461H53.0249V41.5974H53.8531L53.9814 42.4956C54.3468 41.8968 54.9456 41.5974 55.7776 41.5974ZM56.3881 45.5865H57.3678C57.3834 45.9442 57.5389 46.2358 57.8344 46.4613C58.1299 46.6868 58.5226 46.7996 59.0125 46.7996C59.4324 46.7996 59.7745 46.7179 60.0389 46.5546C60.3111 46.3836 60.4471 46.162 60.4471 45.8898C60.4471 45.742 60.416 45.6176 60.3538 45.5165C60.2994 45.4155 60.2372 45.3377 60.1672 45.2833C60.105 45.2211 59.9884 45.1705 59.8173 45.1316C59.6462 45.085 59.514 45.0578 59.4207 45.05C59.3274 45.0344 59.1563 45.0111 58.9075 44.98C58.5265 44.9333 58.2115 44.8828 57.9627 44.8284C57.7139 44.7662 57.4689 44.6767 57.2279 44.5601C56.9868 44.4357 56.808 44.2724 56.6913 44.0702C56.5747 43.8603 56.5164 43.6075 56.5164 43.312C56.5164 42.7755 56.7341 42.3439 57.1696 42.0173C57.6128 41.683 58.1727 41.5197 58.8492 41.5275C59.549 41.5352 60.1167 41.7024 60.5521 42.029C60.9876 42.3478 61.2286 42.8066 61.2753 43.4054H60.2955C60.2566 43.0943 60.105 42.8416 59.8406 42.6472C59.584 42.445 59.2535 42.3439 58.8492 42.3439C58.4293 42.3439 58.091 42.4256 57.8344 42.5889C57.5856 42.7522 57.4612 42.9699 57.4612 43.2421C57.4612 43.3976 57.4923 43.5259 57.5545 43.627C57.6244 43.7281 57.7372 43.8097 57.8927 43.8719C58.056 43.9264 58.2038 43.9691 58.336 44.0002C58.4759 44.0236 58.682 44.0508 58.9541 44.0819C59.2652 44.1208 59.5257 44.1596 59.7356 44.1985C59.9456 44.2374 60.1633 44.2996 60.3888 44.3851C60.6143 44.4707 60.7932 44.5718 60.9254 44.6884C61.0653 44.805 61.1781 44.9606 61.2636 45.155C61.3492 45.3416 61.3919 45.5632 61.3919 45.8198C61.3919 46.3641 61.1625 46.7996 60.7037 47.1262C60.2527 47.4528 59.689 47.6161 59.0125 47.6161C58.2271 47.6161 57.5933 47.4372 57.1112 47.0795C56.6369 46.7218 56.3958 46.2242 56.3881 45.5865Z" fill="#EDEDF0"/>
+<g clip-path="url(#clip1_7233_4628)">
+<g filter="url(#filter1_b_7233_4628)">
+<rect x="28" y="62" width="241" height="159" rx="6.9984" fill="#2D2D31" fill-opacity="0.64"/>
+<rect x="28.5" y="62.5" width="240" height="158" rx="6.4984" stroke="white" stroke-opacity="0.16"/>
+</g>
+<path d="M38.4641 78.455H37.8763V73.5562H38.4641L40.8086 77.3213V73.5562H41.3895V78.455H40.8086L38.4641 74.6829V78.455ZM43.2868 78.455H42.6639L44.3996 73.5562H45.1484L46.891 78.455H46.2401L45.7712 77.1324H43.7627L43.2868 78.455ZM44.7565 74.221L43.9377 76.5795H45.5893L44.7565 74.221ZM48.7206 78.455H48.1678V73.5562H48.8816L50.0853 76.3695L51.275 73.5562H51.9679V78.455H51.415V74.5289L50.3163 77.0974H49.8264L48.7206 74.5289V78.455ZM56.7557 78.455H53.6484V73.5562H56.6647V74.116H54.2572V75.6837H56.2798V76.2436H54.2572V77.8952H56.7557V78.455Z" fill="#ADADB1"/>
+<path d="M152.503 73.5562V74.0601H151.433V77.9512H152.503V78.455H149.746V77.9512H150.824V74.0601H149.746V73.5562H152.503ZM155.606 78.455H154.081V73.5562H155.606C157.062 73.5562 157.846 74.5359 157.846 76.0056C157.846 77.4683 157.062 78.455 155.606 78.455ZM154.69 74.116V77.8952H155.606C156.719 77.8952 157.223 77.1463 157.223 76.0056C157.223 74.8579 156.719 74.116 155.606 74.116H154.69ZM162.443 78.455H159.336V73.5562H162.352V74.116H159.945V75.6837H161.967V76.2436H159.945V77.8952H162.443V78.455ZM164.434 78.455H163.846V73.5562H164.434L166.778 77.3213V73.5562H167.359V78.455H166.778L164.434 74.6829V78.455ZM170.887 78.455H170.278V74.116H168.69V73.5562H172.476V74.116H170.887V78.455ZM176.455 73.5562V74.0601H175.384V77.9512H176.455V78.455H173.698V77.9512H174.775V74.0601H173.698V73.5562H176.455ZM178.641 78.455H178.033V73.5562H181.042V74.116H178.641V75.7537H180.671V76.3135H178.641V78.455ZM185.024 73.5562V74.0601H183.953V77.9512H185.024V78.455H182.267V77.9512H183.345V74.0601H182.267V73.5562H185.024ZM189.709 78.455H186.602V73.5562H189.618V74.116H187.211V75.6837H189.233V76.2436H187.211V77.8952H189.709V78.455ZM191.721 78.455H191.112V73.5562H192.862C193.855 73.5562 194.52 74.144 194.52 75.0608C194.52 75.7467 194.093 76.2785 193.449 76.4535L194.569 78.455H193.883L192.827 76.5725H191.721V78.455ZM191.721 74.116V76.0126H192.813C193.47 76.0126 193.897 75.6347 193.897 75.0608C193.897 74.487 193.47 74.116 192.82 74.116H191.721ZM197.782 78.497C196.634 78.497 195.899 77.8462 195.864 76.8524H196.494C196.543 77.5173 197.061 77.9442 197.789 77.9442C198.447 77.9442 198.887 77.6292 198.887 77.1114C198.887 76.6005 198.496 76.4045 197.572 76.2506C196.557 76.0826 195.983 75.7047 195.983 74.9069C195.983 74.074 196.655 73.5142 197.642 73.5142C198.685 73.5142 199.377 74.102 199.433 75.0048H198.803C198.741 74.431 198.279 74.0671 197.642 74.0671C196.991 74.0671 196.592 74.361 196.592 74.8719C196.592 75.3758 196.977 75.5507 197.915 75.7047C198.915 75.8656 199.496 76.2715 199.496 77.0554C199.496 77.9022 198.789 78.497 197.782 78.497Z" fill="#ADADB1"/>
+<path d="M27.9854 90.7004L261.849 90.7004" stroke="white" stroke-opacity="0.16" stroke-width="0.5832"/>
+<g clip-path="url(#clip2_7233_4628)">
+<rect x="36.7334" y="97.6985" width="18.6624" height="18.6624" rx="9.3312" fill="#6C6C71"/>
+<path d="M41.3056 109.7L39.894 104.61H40.7017L41.6933 108.552H41.7405L42.7719 104.61H43.5721L44.6035 108.554H44.6507L45.6398 104.61H46.45L45.0359 109.7H44.263L43.1919 105.888H43.1521L42.081 109.7H41.3056ZM51.3186 107.155C51.3186 107.699 51.2192 108.166 51.0203 108.557C50.8215 108.946 50.549 109.246 50.2027 109.457C49.8581 109.665 49.4662 109.77 49.0272 109.77C48.5865 109.77 48.193 109.665 47.8467 109.457C47.5021 109.246 47.2304 108.945 47.0316 108.554C46.8327 108.163 46.7333 107.697 46.7333 107.155C46.7333 106.612 46.8327 106.145 47.0316 105.756C47.2304 105.365 47.5021 105.065 47.8467 104.856C48.193 104.646 48.5865 104.541 49.0272 104.541C49.4662 104.541 49.8581 104.646 50.2027 104.856C50.549 105.065 50.8215 105.365 51.0203 105.756C51.2192 106.145 51.3186 106.612 51.3186 107.155ZM50.5581 107.155C50.5581 106.741 50.491 106.392 50.3568 106.109C50.2242 105.824 50.042 105.609 49.81 105.463C49.5797 105.315 49.3188 105.242 49.0272 105.242C48.7339 105.242 48.4722 105.315 48.2419 105.463C48.0116 105.609 47.8293 105.824 47.6951 106.109C47.5626 106.392 47.4963 106.741 47.4963 107.155C47.4963 107.569 47.5626 107.919 47.6951 108.204C47.8293 108.487 48.0116 108.703 48.2419 108.85C48.4722 108.996 48.7339 109.069 49.0272 109.069C49.3188 109.069 49.5797 108.996 49.81 108.85C50.042 108.703 50.2242 108.487 50.3568 108.204C50.491 107.919 50.5581 107.569 50.5581 107.155Z" fill="#414146"/>
+</g>
+<path d="M64.1922 110.03L62.5685 104.092H63.2992L64.5401 108.928H64.5981L65.8623 104.092H66.6741L67.9382 108.928H67.9962L69.2372 104.092H69.9678L68.3442 110.03H67.6019L66.2914 105.298H66.245L64.9344 110.03H64.1922ZM71.6669 110.134C71.3847 110.134 71.1286 110.081 70.8986 109.975C70.6685 109.866 70.4859 109.711 70.3506 109.508C70.2153 109.303 70.1476 109.055 70.1476 108.766C70.1476 108.51 70.1979 108.304 70.2984 108.145C70.3989 107.985 70.5332 107.859 70.7014 107.768C70.8696 107.677 71.0551 107.61 71.2581 107.565C71.463 107.519 71.6688 107.482 71.8757 107.455C72.1463 107.42 72.3657 107.394 72.5338 107.377C72.7039 107.357 72.8277 107.325 72.905 107.281C72.9842 107.237 73.0238 107.159 73.0238 107.049V107.026C73.0238 106.74 72.9456 106.518 72.789 106.359C72.6344 106.201 72.3995 106.121 72.0844 106.121C71.7578 106.121 71.5016 106.193 71.3161 106.336C71.1305 106.479 71 106.632 70.9247 106.794L70.2752 106.562C70.3912 106.291 70.5458 106.081 70.7391 105.93C70.9343 105.777 71.1469 105.671 71.377 105.611C71.6089 105.549 71.837 105.518 72.0612 105.518C72.2043 105.518 72.3686 105.536 72.5541 105.57C72.7416 105.603 72.9224 105.672 73.0963 105.776C73.2722 105.881 73.4182 106.038 73.5341 106.249C73.6501 106.46 73.7081 106.742 73.7081 107.095V110.03H73.0238V109.427H72.9891C72.9427 109.523 72.8653 109.627 72.7571 109.737C72.6489 109.847 72.5048 109.941 72.3251 110.018C72.1453 110.095 71.9259 110.134 71.6669 110.134ZM71.7713 109.519C72.0419 109.519 72.27 109.466 72.4556 109.36C72.6431 109.254 72.7842 109.116 72.8789 108.948C72.9755 108.78 73.0238 108.603 73.0238 108.418V107.791C72.9949 107.826 72.9311 107.858 72.8325 107.887C72.7358 107.914 72.6237 107.938 72.4962 107.959C72.3705 107.979 72.2478 107.996 72.1279 108.012C72.01 108.025 71.9143 108.037 71.8409 108.046C71.663 108.07 71.4968 108.107 71.3422 108.16C71.1895 108.21 71.0658 108.286 70.9711 108.389C70.8783 108.489 70.8319 108.626 70.8319 108.8C70.8319 109.038 70.9198 109.218 71.0957 109.34C71.2736 109.459 71.4987 109.519 71.7713 109.519ZM75.6413 104.092V110.03H74.957V104.092H75.6413ZM78.8314 105.576V106.156H76.5235V105.576H78.8314ZM77.1961 104.509H77.8804V108.754C77.8804 108.947 77.9084 109.092 77.9645 109.189C78.0225 109.284 78.0959 109.347 78.1848 109.38C78.2757 109.411 78.3714 109.427 78.4719 109.427C78.5473 109.427 78.6091 109.423 78.6574 109.415C78.7058 109.405 78.7444 109.398 78.7734 109.392L78.9126 110.006C78.8662 110.024 78.8014 110.041 78.7183 110.059C78.6352 110.078 78.5299 110.088 78.4023 110.088C78.209 110.088 78.0196 110.046 77.834 109.963C77.6504 109.88 77.4977 109.753 77.3759 109.583C77.2561 109.413 77.1961 109.199 77.1961 108.94V104.509ZM81.6801 110.122C81.251 110.122 80.8808 110.028 80.5696 109.838C80.2603 109.647 80.0216 109.38 79.8535 109.038C79.6872 108.694 79.6041 108.294 79.6041 107.838C79.6041 107.382 79.6872 106.979 79.8535 106.632C80.0216 106.282 80.2555 106.009 80.5551 105.814C80.8567 105.617 81.2085 105.518 81.6105 105.518C81.8425 105.518 82.0715 105.557 82.2977 105.634C82.5238 105.711 82.7297 105.837 82.9153 106.011C83.1008 106.183 83.2487 106.411 83.3589 106.695C83.4691 106.979 83.5241 107.329 83.5241 107.745V108.035H80.0912V107.443H82.8283C82.8283 107.192 82.778 106.968 82.6775 106.771C82.5789 106.574 82.4378 106.418 82.2542 106.304C82.0725 106.19 81.8579 106.133 81.6105 106.133C81.338 106.133 81.1021 106.201 80.9031 106.336C80.7059 106.469 80.5542 106.643 80.4478 106.858C80.3415 107.072 80.2884 107.302 80.2884 107.548V107.942C80.2884 108.278 80.3464 108.564 80.4623 108.797C80.5803 109.029 80.7436 109.206 80.9523 109.328C81.1611 109.448 81.4037 109.508 81.6801 109.508C81.8599 109.508 82.0222 109.483 82.1672 109.432C82.3141 109.38 82.4407 109.303 82.547 109.2C82.6533 109.096 82.7355 108.967 82.7935 108.812L83.4546 108.997C83.385 109.222 83.268 109.419 83.1037 109.589C82.9394 109.757 82.7365 109.889 82.4948 109.983C82.2532 110.076 81.9816 110.122 81.6801 110.122ZM84.565 110.03V105.576H85.2261V106.249H85.2725C85.3537 106.028 85.5006 105.85 85.7132 105.712C85.9258 105.575 86.1655 105.507 86.4323 105.507C86.4825 105.507 86.5453 105.508 86.6207 105.509C86.6961 105.511 86.7531 105.514 86.7918 105.518V106.214C86.7686 106.208 86.7154 106.2 86.6323 106.188C86.5511 106.174 86.4651 106.168 86.3743 106.168C86.1578 106.168 85.9645 106.213 85.7944 106.304C85.6262 106.393 85.4929 106.517 85.3943 106.675C85.2976 106.832 85.2493 107.01 85.2493 107.211V110.03H84.565ZM95.0023 107.061C95.0023 107.687 94.8892 108.228 94.663 108.684C94.4369 109.141 94.1266 109.492 93.7323 109.74C93.338 109.987 92.8876 110.111 92.3812 110.111C91.8747 110.111 91.4244 109.987 91.03 109.74C90.6357 109.492 90.3255 109.141 90.0993 108.684C89.8732 108.228 89.7601 107.687 89.7601 107.061C89.7601 106.434 89.8732 105.893 90.0993 105.437C90.3255 104.981 90.6357 104.629 91.03 104.382C91.4244 104.134 91.8747 104.01 92.3812 104.01C92.8876 104.01 93.338 104.134 93.7323 104.382C94.1266 104.629 94.4369 104.981 94.663 105.437C94.8892 105.893 95.0023 106.434 95.0023 107.061ZM94.3064 107.061C94.3064 106.547 94.2204 106.113 94.0484 105.759C93.8783 105.405 93.6473 105.137 93.3554 104.956C93.0654 104.774 92.7407 104.683 92.3812 104.683C92.0216 104.683 91.6959 104.774 91.4041 104.956C91.1141 105.137 90.8831 105.405 90.7111 105.759C90.541 106.113 90.456 106.547 90.456 107.061C90.456 107.575 90.541 108.009 90.7111 108.363C90.8831 108.716 91.1141 108.984 91.4041 109.166C91.6959 109.347 92.0216 109.438 92.3812 109.438C92.7407 109.438 93.0654 109.347 93.3554 109.166C93.6473 108.984 93.8783 108.716 94.0484 108.363C94.2204 108.009 94.3064 107.575 94.3064 107.061ZM96.7216 104.092V104.614C96.7216 104.772 96.6926 104.941 96.6346 105.121C96.5786 105.299 96.4955 105.472 96.3853 105.64C96.277 105.806 96.1456 105.951 95.991 106.075L95.6198 105.773C95.7416 105.599 95.847 105.419 95.9359 105.231C96.0267 105.042 96.0722 104.84 96.0722 104.625V104.092H96.7216ZM97.7183 110.03V104.092H99.7943C100.208 104.092 100.549 104.163 100.818 104.306C101.086 104.447 101.287 104.638 101.418 104.877C101.549 105.115 101.615 105.379 101.615 105.669C101.615 105.924 101.57 106.135 101.479 106.301C101.39 106.467 101.272 106.599 101.125 106.695C100.98 106.792 100.823 106.864 100.653 106.91V106.968C100.834 106.979 101.017 107.043 101.201 107.159C101.384 107.275 101.538 107.441 101.662 107.658C101.785 107.874 101.847 108.139 101.847 108.452C101.847 108.75 101.779 109.018 101.644 109.256C101.509 109.493 101.295 109.682 101.003 109.821C100.711 109.96 100.332 110.03 99.8639 110.03H97.7183ZM98.4374 109.392H99.8639C100.334 109.392 100.667 109.301 100.864 109.119C101.063 108.936 101.163 108.713 101.163 108.452C101.163 108.251 101.112 108.066 101.009 107.896C100.907 107.724 100.761 107.586 100.571 107.484C100.382 107.38 100.158 107.327 99.8987 107.327H98.4374V109.392ZM98.4374 106.701H99.7711C99.9876 106.701 100.183 106.659 100.357 106.574C100.533 106.489 100.672 106.369 100.774 106.214C100.879 106.059 100.931 105.878 100.931 105.669C100.931 105.408 100.84 105.187 100.658 105.005C100.477 104.821 100.189 104.73 99.7943 104.73H98.4374V106.701ZM102.936 110.03V105.576H103.597V106.249H103.643C103.724 106.028 103.871 105.85 104.084 105.712C104.297 105.575 104.536 105.507 104.803 105.507C104.853 105.507 104.916 105.508 104.992 105.509C105.067 105.511 105.124 105.514 105.163 105.518V106.214C105.139 106.208 105.086 106.2 105.003 106.188C104.922 106.174 104.836 106.168 104.745 106.168C104.529 106.168 104.335 106.213 104.165 106.304C103.997 106.393 103.864 106.517 103.765 106.675C103.668 106.832 103.62 107.01 103.62 107.211V110.03H102.936ZM105.974 110.03V105.576H106.658V110.03H105.974ZM106.322 104.834C106.188 104.834 106.073 104.788 105.977 104.698C105.882 104.607 105.835 104.498 105.835 104.37C105.835 104.242 105.882 104.133 105.977 104.042C106.073 103.952 106.188 103.906 106.322 103.906C106.455 103.906 106.569 103.952 106.664 104.042C106.76 104.133 106.809 104.242 106.809 104.37C106.809 104.498 106.76 104.607 106.664 104.698C106.569 104.788 106.455 104.834 106.322 104.834ZM109.222 110.134C108.94 110.134 108.683 110.081 108.453 109.975C108.223 109.866 108.041 109.711 107.905 109.508C107.77 109.303 107.703 109.055 107.703 108.766C107.703 108.51 107.753 108.304 107.853 108.145C107.954 107.985 108.088 107.859 108.256 107.768C108.424 107.677 108.61 107.61 108.813 107.565C109.018 107.519 109.224 107.482 109.431 107.455C109.701 107.42 109.921 107.394 110.089 107.377C110.259 107.357 110.383 107.325 110.46 107.281C110.539 107.237 110.579 107.159 110.579 107.049V107.026C110.579 106.74 110.5 106.518 110.344 106.359C110.189 106.201 109.954 106.121 109.639 106.121C109.313 106.121 109.057 106.193 108.871 106.336C108.685 106.479 108.555 106.632 108.48 106.794L107.83 106.562C107.946 106.291 108.101 106.081 108.294 105.93C108.489 105.777 108.702 105.671 108.932 105.611C109.164 105.549 109.392 105.518 109.616 105.518C109.759 105.518 109.923 105.536 110.109 105.57C110.297 105.603 110.477 105.672 110.651 105.776C110.827 105.881 110.973 106.038 111.089 106.249C111.205 106.46 111.263 106.742 111.263 107.095V110.03H110.579V109.427H110.544C110.498 109.523 110.42 109.627 110.312 109.737C110.204 109.847 110.06 109.941 109.88 110.018C109.7 110.095 109.481 110.134 109.222 110.134ZM109.326 109.519C109.597 109.519 109.825 109.466 110.01 109.36C110.198 109.254 110.339 109.116 110.434 108.948C110.53 108.78 110.579 108.603 110.579 108.418V107.791C110.55 107.826 110.486 107.858 110.387 107.887C110.291 107.914 110.179 107.938 110.051 107.959C109.925 107.979 109.803 107.996 109.683 108.012C109.565 108.025 109.469 108.037 109.396 108.046C109.218 108.07 109.052 108.107 108.897 108.16C108.744 108.21 108.621 108.286 108.526 108.389C108.433 108.489 108.387 108.626 108.387 108.8C108.387 109.038 108.475 109.218 108.651 109.34C108.828 109.459 109.054 109.519 109.326 109.519ZM113.196 107.351V110.03H112.512V105.576H113.173V106.272H113.231C113.335 106.046 113.494 105.864 113.706 105.727C113.919 105.588 114.194 105.518 114.53 105.518C114.831 105.518 115.095 105.58 115.321 105.704C115.548 105.826 115.724 106.011 115.849 106.26C115.975 106.508 116.038 106.821 116.038 107.2V110.03H115.353V107.246C115.353 106.896 115.263 106.624 115.081 106.429C114.899 106.231 114.65 106.133 114.333 106.133C114.114 106.133 113.919 106.18 113.747 106.275C113.577 106.37 113.443 106.508 113.344 106.69C113.245 106.871 113.196 107.092 113.196 107.351Z" fill="#ADADB1"/>
+<path d="M151.785 110.291C151.355 110.291 150.985 110.196 150.674 110.007C150.365 109.816 150.126 109.549 149.958 109.207C149.792 108.863 149.709 108.463 149.709 108.006C149.709 107.55 149.792 107.148 149.958 106.8C150.126 106.45 150.36 106.178 150.66 105.983C150.961 105.785 151.313 105.687 151.715 105.687C151.947 105.687 152.176 105.726 152.402 105.803C152.628 105.88 152.834 106.006 153.02 106.18C153.205 106.352 153.353 106.58 153.463 106.864C153.573 107.148 153.629 107.498 153.629 107.914V108.204H150.196V107.612H152.933C152.933 107.361 152.882 107.137 152.782 106.939C152.683 106.742 152.542 106.587 152.359 106.473C152.177 106.359 151.962 106.302 151.715 106.302C151.442 106.302 151.207 106.369 151.007 106.504C150.81 106.638 150.659 106.812 150.552 107.026C150.446 107.241 150.393 107.471 150.393 107.716V108.111C150.393 108.447 150.451 108.732 150.567 108.966C150.685 109.198 150.848 109.375 151.057 109.497C151.266 109.617 151.508 109.676 151.785 109.676C151.964 109.676 152.127 109.651 152.272 109.601C152.419 109.549 152.545 109.472 152.651 109.369C152.758 109.265 152.84 109.135 152.898 108.981L153.559 109.166C153.489 109.39 153.372 109.588 153.208 109.758C153.044 109.926 152.841 110.057 152.599 110.152C152.358 110.245 152.086 110.291 151.785 110.291ZM155.354 104.26V110.198H154.669V104.26H155.354ZM158.289 110.291C157.918 110.291 157.59 110.197 157.306 110.01C157.022 109.82 156.799 109.554 156.639 109.21C156.478 108.864 156.398 108.455 156.398 107.983C156.398 107.515 156.478 107.11 156.639 106.765C156.799 106.421 157.023 106.156 157.309 105.968C157.595 105.781 157.925 105.687 158.3 105.687C158.59 105.687 158.819 105.735 158.987 105.832C159.158 105.927 159.287 106.035 159.376 106.157C159.467 106.276 159.537 106.375 159.588 106.452H159.646V104.26H160.33V110.198H159.669V109.514H159.588C159.537 109.595 159.466 109.698 159.373 109.821C159.28 109.943 159.148 110.052 158.976 110.149C158.804 110.244 158.575 110.291 158.289 110.291ZM158.381 109.676C158.656 109.676 158.888 109.605 159.077 109.462C159.267 109.317 159.411 109.117 159.509 108.862C159.608 108.605 159.657 108.308 159.657 107.972C159.657 107.639 159.609 107.348 159.512 107.099C159.416 106.848 159.273 106.652 159.083 106.513C158.894 106.372 158.66 106.302 158.381 106.302C158.092 106.302 157.85 106.376 157.657 106.525C157.465 106.672 157.321 106.872 157.225 107.125C157.13 107.376 157.083 107.658 157.083 107.972C157.083 108.289 157.131 108.577 157.227 108.836C157.326 109.093 157.471 109.298 157.662 109.45C157.856 109.601 158.095 109.676 158.381 109.676ZM162.989 110.303C162.706 110.303 162.45 110.25 162.22 110.143C161.99 110.035 161.808 109.879 161.672 109.676C161.537 109.472 161.469 109.224 161.469 108.934C161.469 108.679 161.52 108.472 161.62 108.314C161.721 108.153 161.855 108.028 162.023 107.937C162.191 107.846 162.377 107.778 162.58 107.734C162.785 107.687 162.991 107.651 163.197 107.624C163.468 107.589 163.687 107.563 163.856 107.545C164.026 107.526 164.149 107.494 164.227 107.45C164.306 107.405 164.346 107.328 164.346 107.218V107.195C164.346 106.908 164.267 106.686 164.111 106.528C163.956 106.369 163.721 106.29 163.406 106.29C163.08 106.29 162.823 106.361 162.638 106.504C162.452 106.648 162.322 106.8 162.246 106.963L161.597 106.731C161.713 106.46 161.868 106.249 162.061 106.099C162.256 105.946 162.469 105.84 162.699 105.78C162.931 105.718 163.159 105.687 163.383 105.687C163.526 105.687 163.69 105.704 163.876 105.739C164.063 105.772 164.244 105.841 164.418 105.945C164.594 106.049 164.74 106.207 164.856 106.418C164.972 106.628 165.03 106.91 165.03 107.264V110.198H164.346V109.595H164.311C164.264 109.692 164.187 109.795 164.079 109.906C163.971 110.016 163.827 110.109 163.647 110.187C163.467 110.264 163.248 110.303 162.989 110.303ZM163.093 109.688C163.364 109.688 163.592 109.635 163.777 109.529C163.965 109.422 164.106 109.285 164.201 109.117C164.297 108.949 164.346 108.772 164.346 108.586V107.96C164.317 107.995 164.253 108.027 164.154 108.056C164.058 108.083 163.945 108.107 163.818 108.128C163.692 108.147 163.57 108.165 163.45 108.18C163.332 108.194 163.236 108.205 163.163 108.215C162.985 108.238 162.819 108.276 162.664 108.328C162.511 108.378 162.388 108.455 162.293 108.557C162.2 108.658 162.154 108.795 162.154 108.969C162.154 109.207 162.242 109.387 162.417 109.508C162.595 109.628 162.82 109.688 163.093 109.688ZM167.96 110.291C167.589 110.291 167.262 110.197 166.978 110.01C166.693 109.82 166.471 109.554 166.311 109.21C166.15 108.864 166.07 108.455 166.07 107.983C166.07 107.515 166.15 107.11 166.311 106.765C166.471 106.421 166.694 106.156 166.98 105.968C167.267 105.781 167.597 105.687 167.972 105.687C168.262 105.687 168.491 105.735 168.659 105.832C168.829 105.927 168.959 106.035 169.048 106.157C169.139 106.276 169.209 106.375 169.259 106.452H169.317V104.26H170.002V110.198H169.341V109.514H169.259C169.209 109.595 169.138 109.698 169.045 109.821C168.952 109.943 168.82 110.052 168.648 110.149C168.476 110.244 168.247 110.291 167.96 110.291ZM168.053 109.676C168.328 109.676 168.56 109.605 168.749 109.462C168.939 109.317 169.083 109.117 169.181 108.862C169.28 108.605 169.329 108.308 169.329 107.972C169.329 107.639 169.281 107.348 169.184 107.099C169.087 106.848 168.944 106.652 168.755 106.513C168.565 106.372 168.332 106.302 168.053 106.302C167.763 106.302 167.522 106.376 167.328 106.525C167.137 106.672 166.993 106.872 166.896 107.125C166.802 107.376 166.754 107.658 166.754 107.972C166.754 108.289 166.803 108.577 166.899 108.836C166.998 109.093 167.143 109.298 167.334 109.45C167.527 109.601 167.767 109.676 168.053 109.676ZM174.771 111.764C174.18 111.764 173.657 111.683 173.203 111.521C172.748 111.36 172.367 111.123 172.057 110.81C171.748 110.497 171.514 110.113 171.356 109.659C171.197 109.205 171.118 108.685 171.118 108.099C171.118 107.533 171.198 107.026 171.359 106.58C171.521 106.133 171.756 105.755 172.063 105.443C172.372 105.13 172.747 104.891 173.188 104.727C173.631 104.563 174.131 104.481 174.69 104.481C175.233 104.481 175.709 104.57 176.117 104.747C176.526 104.923 176.868 105.162 177.143 105.464C177.419 105.763 177.626 106.101 177.763 106.475C177.903 106.85 177.972 107.237 177.972 107.635C177.972 107.916 177.959 108.2 177.932 108.488C177.905 108.776 177.848 109.041 177.761 109.282C177.674 109.522 177.539 109.715 177.358 109.862C177.178 110.009 176.934 110.082 176.627 110.082C176.492 110.082 176.343 110.061 176.18 110.019C176.018 109.976 175.874 109.906 175.748 109.807C175.623 109.708 175.548 109.576 175.525 109.41H175.49C175.444 109.522 175.372 109.628 175.276 109.729C175.181 109.829 175.056 109.909 174.902 109.969C174.749 110.029 174.562 110.055 174.342 110.048C174.091 110.038 173.869 109.982 173.678 109.879C173.487 109.775 173.326 109.634 173.197 109.456C173.069 109.276 172.973 109.069 172.907 108.833C172.843 108.595 172.811 108.339 172.811 108.064C172.811 107.803 172.85 107.565 172.927 107.348C173.005 107.132 173.112 106.942 173.249 106.78C173.388 106.618 173.551 106.488 173.736 106.391C173.924 106.293 174.126 106.232 174.342 106.209C174.535 106.189 174.711 106.198 174.87 106.235C175.028 106.27 175.159 106.323 175.261 106.394C175.364 106.464 175.428 106.541 175.455 106.626H175.49V106.302H176.105V108.923C176.105 109.085 176.15 109.228 176.241 109.352C176.332 109.475 176.464 109.537 176.638 109.537C176.836 109.537 176.986 109.47 177.091 109.334C177.197 109.199 177.27 108.99 177.308 108.708C177.349 108.426 177.369 108.064 177.369 107.624C177.369 107.365 177.333 107.11 177.262 106.858C177.192 106.605 177.086 106.368 176.943 106.148C176.802 105.928 176.623 105.733 176.407 105.565C176.19 105.397 175.936 105.265 175.644 105.171C175.354 105.074 175.024 105.026 174.655 105.026C174.201 105.026 173.794 105.096 173.435 105.237C173.077 105.377 172.773 105.581 172.521 105.849C172.272 106.116 172.082 106.441 171.95 106.823C171.821 107.204 171.756 107.637 171.756 108.122C171.756 108.615 171.821 109.053 171.95 109.436C172.082 109.819 172.275 110.141 172.53 110.404C172.787 110.667 173.105 110.866 173.484 111.002C173.863 111.139 174.3 111.207 174.794 111.207C175.007 111.207 175.217 111.187 175.424 111.146C175.63 111.106 175.813 111.061 175.972 111.013C176.13 110.965 176.244 110.929 176.314 110.906L176.476 111.439C176.356 111.49 176.2 111.54 176.006 111.59C175.815 111.64 175.61 111.682 175.392 111.715C175.175 111.748 174.968 111.764 174.771 111.764ZM174.435 109.456C174.694 109.456 174.904 109.404 175.064 109.3C175.224 109.195 175.341 109.038 175.415 108.827C175.488 108.616 175.525 108.35 175.525 108.03C175.525 107.705 175.484 107.452 175.403 107.27C175.322 107.088 175.202 106.961 175.044 106.887C174.885 106.814 174.69 106.777 174.458 106.777C174.238 106.777 174.049 106.835 173.893 106.951C173.738 107.065 173.619 107.218 173.536 107.409C173.455 107.599 173.414 107.805 173.414 108.03C173.414 108.277 173.447 108.51 173.513 108.728C173.579 108.945 173.686 109.121 173.835 109.256C173.984 109.389 174.184 109.456 174.435 109.456ZM180.307 110.303C180.025 110.303 179.769 110.25 179.539 110.143C179.309 110.035 179.126 109.879 178.991 109.676C178.855 109.472 178.788 109.224 178.788 108.934C178.788 108.679 178.838 108.472 178.938 108.314C179.039 108.153 179.173 108.028 179.341 107.937C179.51 107.846 179.695 107.778 179.898 107.734C180.103 107.687 180.309 107.651 180.516 107.624C180.786 107.589 181.006 107.563 181.174 107.545C181.344 107.526 181.468 107.494 181.545 107.45C181.624 107.405 181.664 107.328 181.664 107.218V107.195C181.664 106.908 181.586 106.686 181.429 106.528C181.274 106.369 181.04 106.29 180.724 106.29C180.398 106.29 180.142 106.361 179.956 106.504C179.771 106.648 179.64 106.8 179.565 106.963L178.915 106.731C179.031 106.46 179.186 106.249 179.379 106.099C179.574 105.946 179.787 105.84 180.017 105.78C180.249 105.718 180.477 105.687 180.701 105.687C180.844 105.687 181.009 105.704 181.194 105.739C181.382 105.772 181.562 105.841 181.736 105.945C181.912 106.049 182.058 106.207 182.174 106.418C182.29 106.628 182.348 106.91 182.348 107.264V110.198H181.664V109.595H181.629C181.583 109.692 181.505 109.795 181.397 109.906C181.289 110.016 181.145 110.109 180.965 110.187C180.785 110.264 180.566 110.303 180.307 110.303ZM180.411 109.688C180.682 109.688 180.91 109.635 181.096 109.529C181.283 109.422 181.424 109.285 181.519 109.117C181.616 108.949 181.664 108.772 181.664 108.586V107.96C181.635 107.995 181.571 108.027 181.473 108.056C181.376 108.083 181.264 108.107 181.136 108.128C181.011 108.147 180.888 108.165 180.768 108.18C180.65 108.194 180.554 108.205 180.481 108.215C180.303 108.238 180.137 108.276 179.982 108.328C179.83 108.378 179.706 108.455 179.611 108.557C179.518 108.658 179.472 108.795 179.472 108.969C179.472 109.207 179.56 109.387 179.736 109.508C179.914 109.628 180.139 109.688 180.411 109.688ZM183.597 111.868V105.745H184.258V106.452H184.339C184.39 106.375 184.459 106.276 184.548 106.157C184.639 106.035 184.768 105.927 184.937 105.832C185.107 105.735 185.337 105.687 185.627 105.687C186.002 105.687 186.332 105.781 186.618 105.968C186.904 106.156 187.128 106.421 187.288 106.765C187.449 107.11 187.529 107.515 187.529 107.983C187.529 108.455 187.449 108.864 187.288 109.21C187.128 109.554 186.905 109.82 186.621 110.01C186.337 110.197 186.009 110.291 185.638 110.291C185.352 110.291 185.123 110.244 184.951 110.149C184.779 110.052 184.647 109.943 184.554 109.821C184.461 109.698 184.39 109.595 184.339 109.514H184.281V111.868H183.597ZM184.27 107.972C184.27 108.308 184.319 108.605 184.418 108.862C184.516 109.117 184.66 109.317 184.85 109.462C185.039 109.605 185.271 109.676 185.546 109.676C185.832 109.676 186.07 109.601 186.262 109.45C186.455 109.298 186.6 109.093 186.697 108.836C186.795 108.577 186.844 108.289 186.844 107.972C186.844 107.658 186.796 107.376 186.699 107.125C186.605 106.872 186.461 106.672 186.267 106.525C186.076 106.376 185.835 106.302 185.546 106.302C185.267 106.302 185.033 106.372 184.844 106.513C184.654 106.652 184.511 106.848 184.415 107.099C184.318 107.348 184.27 107.639 184.27 107.972ZM188.573 111.868V105.745H189.234V106.452H189.315C189.365 106.375 189.435 106.276 189.524 106.157C189.614 106.035 189.744 105.927 189.912 105.832C190.082 105.735 190.312 105.687 190.602 105.687C190.977 105.687 191.308 105.781 191.594 105.968C191.88 106.156 192.103 106.421 192.263 106.765C192.424 107.11 192.504 107.515 192.504 107.983C192.504 108.455 192.424 108.864 192.263 109.21C192.103 109.554 191.881 109.82 191.597 110.01C191.312 110.197 190.985 110.291 190.614 110.291C190.328 110.291 190.099 110.244 189.927 110.149C189.755 110.052 189.622 109.943 189.529 109.821C189.437 109.698 189.365 109.595 189.315 109.514H189.257V111.868H188.573ZM189.245 107.972C189.245 108.308 189.294 108.605 189.393 108.862C189.492 109.117 189.636 109.317 189.825 109.462C190.015 109.605 190.246 109.676 190.521 109.676C190.807 109.676 191.046 109.601 191.237 109.45C191.43 109.298 191.575 109.093 191.672 108.836C191.771 108.577 191.82 108.289 191.82 107.972C191.82 107.658 191.772 107.376 191.675 107.125C191.58 106.872 191.436 106.672 191.243 106.525C191.052 106.376 190.811 106.302 190.521 106.302C190.243 106.302 190.009 106.372 189.819 106.513C189.63 106.652 189.487 106.848 189.39 107.099C189.294 107.348 189.245 107.639 189.245 107.972ZM194.405 110.198L193.049 105.745H193.768L194.73 109.155H194.777L195.728 105.745H196.458L197.398 109.143H197.444L198.407 105.745H199.126L197.769 110.198H197.096L196.122 106.777H196.052L195.078 110.198H194.405ZM200.03 110.198V105.745H200.691V106.418H200.738C200.819 106.197 200.966 106.018 201.179 105.881C201.391 105.744 201.631 105.675 201.898 105.675C201.948 105.675 202.011 105.676 202.086 105.678C202.161 105.68 202.218 105.683 202.257 105.687V106.383C202.234 106.377 202.181 106.368 202.098 106.357C202.016 106.343 201.93 106.336 201.84 106.336C201.623 106.336 201.43 106.382 201.26 106.473C201.092 106.562 200.958 106.685 200.86 106.844C200.763 107 200.715 107.179 200.715 107.38V110.198H200.03ZM203.068 110.198V105.745H203.752V110.198H203.068ZM203.416 105.003C203.283 105.003 203.168 104.957 203.071 104.866C202.976 104.775 202.929 104.666 202.929 104.539C202.929 104.411 202.976 104.302 203.071 104.211C203.168 104.12 203.283 104.075 203.416 104.075C203.55 104.075 203.664 104.12 203.758 104.211C203.855 104.302 203.903 104.411 203.903 104.539C203.903 104.666 203.855 104.775 203.758 104.866C203.664 104.957 203.55 105.003 203.416 105.003ZM206.943 105.745V106.325H204.635V105.745H206.943ZM205.307 104.678H205.992V108.923C205.992 109.116 206.02 109.261 206.076 109.358C206.134 109.452 206.207 109.516 206.296 109.549C206.387 109.58 206.483 109.595 206.583 109.595C206.658 109.595 206.72 109.591 206.769 109.584C206.817 109.574 206.856 109.566 206.885 109.56L207.024 110.175C206.977 110.193 206.913 110.21 206.83 110.227C206.746 110.247 206.641 110.256 206.513 110.256C206.32 110.256 206.131 110.215 205.945 110.132C205.762 110.049 205.609 109.922 205.487 109.752C205.367 109.582 205.307 109.367 205.307 109.108V104.678ZM209.791 110.291C209.362 110.291 208.992 110.196 208.681 110.007C208.372 109.816 208.133 109.549 207.965 109.207C207.798 108.863 207.715 108.463 207.715 108.006C207.715 107.55 207.798 107.148 207.965 106.8C208.133 106.45 208.367 106.178 208.666 105.983C208.968 105.785 209.32 105.687 209.722 105.687C209.954 105.687 210.183 105.726 210.409 105.803C210.635 105.88 210.841 106.006 211.026 106.18C211.212 106.352 211.36 106.58 211.47 106.864C211.58 107.148 211.635 107.498 211.635 107.914V108.204H208.202V107.612H210.939C210.939 107.361 210.889 107.137 210.789 106.939C210.69 106.742 210.549 106.587 210.365 106.473C210.184 106.359 209.969 106.302 209.722 106.302C209.449 106.302 209.213 106.369 209.014 106.504C208.817 106.638 208.665 106.812 208.559 107.026C208.453 107.241 208.4 107.471 208.4 107.716V108.111C208.4 108.447 208.458 108.732 208.574 108.966C208.691 109.198 208.855 109.375 209.064 109.497C209.272 109.617 209.515 109.676 209.791 109.676C209.971 109.676 210.133 109.651 210.278 109.601C210.425 109.549 210.552 109.472 210.658 109.369C210.765 109.265 210.847 109.135 210.905 108.981L211.566 109.166C211.496 109.39 211.379 109.588 211.215 109.758C211.051 109.926 210.848 110.057 210.606 110.152C210.364 110.245 210.093 110.291 209.791 110.291ZM213.175 110.245C213.032 110.245 212.909 110.194 212.807 110.091C212.704 109.989 212.653 109.866 212.653 109.723C212.653 109.58 212.704 109.457 212.807 109.355C212.909 109.252 213.032 109.201 213.175 109.201C213.318 109.201 213.441 109.252 213.543 109.355C213.646 109.457 213.697 109.58 213.697 109.723C213.697 109.818 213.673 109.905 213.624 109.984C213.578 110.063 213.515 110.127 213.436 110.175C213.359 110.222 213.272 110.245 213.175 110.245ZM214.925 110.198V105.745H215.609V110.198H214.925ZM215.273 105.003C215.139 105.003 215.024 104.957 214.928 104.866C214.833 104.775 214.786 104.666 214.786 104.539C214.786 104.411 214.833 104.302 214.928 104.211C215.024 104.12 215.139 104.075 215.273 104.075C215.406 104.075 215.52 104.12 215.615 104.211C215.711 104.302 215.76 104.411 215.76 104.539C215.76 104.666 215.711 104.775 215.615 104.866C215.52 104.957 215.406 105.003 215.273 105.003ZM218.672 110.291C218.269 110.291 217.917 110.195 217.613 110.004C217.312 109.813 217.076 109.545 216.906 109.201C216.738 108.857 216.654 108.455 216.654 107.995C216.654 107.531 216.738 107.126 216.906 106.78C217.076 106.434 217.312 106.165 217.613 105.974C217.917 105.783 218.269 105.687 218.672 105.687C219.074 105.687 219.425 105.783 219.727 105.974C220.03 106.165 220.266 106.434 220.434 106.78C220.604 107.126 220.69 107.531 220.69 107.995C220.69 108.455 220.604 108.857 220.434 109.201C220.266 109.545 220.03 109.813 219.727 110.004C219.425 110.195 219.074 110.291 218.672 110.291ZM218.672 109.676C218.977 109.676 219.228 109.598 219.425 109.442C219.623 109.285 219.768 109.079 219.863 108.824C219.958 108.569 220.005 108.292 220.005 107.995C220.005 107.697 219.958 107.42 219.863 107.163C219.768 106.906 219.623 106.698 219.425 106.539C219.228 106.381 218.977 106.302 218.672 106.302C218.366 106.302 218.115 106.381 217.918 106.539C217.721 106.698 217.575 106.906 217.48 107.163C217.385 107.42 217.338 107.697 217.338 107.995C217.338 108.292 217.385 108.569 217.48 108.824C217.575 109.079 217.721 109.285 217.918 109.442C218.115 109.598 218.366 109.676 218.672 109.676ZM222.755 109.387L222.708 109.7C222.675 109.92 222.625 110.156 222.557 110.407C222.492 110.658 222.423 110.895 222.352 111.117C222.28 111.34 222.221 111.517 222.175 111.648H221.653C221.678 111.524 221.711 111.361 221.751 111.158C221.792 110.955 221.833 110.728 221.873 110.477C221.916 110.227 221.951 109.972 221.978 109.711L222.012 109.387H222.755ZM228.058 109.155V105.327H228.708V109.155H228.058ZM226.47 107.566V106.916H230.297V107.566H226.47ZM231.55 108.981V108.389L234.16 104.26H234.589V105.177H234.299L232.327 108.296V108.343H235.841V108.981H231.55ZM234.345 110.198V108.801V108.525V104.26H235.029V110.198H234.345ZM236.789 108.981V108.389L239.398 104.26H239.827V105.177H239.537L237.566 108.296V108.343H241.08V108.981H236.789ZM239.584 110.198V108.801V108.525V104.26H240.268V110.198H239.584ZM242.352 110.198L245.008 104.945V104.898H241.946V104.26H245.75V104.933L243.106 110.198H242.352ZM246.32 110.245C246.177 110.245 246.055 110.194 245.952 110.091C245.85 109.989 245.799 109.866 245.799 109.723C245.799 109.58 245.85 109.457 245.952 109.355C246.055 109.252 246.177 109.201 246.32 109.201C246.464 109.201 246.586 109.252 246.689 109.355C246.791 109.457 246.842 109.58 246.842 109.723C246.842 109.818 246.818 109.905 246.77 109.984C246.724 110.063 246.661 110.127 246.581 110.175C246.504 110.222 246.417 110.245 246.32 110.245ZM248.569 110.245C248.426 110.245 248.303 110.194 248.201 110.091C248.098 109.989 248.047 109.866 248.047 109.723C248.047 109.58 248.098 109.457 248.201 109.355C248.303 109.252 248.426 109.201 248.569 109.201C248.712 109.201 248.835 109.252 248.937 109.355C249.04 109.457 249.091 109.58 249.091 109.723C249.091 109.818 249.067 109.905 249.018 109.984C248.972 110.063 248.909 110.127 248.83 110.175C248.753 110.222 248.666 110.245 248.569 110.245ZM250.818 110.245C250.674 110.245 250.552 110.194 250.449 110.091C250.347 109.989 250.296 109.866 250.296 109.723C250.296 109.58 250.347 109.457 250.449 109.355C250.552 109.252 250.674 109.201 250.818 109.201C250.961 109.201 251.083 109.252 251.186 109.355C251.288 109.457 251.339 109.58 251.339 109.723C251.339 109.818 251.315 109.905 251.267 109.984C251.221 110.063 251.158 110.127 251.078 110.175C251.001 110.222 250.914 110.245 250.818 110.245Z" fill="#ADADB1"/>
+<g clip-path="url(#clip3_7233_4628)">
+<rect x="36.7334" y="130.358" width="18.6624" height="18.6624" rx="9.3312" fill="#6C6C71"/>
+<path d="M41.4777 142.359V137.269H43.3416C43.7028 137.269 44.0019 137.329 44.2388 137.448C44.4757 137.566 44.653 137.726 44.7706 137.928C44.8883 138.129 44.9471 138.355 44.9471 138.606C44.9471 138.819 44.9081 138.998 44.8303 139.143C44.7524 139.287 44.648 139.403 44.5171 139.491C44.3879 139.577 44.2454 139.64 44.0897 139.68V139.73C44.2587 139.738 44.4235 139.793 44.5842 139.894C44.7466 139.993 44.8808 140.135 44.9868 140.319C45.0929 140.503 45.1459 140.726 45.1459 140.99C45.1459 141.25 45.0846 141.484 44.962 141.691C44.841 141.896 44.6538 142.059 44.4003 142.18C44.1468 142.3 43.8229 142.359 43.4286 142.359H41.4777ZM42.2456 141.701H43.354C43.7219 141.701 43.9853 141.629 44.1443 141.487C44.3034 141.344 44.3829 141.166 44.3829 140.953C44.3829 140.792 44.3423 140.644 44.2611 140.51C44.18 140.376 44.064 140.269 43.9132 140.19C43.7641 140.11 43.5868 140.07 43.3814 140.07H42.2456V141.701ZM42.2456 139.471H43.2745C43.4468 139.471 43.6017 139.438 43.7393 139.372C43.8784 139.306 43.9886 139.213 44.0698 139.094C44.1526 138.973 44.194 138.83 44.194 138.666C44.194 138.456 44.1203 138.279 43.9729 138.137C43.8254 137.994 43.5992 137.923 43.2944 137.923H42.2456V139.471ZM47.7044 142.359H46.0567V137.269H47.7566C48.2553 137.269 48.6836 137.371 49.0415 137.575C49.3994 137.777 49.6736 138.068 49.8641 138.447C50.0563 138.825 50.1524 139.278 50.1524 139.807C50.1524 140.337 50.0555 140.793 49.8616 141.174C49.6694 141.555 49.3911 141.848 49.0266 142.054C48.6621 142.257 48.2214 142.359 47.7044 142.359ZM46.8247 141.688H47.6622C48.0499 141.688 48.3721 141.615 48.6289 141.469C48.8857 141.322 49.0779 141.109 49.2055 140.831C49.3331 140.551 49.3969 140.209 49.3969 139.807C49.3969 139.408 49.3331 139.069 49.2055 138.79C49.0796 138.512 48.8915 138.301 48.6414 138.157C48.3912 138.013 48.0805 137.94 47.7094 137.94H46.8247V141.688Z" fill="#373B4D"/>
+</g>
+<path d="M63.1136 142.689V136.751H65.1896C65.6032 136.751 65.9444 136.822 66.2131 136.965C66.4818 137.106 66.6818 137.297 66.8133 137.537C66.9447 137.774 67.0104 138.038 67.0104 138.328C67.0104 138.583 66.965 138.794 66.8742 138.96C66.7852 139.126 66.6673 139.258 66.5204 139.354C66.3755 139.451 66.2179 139.523 66.0478 139.569V139.627C66.2295 139.639 66.4122 139.702 66.5958 139.818C66.7794 139.934 66.9331 140.101 67.0568 140.317C67.1805 140.534 67.2424 140.798 67.2424 141.112C67.2424 141.409 67.1747 141.677 67.0394 141.915C66.9041 142.152 66.6905 142.341 66.3986 142.48C66.1068 142.619 65.7269 142.689 65.2592 142.689H63.1136ZM63.8326 142.051H65.2592C65.7289 142.051 66.0623 141.96 66.2595 141.778C66.4586 141.595 66.5581 141.372 66.5581 141.112C66.5581 140.91 66.5069 140.725 66.4044 140.555C66.302 140.383 66.1561 140.246 65.9666 140.143C65.7772 140.039 65.553 139.987 65.294 139.987H63.8326V142.051ZM63.8326 139.36H65.1664C65.3829 139.36 65.5781 139.318 65.7521 139.233C65.928 139.148 66.0671 139.028 66.1696 138.873C66.274 138.719 66.3262 138.537 66.3262 138.328C66.3262 138.067 66.2353 137.846 66.0536 137.664C65.8719 137.48 65.5839 137.389 65.1896 137.389H63.8326V139.36ZM70.1984 142.782C69.7692 142.782 69.3991 142.687 69.0879 142.497C68.7786 142.306 68.5399 142.039 68.3717 141.697C68.2055 141.353 68.1224 140.953 68.1224 140.497C68.1224 140.041 68.2055 139.639 68.3717 139.291C68.5399 138.941 68.7738 138.668 69.0734 138.473C69.3749 138.276 69.7267 138.177 70.1288 138.177C70.3607 138.177 70.5898 138.216 70.8159 138.293C71.0421 138.371 71.2479 138.496 71.4335 138.67C71.6191 138.842 71.7669 139.07 71.8771 139.354C71.9873 139.639 72.0424 139.988 72.0424 140.404V140.694H68.6095V140.103H71.3465C71.3465 139.851 71.2963 139.627 71.1958 139.43C71.0972 139.233 70.9561 139.077 70.7724 138.963C70.5907 138.849 70.3762 138.792 70.1288 138.792C69.8562 138.792 69.6204 138.86 69.4213 138.995C69.2241 139.128 69.0724 139.302 68.9661 139.517C68.8598 139.731 68.8066 139.961 68.8066 140.207V140.601C68.8066 140.938 68.8646 141.223 68.9806 141.457C69.0985 141.689 69.2618 141.865 69.4706 141.987C69.6794 142.107 69.9219 142.167 70.1984 142.167C70.3781 142.167 70.5405 142.142 70.6855 142.092C70.8324 142.039 70.959 141.962 71.0653 141.86C71.1716 141.755 71.2537 141.626 71.3117 141.471L71.9728 141.657C71.9032 141.881 71.7863 142.078 71.622 142.248C71.4577 142.416 71.2547 142.548 71.0131 142.642C70.7715 142.735 70.4999 142.782 70.1984 142.782ZM73.7676 140.01V142.689H73.0833V138.235H73.7444V138.931H73.8023C73.9067 138.705 74.0652 138.523 74.2779 138.386C74.4905 138.247 74.765 138.177 75.1013 138.177C75.4028 138.177 75.6667 138.239 75.8928 138.363C76.119 138.485 76.2949 138.67 76.4205 138.92C76.5462 139.167 76.609 139.48 76.609 139.859V142.689H75.9247V139.905C75.9247 139.555 75.8339 139.283 75.6522 139.088C75.4705 138.891 75.2211 138.792 74.9041 138.792C74.6857 138.792 74.4905 138.839 74.3184 138.934C74.1483 139.029 74.014 139.167 73.9154 139.349C73.8168 139.53 73.7676 139.751 73.7676 140.01ZM77.8594 138.235H78.5436V143.014C78.5436 143.288 78.4963 143.526 78.4016 143.727C78.3088 143.928 78.1677 144.083 77.9783 144.194C77.7908 144.304 77.554 144.359 77.2679 144.359C77.2447 144.359 77.2215 144.359 77.1983 144.359C77.1751 144.359 77.1519 144.359 77.1287 144.359V143.721C77.1519 143.721 77.1732 143.721 77.1925 143.721C77.2118 143.721 77.2331 143.721 77.2563 143.721C77.4651 143.721 77.6178 143.659 77.7144 143.535C77.8111 143.414 77.8594 143.24 77.8594 143.014V138.235ZM78.1957 137.493C78.0623 137.493 77.9473 137.448 77.8507 137.357C77.756 137.266 77.7086 137.157 77.7086 137.029C77.7086 136.902 77.756 136.792 77.8507 136.701C77.9473 136.611 78.0623 136.565 78.1957 136.565C78.3291 136.565 78.4431 136.611 78.5378 136.701C78.6345 136.792 78.6828 136.902 78.6828 137.029C78.6828 137.157 78.6345 137.266 78.5378 137.357C78.4431 137.448 78.3291 137.493 78.1957 137.493ZM81.1075 142.793C80.8253 142.793 80.5691 142.74 80.3391 142.634C80.1091 142.525 79.9264 142.37 79.7911 142.167C79.6558 141.962 79.5882 141.715 79.5882 141.425C79.5882 141.17 79.6384 140.963 79.7389 140.804C79.8394 140.644 79.9738 140.518 80.142 140.427C80.3101 140.336 80.4957 140.269 80.6986 140.224C80.9035 140.178 81.1094 140.141 81.3162 140.114C81.5868 140.079 81.8062 140.053 81.9744 140.036C82.1445 140.017 82.2682 139.985 82.3455 139.94C82.4248 139.896 82.4644 139.818 82.4644 139.708V139.685C82.4644 139.399 82.3861 139.177 82.2295 139.018C82.0749 138.86 81.8401 138.78 81.525 138.78C81.1983 138.78 80.9422 138.852 80.7566 138.995C80.5711 139.138 80.4406 139.291 80.3652 139.453L79.7157 139.221C79.8317 138.95 79.9863 138.74 80.1796 138.589C80.3749 138.436 80.5875 138.33 80.8175 138.27C81.0495 138.208 81.2776 138.177 81.5018 138.177C81.6448 138.177 81.8091 138.195 81.9947 138.229C82.1822 138.262 82.3629 138.331 82.5369 138.435C82.7128 138.54 82.8587 138.697 82.9747 138.908C83.0907 139.119 83.1487 139.401 83.1487 139.755V142.689H82.4644V142.086H82.4296C82.3832 142.182 82.3059 142.286 82.1976 142.396C82.0894 142.506 81.9454 142.6 81.7656 142.677C81.5859 142.755 81.3665 142.793 81.1075 142.793ZM81.2118 142.179C81.4825 142.179 81.7105 142.125 81.8961 142.019C82.0836 141.913 82.2247 141.775 82.3194 141.607C82.4161 141.439 82.4644 141.262 82.4644 141.077V140.45C82.4354 140.485 82.3716 140.517 82.273 140.546C82.1764 140.573 82.0643 140.597 81.9367 140.619C81.8111 140.638 81.6883 140.655 81.5685 140.671C81.4506 140.684 81.3549 140.696 81.2814 140.706C81.1036 140.729 80.9374 140.766 80.7827 140.819C80.63 140.869 80.5063 140.945 80.4116 141.048C80.3188 141.148 80.2724 141.285 80.2724 141.459C80.2724 141.697 80.3604 141.877 80.5363 141.999C80.7141 142.119 80.9393 142.179 81.2118 142.179ZM84.3976 142.689V138.235H85.0587V138.931H85.1167C85.2094 138.693 85.3592 138.509 85.5661 138.377C85.7729 138.244 86.0213 138.177 86.3112 138.177C86.605 138.177 86.8495 138.244 87.0448 138.377C87.2419 138.509 87.3956 138.693 87.5058 138.931H87.5522C87.6662 138.701 87.8373 138.518 88.0654 138.383C88.2935 138.246 88.567 138.177 88.8859 138.177C89.2841 138.177 89.6098 138.302 89.863 138.551C90.1162 138.799 90.2428 139.184 90.2428 139.708V142.689H89.5586V139.708C89.5586 139.38 89.4687 139.145 89.2889 139.004C89.1092 138.863 88.8975 138.792 88.654 138.792C88.3408 138.792 88.0982 138.887 87.9262 139.076C87.7542 139.264 87.6682 139.501 87.6682 139.789V142.689H86.9723V139.639C86.9723 139.385 86.8901 139.181 86.7258 139.027C86.5615 138.87 86.3499 138.792 86.0909 138.792C85.913 138.792 85.7468 138.839 85.5922 138.934C85.4395 139.029 85.3157 139.16 85.221 139.328C85.1283 139.495 85.0819 139.687 85.0819 139.905V142.689H84.3976ZM91.494 142.689V138.235H92.1782V142.689H91.494ZM91.8419 137.493C91.7085 137.493 91.5935 137.448 91.4969 137.357C91.4021 137.266 91.3548 137.157 91.3548 137.029C91.3548 136.902 91.4021 136.792 91.4969 136.701C91.5935 136.611 91.7085 136.565 91.8419 136.565C91.9753 136.565 92.0893 136.611 92.184 136.701C92.2807 136.792 92.329 136.902 92.329 137.029C92.329 137.157 92.2807 137.266 92.184 137.357C92.0893 137.448 91.9753 137.493 91.8419 137.493ZM94.1158 140.01V142.689H93.4315V138.235H94.0926V138.931H94.1506C94.2549 138.705 94.4134 138.523 94.6261 138.386C94.8387 138.247 95.1132 138.177 95.4495 138.177C95.751 138.177 96.0149 138.239 96.241 138.363C96.4672 138.485 96.6431 138.67 96.7687 138.92C96.8944 139.167 96.9572 139.48 96.9572 139.859V142.689H96.2729V139.905C96.2729 139.555 96.1821 139.283 96.0004 139.088C95.8187 138.891 95.5693 138.792 95.2523 138.792C95.0339 138.792 94.8387 138.839 94.6667 138.934C94.4966 139.029 94.3622 139.167 94.2636 139.349C94.1651 139.53 94.1158 139.751 94.1158 140.01ZM102.429 142.689H100.597V136.751H102.51C103.086 136.751 103.579 136.87 103.989 137.107C104.399 137.343 104.713 137.682 104.931 138.125C105.15 138.566 105.259 139.094 105.259 139.708C105.259 140.327 105.149 140.859 104.928 141.306C104.708 141.75 104.387 142.092 103.966 142.332C103.544 142.57 103.032 142.689 102.429 142.689ZM101.316 142.051H102.383C102.874 142.051 103.281 141.956 103.603 141.767C103.926 141.577 104.167 141.308 104.325 140.958C104.484 140.608 104.563 140.191 104.563 139.708C104.563 139.229 104.485 138.816 104.328 138.47C104.172 138.122 103.938 137.855 103.627 137.67C103.315 137.482 102.928 137.389 102.464 137.389H101.316V142.051ZM107.683 142.793C107.401 142.793 107.145 142.74 106.915 142.634C106.685 142.525 106.502 142.37 106.367 142.167C106.231 141.962 106.164 141.715 106.164 141.425C106.164 141.17 106.214 140.963 106.314 140.804C106.415 140.644 106.549 140.518 106.717 140.427C106.886 140.336 107.071 140.269 107.274 140.224C107.479 140.178 107.685 140.141 107.892 140.114C108.162 140.079 108.382 140.053 108.55 140.036C108.72 140.017 108.844 139.985 108.921 139.94C109 139.896 109.04 139.818 109.04 139.708V139.685C109.04 139.399 108.962 139.177 108.805 139.018C108.65 138.86 108.416 138.78 108.1 138.78C107.774 138.78 107.518 138.852 107.332 138.995C107.147 139.138 107.016 139.291 106.941 139.453L106.291 139.221C106.407 138.95 106.562 138.74 106.755 138.589C106.95 138.436 107.163 138.33 107.393 138.27C107.625 138.208 107.853 138.177 108.077 138.177C108.22 138.177 108.385 138.195 108.57 138.229C108.758 138.262 108.938 138.331 109.112 138.435C109.288 138.54 109.434 138.697 109.55 138.908C109.666 139.119 109.724 139.401 109.724 139.755V142.689H109.04V142.086H109.005C108.959 142.182 108.881 142.286 108.773 142.396C108.665 142.506 108.521 142.6 108.341 142.677C108.161 142.755 107.942 142.793 107.683 142.793ZM107.787 142.179C108.058 142.179 108.286 142.125 108.472 142.019C108.659 141.913 108.8 141.775 108.895 141.607C108.992 141.439 109.04 141.262 109.04 141.077V140.45C109.011 140.485 108.947 140.517 108.849 140.546C108.752 140.573 108.64 140.597 108.512 140.619C108.387 140.638 108.264 140.655 108.144 140.671C108.026 140.684 107.93 140.696 107.857 140.706C107.679 140.729 107.513 140.766 107.358 140.819C107.205 140.869 107.082 140.945 106.987 141.048C106.894 141.148 106.848 141.285 106.848 141.459C106.848 141.697 106.936 141.877 107.112 141.999C107.29 142.119 107.515 142.179 107.787 142.179ZM114.455 138.235L112.808 142.689H112.113L110.466 138.235H111.208L112.437 141.784H112.484L113.713 138.235H114.455ZM115.358 142.689V138.235H116.043V142.689H115.358ZM115.706 137.493C115.573 137.493 115.458 137.448 115.361 137.357C115.267 137.266 115.219 137.157 115.219 137.029C115.219 136.902 115.267 136.792 115.361 136.701C115.458 136.611 115.573 136.565 115.706 136.565C115.84 136.565 115.954 136.611 116.049 136.701C116.145 136.792 116.193 136.902 116.193 137.029C116.193 137.157 116.145 137.266 116.049 137.357C115.954 137.448 115.84 137.493 115.706 137.493ZM120.451 139.233L119.836 139.407C119.797 139.304 119.74 139.205 119.665 139.108C119.591 139.009 119.491 138.928 119.363 138.864C119.236 138.801 119.072 138.769 118.873 138.769C118.601 138.769 118.374 138.832 118.192 138.957C118.012 139.081 117.922 139.238 117.922 139.43C117.922 139.6 117.984 139.734 118.108 139.833C118.232 139.931 118.425 140.014 118.688 140.079L119.349 140.242C119.747 140.338 120.044 140.486 120.239 140.685C120.434 140.882 120.532 141.137 120.532 141.448C120.532 141.703 120.458 141.931 120.311 142.132C120.166 142.333 119.963 142.492 119.703 142.608C119.442 142.724 119.138 142.782 118.792 142.782C118.338 142.782 117.962 142.683 117.664 142.486C117.367 142.289 117.178 142.001 117.099 141.622L117.748 141.459C117.81 141.699 117.927 141.879 118.099 141.999C118.273 142.119 118.5 142.179 118.781 142.179C119.099 142.179 119.353 142.111 119.54 141.976C119.73 141.838 119.824 141.674 119.824 141.483C119.824 141.328 119.77 141.199 119.662 141.094C119.554 140.988 119.387 140.909 119.163 140.856L118.421 140.682C118.013 140.586 117.714 140.436 117.522 140.233C117.333 140.028 117.238 139.772 117.238 139.465C117.238 139.213 117.309 138.991 117.45 138.798C117.593 138.604 117.787 138.453 118.032 138.343C118.28 138.232 118.56 138.177 118.873 138.177C119.314 138.177 119.66 138.274 119.911 138.467C120.165 138.661 120.344 138.916 120.451 139.233Z" fill="#ADADB1"/>
+<path d="M150.01 142.857V136.919H150.694V139.111H150.752C150.803 139.033 150.872 138.935 150.961 138.815C151.052 138.693 151.181 138.585 151.35 138.49C151.52 138.393 151.75 138.345 152.04 138.345C152.415 138.345 152.745 138.439 153.031 138.626C153.317 138.814 153.541 139.08 153.701 139.424C153.861 139.768 153.942 140.174 153.942 140.642C153.942 141.113 153.861 141.522 153.701 141.868C153.541 142.212 153.318 142.479 153.034 142.668C152.75 142.856 152.422 142.949 152.051 142.949C151.765 142.949 151.536 142.902 151.364 142.807C151.192 142.711 151.06 142.602 150.967 142.48C150.874 142.356 150.803 142.254 150.752 142.172H150.671V142.857H150.01ZM150.683 140.63C150.683 140.966 150.732 141.263 150.831 141.52C150.929 141.775 151.073 141.975 151.263 142.12C151.452 142.263 151.684 142.335 151.958 142.335C152.245 142.335 152.483 142.259 152.675 142.109C152.868 141.956 153.013 141.751 153.11 141.494C153.208 141.235 153.257 140.947 153.257 140.63C153.257 140.317 153.209 140.035 153.112 139.783C153.018 139.53 152.874 139.33 152.68 139.183C152.489 139.034 152.248 138.96 151.958 138.96C151.68 138.96 151.446 139.03 151.257 139.172C151.067 139.311 150.924 139.506 150.828 139.757C150.731 140.007 150.683 140.297 150.683 140.63ZM156.856 142.949C156.427 142.949 156.056 142.855 155.745 142.665C155.436 142.474 155.197 142.207 155.029 141.865C154.863 141.521 154.78 141.121 154.78 140.665C154.78 140.209 154.863 139.806 155.029 139.459C155.197 139.109 155.431 138.836 155.731 138.641C156.032 138.444 156.384 138.345 156.786 138.345C157.018 138.345 157.247 138.384 157.473 138.461C157.699 138.538 157.905 138.664 158.091 138.838C158.276 139.01 158.424 139.238 158.534 139.522C158.645 139.806 158.7 140.156 158.7 140.572V140.862H155.267V140.27H158.004C158.004 140.019 157.954 139.795 157.853 139.598C157.754 139.401 157.613 139.245 157.43 139.131C157.248 139.017 157.033 138.96 156.786 138.96C156.513 138.96 156.278 139.028 156.079 139.163C155.881 139.296 155.73 139.47 155.623 139.685C155.517 139.899 155.464 140.129 155.464 140.375V140.769C155.464 141.105 155.522 141.391 155.638 141.624C155.756 141.856 155.919 142.033 156.128 142.155C156.337 142.275 156.579 142.335 156.856 142.335C157.035 142.335 157.198 142.31 157.343 142.259C157.49 142.207 157.616 142.13 157.723 142.027C157.829 141.923 157.911 141.794 157.969 141.639L158.63 141.824C158.56 142.049 158.444 142.246 158.279 142.416C158.115 142.584 157.912 142.716 157.67 142.81C157.429 142.903 157.157 142.949 156.856 142.949ZM160.425 140.178V142.857H159.741V138.403H160.402V139.099H160.46C160.564 138.873 160.723 138.691 160.935 138.554C161.148 138.415 161.422 138.345 161.759 138.345C162.06 138.345 162.324 138.407 162.55 138.531C162.776 138.653 162.952 138.838 163.078 139.087C163.203 139.335 163.266 139.648 163.266 140.027V142.857H162.582V140.073C162.582 139.723 162.491 139.451 162.309 139.256C162.128 139.058 161.878 138.96 161.561 138.96C161.343 138.96 161.148 139.007 160.976 139.102C160.806 139.197 160.671 139.335 160.573 139.517C160.474 139.698 160.425 139.919 160.425 140.178ZM164.517 138.403H165.201V143.181C165.201 143.456 165.154 143.694 165.059 143.895C164.966 144.096 164.825 144.251 164.636 144.361C164.448 144.472 164.211 144.527 163.925 144.527C163.902 144.527 163.879 144.527 163.856 144.527C163.832 144.527 163.809 144.527 163.786 144.527V143.889C163.809 143.889 163.83 143.889 163.85 143.889C163.869 143.889 163.89 143.889 163.914 143.889C164.122 143.889 164.275 143.827 164.372 143.703C164.468 143.582 164.517 143.408 164.517 143.181V138.403ZM164.853 137.661C164.72 137.661 164.605 137.615 164.508 137.525C164.413 137.434 164.366 137.325 164.366 137.197C164.366 137.069 164.413 136.96 164.508 136.869C164.605 136.779 164.72 136.733 164.853 136.733C164.986 136.733 165.1 136.779 165.195 136.869C165.292 136.96 165.34 137.069 165.34 137.197C165.34 137.325 165.292 137.434 165.195 137.525C165.1 137.615 164.986 137.661 164.853 137.661ZM167.765 142.961C167.483 142.961 167.226 142.908 166.996 142.802C166.766 142.693 166.584 142.538 166.448 142.335C166.313 142.13 166.245 141.882 166.245 141.593C166.245 141.337 166.296 141.131 166.396 140.972C166.497 140.812 166.631 140.686 166.799 140.595C166.967 140.504 167.153 140.437 167.356 140.392C167.561 140.346 167.767 140.309 167.974 140.282C168.244 140.247 168.464 140.221 168.632 140.204C168.802 140.184 168.925 140.152 169.003 140.108C169.082 140.064 169.122 139.986 169.122 139.876V139.853C169.122 139.567 169.043 139.345 168.887 139.186C168.732 139.028 168.497 138.948 168.182 138.948C167.856 138.948 167.599 139.02 167.414 139.163C167.228 139.306 167.098 139.459 167.022 139.621L166.373 139.389C166.489 139.118 166.644 138.908 166.837 138.757C167.032 138.604 167.245 138.498 167.475 138.438C167.707 138.376 167.935 138.345 168.159 138.345C168.302 138.345 168.466 138.363 168.652 138.397C168.839 138.43 169.02 138.499 169.194 138.603C169.37 138.708 169.516 138.865 169.632 139.076C169.748 139.287 169.806 139.569 169.806 139.922V142.857H169.122V142.254H169.087C169.04 142.35 168.963 142.454 168.855 142.564C168.747 142.674 168.603 142.768 168.423 142.845C168.243 142.922 168.024 142.961 167.765 142.961ZM167.869 142.346C168.14 142.346 168.368 142.293 168.553 142.187C168.741 142.081 168.882 141.943 168.977 141.775C169.073 141.607 169.122 141.43 169.122 141.245V140.618C169.093 140.653 169.029 140.685 168.93 140.714C168.834 140.741 168.722 140.765 168.594 140.786C168.468 140.806 168.346 140.823 168.226 140.839C168.108 140.852 168.012 140.864 167.939 140.873C167.761 140.897 167.595 140.934 167.44 140.987C167.287 141.037 167.164 141.113 167.069 141.216C166.976 141.316 166.93 141.453 166.93 141.627C166.93 141.865 167.018 142.045 167.194 142.167C167.371 142.286 167.597 142.346 167.869 142.346ZM171.055 142.857V138.403H171.716V139.099H171.774C171.867 138.861 172.017 138.677 172.223 138.545C172.43 138.412 172.679 138.345 172.968 138.345C173.262 138.345 173.507 138.412 173.702 138.545C173.899 138.677 174.053 138.861 174.163 139.099H174.209C174.323 138.869 174.495 138.686 174.723 138.551C174.951 138.414 175.224 138.345 175.543 138.345C175.941 138.345 176.267 138.47 176.52 138.719C176.774 138.967 176.9 139.352 176.9 139.876V142.857H176.216V139.876C176.216 139.547 176.126 139.313 175.946 139.172C175.766 139.03 175.555 138.96 175.311 138.96C174.998 138.96 174.756 139.055 174.583 139.244C174.411 139.431 174.325 139.669 174.325 139.957V142.857H173.63V139.806C173.63 139.553 173.547 139.349 173.383 139.195C173.219 139.038 173.007 138.96 172.748 138.96C172.57 138.96 172.404 139.007 172.249 139.102C172.097 139.197 171.973 139.328 171.878 139.496C171.786 139.662 171.739 139.855 171.739 140.073V142.857H171.055ZM178.151 142.857V138.403H178.835V142.857H178.151ZM178.499 137.661C178.366 137.661 178.251 137.615 178.154 137.525C178.059 137.434 178.012 137.325 178.012 137.197C178.012 137.069 178.059 136.96 178.154 136.869C178.251 136.779 178.366 136.733 178.499 136.733C178.633 136.733 178.747 136.779 178.841 136.869C178.938 136.96 178.986 137.069 178.986 137.197C178.986 137.325 178.938 137.434 178.841 137.525C178.747 137.615 178.633 137.661 178.499 137.661ZM180.773 140.178V142.857H180.089V138.403H180.75V139.099H180.808C180.912 138.873 181.071 138.691 181.283 138.554C181.496 138.415 181.77 138.345 182.107 138.345C182.408 138.345 182.672 138.407 182.898 138.531C183.124 138.653 183.3 138.838 183.426 139.087C183.552 139.335 183.614 139.648 183.614 140.027V142.857H182.93V140.073C182.93 139.723 182.839 139.451 182.658 139.256C182.476 139.058 182.227 138.96 181.91 138.96C181.691 138.96 181.496 139.007 181.324 139.102C181.154 139.197 181.019 139.335 180.921 139.517C180.822 139.698 180.773 139.919 180.773 140.178ZM185.364 142.903C185.221 142.903 185.098 142.852 184.995 142.749C184.893 142.647 184.842 142.524 184.842 142.381C184.842 142.238 184.893 142.115 184.995 142.013C185.098 141.911 185.221 141.859 185.364 141.859C185.507 141.859 185.629 141.911 185.732 142.013C185.834 142.115 185.885 142.238 185.885 142.381C185.885 142.476 185.861 142.563 185.813 142.642C185.767 142.721 185.704 142.785 185.625 142.833C185.547 142.88 185.46 142.903 185.364 142.903ZM188.795 142.949C188.424 142.949 188.096 142.856 187.812 142.668C187.528 142.479 187.306 142.212 187.145 141.868C186.985 141.522 186.905 141.113 186.905 140.642C186.905 140.174 186.985 139.768 187.145 139.424C187.306 139.08 187.529 138.814 187.815 138.626C188.101 138.439 188.432 138.345 188.807 138.345C189.097 138.345 189.326 138.393 189.494 138.49C189.664 138.585 189.793 138.693 189.882 138.815C189.973 138.935 190.044 139.033 190.094 139.111H190.152V136.919H190.836V142.857H190.175V142.172H190.094C190.044 142.254 189.972 142.356 189.879 142.48C189.787 142.602 189.654 142.711 189.482 142.807C189.31 142.902 189.081 142.949 188.795 142.949ZM188.888 142.335C189.162 142.335 189.394 142.263 189.584 142.12C189.773 141.975 189.917 141.775 190.016 141.52C190.114 141.263 190.164 140.966 190.164 140.63C190.164 140.297 190.115 140.007 190.019 139.757C189.922 139.506 189.779 139.311 189.589 139.172C189.4 139.03 189.166 138.96 188.888 138.96C188.598 138.96 188.356 139.034 188.163 139.183C187.972 139.33 187.828 139.53 187.731 139.783C187.636 140.035 187.589 140.317 187.589 140.63C187.589 140.947 187.637 141.235 187.734 141.494C187.832 141.751 187.977 141.956 188.169 142.109C188.362 142.259 188.602 142.335 188.888 142.335ZM193.495 142.961C193.213 142.961 192.957 142.908 192.727 142.802C192.497 142.693 192.314 142.538 192.179 142.335C192.043 142.13 191.976 141.882 191.976 141.593C191.976 141.337 192.026 141.131 192.126 140.972C192.227 140.812 192.361 140.686 192.53 140.595C192.698 140.504 192.883 140.437 193.086 140.392C193.291 140.346 193.497 140.309 193.704 140.282C193.974 140.247 194.194 140.221 194.362 140.204C194.532 140.184 194.656 140.152 194.733 140.108C194.812 140.064 194.852 139.986 194.852 139.876V139.853C194.852 139.567 194.774 139.345 194.617 139.186C194.462 139.028 194.228 138.948 193.913 138.948C193.586 138.948 193.33 139.02 193.144 139.163C192.959 139.306 192.828 139.459 192.753 139.621L192.103 139.389C192.219 139.118 192.374 138.908 192.567 138.757C192.762 138.604 192.975 138.498 193.205 138.438C193.437 138.376 193.665 138.345 193.889 138.345C194.032 138.345 194.197 138.363 194.382 138.397C194.57 138.43 194.75 138.499 194.924 138.603C195.1 138.708 195.246 138.865 195.362 139.076C195.478 139.287 195.536 139.569 195.536 139.922V142.857H194.852V142.254H194.817C194.771 142.35 194.693 142.454 194.585 142.564C194.477 142.674 194.333 142.768 194.153 142.845C193.973 142.922 193.754 142.961 193.495 142.961ZM193.599 142.346C193.87 142.346 194.098 142.293 194.284 142.187C194.471 142.081 194.612 141.943 194.707 141.775C194.804 141.607 194.852 141.43 194.852 141.245V140.618C194.823 140.653 194.759 140.685 194.661 140.714C194.564 140.741 194.452 140.765 194.324 140.786C194.199 140.806 194.076 140.823 193.956 140.839C193.838 140.852 193.742 140.864 193.669 140.873C193.491 140.897 193.325 140.934 193.17 140.987C193.018 141.037 192.894 141.113 192.799 141.216C192.706 141.316 192.66 141.453 192.66 141.627C192.66 141.865 192.748 142.045 192.924 142.167C193.102 142.286 193.327 142.346 193.599 142.346ZM200.267 138.403L198.62 142.857H197.925L196.278 138.403H197.02L198.249 141.952H198.296L199.525 138.403H200.267ZM201.171 142.857V138.403H201.855V142.857H201.171ZM201.518 137.661C201.385 137.661 201.27 137.615 201.173 137.525C201.079 137.434 201.031 137.325 201.031 137.197C201.031 137.069 201.079 136.96 201.173 136.869C201.27 136.779 201.385 136.733 201.518 136.733C201.652 136.733 201.766 136.779 201.861 136.869C201.957 136.96 202.006 137.069 202.006 137.197C202.006 137.325 201.957 137.434 201.861 137.525C201.766 137.615 201.652 137.661 201.518 137.661ZM206.263 139.401L205.648 139.575C205.609 139.472 205.552 139.373 205.477 139.276C205.403 139.177 205.303 139.096 205.175 139.032C205.048 138.969 204.884 138.937 204.685 138.937C204.413 138.937 204.186 138.999 204.004 139.125C203.824 139.249 203.734 139.406 203.734 139.598C203.734 139.768 203.796 139.902 203.92 140.001C204.044 140.099 204.237 140.181 204.5 140.247L205.161 140.41C205.559 140.506 205.856 140.654 206.051 140.853C206.246 141.05 206.344 141.305 206.344 141.616C206.344 141.871 206.27 142.099 206.124 142.3C205.979 142.501 205.776 142.66 205.515 142.776C205.254 142.891 204.95 142.949 204.604 142.949C204.15 142.949 203.774 142.851 203.476 142.654C203.179 142.457 202.99 142.169 202.911 141.79L203.56 141.627C203.622 141.867 203.739 142.047 203.911 142.167C204.085 142.286 204.312 142.346 204.593 142.346C204.912 142.346 205.165 142.279 205.352 142.143C205.542 142.006 205.636 141.842 205.636 141.651C205.636 141.496 205.582 141.366 205.474 141.262C205.366 141.156 205.2 141.076 204.975 141.024L204.233 140.85C203.825 140.754 203.526 140.604 203.334 140.401C203.145 140.196 203.05 139.94 203.05 139.633C203.05 139.381 203.121 139.159 203.262 138.966C203.405 138.772 203.599 138.621 203.845 138.51C204.092 138.4 204.372 138.345 204.685 138.345C205.126 138.345 205.472 138.442 205.723 138.635C205.977 138.828 206.156 139.084 206.263 139.401ZM210.795 144.422C210.204 144.422 209.681 144.341 209.227 144.179C208.772 144.018 208.391 143.782 208.081 143.468C207.772 143.155 207.538 142.772 207.38 142.317C207.221 141.863 207.142 141.343 207.142 140.758C207.142 140.191 207.222 139.685 207.383 139.238C207.545 138.792 207.78 138.413 208.087 138.102C208.396 137.788 208.771 137.55 209.212 137.385C209.655 137.221 210.155 137.139 210.714 137.139C211.257 137.139 211.733 137.228 212.141 137.406C212.55 137.582 212.892 137.82 213.167 138.122C213.443 138.422 213.65 138.759 213.787 139.134C213.927 139.509 213.996 139.895 213.996 140.294C213.996 140.574 213.983 140.858 213.956 141.146C213.929 141.434 213.872 141.699 213.785 141.94C213.698 142.18 213.563 142.373 213.382 142.52C213.202 142.667 212.958 142.741 212.651 142.741C212.516 142.741 212.367 142.719 212.204 142.677C212.042 142.634 211.898 142.564 211.772 142.465C211.647 142.367 211.572 142.234 211.549 142.068H211.514C211.468 142.18 211.396 142.286 211.3 142.387C211.205 142.487 211.08 142.568 210.926 142.628C210.773 142.688 210.586 142.714 210.366 142.706C210.115 142.696 209.893 142.64 209.702 142.538C209.511 142.433 209.35 142.292 209.221 142.114C209.093 141.935 208.997 141.727 208.931 141.491C208.867 141.253 208.835 140.997 208.835 140.723C208.835 140.462 208.874 140.223 208.951 140.007C209.028 139.79 209.136 139.601 209.273 139.438C209.412 139.276 209.575 139.146 209.76 139.05C209.948 138.951 210.15 138.89 210.366 138.867C210.559 138.848 210.735 138.856 210.894 138.893C211.052 138.928 211.183 138.981 211.285 139.053C211.388 139.122 211.452 139.2 211.479 139.285H211.514V138.96H212.129V141.581C212.129 141.743 212.174 141.886 212.265 142.01C212.356 142.134 212.488 142.196 212.662 142.196C212.86 142.196 213.01 142.128 213.115 141.993C213.221 141.857 213.294 141.649 213.332 141.366C213.373 141.084 213.393 140.723 213.393 140.282C213.393 140.023 213.357 139.768 213.286 139.517C213.216 139.263 213.11 139.027 212.967 138.806C212.826 138.586 212.647 138.392 212.43 138.223C212.214 138.055 211.96 137.924 211.668 137.829C211.378 137.732 211.048 137.684 210.679 137.684C210.225 137.684 209.818 137.755 209.459 137.896C209.101 138.035 208.797 138.239 208.545 138.508C208.296 138.774 208.106 139.099 207.974 139.482C207.845 139.863 207.78 140.296 207.78 140.781C207.78 141.274 207.845 141.711 207.974 142.094C208.106 142.477 208.299 142.8 208.554 143.063C208.811 143.325 209.129 143.525 209.508 143.66C209.887 143.797 210.324 143.866 210.818 143.866C211.031 143.866 211.241 143.845 211.448 143.805C211.654 143.764 211.837 143.72 211.996 143.671C212.154 143.623 212.268 143.587 212.338 143.564L212.5 144.098C212.38 144.148 212.224 144.198 212.03 144.248C211.839 144.299 211.634 144.34 211.416 144.373C211.199 144.406 210.992 144.422 210.795 144.422ZM210.459 142.114C210.718 142.114 210.928 142.062 211.088 141.958C211.248 141.853 211.365 141.696 211.439 141.485C211.512 141.275 211.549 141.009 211.549 140.688C211.549 140.363 211.508 140.11 211.427 139.928C211.346 139.747 211.226 139.619 211.068 139.546C210.909 139.472 210.714 139.435 210.482 139.435C210.262 139.435 210.073 139.493 209.917 139.609C209.762 139.723 209.643 139.876 209.56 140.067C209.479 140.257 209.438 140.464 209.438 140.688C209.438 140.935 209.471 141.168 209.537 141.387C209.603 141.603 209.71 141.779 209.859 141.914C210.008 142.048 210.208 142.114 210.459 142.114ZM216.888 142.949C216.459 142.949 216.088 142.855 215.777 142.665C215.468 142.474 215.229 142.207 215.061 141.865C214.895 141.521 214.812 141.121 214.812 140.665C214.812 140.209 214.895 139.806 215.061 139.459C215.229 139.109 215.463 138.836 215.763 138.641C216.064 138.444 216.416 138.345 216.818 138.345C217.05 138.345 217.279 138.384 217.505 138.461C217.731 138.538 217.937 138.664 218.123 138.838C218.308 139.01 218.456 139.238 218.566 139.522C218.677 139.806 218.732 140.156 218.732 140.572V140.862H215.299V140.27H218.036C218.036 140.019 217.986 139.795 217.885 139.598C217.786 139.401 217.645 139.245 217.462 139.131C217.28 139.017 217.065 138.96 216.818 138.96C216.546 138.96 216.31 139.028 216.111 139.163C215.913 139.296 215.762 139.47 215.655 139.685C215.549 139.899 215.496 140.129 215.496 140.375V140.769C215.496 141.105 215.554 141.391 215.67 141.624C215.788 141.856 215.951 142.033 216.16 142.155C216.369 142.275 216.611 142.335 216.888 142.335C217.067 142.335 217.23 142.31 217.375 142.259C217.522 142.207 217.648 142.13 217.755 142.027C217.861 141.923 217.943 141.794 218.001 141.639L218.662 141.824C218.593 142.049 218.476 142.246 218.311 142.416C218.147 142.584 217.944 142.716 217.702 142.81C217.461 142.903 217.189 142.949 216.888 142.949ZM220.163 138.403L221.23 140.224L222.297 138.403H223.086L221.648 140.63L223.086 142.857H222.297L221.23 141.129L220.163 142.857H219.375L220.79 140.63L219.375 138.403H220.163ZM225.373 142.961C225.091 142.961 224.834 142.908 224.604 142.802C224.374 142.693 224.192 142.538 224.056 142.335C223.921 142.13 223.854 141.882 223.854 141.593C223.854 141.337 223.904 141.131 224.004 140.972C224.105 140.812 224.239 140.686 224.407 140.595C224.575 140.504 224.761 140.437 224.964 140.392C225.169 140.346 225.375 140.309 225.582 140.282C225.852 140.247 226.072 140.221 226.24 140.204C226.41 140.184 226.534 140.152 226.611 140.108C226.69 140.064 226.73 139.986 226.73 139.876V139.853C226.73 139.567 226.651 139.345 226.495 139.186C226.34 139.028 226.105 138.948 225.79 138.948C225.464 138.948 225.208 139.02 225.022 139.163C224.836 139.306 224.706 139.459 224.631 139.621L223.981 139.389C224.097 139.118 224.252 138.908 224.445 138.757C224.64 138.604 224.853 138.498 225.083 138.438C225.315 138.376 225.543 138.345 225.767 138.345C225.91 138.345 226.074 138.363 226.26 138.397C226.448 138.43 226.628 138.499 226.802 138.603C226.978 138.708 227.124 138.865 227.24 139.076C227.356 139.287 227.414 139.569 227.414 139.922V142.857H226.73V142.254H226.695C226.649 142.35 226.571 142.454 226.463 142.564C226.355 142.674 226.211 142.768 226.031 142.845C225.851 142.922 225.632 142.961 225.373 142.961ZM225.477 142.346C225.748 142.346 225.976 142.293 226.161 142.187C226.349 142.081 226.49 141.943 226.585 141.775C226.681 141.607 226.73 141.43 226.73 141.245V140.618C226.701 140.653 226.637 140.685 226.538 140.714C226.442 140.741 226.33 140.765 226.202 140.786C226.076 140.806 225.954 140.823 225.834 140.839C225.716 140.852 225.62 140.864 225.547 140.873C225.369 140.897 225.203 140.934 225.048 140.987C224.895 141.037 224.772 141.113 224.677 141.216C224.584 141.316 224.538 141.453 224.538 141.627C224.538 141.865 224.626 142.045 224.802 142.167C224.979 142.286 225.205 142.346 225.477 142.346ZM228.663 142.857V138.403H229.324V139.099H229.382C229.475 138.861 229.625 138.677 229.831 138.545C230.038 138.412 230.287 138.345 230.577 138.345C230.87 138.345 231.115 138.412 231.31 138.545C231.507 138.677 231.661 138.861 231.771 139.099H231.818C231.932 138.869 232.103 138.686 232.331 138.551C232.559 138.414 232.832 138.345 233.151 138.345C233.549 138.345 233.875 138.47 234.128 138.719C234.382 138.967 234.508 139.352 234.508 139.876V142.857H233.824V139.876C233.824 139.547 233.734 139.313 233.554 139.172C233.375 139.03 233.163 138.96 232.919 138.96C232.606 138.96 232.364 139.055 232.192 139.244C232.02 139.431 231.934 139.669 231.934 139.957V142.857H231.238V139.806C231.238 139.553 231.156 139.349 230.991 139.195C230.827 139.038 230.615 138.96 230.356 138.96C230.178 138.96 230.012 139.007 229.858 139.102C229.705 139.197 229.581 139.328 229.486 139.496C229.394 139.662 229.347 139.855 229.347 140.073V142.857H228.663ZM235.759 144.527V138.403H236.42V139.111H236.502C236.552 139.033 236.621 138.935 236.71 138.815C236.801 138.693 236.931 138.585 237.099 138.49C237.269 138.393 237.499 138.345 237.789 138.345C238.164 138.345 238.494 138.439 238.781 138.626C239.067 138.814 239.29 139.08 239.45 139.424C239.611 139.768 239.691 140.174 239.691 140.642C239.691 141.113 239.611 141.522 239.45 141.868C239.29 142.212 239.068 142.479 238.783 142.668C238.499 142.856 238.172 142.949 237.801 142.949C237.514 142.949 237.285 142.902 237.113 142.807C236.941 142.711 236.809 142.602 236.716 142.48C236.623 142.356 236.552 142.254 236.502 142.172H236.444V144.527H235.759ZM236.432 140.63C236.432 140.966 236.481 141.263 236.58 141.52C236.678 141.775 236.822 141.975 237.012 142.12C237.201 142.263 237.433 142.335 237.708 142.335C237.994 142.335 238.233 142.259 238.424 142.109C238.617 141.956 238.762 141.751 238.859 141.494C238.957 141.235 239.007 140.947 239.007 140.63C239.007 140.317 238.958 140.035 238.862 139.783C238.767 139.53 238.623 139.33 238.43 139.183C238.238 139.034 237.998 138.96 237.708 138.96C237.429 138.96 237.196 139.03 237.006 139.172C236.817 139.311 236.674 139.506 236.577 139.757C236.48 140.007 236.432 140.297 236.432 140.63ZM241.419 136.919V142.857H240.735V136.919H241.419ZM244.54 142.949C244.11 142.949 243.74 142.855 243.429 142.665C243.12 142.474 242.881 142.207 242.713 141.865C242.547 141.521 242.464 141.121 242.464 140.665C242.464 140.209 242.547 139.806 242.713 139.459C242.881 139.109 243.115 138.836 243.415 138.641C243.716 138.444 244.068 138.345 244.47 138.345C244.702 138.345 244.931 138.384 245.157 138.461C245.383 138.538 245.589 138.664 245.775 138.838C245.96 139.01 246.108 139.238 246.218 139.522C246.328 139.806 246.384 140.156 246.384 140.572V140.862H242.951V140.27H245.688C245.688 140.019 245.637 139.795 245.537 139.598C245.438 139.401 245.297 139.245 245.114 139.131C244.932 139.017 244.717 138.96 244.47 138.96C244.197 138.96 243.962 139.028 243.762 139.163C243.565 139.296 243.414 139.47 243.307 139.685C243.201 139.899 243.148 140.129 243.148 140.375V140.769C243.148 141.105 243.206 141.391 243.322 141.624C243.44 141.856 243.603 142.033 243.812 142.155C244.021 142.275 244.263 142.335 244.54 142.335C244.719 142.335 244.882 142.31 245.027 142.259C245.174 142.207 245.3 142.13 245.406 142.027C245.513 141.923 245.595 141.794 245.653 141.639L246.314 141.824C246.244 142.049 246.127 142.246 245.963 142.416C245.799 142.584 245.596 142.716 245.354 142.81C245.113 142.903 244.841 142.949 244.54 142.949ZM247.923 142.903C247.78 142.903 247.657 142.852 247.555 142.749C247.452 142.647 247.401 142.524 247.401 142.381C247.401 142.238 247.452 142.115 247.555 142.013C247.657 141.911 247.78 141.859 247.923 141.859C248.066 141.859 248.189 141.911 248.291 142.013C248.394 142.115 248.445 142.238 248.445 142.381C248.445 142.476 248.421 142.563 248.373 142.642C248.326 142.721 248.263 142.785 248.184 142.833C248.107 142.88 248.02 142.903 247.923 142.903ZM251.482 142.949C251.065 142.949 250.705 142.851 250.404 142.654C250.102 142.457 249.87 142.185 249.708 141.839C249.545 141.493 249.464 141.098 249.464 140.653C249.464 140.201 249.547 139.802 249.714 139.456C249.882 139.108 250.116 138.836 250.415 138.641C250.717 138.444 251.069 138.345 251.471 138.345C251.784 138.345 252.066 138.403 252.317 138.519C252.569 138.635 252.774 138.797 252.935 139.006C253.095 139.215 253.195 139.459 253.233 139.737H252.549C252.497 139.534 252.381 139.354 252.201 139.198C252.023 139.039 251.784 138.96 251.482 138.96C251.215 138.96 250.982 139.029 250.781 139.169C250.581 139.306 250.426 139.5 250.314 139.751C250.204 140.001 250.148 140.294 250.148 140.63C250.148 140.974 250.203 141.274 250.311 141.529C250.421 141.784 250.576 141.982 250.775 142.123C250.976 142.264 251.212 142.335 251.482 142.335C251.66 142.335 251.821 142.304 251.966 142.242C252.111 142.18 252.234 142.091 252.335 141.975C252.435 141.859 252.507 141.72 252.549 141.558H253.233C253.195 141.821 253.099 142.057 252.946 142.268C252.796 142.477 252.596 142.643 252.346 142.767C252.099 142.889 251.811 142.949 251.482 142.949ZM256.043 142.949C255.641 142.949 255.288 142.854 254.985 142.662C254.683 142.471 254.447 142.203 254.277 141.859C254.109 141.515 254.025 141.113 254.025 140.653C254.025 140.189 254.109 139.784 254.277 139.438C254.447 139.092 254.683 138.824 254.985 138.632C255.288 138.441 255.641 138.345 256.043 138.345C256.445 138.345 256.797 138.441 257.098 138.632C257.402 138.824 257.638 139.092 257.806 139.438C257.976 139.784 258.061 140.189 258.061 140.653C258.061 141.113 257.976 141.515 257.806 141.859C257.638 142.203 257.402 142.471 257.098 142.662C256.797 142.854 256.445 142.949 256.043 142.949ZM256.043 142.335C256.348 142.335 256.6 142.257 256.797 142.1C256.994 141.943 257.14 141.738 257.235 141.482C257.329 141.227 257.377 140.951 257.377 140.653C257.377 140.355 257.329 140.078 257.235 139.821C257.14 139.564 256.994 139.356 256.797 139.198C256.6 139.039 256.348 138.96 256.043 138.96C255.738 138.96 255.486 139.039 255.289 139.198C255.092 139.356 254.946 139.564 254.851 139.821C254.757 140.078 254.709 140.355 254.709 140.653C254.709 140.951 254.757 141.227 254.851 141.482C254.946 141.738 255.092 141.943 255.289 142.1C255.486 142.257 255.738 142.335 256.043 142.335ZM259.106 142.857V138.403H259.767V139.099H259.825C259.917 138.861 260.067 138.677 260.274 138.545C260.481 138.412 260.729 138.345 261.019 138.345C261.313 138.345 261.557 138.412 261.753 138.545C261.95 138.677 262.104 138.861 262.214 139.099H262.26C262.374 138.869 262.545 138.686 262.773 138.551C263.001 138.414 263.275 138.345 263.594 138.345C263.992 138.345 264.318 138.47 264.571 138.719C264.824 138.967 264.951 139.352 264.951 139.876V142.857H264.267V139.876C264.267 139.547 264.177 139.313 263.997 139.172C263.817 139.03 263.605 138.96 263.362 138.96C263.049 138.96 262.806 139.055 262.634 139.244C262.462 139.431 262.376 139.669 262.376 139.957V142.857H261.68V139.806C261.68 139.553 261.598 139.349 261.434 139.195C261.269 139.038 261.058 138.96 260.799 138.96C260.621 138.96 260.455 139.007 260.3 139.102C260.147 139.197 260.024 139.328 259.929 139.496C259.836 139.662 259.79 139.855 259.79 140.073V142.857H259.106Z" fill="#ADADB1"/>
+<g clip-path="url(#clip4_7233_4628)">
+<rect x="36.7334" y="163.018" width="18.6624" height="18.6624" rx="9.3312" fill="#6C6C71"/>
+<path d="M45.7725 172.475C45.7725 173.018 45.6731 173.485 45.4742 173.876C45.2754 174.266 45.0029 174.565 44.6566 174.776C44.312 174.985 43.9202 175.089 43.4811 175.089C43.0404 175.089 42.6469 174.985 42.3006 174.776C41.956 174.565 41.6843 174.265 41.4855 173.874C41.2866 173.483 41.1872 173.016 41.1872 172.475C41.1872 171.931 41.2866 171.465 41.4855 171.075C41.6843 170.684 41.956 170.384 42.3006 170.176C42.6469 169.965 43.0404 169.86 43.4811 169.86C43.9202 169.86 44.312 169.965 44.6566 170.176C45.0029 170.384 45.2754 170.684 45.4742 171.075C45.6731 171.465 45.7725 171.931 45.7725 172.475ZM45.012 172.475C45.012 172.06 44.9449 171.712 44.8107 171.428C44.6781 171.143 44.4959 170.928 44.2639 170.782C44.0336 170.635 43.7727 170.561 43.4811 170.561C43.1878 170.561 42.9261 170.635 42.6958 170.782C42.4655 170.928 42.2832 171.143 42.149 171.428C42.0165 171.712 41.9502 172.06 41.9502 172.475C41.9502 172.889 42.0165 173.238 42.149 173.523C42.2832 173.807 42.4655 174.022 42.6958 174.169C42.9261 174.315 43.1878 174.388 43.4811 174.388C43.7727 174.388 44.0336 174.315 44.2639 174.169C44.4959 174.022 44.6781 173.807 44.8107 173.523C44.9449 173.238 45.012 172.889 45.012 172.475ZM49.5059 171.267C49.4794 171.031 49.37 170.849 49.1779 170.72C48.9857 170.589 48.7438 170.524 48.4522 170.524C48.2434 170.524 48.0628 170.557 47.9104 170.623C47.758 170.688 47.6395 170.777 47.555 170.891C47.4722 171.004 47.4307 171.133 47.4307 171.277C47.4307 171.398 47.4589 171.502 47.5152 171.59C47.5732 171.678 47.6486 171.751 47.7414 171.811C47.8358 171.869 47.9369 171.918 48.0446 171.958C48.1523 171.996 48.2558 172.027 48.3552 172.052L48.8523 172.181C49.0147 172.221 49.1812 172.275 49.3518 172.343C49.5225 172.411 49.6807 172.5 49.8265 172.611C49.9723 172.722 50.0899 172.86 50.1794 173.024C50.2705 173.188 50.3161 173.384 50.3161 173.613C50.3161 173.901 50.2415 174.157 50.0924 174.381C49.945 174.604 49.7304 174.781 49.4487 174.91C49.1687 175.039 48.8299 175.104 48.4323 175.104C48.0512 175.104 47.7215 175.043 47.4432 174.923C47.1648 174.802 46.947 174.63 46.7896 174.408C46.6322 174.184 46.5452 173.919 46.5286 173.613H47.299C47.3139 173.797 47.3736 173.95 47.478 174.073C47.584 174.194 47.719 174.284 47.8831 174.343C48.0487 174.401 48.2302 174.43 48.4273 174.43C48.6444 174.43 48.8374 174.396 49.0064 174.329C49.177 174.259 49.3112 174.163 49.409 174.04C49.5067 173.916 49.5556 173.771 49.5556 173.605C49.5556 173.455 49.5125 173.331 49.4264 173.235C49.3419 173.139 49.2267 173.059 49.0809 172.996C48.9368 172.934 48.7736 172.878 48.5913 172.83L47.9899 172.666C47.5823 172.555 47.2593 172.392 47.0207 172.176C46.7838 171.961 46.6653 171.676 46.6653 171.321C46.6653 171.028 46.7448 170.772 46.9039 170.553C47.0629 170.335 47.2783 170.165 47.55 170.044C47.8218 169.921 48.1283 169.86 48.4696 169.86C48.8142 169.86 49.1182 169.921 49.3816 170.042C49.6467 170.162 49.8555 170.329 50.0079 170.541C50.1604 170.751 50.2399 170.993 50.2465 171.267H49.5059Z" fill="#373B4D"/>
+</g>
+<path d="M68.1238 172.38C68.1238 173.006 68.0107 173.548 67.7846 174.004C67.5584 174.46 67.2482 174.812 66.8539 175.059C66.4595 175.307 66.0092 175.43 65.5027 175.43C64.9963 175.43 64.5459 175.307 64.1516 175.059C63.7573 174.812 63.447 174.46 63.2209 174.004C62.9947 173.548 62.8816 173.006 62.8816 172.38C62.8816 171.754 62.9947 171.213 63.2209 170.756C63.447 170.3 63.7573 169.948 64.1516 169.701C64.5459 169.454 64.9963 169.33 65.5027 169.33C66.0092 169.33 66.4595 169.454 66.8539 169.701C67.2482 169.948 67.5584 170.3 67.7846 170.756C68.0107 171.213 68.1238 171.754 68.1238 172.38ZM67.4279 172.38C67.4279 171.866 67.3419 171.432 67.1699 171.078C66.9998 170.724 66.7688 170.457 66.4769 170.275C66.187 170.093 65.8623 170.003 65.5027 170.003C65.1432 170.003 64.8175 170.093 64.5256 170.275C64.2357 170.457 64.0047 170.724 63.8326 171.078C63.6625 171.432 63.5775 171.866 63.5775 172.38C63.5775 172.894 63.6625 173.328 63.8326 173.682C64.0047 174.036 64.2357 174.303 64.5256 174.485C64.8175 174.667 65.1432 174.758 65.5027 174.758C65.8623 174.758 66.187 174.667 66.4769 174.485C66.7688 174.303 66.9998 174.036 67.1699 173.682C67.3419 173.328 67.4279 172.894 67.4279 172.38ZM69.9244 169.411V175.349H69.2401V169.411H69.9244ZM71.1776 175.349V170.896H71.8619V175.349H71.1776ZM71.5256 170.153C71.3922 170.153 71.2772 170.108 71.1805 170.017C71.0858 169.926 71.0385 169.817 71.0385 169.689C71.0385 169.562 71.0858 169.453 71.1805 169.362C71.2772 169.271 71.3922 169.225 71.5256 169.225C71.6589 169.225 71.773 169.271 71.8677 169.362C71.9643 169.453 72.0127 169.562 72.0127 169.689C72.0127 169.817 71.9643 169.926 71.8677 170.017C71.773 170.108 71.6589 170.153 71.5256 170.153ZM76.7569 170.896L75.11 175.349H74.4141L72.7672 170.896H73.5095L74.7389 174.444H74.7853L76.0146 170.896H76.7569ZM77.66 175.349V170.896H78.3443V175.349H77.66ZM78.008 170.153C77.8746 170.153 77.7596 170.108 77.6629 170.017C77.5682 169.926 77.5209 169.817 77.5209 169.689C77.5209 169.562 77.5682 169.453 77.6629 169.362C77.7596 169.271 77.8746 169.225 78.008 169.225C78.1413 169.225 78.2554 169.271 78.3501 169.362C78.4468 169.453 78.4951 169.562 78.4951 169.689C78.4951 169.817 78.4468 169.926 78.3501 170.017C78.2554 170.108 78.1413 170.153 78.008 170.153ZM80.9081 175.453C80.6259 175.453 80.3698 175.4 80.1398 175.294C79.9098 175.186 79.7271 175.03 79.5918 174.827C79.4565 174.622 79.3888 174.375 79.3888 174.085C79.3888 173.83 79.4391 173.623 79.5396 173.464C79.6401 173.304 79.7745 173.178 79.9426 173.088C80.1108 172.997 80.2963 172.929 80.4993 172.885C80.7042 172.838 80.9101 172.801 81.1169 172.774C81.3875 172.74 81.6069 172.713 81.7751 172.696C81.9452 172.677 82.0689 172.645 82.1462 172.6C82.2254 172.556 82.2651 172.479 82.2651 172.368V172.345C82.2651 172.059 82.1868 171.837 82.0302 171.678C81.8756 171.52 81.6407 171.441 81.3256 171.441C80.999 171.441 80.7429 171.512 80.5573 171.655C80.3717 171.798 80.2413 171.951 80.1659 172.113L79.5164 171.881C79.6324 171.611 79.787 171.4 79.9803 171.249C80.1755 171.097 80.3882 170.99 80.6182 170.93C80.8501 170.868 81.0782 170.838 81.3025 170.838C81.4455 170.838 81.6098 170.855 81.7954 170.89C81.9829 170.923 82.1636 170.991 82.3375 171.096C82.5134 171.2 82.6594 171.358 82.7754 171.568C82.8913 171.779 82.9493 172.061 82.9493 172.415V175.349H82.2651V174.746H82.2303C82.1839 174.843 82.1066 174.946 81.9983 175.056C81.8901 175.166 81.7461 175.26 81.5663 175.337C81.3865 175.415 81.1671 175.453 80.9081 175.453ZM81.0125 174.839C81.2831 174.839 81.5112 174.786 81.6968 174.679C81.8843 174.573 82.0254 174.436 82.1201 174.268C82.2167 174.099 82.2651 173.923 82.2651 173.737V173.111C82.2361 173.145 82.1723 173.177 82.0737 173.206C81.9771 173.233 81.8649 173.258 81.7374 173.279C81.6117 173.298 81.489 173.316 81.3691 173.331C81.2512 173.345 81.1555 173.356 81.0821 173.366C80.9043 173.389 80.738 173.427 80.5834 173.479C80.4307 173.529 80.307 173.606 80.2123 173.708C80.1195 173.808 80.0731 173.946 80.0731 174.12C80.0731 174.357 80.161 174.537 80.3369 174.659C80.5148 174.779 80.74 174.839 81.0125 174.839ZM89.8348 170.896C89.8 170.602 89.6589 170.374 89.4114 170.211C89.164 170.049 88.8605 169.968 88.501 169.968C88.2381 169.968 88.0081 170.01 87.8109 170.095C87.6157 170.18 87.463 170.297 87.3528 170.446C87.2446 170.595 87.1905 170.764 87.1905 170.954C87.1905 171.112 87.2282 171.248 87.3035 171.362C87.3809 171.474 87.4794 171.568 87.5993 171.644C87.7191 171.717 87.8448 171.778 87.9762 171.826C88.1077 171.873 88.2285 171.91 88.3386 171.939L88.9417 172.102C89.0964 172.142 89.2684 172.198 89.4578 172.27C89.6492 172.341 89.8319 172.439 90.0058 172.563C90.1817 172.684 90.3267 172.841 90.4407 173.032C90.5548 173.224 90.6118 173.459 90.6118 173.737C90.6118 174.058 90.5277 174.348 90.3596 174.607C90.1933 174.866 89.9498 175.072 89.6289 175.224C89.31 175.377 88.9224 175.453 88.4662 175.453C88.041 175.453 87.6727 175.385 87.3615 175.248C87.0523 175.11 86.8087 174.919 86.6309 174.673C86.455 174.428 86.3554 174.143 86.3322 173.818H87.0745C87.0938 174.042 87.1692 174.228 87.3006 174.375C87.434 174.52 87.6022 174.628 87.8052 174.7C88.01 174.769 88.2304 174.804 88.4662 174.804C88.7407 174.804 88.9872 174.76 89.2056 174.671C89.424 174.58 89.597 174.454 89.7246 174.294C89.8521 174.131 89.9159 173.942 89.9159 173.725C89.9159 173.528 89.8608 173.368 89.7507 173.244C89.6405 173.12 89.4955 173.02 89.3158 172.943C89.136 172.865 88.9417 172.798 88.733 172.74L88.0023 172.531C87.5384 172.397 87.1711 172.207 86.9005 171.96C86.6299 171.712 86.4946 171.388 86.4946 170.988C86.4946 170.656 86.5845 170.366 86.7643 170.118C86.946 169.869 87.1895 169.676 87.4949 169.539C87.8023 169.399 88.1454 169.33 88.5242 169.33C88.9069 169.33 89.2471 169.398 89.5448 169.536C89.8425 169.671 90.0783 169.857 90.2523 170.092C90.4282 170.328 90.521 170.596 90.5306 170.896H89.8348ZM91.7013 175.349V170.896H92.3623V171.591H92.4203C92.5131 171.354 92.6629 171.169 92.8697 171.038C93.0766 170.904 93.3249 170.838 93.6149 170.838C93.9087 170.838 94.1532 170.904 94.3484 171.038C94.5456 171.169 94.6993 171.354 94.8095 171.591H94.8558C94.9699 171.361 95.141 171.179 95.369 171.043C95.5971 170.906 95.8706 170.838 96.1896 170.838C96.5878 170.838 96.9135 170.962 97.1667 171.212C97.4199 171.459 97.5465 171.845 97.5465 172.368V175.349H96.8623V172.368C96.8623 172.04 96.7724 171.805 96.5926 171.664C96.4128 171.523 96.2012 171.452 95.9576 171.452C95.6445 171.452 95.4019 171.547 95.2299 171.736C95.0578 171.924 94.9718 172.162 94.9718 172.45V175.349H94.276V172.299C94.276 172.046 94.1938 171.842 94.0295 171.687C93.8652 171.531 93.6535 171.452 93.3945 171.452C93.2167 171.452 93.0505 171.5 92.8958 171.594C92.7431 171.689 92.6194 171.82 92.5247 171.989C92.4319 172.155 92.3855 172.347 92.3855 172.566V175.349H91.7013ZM98.7976 175.349V170.896H99.4819V175.349H98.7976ZM99.1456 170.153C99.0122 170.153 98.8972 170.108 98.8005 170.017C98.7058 169.926 98.6584 169.817 98.6584 169.689C98.6584 169.562 98.7058 169.453 98.8005 169.362C98.8972 169.271 99.0122 169.225 99.1456 169.225C99.2789 169.225 99.393 169.271 99.4877 169.362C99.5843 169.453 99.6327 169.562 99.6327 169.689C99.6327 169.817 99.5843 169.926 99.4877 170.017C99.393 170.108 99.2789 170.153 99.1456 170.153ZM102.672 170.896V171.475H100.364V170.896H102.672ZM101.037 169.829H101.721V174.073C101.721 174.267 101.749 174.412 101.805 174.508C101.863 174.603 101.936 174.667 102.025 174.7C102.116 174.731 102.212 174.746 102.312 174.746C102.388 174.746 102.45 174.742 102.498 174.734C102.546 174.725 102.585 174.717 102.614 174.711L102.753 175.326C102.707 175.343 102.642 175.361 102.559 175.378C102.476 175.397 102.37 175.407 102.243 175.407C102.05 175.407 101.86 175.365 101.675 175.282C101.491 175.199 101.338 175.073 101.216 174.903C101.097 174.732 101.037 174.518 101.037 174.259V169.829ZM104.481 172.67V175.349H103.797V169.411H104.481V171.591H104.539C104.644 171.361 104.8 171.179 105.009 171.043C105.22 170.906 105.5 170.838 105.85 170.838C106.153 170.838 106.419 170.898 106.647 171.02C106.875 171.14 107.052 171.325 107.178 171.574C107.305 171.821 107.369 172.136 107.369 172.519V175.349H106.685V172.566C106.685 172.212 106.593 171.938 106.409 171.745C106.228 171.55 105.975 171.452 105.653 171.452C105.428 171.452 105.227 171.5 105.05 171.594C104.874 171.689 104.734 171.827 104.632 172.009C104.531 172.191 104.481 172.411 104.481 172.67Z" fill="#ADADB1"/>
+<path d="M151.727 175.609C151.324 175.609 150.972 175.513 150.668 175.322C150.367 175.13 150.131 174.863 149.961 174.518C149.793 174.174 149.709 173.772 149.709 173.312C149.709 172.848 149.793 172.443 149.961 172.097C150.131 171.751 150.367 171.483 150.668 171.291C150.972 171.1 151.324 171.004 151.727 171.004C152.129 171.004 152.48 171.1 152.782 171.291C153.085 171.483 153.321 171.751 153.489 172.097C153.659 172.443 153.745 172.848 153.745 173.312C153.745 173.772 153.659 174.174 153.489 174.518C153.321 174.863 153.085 175.13 152.782 175.322C152.48 175.513 152.129 175.609 151.727 175.609ZM151.727 174.994C152.032 174.994 152.283 174.916 152.48 174.759C152.678 174.603 152.823 174.397 152.918 174.142C153.013 173.886 153.06 173.61 153.06 173.312C153.06 173.015 153.013 172.737 152.918 172.48C152.823 172.223 152.678 172.015 152.48 171.857C152.283 171.698 152.032 171.619 151.727 171.619C151.421 171.619 151.17 171.698 150.973 171.857C150.776 172.015 150.63 172.223 150.535 172.48C150.44 172.737 150.393 173.015 150.393 173.312C150.393 173.61 150.44 173.886 150.535 174.142C150.63 174.397 150.776 174.603 150.973 174.759C151.17 174.916 151.421 174.994 151.727 174.994ZM155.473 169.578V175.516H154.789V169.578H155.473ZM156.727 175.516V171.062H157.411V175.516H156.727ZM157.075 170.32C156.941 170.32 156.826 170.275 156.73 170.184C156.635 170.093 156.587 169.984 156.587 169.856C156.587 169.729 156.635 169.619 156.73 169.529C156.826 169.438 156.941 169.392 157.075 169.392C157.208 169.392 157.322 169.438 157.417 169.529C157.513 169.619 157.562 169.729 157.562 169.856C157.562 169.984 157.513 170.093 157.417 170.184C157.322 170.275 157.208 170.32 157.075 170.32ZM162.306 171.062L160.659 175.516H159.963L158.316 171.062H159.058L160.288 174.611H160.334L161.564 171.062H162.306ZM163.209 175.516V171.062H163.893V175.516H163.209ZM163.557 170.32C163.424 170.32 163.309 170.275 163.212 170.184C163.117 170.093 163.07 169.984 163.07 169.856C163.07 169.729 163.117 169.619 163.212 169.529C163.309 169.438 163.424 169.392 163.557 169.392C163.69 169.392 163.804 169.438 163.899 169.529C163.996 169.619 164.044 169.729 164.044 169.856C164.044 169.984 163.996 170.093 163.899 170.184C163.804 170.275 163.69 170.32 163.557 170.32ZM166.457 175.62C166.175 175.62 165.919 175.567 165.689 175.461C165.459 175.353 165.276 175.197 165.141 174.994C165.005 174.789 164.938 174.542 164.938 174.252C164.938 173.997 164.988 173.79 165.089 173.631C165.189 173.471 165.323 173.345 165.492 173.254C165.66 173.163 165.845 173.096 166.048 173.051C166.253 173.005 166.459 172.968 166.666 172.941C166.936 172.906 167.156 172.88 167.324 172.863C167.494 172.844 167.618 172.812 167.695 172.767C167.774 172.723 167.814 172.645 167.814 172.535V172.512C167.814 172.226 167.736 172.004 167.579 171.845C167.425 171.687 167.19 171.607 166.875 171.607C166.548 171.607 166.292 171.679 166.106 171.822C165.921 171.965 165.79 172.118 165.715 172.28L165.065 172.048C165.181 171.778 165.336 171.567 165.529 171.416C165.725 171.263 165.937 171.157 166.167 171.097C166.399 171.035 166.627 171.004 166.851 171.004C166.994 171.004 167.159 171.022 167.344 171.057C167.532 171.089 167.713 171.158 167.887 171.262C168.062 171.367 168.208 171.524 168.324 171.735C168.44 171.946 168.498 172.228 168.498 172.582V175.516H167.814V174.913H167.779C167.733 175.009 167.656 175.113 167.547 175.223C167.439 175.333 167.295 175.427 167.115 175.504C166.936 175.582 166.716 175.62 166.457 175.62ZM166.561 175.006C166.832 175.006 167.06 174.952 167.246 174.846C167.433 174.74 167.574 174.603 167.669 174.434C167.766 174.266 167.814 174.089 167.814 173.904V173.278C167.785 173.312 167.721 173.344 167.623 173.373C167.526 173.4 167.414 173.424 167.286 173.446C167.161 173.465 167.038 173.482 166.918 173.498C166.8 173.511 166.705 173.523 166.631 173.533C166.453 173.556 166.287 173.594 166.132 173.646C165.98 173.696 165.856 173.772 165.761 173.875C165.668 173.975 165.622 174.113 165.622 174.287C165.622 174.524 165.71 174.704 165.886 174.826C166.064 174.946 166.289 175.006 166.561 175.006ZM170.246 175.562C170.103 175.562 169.98 175.511 169.878 175.409C169.775 175.306 169.724 175.183 169.724 175.04C169.724 174.897 169.775 174.775 169.878 174.672C169.98 174.57 170.103 174.518 170.246 174.518C170.389 174.518 170.512 174.57 170.614 174.672C170.717 174.775 170.768 174.897 170.768 175.04C170.768 175.135 170.744 175.222 170.695 175.301C170.649 175.381 170.586 175.444 170.507 175.493C170.43 175.539 170.343 175.562 170.246 175.562ZM175.15 172.06L174.536 172.234C174.497 172.131 174.44 172.032 174.365 171.935C174.291 171.837 174.191 171.755 174.063 171.692C173.935 171.628 173.772 171.596 173.573 171.596C173.3 171.596 173.073 171.659 172.892 171.784C172.712 171.908 172.622 172.066 172.622 172.257C172.622 172.427 172.684 172.561 172.808 172.66C172.931 172.759 173.125 172.841 173.387 172.906L174.049 173.069C174.447 173.165 174.743 173.313 174.939 173.512C175.134 173.71 175.232 173.964 175.232 174.275C175.232 174.53 175.158 174.758 175.011 174.959C174.866 175.16 174.663 175.319 174.402 175.435C174.141 175.551 173.838 175.609 173.492 175.609C173.038 175.609 172.662 175.51 172.364 175.313C172.066 175.116 171.878 174.828 171.799 174.449L172.448 174.287C172.51 174.526 172.627 174.706 172.799 174.826C172.973 174.946 173.2 175.006 173.48 175.006C173.799 175.006 174.052 174.938 174.24 174.803C174.429 174.665 174.524 174.501 174.524 174.31C174.524 174.155 174.47 174.026 174.362 173.921C174.253 173.815 174.087 173.736 173.863 173.683L173.121 173.509C172.713 173.413 172.413 173.263 172.222 173.06C172.032 172.855 171.938 172.599 171.938 172.292C171.938 172.04 172.008 171.818 172.149 171.625C172.292 171.432 172.487 171.28 172.732 171.17C172.98 171.059 173.26 171.004 173.573 171.004C174.014 171.004 174.36 171.101 174.611 171.294C174.864 171.488 175.044 171.743 175.15 172.06ZM176.262 175.516V171.062H176.923V171.758H176.981C177.073 171.52 177.223 171.336 177.43 171.204C177.637 171.071 177.885 171.004 178.175 171.004C178.469 171.004 178.713 171.071 178.909 171.204C179.106 171.336 179.26 171.52 179.37 171.758H179.416C179.53 171.528 179.701 171.346 179.929 171.21C180.157 171.073 180.431 171.004 180.75 171.004C181.148 171.004 181.474 171.129 181.727 171.378C181.98 171.626 182.107 172.011 182.107 172.535V175.516H181.423V172.535C181.423 172.207 181.333 171.972 181.153 171.831C180.973 171.69 180.761 171.619 180.518 171.619C180.205 171.619 179.962 171.714 179.79 171.903C179.618 172.091 179.532 172.328 179.532 172.616V175.516H178.836V172.466C178.836 172.212 178.754 172.009 178.59 171.854C178.425 171.697 178.214 171.619 177.955 171.619C177.777 171.619 177.611 171.666 177.456 171.761C177.303 171.856 177.18 171.987 177.085 172.155C176.992 172.322 176.946 172.514 176.946 172.732V175.516H176.262ZM183.358 175.516V171.062H184.042V175.516H183.358ZM183.706 170.32C183.572 170.32 183.457 170.275 183.361 170.184C183.266 170.093 183.219 169.984 183.219 169.856C183.219 169.729 183.266 169.619 183.361 169.529C183.457 169.438 183.572 169.392 183.706 169.392C183.839 169.392 183.953 169.438 184.048 169.529C184.145 169.619 184.193 169.729 184.193 169.856C184.193 169.984 184.145 170.093 184.048 170.184C183.953 170.275 183.839 170.32 183.706 170.32ZM187.232 171.062V171.642H184.924V171.062H187.232ZM185.597 169.995H186.281V174.24C186.281 174.433 186.309 174.578 186.365 174.675C186.423 174.77 186.497 174.834 186.586 174.866C186.677 174.897 186.772 174.913 186.873 174.913C186.948 174.913 187.01 174.909 187.058 174.901C187.107 174.892 187.145 174.884 187.174 174.878L187.313 175.493C187.267 175.51 187.202 175.527 187.119 175.545C187.036 175.564 186.931 175.574 186.803 175.574C186.61 175.574 186.42 175.532 186.235 175.449C186.051 175.366 185.899 175.239 185.777 175.069C185.657 174.899 185.597 174.685 185.597 174.426V169.995ZM189.042 172.837V175.516H188.357V169.578H189.042V171.758H189.099C189.204 171.528 189.36 171.346 189.569 171.21C189.78 171.073 190.06 171.004 190.41 171.004C190.714 171.004 190.979 171.065 191.207 171.187C191.435 171.307 191.612 171.491 191.738 171.741C191.866 171.988 191.929 172.303 191.929 172.686V175.516H191.245V172.732C191.245 172.379 191.153 172.105 190.97 171.912C190.788 171.717 190.536 171.619 190.213 171.619C189.989 171.619 189.788 171.666 189.61 171.761C189.434 171.856 189.295 171.994 189.192 172.176C189.092 172.357 189.042 172.578 189.042 172.837ZM196.602 177.082C196.011 177.082 195.488 177 195.034 176.838C194.58 176.678 194.198 176.441 193.889 176.128C193.579 175.815 193.345 175.431 193.187 174.977C193.028 174.522 192.949 174.002 192.949 173.417C192.949 172.85 193.029 172.344 193.19 171.897C193.352 171.451 193.587 171.072 193.894 170.761C194.204 170.448 194.579 170.209 195.019 170.045C195.462 169.88 195.963 169.798 196.521 169.798C197.064 169.798 197.54 169.887 197.948 170.065C198.358 170.241 198.7 170.48 198.974 170.781C199.251 171.081 199.457 171.418 199.595 171.793C199.734 172.168 199.803 172.555 199.803 172.953C199.803 173.233 199.79 173.517 199.763 173.805C199.736 174.093 199.679 174.358 199.592 174.6C199.505 174.839 199.37 175.033 199.189 175.18C199.009 175.326 198.765 175.4 198.458 175.4C198.323 175.4 198.174 175.379 198.012 175.336C197.849 175.294 197.705 175.223 197.58 175.124C197.454 175.026 197.38 174.893 197.356 174.727H197.322C197.275 174.839 197.204 174.946 197.107 175.046C197.012 175.147 196.888 175.227 196.733 175.287C196.58 175.347 196.394 175.373 196.173 175.365C195.922 175.355 195.701 175.299 195.509 175.197C195.318 175.093 195.158 174.951 195.028 174.774C194.901 174.594 194.804 174.386 194.738 174.15C194.674 173.913 194.642 173.656 194.642 173.382C194.642 173.121 194.681 172.882 194.758 172.666C194.836 172.449 194.943 172.26 195.08 172.097C195.219 171.935 195.382 171.806 195.567 171.709C195.755 171.61 195.957 171.549 196.173 171.526C196.367 171.507 196.543 171.516 196.701 171.552C196.86 171.587 196.99 171.64 197.092 171.712C197.195 171.781 197.26 171.859 197.287 171.944H197.322V171.619H197.936V174.24C197.936 174.403 197.982 174.546 198.073 174.669C198.163 174.793 198.296 174.855 198.47 174.855C198.667 174.855 198.818 174.787 198.922 174.652C199.028 174.517 199.101 174.308 199.139 174.026C199.18 173.743 199.2 173.382 199.2 172.941C199.2 172.682 199.165 172.427 199.093 172.176C199.024 171.923 198.917 171.686 198.774 171.465C198.633 171.245 198.454 171.051 198.238 170.883C198.021 170.714 197.767 170.583 197.475 170.488C197.185 170.392 196.856 170.343 196.487 170.343C196.032 170.343 195.625 170.414 195.266 170.555C194.908 170.694 194.604 170.898 194.353 171.167C194.103 171.433 193.913 171.758 193.781 172.141C193.652 172.522 193.587 172.955 193.587 173.44C193.587 173.933 193.652 174.371 193.781 174.753C193.913 175.136 194.106 175.459 194.361 175.722C194.618 175.985 194.936 176.184 195.315 176.319C195.694 176.456 196.131 176.525 196.626 176.525C196.838 176.525 197.048 176.505 197.255 176.464C197.462 176.423 197.644 176.379 197.803 176.331C197.961 176.282 198.075 176.247 198.145 176.223L198.307 176.757C198.188 176.807 198.031 176.857 197.838 176.908C197.646 176.958 197.441 176.999 197.223 177.032C197.006 177.065 196.8 177.082 196.602 177.082ZM196.266 174.774C196.525 174.774 196.735 174.721 196.895 174.617C197.056 174.513 197.173 174.355 197.246 174.144C197.32 173.934 197.356 173.668 197.356 173.347C197.356 173.022 197.316 172.769 197.235 172.587C197.153 172.406 197.034 172.278 196.875 172.205C196.717 172.131 196.521 172.095 196.289 172.095C196.069 172.095 195.881 172.153 195.724 172.269C195.569 172.383 195.45 172.535 195.367 172.727C195.286 172.916 195.246 173.123 195.246 173.347C195.246 173.595 195.278 173.827 195.344 174.046C195.41 174.262 195.517 174.438 195.666 174.574C195.815 174.707 196.015 174.774 196.266 174.774ZM202.695 175.609C202.266 175.609 201.896 175.514 201.584 175.325C201.275 175.133 201.036 174.866 200.868 174.524C200.702 174.18 200.619 173.78 200.619 173.324C200.619 172.868 200.702 172.466 200.868 172.118C201.036 171.768 201.27 171.495 201.57 171.3C201.871 171.103 202.223 171.004 202.625 171.004C202.857 171.004 203.086 171.043 203.313 171.12C203.539 171.198 203.745 171.323 203.93 171.497C204.116 171.669 204.264 171.897 204.374 172.182C204.484 172.466 204.539 172.816 204.539 173.231V173.521H201.106V172.93H203.843C203.843 172.678 203.793 172.454 203.692 172.257C203.594 172.06 203.453 171.904 203.269 171.79C203.087 171.676 202.873 171.619 202.625 171.619C202.353 171.619 202.117 171.687 201.918 171.822C201.721 171.955 201.569 172.129 201.463 172.344C201.356 172.558 201.303 172.789 201.303 173.034V173.428C201.303 173.765 201.361 174.05 201.477 174.284C201.595 174.516 201.758 174.692 201.967 174.814C202.176 174.934 202.419 174.994 202.695 174.994C202.875 174.994 203.037 174.969 203.182 174.919C203.329 174.866 203.456 174.789 203.562 174.687C203.668 174.582 203.75 174.453 203.808 174.298L204.469 174.484C204.4 174.708 204.283 174.905 204.119 175.075C203.954 175.243 203.751 175.375 203.51 175.47C203.268 175.562 202.996 175.609 202.695 175.609ZM205.971 171.062L207.038 172.883L208.105 171.062H208.893L207.455 173.289L208.893 175.516H208.105L207.038 173.788L205.971 175.516H205.182L206.597 173.289L205.182 171.062H205.971ZM211.18 175.62C210.898 175.62 210.642 175.567 210.412 175.461C210.182 175.353 209.999 175.197 209.864 174.994C209.728 174.789 209.661 174.542 209.661 174.252C209.661 173.997 209.711 173.79 209.812 173.631C209.912 173.471 210.046 173.345 210.215 173.254C210.383 173.163 210.568 173.096 210.771 173.051C210.976 173.005 211.182 172.968 211.389 172.941C211.659 172.906 211.879 172.88 212.047 172.863C212.217 172.844 212.341 172.812 212.418 172.767C212.497 172.723 212.537 172.645 212.537 172.535V172.512C212.537 172.226 212.459 172.004 212.302 171.845C212.148 171.687 211.913 171.607 211.598 171.607C211.271 171.607 211.015 171.679 210.829 171.822C210.644 171.965 210.513 172.118 210.438 172.28L209.788 172.048C209.904 171.778 210.059 171.567 210.252 171.416C210.448 171.263 210.66 171.157 210.89 171.097C211.122 171.035 211.35 171.004 211.574 171.004C211.717 171.004 211.882 171.022 212.067 171.057C212.255 171.089 212.436 171.158 212.61 171.262C212.785 171.367 212.931 171.524 213.047 171.735C213.163 171.946 213.221 172.228 213.221 172.582V175.516H212.537V174.913H212.502C212.456 175.009 212.379 175.113 212.27 175.223C212.162 175.333 212.018 175.427 211.838 175.504C211.659 175.582 211.439 175.62 211.18 175.62ZM211.284 175.006C211.555 175.006 211.783 174.952 211.969 174.846C212.156 174.74 212.297 174.603 212.392 174.434C212.489 174.266 212.537 174.089 212.537 173.904V173.278C212.508 173.312 212.444 173.344 212.346 173.373C212.249 173.4 212.137 173.424 212.009 173.446C211.884 173.465 211.761 173.482 211.641 173.498C211.523 173.511 211.428 173.523 211.354 173.533C211.176 173.556 211.01 173.594 210.855 173.646C210.703 173.696 210.579 173.772 210.484 173.875C210.391 173.975 210.345 174.113 210.345 174.287C210.345 174.524 210.433 174.704 210.609 174.826C210.787 174.946 211.012 175.006 211.284 175.006ZM214.47 175.516V171.062H215.131V171.758H215.189C215.282 171.52 215.432 171.336 215.639 171.204C215.846 171.071 216.094 171.004 216.384 171.004C216.678 171.004 216.922 171.071 217.117 171.204C217.315 171.336 217.468 171.52 217.578 171.758H217.625C217.739 171.528 217.91 171.346 218.138 171.21C218.366 171.073 218.64 171.004 218.959 171.004C219.357 171.004 219.682 171.129 219.936 171.378C220.189 171.626 220.315 172.011 220.315 172.535V175.516H219.631V172.535C219.631 172.207 219.541 171.972 219.362 171.831C219.182 171.69 218.97 171.619 218.727 171.619C218.413 171.619 218.171 171.714 217.999 171.903C217.827 172.091 217.741 172.328 217.741 172.616V175.516H217.045V172.466C217.045 172.212 216.963 172.009 216.798 171.854C216.634 171.697 216.423 171.619 216.164 171.619C215.986 171.619 215.819 171.666 215.665 171.761C215.512 171.856 215.388 171.987 215.294 172.155C215.201 172.322 215.155 172.514 215.155 172.732V175.516H214.47ZM221.567 177.186V171.062H222.228V171.77H222.309C222.359 171.693 222.429 171.594 222.518 171.474C222.608 171.352 222.738 171.244 222.906 171.149C223.076 171.053 223.306 171.004 223.596 171.004C223.971 171.004 224.302 171.098 224.588 171.286C224.874 171.473 225.097 171.739 225.258 172.083C225.418 172.427 225.498 172.833 225.498 173.301C225.498 173.772 225.418 174.181 225.258 174.527C225.097 174.871 224.875 175.138 224.591 175.327C224.307 175.515 223.979 175.609 223.608 175.609C223.322 175.609 223.093 175.561 222.921 175.467C222.749 175.37 222.616 175.261 222.523 175.139C222.431 175.015 222.359 174.913 222.309 174.832H222.251V177.186H221.567ZM222.239 173.289C222.239 173.625 222.289 173.922 222.387 174.179C222.486 174.434 222.63 174.634 222.819 174.779C223.009 174.922 223.241 174.994 223.515 174.994C223.801 174.994 224.04 174.919 224.231 174.768C224.424 174.615 224.569 174.41 224.666 174.153C224.765 173.894 224.814 173.606 224.814 173.289C224.814 172.976 224.766 172.694 224.669 172.443C224.574 172.189 224.43 171.989 224.237 171.842C224.046 171.693 223.805 171.619 223.515 171.619C223.237 171.619 223.003 171.69 222.813 171.831C222.624 171.97 222.481 172.165 222.384 172.416C222.288 172.666 222.239 172.957 222.239 173.289ZM227.226 169.578V175.516H226.542V169.578H227.226ZM230.347 175.609C229.918 175.609 229.548 175.514 229.236 175.325C228.927 175.133 228.688 174.866 228.52 174.524C228.354 174.18 228.271 173.78 228.271 173.324C228.271 172.868 228.354 172.466 228.52 172.118C228.688 171.768 228.922 171.495 229.222 171.3C229.523 171.103 229.875 171.004 230.277 171.004C230.509 171.004 230.738 171.043 230.964 171.12C231.191 171.198 231.396 171.323 231.582 171.497C231.768 171.669 231.915 171.897 232.026 172.182C232.136 172.466 232.191 172.816 232.191 173.231V173.521H228.758V172.93H231.495C231.495 172.678 231.445 172.454 231.344 172.257C231.246 172.06 231.105 171.904 230.921 171.79C230.739 171.676 230.525 171.619 230.277 171.619C230.005 171.619 229.769 171.687 229.57 171.822C229.373 171.955 229.221 172.129 229.115 172.344C229.008 172.558 228.955 172.789 228.955 173.034V173.428C228.955 173.765 229.013 174.05 229.129 174.284C229.247 174.516 229.41 174.692 229.619 174.814C229.828 174.934 230.07 174.994 230.347 174.994C230.527 174.994 230.689 174.969 230.834 174.919C230.981 174.866 231.107 174.789 231.214 174.687C231.32 174.582 231.402 174.453 231.46 174.298L232.121 174.484C232.052 174.708 231.935 174.905 231.77 175.075C231.606 175.243 231.403 175.375 231.162 175.47C230.92 175.562 230.648 175.609 230.347 175.609ZM233.73 175.562C233.587 175.562 233.465 175.511 233.362 175.409C233.26 175.306 233.209 175.183 233.209 175.04C233.209 174.897 233.26 174.775 233.362 174.672C233.465 174.57 233.587 174.518 233.73 174.518C233.873 174.518 233.996 174.57 234.099 174.672C234.201 174.775 234.252 174.897 234.252 175.04C234.252 175.135 234.228 175.222 234.18 175.301C234.133 175.381 234.071 175.444 233.991 175.493C233.914 175.539 233.827 175.562 233.73 175.562ZM237.289 175.609C236.872 175.609 236.512 175.51 236.211 175.313C235.909 175.116 235.677 174.844 235.515 174.498C235.353 174.152 235.271 173.757 235.271 173.312C235.271 172.86 235.355 172.461 235.521 172.115C235.689 171.767 235.923 171.495 236.223 171.3C236.524 171.103 236.876 171.004 237.278 171.004C237.591 171.004 237.873 171.062 238.125 171.178C238.376 171.294 238.582 171.457 238.742 171.665C238.903 171.874 239.002 172.118 239.041 172.396H238.356C238.304 172.193 238.188 172.013 238.009 171.857C237.831 171.698 237.591 171.619 237.289 171.619C237.023 171.619 236.789 171.689 236.588 171.828C236.389 171.965 236.233 172.159 236.121 172.411C236.011 172.66 235.956 172.953 235.956 173.289C235.956 173.633 236.01 173.933 236.118 174.188C236.228 174.443 236.383 174.641 236.582 174.782C236.783 174.923 237.019 174.994 237.289 174.994C237.467 174.994 237.629 174.963 237.774 174.901C237.919 174.839 238.041 174.75 238.142 174.634C238.242 174.518 238.314 174.379 238.356 174.217H239.041C239.002 174.48 238.906 174.717 238.754 174.927C238.603 175.136 238.403 175.302 238.154 175.426C237.906 175.548 237.618 175.609 237.289 175.609ZM241.85 175.609C241.448 175.609 241.095 175.513 240.792 175.322C240.49 175.13 240.255 174.863 240.085 174.518C239.916 174.174 239.832 173.772 239.832 173.312C239.832 172.848 239.916 172.443 240.085 172.097C240.255 171.751 240.49 171.483 240.792 171.291C241.095 171.1 241.448 171.004 241.85 171.004C242.252 171.004 242.604 171.1 242.906 171.291C243.209 171.483 243.445 171.751 243.613 172.097C243.783 172.443 243.868 172.848 243.868 173.312C243.868 173.772 243.783 174.174 243.613 174.518C243.445 174.863 243.209 175.13 242.906 175.322C242.604 175.513 242.252 175.609 241.85 175.609ZM241.85 174.994C242.156 174.994 242.407 174.916 242.604 174.759C242.801 174.603 242.947 174.397 243.042 174.142C243.137 173.886 243.184 173.61 243.184 173.312C243.184 173.015 243.137 172.737 243.042 172.48C242.947 172.223 242.801 172.015 242.604 171.857C242.407 171.698 242.156 171.619 241.85 171.619C241.545 171.619 241.294 171.698 241.096 171.857C240.899 172.015 240.753 172.223 240.659 172.48C240.564 172.737 240.517 173.015 240.517 173.312C240.517 173.61 240.564 173.886 240.659 174.142C240.753 174.397 240.899 174.603 241.096 174.759C241.294 174.916 241.545 174.994 241.85 174.994ZM244.913 175.516V171.062H245.574V171.758H245.632C245.725 171.52 245.874 171.336 246.081 171.204C246.288 171.071 246.537 171.004 246.826 171.004C247.12 171.004 247.365 171.071 247.56 171.204C247.757 171.336 247.911 171.52 248.021 171.758H248.067C248.181 171.528 248.353 171.346 248.581 171.21C248.809 171.073 249.082 171.004 249.401 171.004C249.799 171.004 250.125 171.129 250.378 171.378C250.631 171.626 250.758 172.011 250.758 172.535V175.516H250.074V172.535C250.074 172.207 249.984 171.972 249.804 171.831C249.624 171.69 249.413 171.619 249.169 171.619C248.856 171.619 248.613 171.714 248.441 171.903C248.269 172.091 248.183 172.328 248.183 172.616V175.516H247.488V172.466C247.488 172.212 247.405 172.009 247.241 171.854C247.077 171.697 246.865 171.619 246.606 171.619C246.428 171.619 246.262 171.666 246.107 171.761C245.955 171.856 245.831 171.987 245.736 172.155C245.643 172.322 245.597 172.514 245.597 172.732V175.516H244.913Z" fill="#ADADB1"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_bddddd_7233_4628" x="-11.6717" y="14.8846" width="287.518" height="261.857" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.6656"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7233_4628"/>
+<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/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_7233_4628" result="effect2_dropShadow_7233_4628"/>
+<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="-1.1664" dy="2.3328"/>
+<feGaussianBlur stdDeviation="2.6244"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_7233_4628" result="effect3_dropShadow_7233_4628"/>
+<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="-4.6656" dy="8.748"/>
+<feGaussianBlur stdDeviation="4.9572"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_7233_4628" result="effect4_dropShadow_7233_4628"/>
+<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="-11.0808" dy="19.8288"/>
+<feGaussianBlur stdDeviation="6.7068"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect4_dropShadow_7233_4628" result="effect5_dropShadow_7233_4628"/>
+<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="-19.2456" dy="34.992"/>
+<feGaussianBlur stdDeviation="7.8732"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+<feBlend mode="normal" in2="effect5_dropShadow_7233_4628" result="effect6_dropShadow_7233_4628"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_7233_4628" result="shape"/>
+</filter>
+<filter id="filter1_b_7233_4628" x="-6.992" y="27.008" width="310.984" height="228.984" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.496"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7233_4628"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7233_4628" result="shape"/>
+</filter>
+<clipPath id="clip0_7233_4628">
+<path d="M0 0H260V173.8C260 177.776 256.776 181 252.8 181H0V0Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_7233_4628">
+<rect width="233.863" height="159.797" fill="white" transform="translate(27.9854 61.5401)"/>
+</clipPath>
+<clipPath id="clip2_7233_4628">
+<rect x="36.7334" y="97.6985" width="18.6624" height="18.6624" rx="9.3312" fill="white"/>
+</clipPath>
+<clipPath id="clip3_7233_4628">
+<rect x="36.7334" y="130.358" width="18.6624" height="18.6624" rx="9.3312" fill="white"/>
+</clipPath>
+<clipPath id="clip4_7233_4628">
+<rect x="36.7334" y="163.018" width="18.6624" height="18.6624" rx="9.3312" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/users.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/users.svg
new file mode 100644
index 000000000..57274447d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/assets/users.svg
@@ -0,0 +1,93 @@
+<svg width="260" height="181" viewBox="0 0 260 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6627_62151)">
+<g opacity="0.6" filter="url(#filter0_bddddd_6627_62151)">
+<rect x="23.3203" y="24.2158" width="243.194" height="201.787" rx="9.3312" fill="white" fill-opacity="0.9"/>
+<rect x="23.8203" y="24.7158" width="242.194" height="200.787" rx="8.8312" stroke="url(#paint0_linear_6627_62151)"/>
+</g>
+<path d="M33.3979 44.0585V39.3813H34.4126V44.1169C34.4126 45.8276 35.1086 46.6829 36.5005 46.6829C37.9079 46.6829 38.6117 45.8276 38.6117 44.1169V39.3813H39.6264V44.0585C39.6264 45.2249 39.3582 46.1114 38.8216 46.7179C38.2929 47.3167 37.5191 47.6161 36.5005 47.6161C35.4818 47.6161 34.7081 47.3167 34.1794 46.7179C33.6584 46.1114 33.3979 45.2249 33.3979 44.0585ZM40.6658 45.5865H41.6456C41.6611 45.9442 41.8167 46.2358 42.1121 46.4613C42.4076 46.6868 42.8003 46.7996 43.2902 46.7996C43.7101 46.7996 44.0523 46.7179 44.3166 46.5546C44.5888 46.3836 44.7249 46.162 44.7249 45.8898C44.7249 45.742 44.6938 45.6176 44.6316 45.5165C44.5771 45.4155 44.5149 45.3377 44.4449 45.2833C44.3827 45.2211 44.2661 45.1705 44.095 45.1316C43.924 45.085 43.7918 45.0578 43.6985 45.05C43.6051 45.0344 43.4341 45.0111 43.1852 44.98C42.8042 44.9333 42.4893 44.8828 42.2405 44.8284C41.9916 44.7662 41.7467 44.6767 41.5056 44.5601C41.2646 44.4357 41.0857 44.2724 40.9691 44.0702C40.8524 43.8603 40.7941 43.6075 40.7941 43.312C40.7941 42.7755 41.0118 42.3439 41.4473 42.0173C41.8905 41.683 42.4504 41.5197 43.1269 41.5275C43.8268 41.5352 44.3944 41.7024 44.8299 42.029C45.2653 42.3478 45.5064 42.8066 45.553 43.4054H44.5733C44.5344 43.0943 44.3827 42.8416 44.1184 42.6472C43.8617 42.445 43.5313 42.3439 43.1269 42.3439C42.707 42.3439 42.3688 42.4256 42.1121 42.5889C41.8633 42.7522 41.7389 42.9699 41.7389 43.2421C41.7389 43.3976 41.77 43.5259 41.8322 43.627C41.9022 43.7281 42.0149 43.8097 42.1705 43.8719C42.3338 43.9264 42.4815 43.9691 42.6137 44.0002C42.7537 44.0236 42.9597 44.0508 43.2319 44.0819C43.5429 44.1208 43.8034 44.1596 44.0134 44.1985C44.2233 44.2374 44.4411 44.2996 44.6666 44.3851C44.8921 44.4707 45.0709 44.5718 45.2031 44.6884C45.3431 44.805 45.4558 44.9606 45.5414 45.155C45.6269 45.3416 45.6697 45.5632 45.6697 45.8198C45.6697 46.3641 45.4403 46.7996 44.9815 47.1262C44.5305 47.4528 43.9667 47.6161 43.2902 47.6161C42.5048 47.6161 41.8711 47.4372 41.389 47.0795C40.9146 46.7218 40.6736 46.2242 40.6658 45.5865ZM49.3558 47.6161C48.4693 47.6161 47.7539 47.3361 47.2096 46.7763C46.673 46.2164 46.4048 45.4816 46.4048 44.5718C46.4048 43.6697 46.6653 42.9388 47.1863 42.3789C47.7073 41.8113 48.3877 41.5275 49.2275 41.5275C50.075 41.5275 50.7516 41.7802 51.257 42.2856C51.7624 42.7833 52.0268 43.4715 52.0501 44.3501C52.0501 44.4357 52.0424 44.5718 52.0268 44.7584H47.4079V44.84C47.4234 45.4155 47.5984 45.882 47.9328 46.2397C48.2749 46.5896 48.7259 46.7646 49.2858 46.7646C49.7135 46.7646 50.075 46.6596 50.3705 46.4497C50.6738 46.2319 50.876 45.9326 50.9771 45.5515H51.9452C51.8285 46.1581 51.5369 46.6557 51.0704 47.0445C50.6038 47.4256 50.0323 47.6161 49.3558 47.6161ZM47.4662 43.9652H51.0237C50.9771 43.4598 50.7943 43.0671 50.4755 42.7872C50.1567 42.5072 49.7446 42.3673 49.2391 42.3673C48.7881 42.3673 48.3915 42.515 48.0494 42.8105C47.7073 43.106 47.5129 43.4909 47.4662 43.9652ZM55.7776 41.5974H56.0459V42.5306H55.5677C55 42.5306 54.5918 42.7211 54.3429 43.1021C54.1019 43.4831 53.9814 43.9536 53.9814 44.5134V47.5461H53.0249V41.5974H53.8531L53.9814 42.4956C54.3468 41.8968 54.9456 41.5974 55.7776 41.5974ZM56.3881 45.5865H57.3678C57.3834 45.9442 57.5389 46.2358 57.8344 46.4613C58.1299 46.6868 58.5226 46.7996 59.0125 46.7996C59.4324 46.7996 59.7745 46.7179 60.0389 46.5546C60.3111 46.3836 60.4471 46.162 60.4471 45.8898C60.4471 45.742 60.416 45.6176 60.3538 45.5165C60.2994 45.4155 60.2372 45.3377 60.1672 45.2833C60.105 45.2211 59.9884 45.1705 59.8173 45.1316C59.6462 45.085 59.514 45.0578 59.4207 45.05C59.3274 45.0344 59.1563 45.0111 58.9075 44.98C58.5265 44.9333 58.2115 44.8828 57.9627 44.8284C57.7139 44.7662 57.4689 44.6767 57.2279 44.5601C56.9868 44.4357 56.808 44.2724 56.6913 44.0702C56.5747 43.8603 56.5164 43.6075 56.5164 43.312C56.5164 42.7755 56.7341 42.3439 57.1696 42.0173C57.6128 41.683 58.1727 41.5197 58.8492 41.5275C59.549 41.5352 60.1167 41.7024 60.5521 42.029C60.9876 42.3478 61.2286 42.8066 61.2753 43.4054H60.2955C60.2566 43.0943 60.105 42.8416 59.8406 42.6472C59.584 42.445 59.2535 42.3439 58.8492 42.3439C58.4293 42.3439 58.091 42.4256 57.8344 42.5889C57.5856 42.7522 57.4612 42.9699 57.4612 43.2421C57.4612 43.3976 57.4923 43.5259 57.5545 43.627C57.6244 43.7281 57.7372 43.8097 57.8927 43.8719C58.056 43.9264 58.2038 43.9691 58.336 44.0002C58.4759 44.0236 58.682 44.0508 58.9541 44.0819C59.2652 44.1208 59.5257 44.1596 59.7356 44.1985C59.9456 44.2374 60.1633 44.2996 60.3888 44.3851C60.6143 44.4707 60.7932 44.5718 60.9254 44.6884C61.0653 44.805 61.1781 44.9606 61.2636 45.155C61.3492 45.3416 61.3919 45.5632 61.3919 45.8198C61.3919 46.3641 61.1625 46.7996 60.7037 47.1262C60.2527 47.4528 59.689 47.6161 59.0125 47.6161C58.2271 47.6161 57.5933 47.4372 57.1112 47.0795C56.6369 46.7218 56.3958 46.2242 56.3881 45.5865Z" fill="#56565C"/>
+<g clip-path="url(#clip1_6627_62151)">
+<g filter="url(#filter1_b_6627_62151)">
+<rect x="27.9854" y="61.5401" width="233.863" height="159.797" rx="6.9984" fill="white" fill-opacity="0.8"/>
+<rect x="28.4854" y="62.0401" width="232.863" height="158.797" rx="6.4984" stroke="#F7F7F7"/>
+</g>
+<path d="M38.4641 78.455H37.8763V73.5562H38.4641L40.8086 77.3213V73.5562H41.3895V78.455H40.8086L38.4641 74.6829V78.455ZM43.2868 78.455H42.6639L44.3996 73.5562H45.1484L46.891 78.455H46.2401L45.7712 77.1324H43.7627L43.2868 78.455ZM44.7565 74.221L43.9377 76.5795H45.5893L44.7565 74.221ZM48.7206 78.455H48.1678V73.5562H48.8816L50.0853 76.3695L51.275 73.5562H51.9679V78.455H51.415V74.5289L50.3163 77.0974H49.8264L48.7206 74.5289V78.455ZM56.7557 78.455H53.6484V73.5562H56.6647V74.116H54.2572V75.6837H56.2798V76.2436H54.2572V77.8952H56.7557V78.455Z" fill="#ADADB1"/>
+<path d="M152.503 73.5562V74.0601H151.433V77.9512H152.503V78.455H149.746V77.9512H150.824V74.0601H149.746V73.5562H152.503ZM155.606 78.455H154.081V73.5562H155.606C157.062 73.5562 157.846 74.5359 157.846 76.0056C157.846 77.4683 157.062 78.455 155.606 78.455ZM154.69 74.116V77.8952H155.606C156.719 77.8952 157.223 77.1463 157.223 76.0056C157.223 74.8579 156.719 74.116 155.606 74.116H154.69ZM162.443 78.455H159.336V73.5562H162.352V74.116H159.945V75.6837H161.967V76.2436H159.945V77.8952H162.443V78.455ZM164.434 78.455H163.846V73.5562H164.434L166.778 77.3213V73.5562H167.359V78.455H166.778L164.434 74.6829V78.455ZM170.887 78.455H170.278V74.116H168.69V73.5562H172.476V74.116H170.887V78.455ZM176.455 73.5562V74.0601H175.384V77.9512H176.455V78.455H173.698V77.9512H174.775V74.0601H173.698V73.5562H176.455ZM178.641 78.455H178.033V73.5562H181.042V74.116H178.641V75.7537H180.671V76.3135H178.641V78.455ZM185.024 73.5562V74.0601H183.953V77.9512H185.024V78.455H182.267V77.9512H183.345V74.0601H182.267V73.5562H185.024ZM189.709 78.455H186.602V73.5562H189.618V74.116H187.211V75.6837H189.233V76.2436H187.211V77.8952H189.709V78.455ZM191.721 78.455H191.112V73.5562H192.862C193.855 73.5562 194.52 74.144 194.52 75.0608C194.52 75.7467 194.093 76.2785 193.449 76.4535L194.569 78.455H193.883L192.827 76.5725H191.721V78.455ZM191.721 74.116V76.0126H192.813C193.47 76.0126 193.897 75.6347 193.897 75.0608C193.897 74.487 193.47 74.116 192.82 74.116H191.721ZM197.782 78.497C196.634 78.497 195.899 77.8462 195.864 76.8524H196.494C196.543 77.5173 197.061 77.9442 197.789 77.9442C198.447 77.9442 198.887 77.6292 198.887 77.1114C198.887 76.6005 198.496 76.4045 197.572 76.2506C196.557 76.0826 195.983 75.7047 195.983 74.9069C195.983 74.074 196.655 73.5142 197.642 73.5142C198.685 73.5142 199.377 74.102 199.433 75.0048H198.803C198.741 74.431 198.279 74.0671 197.642 74.0671C196.991 74.0671 196.592 74.361 196.592 74.8719C196.592 75.3758 196.977 75.5507 197.915 75.7047C198.915 75.8656 199.496 76.2715 199.496 77.0554C199.496 77.9022 198.789 78.497 197.782 78.497Z" fill="#ADADB1"/>
+<path d="M27.9854 90.7004L261.849 90.7004" stroke="#FAFAFB" stroke-width="0.5832"/>
+<g clip-path="url(#clip2_6627_62151)">
+<rect x="36.7334" y="97.6985" width="18.6624" height="18.6624" rx="9.3312" fill="#EDEDF0"/>
+<path d="M41.3056 109.7L39.894 104.61H40.7017L41.6933 108.552H41.7405L42.7719 104.61H43.5721L44.6035 108.554H44.6507L45.6398 104.61H46.45L45.0359 109.7H44.263L43.1919 105.888H43.1521L42.081 109.7H41.3056ZM51.3186 107.155C51.3186 107.699 51.2192 108.166 51.0203 108.557C50.8215 108.946 50.549 109.246 50.2027 109.457C49.8581 109.665 49.4662 109.77 49.0272 109.77C48.5865 109.77 48.193 109.665 47.8467 109.457C47.5021 109.246 47.2304 108.945 47.0316 108.554C46.8327 108.163 46.7333 107.697 46.7333 107.155C46.7333 106.612 46.8327 106.145 47.0316 105.756C47.2304 105.365 47.5021 105.065 47.8467 104.856C48.193 104.646 48.5865 104.541 49.0272 104.541C49.4662 104.541 49.8581 104.646 50.2027 104.856C50.549 105.065 50.8215 105.365 51.0203 105.756C51.2192 106.145 51.3186 106.612 51.3186 107.155ZM50.5581 107.155C50.5581 106.741 50.491 106.392 50.3568 106.109C50.2242 105.824 50.042 105.609 49.81 105.463C49.5797 105.315 49.3188 105.242 49.0272 105.242C48.7339 105.242 48.4722 105.315 48.2419 105.463C48.0116 105.609 47.8293 105.824 47.6951 106.109C47.5626 106.392 47.4963 106.741 47.4963 107.155C47.4963 107.569 47.5626 107.919 47.6951 108.204C47.8293 108.487 48.0116 108.703 48.2419 108.85C48.4722 108.996 48.7339 109.069 49.0272 109.069C49.3188 109.069 49.5797 108.996 49.81 108.85C50.042 108.703 50.2242 108.487 50.3568 108.204C50.491 107.919 50.5581 107.569 50.5581 107.155Z" fill="#97979B"/>
+</g>
+<path d="M64.1922 110.03L62.5685 104.092H63.2992L64.5401 108.928H64.5981L65.8623 104.092H66.6741L67.9382 108.928H67.9962L69.2372 104.092H69.9678L68.3442 110.03H67.6019L66.2914 105.298H66.245L64.9344 110.03H64.1922ZM71.6669 110.134C71.3847 110.134 71.1286 110.081 70.8986 109.975C70.6685 109.866 70.4859 109.711 70.3506 109.508C70.2153 109.303 70.1476 109.055 70.1476 108.766C70.1476 108.51 70.1979 108.304 70.2984 108.145C70.3989 107.985 70.5332 107.859 70.7014 107.768C70.8696 107.677 71.0551 107.61 71.2581 107.565C71.463 107.519 71.6688 107.482 71.8757 107.455C72.1463 107.42 72.3657 107.394 72.5338 107.377C72.7039 107.357 72.8277 107.325 72.905 107.281C72.9842 107.237 73.0238 107.159 73.0238 107.049V107.026C73.0238 106.74 72.9456 106.518 72.789 106.359C72.6344 106.201 72.3995 106.121 72.0844 106.121C71.7578 106.121 71.5016 106.193 71.3161 106.336C71.1305 106.479 71 106.632 70.9247 106.794L70.2752 106.562C70.3912 106.291 70.5458 106.081 70.7391 105.93C70.9343 105.777 71.1469 105.671 71.377 105.611C71.6089 105.549 71.837 105.518 72.0612 105.518C72.2043 105.518 72.3686 105.536 72.5541 105.57C72.7416 105.603 72.9224 105.672 73.0963 105.776C73.2722 105.881 73.4182 106.038 73.5341 106.249C73.6501 106.46 73.7081 106.742 73.7081 107.095V110.03H73.0238V109.427H72.9891C72.9427 109.523 72.8653 109.627 72.7571 109.737C72.6489 109.847 72.5048 109.941 72.3251 110.018C72.1453 110.095 71.9259 110.134 71.6669 110.134ZM71.7713 109.519C72.0419 109.519 72.27 109.466 72.4556 109.36C72.6431 109.254 72.7842 109.116 72.8789 108.948C72.9755 108.78 73.0238 108.603 73.0238 108.418V107.791C72.9949 107.826 72.9311 107.858 72.8325 107.887C72.7358 107.914 72.6237 107.938 72.4962 107.959C72.3705 107.979 72.2478 107.996 72.1279 108.012C72.01 108.025 71.9143 108.037 71.8409 108.046C71.663 108.07 71.4968 108.107 71.3422 108.16C71.1895 108.21 71.0658 108.286 70.9711 108.389C70.8783 108.489 70.8319 108.626 70.8319 108.8C70.8319 109.038 70.9198 109.218 71.0957 109.34C71.2736 109.459 71.4987 109.519 71.7713 109.519ZM75.6413 104.092V110.03H74.957V104.092H75.6413ZM78.8314 105.576V106.156H76.5235V105.576H78.8314ZM77.1961 104.509H77.8804V108.754C77.8804 108.947 77.9084 109.092 77.9645 109.189C78.0225 109.284 78.0959 109.347 78.1848 109.38C78.2757 109.411 78.3714 109.427 78.4719 109.427C78.5473 109.427 78.6091 109.423 78.6574 109.415C78.7058 109.405 78.7444 109.398 78.7734 109.392L78.9126 110.006C78.8662 110.024 78.8014 110.041 78.7183 110.059C78.6352 110.078 78.5299 110.088 78.4023 110.088C78.209 110.088 78.0196 110.046 77.834 109.963C77.6504 109.88 77.4977 109.753 77.3759 109.583C77.2561 109.413 77.1961 109.199 77.1961 108.94V104.509ZM81.6801 110.122C81.251 110.122 80.8808 110.028 80.5696 109.838C80.2603 109.647 80.0216 109.38 79.8535 109.038C79.6872 108.694 79.6041 108.294 79.6041 107.838C79.6041 107.382 79.6872 106.979 79.8535 106.632C80.0216 106.282 80.2555 106.009 80.5551 105.814C80.8567 105.617 81.2085 105.518 81.6105 105.518C81.8425 105.518 82.0715 105.557 82.2977 105.634C82.5238 105.711 82.7297 105.837 82.9153 106.011C83.1008 106.183 83.2487 106.411 83.3589 106.695C83.4691 106.979 83.5241 107.329 83.5241 107.745V108.035H80.0912V107.443H82.8283C82.8283 107.192 82.778 106.968 82.6775 106.771C82.5789 106.574 82.4378 106.418 82.2542 106.304C82.0725 106.19 81.8579 106.133 81.6105 106.133C81.338 106.133 81.1021 106.201 80.9031 106.336C80.7059 106.469 80.5542 106.643 80.4478 106.858C80.3415 107.072 80.2884 107.302 80.2884 107.548V107.942C80.2884 108.278 80.3464 108.564 80.4623 108.797C80.5803 109.029 80.7436 109.206 80.9523 109.328C81.1611 109.448 81.4037 109.508 81.6801 109.508C81.8599 109.508 82.0222 109.483 82.1672 109.432C82.3141 109.38 82.4407 109.303 82.547 109.2C82.6533 109.096 82.7355 108.967 82.7935 108.812L83.4546 108.997C83.385 109.222 83.268 109.419 83.1037 109.589C82.9394 109.757 82.7365 109.889 82.4948 109.983C82.2532 110.076 81.9816 110.122 81.6801 110.122ZM84.565 110.03V105.576H85.2261V106.249H85.2725C85.3537 106.028 85.5006 105.85 85.7132 105.712C85.9258 105.575 86.1655 105.507 86.4323 105.507C86.4825 105.507 86.5453 105.508 86.6207 105.509C86.6961 105.511 86.7531 105.514 86.7918 105.518V106.214C86.7686 106.208 86.7154 106.2 86.6323 106.188C86.5511 106.174 86.4651 106.168 86.3743 106.168C86.1578 106.168 85.9645 106.213 85.7944 106.304C85.6262 106.393 85.4929 106.517 85.3943 106.675C85.2976 106.832 85.2493 107.01 85.2493 107.211V110.03H84.565ZM95.0023 107.061C95.0023 107.687 94.8892 108.228 94.663 108.684C94.4369 109.141 94.1266 109.492 93.7323 109.74C93.338 109.987 92.8876 110.111 92.3812 110.111C91.8747 110.111 91.4244 109.987 91.03 109.74C90.6357 109.492 90.3255 109.141 90.0993 108.684C89.8732 108.228 89.7601 107.687 89.7601 107.061C89.7601 106.434 89.8732 105.893 90.0993 105.437C90.3255 104.981 90.6357 104.629 91.03 104.382C91.4244 104.134 91.8747 104.01 92.3812 104.01C92.8876 104.01 93.338 104.134 93.7323 104.382C94.1266 104.629 94.4369 104.981 94.663 105.437C94.8892 105.893 95.0023 106.434 95.0023 107.061ZM94.3064 107.061C94.3064 106.547 94.2204 106.113 94.0484 105.759C93.8783 105.405 93.6473 105.137 93.3554 104.956C93.0654 104.774 92.7407 104.683 92.3812 104.683C92.0216 104.683 91.6959 104.774 91.4041 104.956C91.1141 105.137 90.8831 105.405 90.7111 105.759C90.541 106.113 90.456 106.547 90.456 107.061C90.456 107.575 90.541 108.009 90.7111 108.363C90.8831 108.716 91.1141 108.984 91.4041 109.166C91.6959 109.347 92.0216 109.438 92.3812 109.438C92.7407 109.438 93.0654 109.347 93.3554 109.166C93.6473 108.984 93.8783 108.716 94.0484 108.363C94.2204 108.009 94.3064 107.575 94.3064 107.061ZM96.7216 104.092V104.614C96.7216 104.772 96.6926 104.941 96.6346 105.121C96.5786 105.299 96.4955 105.472 96.3853 105.64C96.277 105.806 96.1456 105.951 95.991 106.075L95.6198 105.773C95.7416 105.599 95.847 105.419 95.9359 105.231C96.0267 105.042 96.0722 104.84 96.0722 104.625V104.092H96.7216ZM97.7183 110.03V104.092H99.7943C100.208 104.092 100.549 104.163 100.818 104.306C101.086 104.447 101.287 104.638 101.418 104.877C101.549 105.115 101.615 105.379 101.615 105.669C101.615 105.924 101.57 106.135 101.479 106.301C101.39 106.467 101.272 106.599 101.125 106.695C100.98 106.792 100.823 106.864 100.653 106.91V106.968C100.834 106.979 101.017 107.043 101.201 107.159C101.384 107.275 101.538 107.441 101.662 107.658C101.785 107.874 101.847 108.139 101.847 108.452C101.847 108.75 101.779 109.018 101.644 109.256C101.509 109.493 101.295 109.682 101.003 109.821C100.711 109.96 100.332 110.03 99.8639 110.03H97.7183ZM98.4374 109.392H99.8639C100.334 109.392 100.667 109.301 100.864 109.119C101.063 108.936 101.163 108.713 101.163 108.452C101.163 108.251 101.112 108.066 101.009 107.896C100.907 107.724 100.761 107.586 100.571 107.484C100.382 107.38 100.158 107.327 99.8987 107.327H98.4374V109.392ZM98.4374 106.701H99.7711C99.9876 106.701 100.183 106.659 100.357 106.574C100.533 106.489 100.672 106.369 100.774 106.214C100.879 106.059 100.931 105.878 100.931 105.669C100.931 105.408 100.84 105.187 100.658 105.005C100.477 104.821 100.189 104.73 99.7943 104.73H98.4374V106.701ZM102.936 110.03V105.576H103.597V106.249H103.643C103.724 106.028 103.871 105.85 104.084 105.712C104.297 105.575 104.536 105.507 104.803 105.507C104.853 105.507 104.916 105.508 104.992 105.509C105.067 105.511 105.124 105.514 105.163 105.518V106.214C105.139 106.208 105.086 106.2 105.003 106.188C104.922 106.174 104.836 106.168 104.745 106.168C104.529 106.168 104.335 106.213 104.165 106.304C103.997 106.393 103.864 106.517 103.765 106.675C103.668 106.832 103.62 107.01 103.62 107.211V110.03H102.936ZM105.974 110.03V105.576H106.658V110.03H105.974ZM106.322 104.834C106.188 104.834 106.073 104.788 105.977 104.698C105.882 104.607 105.835 104.498 105.835 104.37C105.835 104.242 105.882 104.133 105.977 104.042C106.073 103.952 106.188 103.906 106.322 103.906C106.455 103.906 106.569 103.952 106.664 104.042C106.76 104.133 106.809 104.242 106.809 104.37C106.809 104.498 106.76 104.607 106.664 104.698C106.569 104.788 106.455 104.834 106.322 104.834ZM109.222 110.134C108.94 110.134 108.683 110.081 108.453 109.975C108.223 109.866 108.041 109.711 107.905 109.508C107.77 109.303 107.703 109.055 107.703 108.766C107.703 108.51 107.753 108.304 107.853 108.145C107.954 107.985 108.088 107.859 108.256 107.768C108.424 107.677 108.61 107.61 108.813 107.565C109.018 107.519 109.224 107.482 109.431 107.455C109.701 107.42 109.921 107.394 110.089 107.377C110.259 107.357 110.383 107.325 110.46 107.281C110.539 107.237 110.579 107.159 110.579 107.049V107.026C110.579 106.74 110.5 106.518 110.344 106.359C110.189 106.201 109.954 106.121 109.639 106.121C109.313 106.121 109.057 106.193 108.871 106.336C108.685 106.479 108.555 106.632 108.48 106.794L107.83 106.562C107.946 106.291 108.101 106.081 108.294 105.93C108.489 105.777 108.702 105.671 108.932 105.611C109.164 105.549 109.392 105.518 109.616 105.518C109.759 105.518 109.923 105.536 110.109 105.57C110.297 105.603 110.477 105.672 110.651 105.776C110.827 105.881 110.973 106.038 111.089 106.249C111.205 106.46 111.263 106.742 111.263 107.095V110.03H110.579V109.427H110.544C110.498 109.523 110.42 109.627 110.312 109.737C110.204 109.847 110.06 109.941 109.88 110.018C109.7 110.095 109.481 110.134 109.222 110.134ZM109.326 109.519C109.597 109.519 109.825 109.466 110.01 109.36C110.198 109.254 110.339 109.116 110.434 108.948C110.53 108.78 110.579 108.603 110.579 108.418V107.791C110.55 107.826 110.486 107.858 110.387 107.887C110.291 107.914 110.179 107.938 110.051 107.959C109.925 107.979 109.803 107.996 109.683 108.012C109.565 108.025 109.469 108.037 109.396 108.046C109.218 108.07 109.052 108.107 108.897 108.16C108.744 108.21 108.621 108.286 108.526 108.389C108.433 108.489 108.387 108.626 108.387 108.8C108.387 109.038 108.475 109.218 108.651 109.34C108.828 109.459 109.054 109.519 109.326 109.519ZM113.196 107.351V110.03H112.512V105.576H113.173V106.272H113.231C113.335 106.046 113.494 105.864 113.706 105.727C113.919 105.588 114.194 105.518 114.53 105.518C114.831 105.518 115.095 105.58 115.321 105.704C115.548 105.826 115.724 106.011 115.849 106.26C115.975 106.508 116.038 106.821 116.038 107.2V110.03H115.353V107.246C115.353 106.896 115.263 106.624 115.081 106.429C114.899 106.231 114.65 106.133 114.333 106.133C114.114 106.133 113.919 106.18 113.747 106.275C113.577 106.37 113.443 106.508 113.344 106.69C113.245 106.871 113.196 107.092 113.196 107.351Z" fill="#ADADB1"/>
+<path d="M151.785 110.291C151.355 110.291 150.985 110.196 150.674 110.007C150.365 109.816 150.126 109.549 149.958 109.207C149.792 108.863 149.709 108.463 149.709 108.006C149.709 107.55 149.792 107.148 149.958 106.8C150.126 106.45 150.36 106.178 150.66 105.983C150.961 105.785 151.313 105.687 151.715 105.687C151.947 105.687 152.176 105.726 152.402 105.803C152.628 105.88 152.834 106.006 153.02 106.18C153.205 106.352 153.353 106.58 153.463 106.864C153.573 107.148 153.629 107.498 153.629 107.914V108.204H150.196V107.612H152.933C152.933 107.361 152.882 107.137 152.782 106.939C152.683 106.742 152.542 106.587 152.359 106.473C152.177 106.359 151.962 106.302 151.715 106.302C151.442 106.302 151.207 106.369 151.007 106.504C150.81 106.638 150.659 106.812 150.552 107.026C150.446 107.241 150.393 107.471 150.393 107.716V108.111C150.393 108.447 150.451 108.732 150.567 108.966C150.685 109.198 150.848 109.375 151.057 109.497C151.266 109.617 151.508 109.676 151.785 109.676C151.964 109.676 152.127 109.651 152.272 109.601C152.419 109.549 152.545 109.472 152.651 109.369C152.758 109.265 152.84 109.135 152.898 108.981L153.559 109.166C153.489 109.39 153.372 109.588 153.208 109.758C153.044 109.926 152.841 110.057 152.599 110.152C152.358 110.245 152.086 110.291 151.785 110.291ZM155.354 104.26V110.198H154.669V104.26H155.354ZM158.289 110.291C157.918 110.291 157.59 110.197 157.306 110.01C157.022 109.82 156.799 109.554 156.639 109.21C156.478 108.864 156.398 108.455 156.398 107.983C156.398 107.515 156.478 107.11 156.639 106.765C156.799 106.421 157.023 106.156 157.309 105.968C157.595 105.781 157.925 105.687 158.3 105.687C158.59 105.687 158.819 105.735 158.987 105.832C159.158 105.927 159.287 106.035 159.376 106.157C159.467 106.276 159.537 106.375 159.588 106.452H159.646V104.26H160.33V110.198H159.669V109.514H159.588C159.537 109.595 159.466 109.698 159.373 109.821C159.28 109.943 159.148 110.052 158.976 110.149C158.804 110.244 158.575 110.291 158.289 110.291ZM158.381 109.676C158.656 109.676 158.888 109.605 159.077 109.462C159.267 109.317 159.411 109.117 159.509 108.862C159.608 108.605 159.657 108.308 159.657 107.972C159.657 107.639 159.609 107.348 159.512 107.099C159.416 106.848 159.273 106.652 159.083 106.513C158.894 106.372 158.66 106.302 158.381 106.302C158.092 106.302 157.85 106.376 157.657 106.525C157.465 106.672 157.321 106.872 157.225 107.125C157.13 107.376 157.083 107.658 157.083 107.972C157.083 108.289 157.131 108.577 157.227 108.836C157.326 109.093 157.471 109.298 157.662 109.45C157.856 109.601 158.095 109.676 158.381 109.676ZM162.989 110.303C162.706 110.303 162.45 110.25 162.22 110.143C161.99 110.035 161.808 109.879 161.672 109.676C161.537 109.472 161.469 109.224 161.469 108.934C161.469 108.679 161.52 108.472 161.62 108.314C161.721 108.153 161.855 108.028 162.023 107.937C162.191 107.846 162.377 107.778 162.58 107.734C162.785 107.687 162.991 107.651 163.197 107.624C163.468 107.589 163.687 107.563 163.856 107.545C164.026 107.526 164.149 107.494 164.227 107.45C164.306 107.405 164.346 107.328 164.346 107.218V107.195C164.346 106.908 164.267 106.686 164.111 106.528C163.956 106.369 163.721 106.29 163.406 106.29C163.08 106.29 162.823 106.361 162.638 106.504C162.452 106.648 162.322 106.8 162.246 106.963L161.597 106.731C161.713 106.46 161.868 106.249 162.061 106.099C162.256 105.946 162.469 105.84 162.699 105.78C162.931 105.718 163.159 105.687 163.383 105.687C163.526 105.687 163.69 105.704 163.876 105.739C164.063 105.772 164.244 105.841 164.418 105.945C164.594 106.049 164.74 106.207 164.856 106.418C164.972 106.628 165.03 106.91 165.03 107.264V110.198H164.346V109.595H164.311C164.264 109.692 164.187 109.795 164.079 109.906C163.971 110.016 163.827 110.109 163.647 110.187C163.467 110.264 163.248 110.303 162.989 110.303ZM163.093 109.688C163.364 109.688 163.592 109.635 163.777 109.529C163.965 109.422 164.106 109.285 164.201 109.117C164.297 108.949 164.346 108.772 164.346 108.586V107.96C164.317 107.995 164.253 108.027 164.154 108.056C164.058 108.083 163.945 108.107 163.818 108.128C163.692 108.147 163.57 108.165 163.45 108.18C163.332 108.194 163.236 108.205 163.163 108.215C162.985 108.238 162.819 108.276 162.664 108.328C162.511 108.378 162.388 108.455 162.293 108.557C162.2 108.658 162.154 108.795 162.154 108.969C162.154 109.207 162.242 109.387 162.417 109.508C162.595 109.628 162.82 109.688 163.093 109.688ZM167.96 110.291C167.589 110.291 167.262 110.197 166.978 110.01C166.693 109.82 166.471 109.554 166.311 109.21C166.15 108.864 166.07 108.455 166.07 107.983C166.07 107.515 166.15 107.11 166.311 106.765C166.471 106.421 166.694 106.156 166.98 105.968C167.267 105.781 167.597 105.687 167.972 105.687C168.262 105.687 168.491 105.735 168.659 105.832C168.829 105.927 168.959 106.035 169.048 106.157C169.139 106.276 169.209 106.375 169.259 106.452H169.317V104.26H170.002V110.198H169.341V109.514H169.259C169.209 109.595 169.138 109.698 169.045 109.821C168.952 109.943 168.82 110.052 168.648 110.149C168.476 110.244 168.247 110.291 167.96 110.291ZM168.053 109.676C168.328 109.676 168.56 109.605 168.749 109.462C168.939 109.317 169.083 109.117 169.181 108.862C169.28 108.605 169.329 108.308 169.329 107.972C169.329 107.639 169.281 107.348 169.184 107.099C169.087 106.848 168.944 106.652 168.755 106.513C168.565 106.372 168.332 106.302 168.053 106.302C167.763 106.302 167.522 106.376 167.328 106.525C167.137 106.672 166.993 106.872 166.896 107.125C166.802 107.376 166.754 107.658 166.754 107.972C166.754 108.289 166.803 108.577 166.899 108.836C166.998 109.093 167.143 109.298 167.334 109.45C167.527 109.601 167.767 109.676 168.053 109.676ZM174.771 111.764C174.18 111.764 173.657 111.683 173.203 111.521C172.748 111.36 172.367 111.123 172.057 110.81C171.748 110.497 171.514 110.113 171.356 109.659C171.197 109.205 171.118 108.685 171.118 108.099C171.118 107.533 171.198 107.026 171.359 106.58C171.521 106.133 171.756 105.755 172.063 105.443C172.372 105.13 172.747 104.891 173.188 104.727C173.631 104.563 174.131 104.481 174.69 104.481C175.233 104.481 175.709 104.57 176.117 104.747C176.526 104.923 176.868 105.162 177.143 105.464C177.419 105.763 177.626 106.101 177.763 106.475C177.903 106.85 177.972 107.237 177.972 107.635C177.972 107.916 177.959 108.2 177.932 108.488C177.905 108.776 177.848 109.041 177.761 109.282C177.674 109.522 177.539 109.715 177.358 109.862C177.178 110.009 176.934 110.082 176.627 110.082C176.492 110.082 176.343 110.061 176.18 110.019C176.018 109.976 175.874 109.906 175.748 109.807C175.623 109.708 175.548 109.576 175.525 109.41H175.49C175.444 109.522 175.372 109.628 175.276 109.729C175.181 109.829 175.056 109.909 174.902 109.969C174.749 110.029 174.562 110.055 174.342 110.048C174.091 110.038 173.869 109.982 173.678 109.879C173.487 109.775 173.326 109.634 173.197 109.456C173.069 109.276 172.973 109.069 172.907 108.833C172.843 108.595 172.811 108.339 172.811 108.064C172.811 107.803 172.85 107.565 172.927 107.348C173.005 107.132 173.112 106.942 173.249 106.78C173.388 106.618 173.551 106.488 173.736 106.391C173.924 106.293 174.126 106.232 174.342 106.209C174.535 106.189 174.711 106.198 174.87 106.235C175.028 106.27 175.159 106.323 175.261 106.394C175.364 106.464 175.428 106.541 175.455 106.626H175.49V106.302H176.105V108.923C176.105 109.085 176.15 109.228 176.241 109.352C176.332 109.475 176.464 109.537 176.638 109.537C176.836 109.537 176.986 109.47 177.091 109.334C177.197 109.199 177.27 108.99 177.308 108.708C177.349 108.426 177.369 108.064 177.369 107.624C177.369 107.365 177.333 107.11 177.262 106.858C177.192 106.605 177.086 106.368 176.943 106.148C176.802 105.928 176.623 105.733 176.407 105.565C176.19 105.397 175.936 105.265 175.644 105.171C175.354 105.074 175.024 105.026 174.655 105.026C174.201 105.026 173.794 105.096 173.435 105.237C173.077 105.377 172.773 105.581 172.521 105.849C172.272 106.116 172.082 106.441 171.95 106.823C171.821 107.204 171.756 107.637 171.756 108.122C171.756 108.615 171.821 109.053 171.95 109.436C172.082 109.819 172.275 110.141 172.53 110.404C172.787 110.667 173.105 110.866 173.484 111.002C173.863 111.139 174.3 111.207 174.794 111.207C175.007 111.207 175.217 111.187 175.424 111.146C175.63 111.106 175.813 111.061 175.972 111.013C176.13 110.965 176.244 110.929 176.314 110.906L176.476 111.439C176.356 111.49 176.2 111.54 176.006 111.59C175.815 111.64 175.61 111.682 175.392 111.715C175.175 111.748 174.968 111.764 174.771 111.764ZM174.435 109.456C174.694 109.456 174.904 109.404 175.064 109.3C175.224 109.195 175.341 109.038 175.415 108.827C175.488 108.616 175.525 108.35 175.525 108.03C175.525 107.705 175.484 107.452 175.403 107.27C175.322 107.088 175.202 106.961 175.044 106.887C174.885 106.814 174.69 106.777 174.458 106.777C174.238 106.777 174.049 106.835 173.893 106.951C173.738 107.065 173.619 107.218 173.536 107.409C173.455 107.599 173.414 107.805 173.414 108.03C173.414 108.277 173.447 108.51 173.513 108.728C173.579 108.945 173.686 109.121 173.835 109.256C173.984 109.389 174.184 109.456 174.435 109.456ZM180.307 110.303C180.025 110.303 179.769 110.25 179.539 110.143C179.309 110.035 179.126 109.879 178.991 109.676C178.855 109.472 178.788 109.224 178.788 108.934C178.788 108.679 178.838 108.472 178.938 108.314C179.039 108.153 179.173 108.028 179.341 107.937C179.51 107.846 179.695 107.778 179.898 107.734C180.103 107.687 180.309 107.651 180.516 107.624C180.786 107.589 181.006 107.563 181.174 107.545C181.344 107.526 181.468 107.494 181.545 107.45C181.624 107.405 181.664 107.328 181.664 107.218V107.195C181.664 106.908 181.586 106.686 181.429 106.528C181.274 106.369 181.04 106.29 180.724 106.29C180.398 106.29 180.142 106.361 179.956 106.504C179.771 106.648 179.64 106.8 179.565 106.963L178.915 106.731C179.031 106.46 179.186 106.249 179.379 106.099C179.574 105.946 179.787 105.84 180.017 105.78C180.249 105.718 180.477 105.687 180.701 105.687C180.844 105.687 181.009 105.704 181.194 105.739C181.382 105.772 181.562 105.841 181.736 105.945C181.912 106.049 182.058 106.207 182.174 106.418C182.29 106.628 182.348 106.91 182.348 107.264V110.198H181.664V109.595H181.629C181.583 109.692 181.505 109.795 181.397 109.906C181.289 110.016 181.145 110.109 180.965 110.187C180.785 110.264 180.566 110.303 180.307 110.303ZM180.411 109.688C180.682 109.688 180.91 109.635 181.096 109.529C181.283 109.422 181.424 109.285 181.519 109.117C181.616 108.949 181.664 108.772 181.664 108.586V107.96C181.635 107.995 181.571 108.027 181.473 108.056C181.376 108.083 181.264 108.107 181.136 108.128C181.011 108.147 180.888 108.165 180.768 108.18C180.65 108.194 180.554 108.205 180.481 108.215C180.303 108.238 180.137 108.276 179.982 108.328C179.83 108.378 179.706 108.455 179.611 108.557C179.518 108.658 179.472 108.795 179.472 108.969C179.472 109.207 179.56 109.387 179.736 109.508C179.914 109.628 180.139 109.688 180.411 109.688ZM183.597 111.868V105.745H184.258V106.452H184.339C184.39 106.375 184.459 106.276 184.548 106.157C184.639 106.035 184.768 105.927 184.937 105.832C185.107 105.735 185.337 105.687 185.627 105.687C186.002 105.687 186.332 105.781 186.618 105.968C186.904 106.156 187.128 106.421 187.288 106.765C187.449 107.11 187.529 107.515 187.529 107.983C187.529 108.455 187.449 108.864 187.288 109.21C187.128 109.554 186.905 109.82 186.621 110.01C186.337 110.197 186.009 110.291 185.638 110.291C185.352 110.291 185.123 110.244 184.951 110.149C184.779 110.052 184.647 109.943 184.554 109.821C184.461 109.698 184.39 109.595 184.339 109.514H184.281V111.868H183.597ZM184.27 107.972C184.27 108.308 184.319 108.605 184.418 108.862C184.516 109.117 184.66 109.317 184.85 109.462C185.039 109.605 185.271 109.676 185.546 109.676C185.832 109.676 186.07 109.601 186.262 109.45C186.455 109.298 186.6 109.093 186.697 108.836C186.795 108.577 186.844 108.289 186.844 107.972C186.844 107.658 186.796 107.376 186.699 107.125C186.605 106.872 186.461 106.672 186.267 106.525C186.076 106.376 185.835 106.302 185.546 106.302C185.267 106.302 185.033 106.372 184.844 106.513C184.654 106.652 184.511 106.848 184.415 107.099C184.318 107.348 184.27 107.639 184.27 107.972ZM188.573 111.868V105.745H189.234V106.452H189.315C189.365 106.375 189.435 106.276 189.524 106.157C189.614 106.035 189.744 105.927 189.912 105.832C190.082 105.735 190.312 105.687 190.602 105.687C190.977 105.687 191.308 105.781 191.594 105.968C191.88 106.156 192.103 106.421 192.263 106.765C192.424 107.11 192.504 107.515 192.504 107.983C192.504 108.455 192.424 108.864 192.263 109.21C192.103 109.554 191.881 109.82 191.597 110.01C191.312 110.197 190.985 110.291 190.614 110.291C190.328 110.291 190.099 110.244 189.927 110.149C189.755 110.052 189.622 109.943 189.529 109.821C189.437 109.698 189.365 109.595 189.315 109.514H189.257V111.868H188.573ZM189.245 107.972C189.245 108.308 189.294 108.605 189.393 108.862C189.492 109.117 189.636 109.317 189.825 109.462C190.015 109.605 190.246 109.676 190.521 109.676C190.807 109.676 191.046 109.601 191.237 109.45C191.43 109.298 191.575 109.093 191.672 108.836C191.771 108.577 191.82 108.289 191.82 107.972C191.82 107.658 191.772 107.376 191.675 107.125C191.58 106.872 191.436 106.672 191.243 106.525C191.052 106.376 190.811 106.302 190.521 106.302C190.243 106.302 190.009 106.372 189.819 106.513C189.63 106.652 189.487 106.848 189.39 107.099C189.294 107.348 189.245 107.639 189.245 107.972ZM194.405 110.198L193.049 105.745H193.768L194.73 109.155H194.777L195.728 105.745H196.458L197.398 109.143H197.444L198.407 105.745H199.126L197.769 110.198H197.096L196.122 106.777H196.052L195.078 110.198H194.405ZM200.03 110.198V105.745H200.691V106.418H200.738C200.819 106.197 200.966 106.018 201.179 105.881C201.391 105.744 201.631 105.675 201.898 105.675C201.948 105.675 202.011 105.676 202.086 105.678C202.161 105.68 202.218 105.683 202.257 105.687V106.383C202.234 106.377 202.181 106.368 202.098 106.357C202.016 106.343 201.93 106.336 201.84 106.336C201.623 106.336 201.43 106.382 201.26 106.473C201.092 106.562 200.958 106.685 200.86 106.844C200.763 107 200.715 107.179 200.715 107.38V110.198H200.03ZM203.068 110.198V105.745H203.752V110.198H203.068ZM203.416 105.003C203.283 105.003 203.168 104.957 203.071 104.866C202.976 104.775 202.929 104.666 202.929 104.539C202.929 104.411 202.976 104.302 203.071 104.211C203.168 104.12 203.283 104.075 203.416 104.075C203.55 104.075 203.664 104.12 203.758 104.211C203.855 104.302 203.903 104.411 203.903 104.539C203.903 104.666 203.855 104.775 203.758 104.866C203.664 104.957 203.55 105.003 203.416 105.003ZM206.943 105.745V106.325H204.635V105.745H206.943ZM205.307 104.678H205.992V108.923C205.992 109.116 206.02 109.261 206.076 109.358C206.134 109.452 206.207 109.516 206.296 109.549C206.387 109.58 206.483 109.595 206.583 109.595C206.658 109.595 206.72 109.591 206.769 109.584C206.817 109.574 206.856 109.566 206.885 109.56L207.024 110.175C206.977 110.193 206.913 110.21 206.83 110.227C206.746 110.247 206.641 110.256 206.513 110.256C206.32 110.256 206.131 110.215 205.945 110.132C205.762 110.049 205.609 109.922 205.487 109.752C205.367 109.582 205.307 109.367 205.307 109.108V104.678ZM209.791 110.291C209.362 110.291 208.992 110.196 208.681 110.007C208.372 109.816 208.133 109.549 207.965 109.207C207.798 108.863 207.715 108.463 207.715 108.006C207.715 107.55 207.798 107.148 207.965 106.8C208.133 106.45 208.367 106.178 208.666 105.983C208.968 105.785 209.32 105.687 209.722 105.687C209.954 105.687 210.183 105.726 210.409 105.803C210.635 105.88 210.841 106.006 211.026 106.18C211.212 106.352 211.36 106.58 211.47 106.864C211.58 107.148 211.635 107.498 211.635 107.914V108.204H208.202V107.612H210.939C210.939 107.361 210.889 107.137 210.789 106.939C210.69 106.742 210.549 106.587 210.365 106.473C210.184 106.359 209.969 106.302 209.722 106.302C209.449 106.302 209.213 106.369 209.014 106.504C208.817 106.638 208.665 106.812 208.559 107.026C208.453 107.241 208.4 107.471 208.4 107.716V108.111C208.4 108.447 208.458 108.732 208.574 108.966C208.691 109.198 208.855 109.375 209.064 109.497C209.272 109.617 209.515 109.676 209.791 109.676C209.971 109.676 210.133 109.651 210.278 109.601C210.425 109.549 210.552 109.472 210.658 109.369C210.765 109.265 210.847 109.135 210.905 108.981L211.566 109.166C211.496 109.39 211.379 109.588 211.215 109.758C211.051 109.926 210.848 110.057 210.606 110.152C210.364 110.245 210.093 110.291 209.791 110.291ZM213.175 110.245C213.032 110.245 212.909 110.194 212.807 110.091C212.704 109.989 212.653 109.866 212.653 109.723C212.653 109.58 212.704 109.457 212.807 109.355C212.909 109.252 213.032 109.201 213.175 109.201C213.318 109.201 213.441 109.252 213.543 109.355C213.646 109.457 213.697 109.58 213.697 109.723C213.697 109.818 213.673 109.905 213.624 109.984C213.578 110.063 213.515 110.127 213.436 110.175C213.359 110.222 213.272 110.245 213.175 110.245ZM214.925 110.198V105.745H215.609V110.198H214.925ZM215.273 105.003C215.139 105.003 215.024 104.957 214.928 104.866C214.833 104.775 214.786 104.666 214.786 104.539C214.786 104.411 214.833 104.302 214.928 104.211C215.024 104.12 215.139 104.075 215.273 104.075C215.406 104.075 215.52 104.12 215.615 104.211C215.711 104.302 215.76 104.411 215.76 104.539C215.76 104.666 215.711 104.775 215.615 104.866C215.52 104.957 215.406 105.003 215.273 105.003ZM218.672 110.291C218.269 110.291 217.917 110.195 217.613 110.004C217.312 109.813 217.076 109.545 216.906 109.201C216.738 108.857 216.654 108.455 216.654 107.995C216.654 107.531 216.738 107.126 216.906 106.78C217.076 106.434 217.312 106.165 217.613 105.974C217.917 105.783 218.269 105.687 218.672 105.687C219.074 105.687 219.425 105.783 219.727 105.974C220.03 106.165 220.266 106.434 220.434 106.78C220.604 107.126 220.69 107.531 220.69 107.995C220.69 108.455 220.604 108.857 220.434 109.201C220.266 109.545 220.03 109.813 219.727 110.004C219.425 110.195 219.074 110.291 218.672 110.291ZM218.672 109.676C218.977 109.676 219.228 109.598 219.425 109.442C219.623 109.285 219.768 109.079 219.863 108.824C219.958 108.569 220.005 108.292 220.005 107.995C220.005 107.697 219.958 107.42 219.863 107.163C219.768 106.906 219.623 106.698 219.425 106.539C219.228 106.381 218.977 106.302 218.672 106.302C218.366 106.302 218.115 106.381 217.918 106.539C217.721 106.698 217.575 106.906 217.48 107.163C217.385 107.42 217.338 107.697 217.338 107.995C217.338 108.292 217.385 108.569 217.48 108.824C217.575 109.079 217.721 109.285 217.918 109.442C218.115 109.598 218.366 109.676 218.672 109.676ZM222.755 109.387L222.708 109.7C222.675 109.92 222.625 110.156 222.557 110.407C222.492 110.658 222.423 110.895 222.352 111.117C222.28 111.34 222.221 111.517 222.175 111.648H221.653C221.678 111.524 221.711 111.361 221.751 111.158C221.792 110.955 221.833 110.728 221.873 110.477C221.916 110.227 221.951 109.972 221.978 109.711L222.012 109.387H222.755ZM228.058 109.155V105.327H228.708V109.155H228.058ZM226.47 107.566V106.916H230.297V107.566H226.47ZM231.55 108.981V108.389L234.16 104.26H234.589V105.177H234.299L232.327 108.296V108.343H235.841V108.981H231.55ZM234.345 110.198V108.801V108.525V104.26H235.029V110.198H234.345ZM236.789 108.981V108.389L239.398 104.26H239.827V105.177H239.537L237.566 108.296V108.343H241.08V108.981H236.789ZM239.584 110.198V108.801V108.525V104.26H240.268V110.198H239.584ZM242.352 110.198L245.008 104.945V104.898H241.946V104.26H245.75V104.933L243.106 110.198H242.352ZM246.32 110.245C246.177 110.245 246.055 110.194 245.952 110.091C245.85 109.989 245.799 109.866 245.799 109.723C245.799 109.58 245.85 109.457 245.952 109.355C246.055 109.252 246.177 109.201 246.32 109.201C246.464 109.201 246.586 109.252 246.689 109.355C246.791 109.457 246.842 109.58 246.842 109.723C246.842 109.818 246.818 109.905 246.77 109.984C246.724 110.063 246.661 110.127 246.581 110.175C246.504 110.222 246.417 110.245 246.32 110.245ZM248.569 110.245C248.426 110.245 248.303 110.194 248.201 110.091C248.098 109.989 248.047 109.866 248.047 109.723C248.047 109.58 248.098 109.457 248.201 109.355C248.303 109.252 248.426 109.201 248.569 109.201C248.712 109.201 248.835 109.252 248.937 109.355C249.04 109.457 249.091 109.58 249.091 109.723C249.091 109.818 249.067 109.905 249.018 109.984C248.972 110.063 248.909 110.127 248.83 110.175C248.753 110.222 248.666 110.245 248.569 110.245ZM250.818 110.245C250.674 110.245 250.552 110.194 250.449 110.091C250.347 109.989 250.296 109.866 250.296 109.723C250.296 109.58 250.347 109.457 250.449 109.355C250.552 109.252 250.674 109.201 250.818 109.201C250.961 109.201 251.083 109.252 251.186 109.355C251.288 109.457 251.339 109.58 251.339 109.723C251.339 109.818 251.315 109.905 251.267 109.984C251.221 110.063 251.158 110.127 251.078 110.175C251.001 110.222 250.914 110.245 250.818 110.245Z" fill="#ADADB1"/>
+<g clip-path="url(#clip3_6627_62151)">
+<rect x="36.7334" y="130.358" width="18.6624" height="18.6624" rx="9.3312" fill="#EDEDF0"/>
+<path d="M41.4777 142.359V137.269H43.3416C43.7028 137.269 44.0019 137.329 44.2388 137.448C44.4757 137.566 44.653 137.726 44.7706 137.928C44.8883 138.129 44.9471 138.355 44.9471 138.606C44.9471 138.819 44.9081 138.998 44.8303 139.143C44.7524 139.287 44.648 139.403 44.5171 139.491C44.3879 139.577 44.2454 139.64 44.0897 139.68V139.73C44.2587 139.738 44.4235 139.793 44.5842 139.894C44.7466 139.993 44.8808 140.135 44.9868 140.319C45.0929 140.503 45.1459 140.726 45.1459 140.99C45.1459 141.25 45.0846 141.484 44.962 141.691C44.841 141.896 44.6538 142.059 44.4003 142.18C44.1468 142.3 43.8229 142.359 43.4286 142.359H41.4777ZM42.2456 141.701H43.354C43.7219 141.701 43.9853 141.629 44.1443 141.487C44.3034 141.344 44.3829 141.166 44.3829 140.953C44.3829 140.792 44.3423 140.644 44.2611 140.51C44.18 140.376 44.064 140.269 43.9132 140.19C43.7641 140.11 43.5868 140.07 43.3814 140.07H42.2456V141.701ZM42.2456 139.471H43.2745C43.4468 139.471 43.6017 139.438 43.7393 139.372C43.8784 139.306 43.9886 139.213 44.0698 139.094C44.1526 138.973 44.194 138.83 44.194 138.666C44.194 138.456 44.1203 138.279 43.9729 138.137C43.8254 137.994 43.5992 137.923 43.2944 137.923H42.2456V139.471ZM47.7044 142.359H46.0567V137.269H47.7566C48.2553 137.269 48.6836 137.371 49.0415 137.575C49.3994 137.777 49.6736 138.068 49.8641 138.447C50.0563 138.825 50.1524 139.278 50.1524 139.807C50.1524 140.337 50.0555 140.793 49.8616 141.174C49.6694 141.555 49.3911 141.848 49.0266 142.054C48.6621 142.257 48.2214 142.359 47.7044 142.359ZM46.8247 141.688H47.6622C48.0499 141.688 48.3721 141.615 48.6289 141.469C48.8857 141.322 49.0779 141.109 49.2055 140.831C49.3331 140.551 49.3969 140.209 49.3969 139.807C49.3969 139.408 49.3331 139.069 49.2055 138.79C49.0796 138.512 48.8915 138.301 48.6414 138.157C48.3912 138.013 48.0805 137.94 47.7094 137.94H46.8247V141.688Z" fill="#97979B"/>
+</g>
+<path d="M63.1136 142.689V136.751H65.1896C65.6032 136.751 65.9444 136.822 66.2131 136.965C66.4818 137.106 66.6818 137.297 66.8133 137.537C66.9447 137.774 67.0104 138.038 67.0104 138.328C67.0104 138.583 66.965 138.794 66.8742 138.96C66.7852 139.126 66.6673 139.258 66.5204 139.354C66.3755 139.451 66.2179 139.523 66.0478 139.569V139.627C66.2295 139.639 66.4122 139.702 66.5958 139.818C66.7794 139.934 66.9331 140.101 67.0568 140.317C67.1805 140.534 67.2424 140.798 67.2424 141.112C67.2424 141.409 67.1747 141.677 67.0394 141.915C66.9041 142.152 66.6905 142.341 66.3986 142.48C66.1068 142.619 65.7269 142.689 65.2592 142.689H63.1136ZM63.8326 142.051H65.2592C65.7289 142.051 66.0623 141.96 66.2595 141.778C66.4586 141.595 66.5581 141.372 66.5581 141.112C66.5581 140.91 66.5069 140.725 66.4044 140.555C66.302 140.383 66.1561 140.246 65.9666 140.143C65.7772 140.039 65.553 139.987 65.294 139.987H63.8326V142.051ZM63.8326 139.36H65.1664C65.3829 139.36 65.5781 139.318 65.7521 139.233C65.928 139.148 66.0671 139.028 66.1696 138.873C66.274 138.719 66.3262 138.537 66.3262 138.328C66.3262 138.067 66.2353 137.846 66.0536 137.664C65.8719 137.48 65.5839 137.389 65.1896 137.389H63.8326V139.36ZM70.1984 142.782C69.7692 142.782 69.3991 142.687 69.0879 142.497C68.7786 142.306 68.5399 142.039 68.3717 141.697C68.2055 141.353 68.1224 140.953 68.1224 140.497C68.1224 140.041 68.2055 139.639 68.3717 139.291C68.5399 138.941 68.7738 138.668 69.0734 138.473C69.3749 138.276 69.7267 138.177 70.1288 138.177C70.3607 138.177 70.5898 138.216 70.8159 138.293C71.0421 138.371 71.2479 138.496 71.4335 138.67C71.6191 138.842 71.7669 139.07 71.8771 139.354C71.9873 139.639 72.0424 139.988 72.0424 140.404V140.694H68.6095V140.103H71.3465C71.3465 139.851 71.2963 139.627 71.1958 139.43C71.0972 139.233 70.9561 139.077 70.7724 138.963C70.5907 138.849 70.3762 138.792 70.1288 138.792C69.8562 138.792 69.6204 138.86 69.4213 138.995C69.2241 139.128 69.0724 139.302 68.9661 139.517C68.8598 139.731 68.8066 139.961 68.8066 140.207V140.601C68.8066 140.938 68.8646 141.223 68.9806 141.457C69.0985 141.689 69.2618 141.865 69.4706 141.987C69.6794 142.107 69.9219 142.167 70.1984 142.167C70.3781 142.167 70.5405 142.142 70.6855 142.092C70.8324 142.039 70.959 141.962 71.0653 141.86C71.1716 141.755 71.2537 141.626 71.3117 141.471L71.9728 141.657C71.9032 141.881 71.7863 142.078 71.622 142.248C71.4577 142.416 71.2547 142.548 71.0131 142.642C70.7715 142.735 70.4999 142.782 70.1984 142.782ZM73.7676 140.01V142.689H73.0833V138.235H73.7444V138.931H73.8023C73.9067 138.705 74.0652 138.523 74.2779 138.386C74.4905 138.247 74.765 138.177 75.1013 138.177C75.4028 138.177 75.6667 138.239 75.8928 138.363C76.119 138.485 76.2949 138.67 76.4205 138.92C76.5462 139.167 76.609 139.48 76.609 139.859V142.689H75.9247V139.905C75.9247 139.555 75.8339 139.283 75.6522 139.088C75.4705 138.891 75.2211 138.792 74.9041 138.792C74.6857 138.792 74.4905 138.839 74.3184 138.934C74.1483 139.029 74.014 139.167 73.9154 139.349C73.8168 139.53 73.7676 139.751 73.7676 140.01ZM77.8594 138.235H78.5436V143.014C78.5436 143.288 78.4963 143.526 78.4016 143.727C78.3088 143.928 78.1677 144.083 77.9783 144.194C77.7908 144.304 77.554 144.359 77.2679 144.359C77.2447 144.359 77.2215 144.359 77.1983 144.359C77.1751 144.359 77.1519 144.359 77.1287 144.359V143.721C77.1519 143.721 77.1732 143.721 77.1925 143.721C77.2118 143.721 77.2331 143.721 77.2563 143.721C77.4651 143.721 77.6178 143.659 77.7144 143.535C77.8111 143.414 77.8594 143.24 77.8594 143.014V138.235ZM78.1957 137.493C78.0623 137.493 77.9473 137.448 77.8507 137.357C77.756 137.266 77.7086 137.157 77.7086 137.029C77.7086 136.902 77.756 136.792 77.8507 136.701C77.9473 136.611 78.0623 136.565 78.1957 136.565C78.3291 136.565 78.4431 136.611 78.5378 136.701C78.6345 136.792 78.6828 136.902 78.6828 137.029C78.6828 137.157 78.6345 137.266 78.5378 137.357C78.4431 137.448 78.3291 137.493 78.1957 137.493ZM81.1075 142.793C80.8253 142.793 80.5691 142.74 80.3391 142.634C80.1091 142.525 79.9264 142.37 79.7911 142.167C79.6558 141.962 79.5882 141.715 79.5882 141.425C79.5882 141.17 79.6384 140.963 79.7389 140.804C79.8394 140.644 79.9738 140.518 80.142 140.427C80.3101 140.336 80.4957 140.269 80.6986 140.224C80.9035 140.178 81.1094 140.141 81.3162 140.114C81.5868 140.079 81.8062 140.053 81.9744 140.036C82.1445 140.017 82.2682 139.985 82.3455 139.94C82.4248 139.896 82.4644 139.818 82.4644 139.708V139.685C82.4644 139.399 82.3861 139.177 82.2295 139.018C82.0749 138.86 81.8401 138.78 81.525 138.78C81.1983 138.78 80.9422 138.852 80.7566 138.995C80.5711 139.138 80.4406 139.291 80.3652 139.453L79.7157 139.221C79.8317 138.95 79.9863 138.74 80.1796 138.589C80.3749 138.436 80.5875 138.33 80.8175 138.27C81.0495 138.208 81.2776 138.177 81.5018 138.177C81.6448 138.177 81.8091 138.195 81.9947 138.229C82.1822 138.262 82.3629 138.331 82.5369 138.435C82.7128 138.54 82.8587 138.697 82.9747 138.908C83.0907 139.119 83.1487 139.401 83.1487 139.755V142.689H82.4644V142.086H82.4296C82.3832 142.182 82.3059 142.286 82.1976 142.396C82.0894 142.506 81.9454 142.6 81.7656 142.677C81.5859 142.755 81.3665 142.793 81.1075 142.793ZM81.2118 142.179C81.4825 142.179 81.7105 142.125 81.8961 142.019C82.0836 141.913 82.2247 141.775 82.3194 141.607C82.4161 141.439 82.4644 141.262 82.4644 141.077V140.45C82.4354 140.485 82.3716 140.517 82.273 140.546C82.1764 140.573 82.0643 140.597 81.9367 140.619C81.8111 140.638 81.6883 140.655 81.5685 140.671C81.4506 140.684 81.3549 140.696 81.2814 140.706C81.1036 140.729 80.9374 140.766 80.7827 140.819C80.63 140.869 80.5063 140.945 80.4116 141.048C80.3188 141.148 80.2724 141.285 80.2724 141.459C80.2724 141.697 80.3604 141.877 80.5363 141.999C80.7141 142.119 80.9393 142.179 81.2118 142.179ZM84.3976 142.689V138.235H85.0587V138.931H85.1167C85.2094 138.693 85.3592 138.509 85.5661 138.377C85.7729 138.244 86.0213 138.177 86.3112 138.177C86.605 138.177 86.8495 138.244 87.0448 138.377C87.2419 138.509 87.3956 138.693 87.5058 138.931H87.5522C87.6662 138.701 87.8373 138.518 88.0654 138.383C88.2935 138.246 88.567 138.177 88.8859 138.177C89.2841 138.177 89.6098 138.302 89.863 138.551C90.1162 138.799 90.2428 139.184 90.2428 139.708V142.689H89.5586V139.708C89.5586 139.38 89.4687 139.145 89.2889 139.004C89.1092 138.863 88.8975 138.792 88.654 138.792C88.3408 138.792 88.0982 138.887 87.9262 139.076C87.7542 139.264 87.6682 139.501 87.6682 139.789V142.689H86.9723V139.639C86.9723 139.385 86.8901 139.181 86.7258 139.027C86.5615 138.87 86.3499 138.792 86.0909 138.792C85.913 138.792 85.7468 138.839 85.5922 138.934C85.4395 139.029 85.3157 139.16 85.221 139.328C85.1283 139.495 85.0819 139.687 85.0819 139.905V142.689H84.3976ZM91.494 142.689V138.235H92.1782V142.689H91.494ZM91.8419 137.493C91.7085 137.493 91.5935 137.448 91.4969 137.357C91.4021 137.266 91.3548 137.157 91.3548 137.029C91.3548 136.902 91.4021 136.792 91.4969 136.701C91.5935 136.611 91.7085 136.565 91.8419 136.565C91.9753 136.565 92.0893 136.611 92.184 136.701C92.2807 136.792 92.329 136.902 92.329 137.029C92.329 137.157 92.2807 137.266 92.184 137.357C92.0893 137.448 91.9753 137.493 91.8419 137.493ZM94.1158 140.01V142.689H93.4315V138.235H94.0926V138.931H94.1506C94.2549 138.705 94.4134 138.523 94.6261 138.386C94.8387 138.247 95.1132 138.177 95.4495 138.177C95.751 138.177 96.0149 138.239 96.241 138.363C96.4672 138.485 96.6431 138.67 96.7687 138.92C96.8944 139.167 96.9572 139.48 96.9572 139.859V142.689H96.2729V139.905C96.2729 139.555 96.1821 139.283 96.0004 139.088C95.8187 138.891 95.5693 138.792 95.2523 138.792C95.0339 138.792 94.8387 138.839 94.6667 138.934C94.4966 139.029 94.3622 139.167 94.2636 139.349C94.1651 139.53 94.1158 139.751 94.1158 140.01ZM102.429 142.689H100.597V136.751H102.51C103.086 136.751 103.579 136.87 103.989 137.107C104.399 137.343 104.713 137.682 104.931 138.125C105.15 138.566 105.259 139.094 105.259 139.708C105.259 140.327 105.149 140.859 104.928 141.306C104.708 141.75 104.387 142.092 103.966 142.332C103.544 142.57 103.032 142.689 102.429 142.689ZM101.316 142.051H102.383C102.874 142.051 103.281 141.956 103.603 141.767C103.926 141.577 104.167 141.308 104.325 140.958C104.484 140.608 104.563 140.191 104.563 139.708C104.563 139.229 104.485 138.816 104.328 138.47C104.172 138.122 103.938 137.855 103.627 137.67C103.315 137.482 102.928 137.389 102.464 137.389H101.316V142.051ZM107.683 142.793C107.401 142.793 107.145 142.74 106.915 142.634C106.685 142.525 106.502 142.37 106.367 142.167C106.231 141.962 106.164 141.715 106.164 141.425C106.164 141.17 106.214 140.963 106.314 140.804C106.415 140.644 106.549 140.518 106.717 140.427C106.886 140.336 107.071 140.269 107.274 140.224C107.479 140.178 107.685 140.141 107.892 140.114C108.162 140.079 108.382 140.053 108.55 140.036C108.72 140.017 108.844 139.985 108.921 139.94C109 139.896 109.04 139.818 109.04 139.708V139.685C109.04 139.399 108.962 139.177 108.805 139.018C108.65 138.86 108.416 138.78 108.1 138.78C107.774 138.78 107.518 138.852 107.332 138.995C107.147 139.138 107.016 139.291 106.941 139.453L106.291 139.221C106.407 138.95 106.562 138.74 106.755 138.589C106.95 138.436 107.163 138.33 107.393 138.27C107.625 138.208 107.853 138.177 108.077 138.177C108.22 138.177 108.385 138.195 108.57 138.229C108.758 138.262 108.938 138.331 109.112 138.435C109.288 138.54 109.434 138.697 109.55 138.908C109.666 139.119 109.724 139.401 109.724 139.755V142.689H109.04V142.086H109.005C108.959 142.182 108.881 142.286 108.773 142.396C108.665 142.506 108.521 142.6 108.341 142.677C108.161 142.755 107.942 142.793 107.683 142.793ZM107.787 142.179C108.058 142.179 108.286 142.125 108.472 142.019C108.659 141.913 108.8 141.775 108.895 141.607C108.992 141.439 109.04 141.262 109.04 141.077V140.45C109.011 140.485 108.947 140.517 108.849 140.546C108.752 140.573 108.64 140.597 108.512 140.619C108.387 140.638 108.264 140.655 108.144 140.671C108.026 140.684 107.93 140.696 107.857 140.706C107.679 140.729 107.513 140.766 107.358 140.819C107.205 140.869 107.082 140.945 106.987 141.048C106.894 141.148 106.848 141.285 106.848 141.459C106.848 141.697 106.936 141.877 107.112 141.999C107.29 142.119 107.515 142.179 107.787 142.179ZM114.455 138.235L112.808 142.689H112.113L110.466 138.235H111.208L112.437 141.784H112.484L113.713 138.235H114.455ZM115.358 142.689V138.235H116.043V142.689H115.358ZM115.706 137.493C115.573 137.493 115.458 137.448 115.361 137.357C115.267 137.266 115.219 137.157 115.219 137.029C115.219 136.902 115.267 136.792 115.361 136.701C115.458 136.611 115.573 136.565 115.706 136.565C115.84 136.565 115.954 136.611 116.049 136.701C116.145 136.792 116.193 136.902 116.193 137.029C116.193 137.157 116.145 137.266 116.049 137.357C115.954 137.448 115.84 137.493 115.706 137.493ZM120.451 139.233L119.836 139.407C119.797 139.304 119.74 139.205 119.665 139.108C119.591 139.009 119.491 138.928 119.363 138.864C119.236 138.801 119.072 138.769 118.873 138.769C118.601 138.769 118.374 138.832 118.192 138.957C118.012 139.081 117.922 139.238 117.922 139.43C117.922 139.6 117.984 139.734 118.108 139.833C118.232 139.931 118.425 140.014 118.688 140.079L119.349 140.242C119.747 140.338 120.044 140.486 120.239 140.685C120.434 140.882 120.532 141.137 120.532 141.448C120.532 141.703 120.458 141.931 120.311 142.132C120.166 142.333 119.963 142.492 119.703 142.608C119.442 142.724 119.138 142.782 118.792 142.782C118.338 142.782 117.962 142.683 117.664 142.486C117.367 142.289 117.178 142.001 117.099 141.622L117.748 141.459C117.81 141.699 117.927 141.879 118.099 141.999C118.273 142.119 118.5 142.179 118.781 142.179C119.099 142.179 119.353 142.111 119.54 141.976C119.73 141.838 119.824 141.674 119.824 141.483C119.824 141.328 119.77 141.199 119.662 141.094C119.554 140.988 119.387 140.909 119.163 140.856L118.421 140.682C118.013 140.586 117.714 140.436 117.522 140.233C117.333 140.028 117.238 139.772 117.238 139.465C117.238 139.213 117.309 138.991 117.45 138.798C117.593 138.604 117.787 138.453 118.032 138.343C118.28 138.232 118.56 138.177 118.873 138.177C119.314 138.177 119.66 138.274 119.911 138.467C120.165 138.661 120.344 138.916 120.451 139.233Z" fill="#ADADB1"/>
+<path d="M150.01 142.857V136.919H150.694V139.111H150.752C150.803 139.033 150.872 138.935 150.961 138.815C151.052 138.693 151.181 138.585 151.35 138.49C151.52 138.393 151.75 138.345 152.04 138.345C152.415 138.345 152.745 138.439 153.031 138.626C153.317 138.814 153.541 139.08 153.701 139.424C153.861 139.768 153.942 140.174 153.942 140.642C153.942 141.113 153.861 141.522 153.701 141.868C153.541 142.212 153.318 142.479 153.034 142.668C152.75 142.856 152.422 142.949 152.051 142.949C151.765 142.949 151.536 142.902 151.364 142.807C151.192 142.711 151.06 142.602 150.967 142.48C150.874 142.356 150.803 142.254 150.752 142.172H150.671V142.857H150.01ZM150.683 140.63C150.683 140.966 150.732 141.263 150.831 141.52C150.929 141.775 151.073 141.975 151.263 142.12C151.452 142.263 151.684 142.335 151.958 142.335C152.245 142.335 152.483 142.259 152.675 142.109C152.868 141.956 153.013 141.751 153.11 141.494C153.208 141.235 153.257 140.947 153.257 140.63C153.257 140.317 153.209 140.035 153.112 139.783C153.018 139.53 152.874 139.33 152.68 139.183C152.489 139.034 152.248 138.96 151.958 138.96C151.68 138.96 151.446 139.03 151.257 139.172C151.067 139.311 150.924 139.506 150.828 139.757C150.731 140.007 150.683 140.297 150.683 140.63ZM156.856 142.949C156.427 142.949 156.056 142.855 155.745 142.665C155.436 142.474 155.197 142.207 155.029 141.865C154.863 141.521 154.78 141.121 154.78 140.665C154.78 140.209 154.863 139.806 155.029 139.459C155.197 139.109 155.431 138.836 155.731 138.641C156.032 138.444 156.384 138.345 156.786 138.345C157.018 138.345 157.247 138.384 157.473 138.461C157.699 138.538 157.905 138.664 158.091 138.838C158.276 139.01 158.424 139.238 158.534 139.522C158.645 139.806 158.7 140.156 158.7 140.572V140.862H155.267V140.27H158.004C158.004 140.019 157.954 139.795 157.853 139.598C157.754 139.401 157.613 139.245 157.43 139.131C157.248 139.017 157.033 138.96 156.786 138.96C156.513 138.96 156.278 139.028 156.079 139.163C155.881 139.296 155.73 139.47 155.623 139.685C155.517 139.899 155.464 140.129 155.464 140.375V140.769C155.464 141.105 155.522 141.391 155.638 141.624C155.756 141.856 155.919 142.033 156.128 142.155C156.337 142.275 156.579 142.335 156.856 142.335C157.035 142.335 157.198 142.31 157.343 142.259C157.49 142.207 157.616 142.13 157.723 142.027C157.829 141.923 157.911 141.794 157.969 141.639L158.63 141.824C158.56 142.049 158.444 142.246 158.279 142.416C158.115 142.584 157.912 142.716 157.67 142.81C157.429 142.903 157.157 142.949 156.856 142.949ZM160.425 140.178V142.857H159.741V138.403H160.402V139.099H160.46C160.564 138.873 160.723 138.691 160.935 138.554C161.148 138.415 161.422 138.345 161.759 138.345C162.06 138.345 162.324 138.407 162.55 138.531C162.776 138.653 162.952 138.838 163.078 139.087C163.203 139.335 163.266 139.648 163.266 140.027V142.857H162.582V140.073C162.582 139.723 162.491 139.451 162.309 139.256C162.128 139.058 161.878 138.96 161.561 138.96C161.343 138.96 161.148 139.007 160.976 139.102C160.806 139.197 160.671 139.335 160.573 139.517C160.474 139.698 160.425 139.919 160.425 140.178ZM164.517 138.403H165.201V143.181C165.201 143.456 165.154 143.694 165.059 143.895C164.966 144.096 164.825 144.251 164.636 144.361C164.448 144.472 164.211 144.527 163.925 144.527C163.902 144.527 163.879 144.527 163.856 144.527C163.832 144.527 163.809 144.527 163.786 144.527V143.889C163.809 143.889 163.83 143.889 163.85 143.889C163.869 143.889 163.89 143.889 163.914 143.889C164.122 143.889 164.275 143.827 164.372 143.703C164.468 143.582 164.517 143.408 164.517 143.181V138.403ZM164.853 137.661C164.72 137.661 164.605 137.615 164.508 137.525C164.413 137.434 164.366 137.325 164.366 137.197C164.366 137.069 164.413 136.96 164.508 136.869C164.605 136.779 164.72 136.733 164.853 136.733C164.986 136.733 165.1 136.779 165.195 136.869C165.292 136.96 165.34 137.069 165.34 137.197C165.34 137.325 165.292 137.434 165.195 137.525C165.1 137.615 164.986 137.661 164.853 137.661ZM167.765 142.961C167.483 142.961 167.226 142.908 166.996 142.802C166.766 142.693 166.584 142.538 166.448 142.335C166.313 142.13 166.245 141.882 166.245 141.593C166.245 141.337 166.296 141.131 166.396 140.972C166.497 140.812 166.631 140.686 166.799 140.595C166.967 140.504 167.153 140.437 167.356 140.392C167.561 140.346 167.767 140.309 167.974 140.282C168.244 140.247 168.464 140.221 168.632 140.204C168.802 140.184 168.925 140.152 169.003 140.108C169.082 140.064 169.122 139.986 169.122 139.876V139.853C169.122 139.567 169.043 139.345 168.887 139.186C168.732 139.028 168.497 138.948 168.182 138.948C167.856 138.948 167.599 139.02 167.414 139.163C167.228 139.306 167.098 139.459 167.022 139.621L166.373 139.389C166.489 139.118 166.644 138.908 166.837 138.757C167.032 138.604 167.245 138.498 167.475 138.438C167.707 138.376 167.935 138.345 168.159 138.345C168.302 138.345 168.466 138.363 168.652 138.397C168.839 138.43 169.02 138.499 169.194 138.603C169.37 138.708 169.516 138.865 169.632 139.076C169.748 139.287 169.806 139.569 169.806 139.922V142.857H169.122V142.254H169.087C169.04 142.35 168.963 142.454 168.855 142.564C168.747 142.674 168.603 142.768 168.423 142.845C168.243 142.922 168.024 142.961 167.765 142.961ZM167.869 142.346C168.14 142.346 168.368 142.293 168.553 142.187C168.741 142.081 168.882 141.943 168.977 141.775C169.073 141.607 169.122 141.43 169.122 141.245V140.618C169.093 140.653 169.029 140.685 168.93 140.714C168.834 140.741 168.722 140.765 168.594 140.786C168.468 140.806 168.346 140.823 168.226 140.839C168.108 140.852 168.012 140.864 167.939 140.873C167.761 140.897 167.595 140.934 167.44 140.987C167.287 141.037 167.164 141.113 167.069 141.216C166.976 141.316 166.93 141.453 166.93 141.627C166.93 141.865 167.018 142.045 167.194 142.167C167.371 142.286 167.597 142.346 167.869 142.346ZM171.055 142.857V138.403H171.716V139.099H171.774C171.867 138.861 172.017 138.677 172.223 138.545C172.43 138.412 172.679 138.345 172.968 138.345C173.262 138.345 173.507 138.412 173.702 138.545C173.899 138.677 174.053 138.861 174.163 139.099H174.209C174.323 138.869 174.495 138.686 174.723 138.551C174.951 138.414 175.224 138.345 175.543 138.345C175.941 138.345 176.267 138.47 176.52 138.719C176.774 138.967 176.9 139.352 176.9 139.876V142.857H176.216V139.876C176.216 139.547 176.126 139.313 175.946 139.172C175.766 139.03 175.555 138.96 175.311 138.96C174.998 138.96 174.756 139.055 174.583 139.244C174.411 139.431 174.325 139.669 174.325 139.957V142.857H173.63V139.806C173.63 139.553 173.547 139.349 173.383 139.195C173.219 139.038 173.007 138.96 172.748 138.96C172.57 138.96 172.404 139.007 172.249 139.102C172.097 139.197 171.973 139.328 171.878 139.496C171.786 139.662 171.739 139.855 171.739 140.073V142.857H171.055ZM178.151 142.857V138.403H178.835V142.857H178.151ZM178.499 137.661C178.366 137.661 178.251 137.615 178.154 137.525C178.059 137.434 178.012 137.325 178.012 137.197C178.012 137.069 178.059 136.96 178.154 136.869C178.251 136.779 178.366 136.733 178.499 136.733C178.633 136.733 178.747 136.779 178.841 136.869C178.938 136.96 178.986 137.069 178.986 137.197C178.986 137.325 178.938 137.434 178.841 137.525C178.747 137.615 178.633 137.661 178.499 137.661ZM180.773 140.178V142.857H180.089V138.403H180.75V139.099H180.808C180.912 138.873 181.071 138.691 181.283 138.554C181.496 138.415 181.77 138.345 182.107 138.345C182.408 138.345 182.672 138.407 182.898 138.531C183.124 138.653 183.3 138.838 183.426 139.087C183.552 139.335 183.614 139.648 183.614 140.027V142.857H182.93V140.073C182.93 139.723 182.839 139.451 182.658 139.256C182.476 139.058 182.227 138.96 181.91 138.96C181.691 138.96 181.496 139.007 181.324 139.102C181.154 139.197 181.019 139.335 180.921 139.517C180.822 139.698 180.773 139.919 180.773 140.178ZM185.364 142.903C185.221 142.903 185.098 142.852 184.995 142.749C184.893 142.647 184.842 142.524 184.842 142.381C184.842 142.238 184.893 142.115 184.995 142.013C185.098 141.911 185.221 141.859 185.364 141.859C185.507 141.859 185.629 141.911 185.732 142.013C185.834 142.115 185.885 142.238 185.885 142.381C185.885 142.476 185.861 142.563 185.813 142.642C185.767 142.721 185.704 142.785 185.625 142.833C185.547 142.88 185.46 142.903 185.364 142.903ZM188.795 142.949C188.424 142.949 188.096 142.856 187.812 142.668C187.528 142.479 187.306 142.212 187.145 141.868C186.985 141.522 186.905 141.113 186.905 140.642C186.905 140.174 186.985 139.768 187.145 139.424C187.306 139.08 187.529 138.814 187.815 138.626C188.101 138.439 188.432 138.345 188.807 138.345C189.097 138.345 189.326 138.393 189.494 138.49C189.664 138.585 189.793 138.693 189.882 138.815C189.973 138.935 190.044 139.033 190.094 139.111H190.152V136.919H190.836V142.857H190.175V142.172H190.094C190.044 142.254 189.972 142.356 189.879 142.48C189.787 142.602 189.654 142.711 189.482 142.807C189.31 142.902 189.081 142.949 188.795 142.949ZM188.888 142.335C189.162 142.335 189.394 142.263 189.584 142.12C189.773 141.975 189.917 141.775 190.016 141.52C190.114 141.263 190.164 140.966 190.164 140.63C190.164 140.297 190.115 140.007 190.019 139.757C189.922 139.506 189.779 139.311 189.589 139.172C189.4 139.03 189.166 138.96 188.888 138.96C188.598 138.96 188.356 139.034 188.163 139.183C187.972 139.33 187.828 139.53 187.731 139.783C187.636 140.035 187.589 140.317 187.589 140.63C187.589 140.947 187.637 141.235 187.734 141.494C187.832 141.751 187.977 141.956 188.169 142.109C188.362 142.259 188.602 142.335 188.888 142.335ZM193.495 142.961C193.213 142.961 192.957 142.908 192.727 142.802C192.497 142.693 192.314 142.538 192.179 142.335C192.043 142.13 191.976 141.882 191.976 141.593C191.976 141.337 192.026 141.131 192.126 140.972C192.227 140.812 192.361 140.686 192.53 140.595C192.698 140.504 192.883 140.437 193.086 140.392C193.291 140.346 193.497 140.309 193.704 140.282C193.974 140.247 194.194 140.221 194.362 140.204C194.532 140.184 194.656 140.152 194.733 140.108C194.812 140.064 194.852 139.986 194.852 139.876V139.853C194.852 139.567 194.774 139.345 194.617 139.186C194.462 139.028 194.228 138.948 193.913 138.948C193.586 138.948 193.33 139.02 193.144 139.163C192.959 139.306 192.828 139.459 192.753 139.621L192.103 139.389C192.219 139.118 192.374 138.908 192.567 138.757C192.762 138.604 192.975 138.498 193.205 138.438C193.437 138.376 193.665 138.345 193.889 138.345C194.032 138.345 194.197 138.363 194.382 138.397C194.57 138.43 194.75 138.499 194.924 138.603C195.1 138.708 195.246 138.865 195.362 139.076C195.478 139.287 195.536 139.569 195.536 139.922V142.857H194.852V142.254H194.817C194.771 142.35 194.693 142.454 194.585 142.564C194.477 142.674 194.333 142.768 194.153 142.845C193.973 142.922 193.754 142.961 193.495 142.961ZM193.599 142.346C193.87 142.346 194.098 142.293 194.284 142.187C194.471 142.081 194.612 141.943 194.707 141.775C194.804 141.607 194.852 141.43 194.852 141.245V140.618C194.823 140.653 194.759 140.685 194.661 140.714C194.564 140.741 194.452 140.765 194.324 140.786C194.199 140.806 194.076 140.823 193.956 140.839C193.838 140.852 193.742 140.864 193.669 140.873C193.491 140.897 193.325 140.934 193.17 140.987C193.018 141.037 192.894 141.113 192.799 141.216C192.706 141.316 192.66 141.453 192.66 141.627C192.66 141.865 192.748 142.045 192.924 142.167C193.102 142.286 193.327 142.346 193.599 142.346ZM200.267 138.403L198.62 142.857H197.925L196.278 138.403H197.02L198.249 141.952H198.296L199.525 138.403H200.267ZM201.171 142.857V138.403H201.855V142.857H201.171ZM201.518 137.661C201.385 137.661 201.27 137.615 201.173 137.525C201.079 137.434 201.031 137.325 201.031 137.197C201.031 137.069 201.079 136.96 201.173 136.869C201.27 136.779 201.385 136.733 201.518 136.733C201.652 136.733 201.766 136.779 201.861 136.869C201.957 136.96 202.006 137.069 202.006 137.197C202.006 137.325 201.957 137.434 201.861 137.525C201.766 137.615 201.652 137.661 201.518 137.661ZM206.263 139.401L205.648 139.575C205.609 139.472 205.552 139.373 205.477 139.276C205.403 139.177 205.303 139.096 205.175 139.032C205.048 138.969 204.884 138.937 204.685 138.937C204.413 138.937 204.186 138.999 204.004 139.125C203.824 139.249 203.734 139.406 203.734 139.598C203.734 139.768 203.796 139.902 203.92 140.001C204.044 140.099 204.237 140.181 204.5 140.247L205.161 140.41C205.559 140.506 205.856 140.654 206.051 140.853C206.246 141.05 206.344 141.305 206.344 141.616C206.344 141.871 206.27 142.099 206.124 142.3C205.979 142.501 205.776 142.66 205.515 142.776C205.254 142.891 204.95 142.949 204.604 142.949C204.15 142.949 203.774 142.851 203.476 142.654C203.179 142.457 202.99 142.169 202.911 141.79L203.56 141.627C203.622 141.867 203.739 142.047 203.911 142.167C204.085 142.286 204.312 142.346 204.593 142.346C204.912 142.346 205.165 142.279 205.352 142.143C205.542 142.006 205.636 141.842 205.636 141.651C205.636 141.496 205.582 141.366 205.474 141.262C205.366 141.156 205.2 141.076 204.975 141.024L204.233 140.85C203.825 140.754 203.526 140.604 203.334 140.401C203.145 140.196 203.05 139.94 203.05 139.633C203.05 139.381 203.121 139.159 203.262 138.966C203.405 138.772 203.599 138.621 203.845 138.51C204.092 138.4 204.372 138.345 204.685 138.345C205.126 138.345 205.472 138.442 205.723 138.635C205.977 138.828 206.156 139.084 206.263 139.401ZM210.795 144.422C210.204 144.422 209.681 144.341 209.227 144.179C208.772 144.018 208.391 143.782 208.081 143.468C207.772 143.155 207.538 142.772 207.38 142.317C207.221 141.863 207.142 141.343 207.142 140.758C207.142 140.191 207.222 139.685 207.383 139.238C207.545 138.792 207.78 138.413 208.087 138.102C208.396 137.788 208.771 137.55 209.212 137.385C209.655 137.221 210.155 137.139 210.714 137.139C211.257 137.139 211.733 137.228 212.141 137.406C212.55 137.582 212.892 137.82 213.167 138.122C213.443 138.422 213.65 138.759 213.787 139.134C213.927 139.509 213.996 139.895 213.996 140.294C213.996 140.574 213.983 140.858 213.956 141.146C213.929 141.434 213.872 141.699 213.785 141.94C213.698 142.18 213.563 142.373 213.382 142.52C213.202 142.667 212.958 142.741 212.651 142.741C212.516 142.741 212.367 142.719 212.204 142.677C212.042 142.634 211.898 142.564 211.772 142.465C211.647 142.367 211.572 142.234 211.549 142.068H211.514C211.468 142.18 211.396 142.286 211.3 142.387C211.205 142.487 211.08 142.568 210.926 142.628C210.773 142.688 210.586 142.714 210.366 142.706C210.115 142.696 209.893 142.64 209.702 142.538C209.511 142.433 209.35 142.292 209.221 142.114C209.093 141.935 208.997 141.727 208.931 141.491C208.867 141.253 208.835 140.997 208.835 140.723C208.835 140.462 208.874 140.223 208.951 140.007C209.028 139.79 209.136 139.601 209.273 139.438C209.412 139.276 209.575 139.146 209.76 139.05C209.948 138.951 210.15 138.89 210.366 138.867C210.559 138.848 210.735 138.856 210.894 138.893C211.052 138.928 211.183 138.981 211.285 139.053C211.388 139.122 211.452 139.2 211.479 139.285H211.514V138.96H212.129V141.581C212.129 141.743 212.174 141.886 212.265 142.01C212.356 142.134 212.488 142.196 212.662 142.196C212.86 142.196 213.01 142.128 213.115 141.993C213.221 141.857 213.294 141.649 213.332 141.366C213.373 141.084 213.393 140.723 213.393 140.282C213.393 140.023 213.357 139.768 213.286 139.517C213.216 139.263 213.11 139.027 212.967 138.806C212.826 138.586 212.647 138.392 212.43 138.223C212.214 138.055 211.96 137.924 211.668 137.829C211.378 137.732 211.048 137.684 210.679 137.684C210.225 137.684 209.818 137.755 209.459 137.896C209.101 138.035 208.797 138.239 208.545 138.508C208.296 138.774 208.106 139.099 207.974 139.482C207.845 139.863 207.78 140.296 207.78 140.781C207.78 141.274 207.845 141.711 207.974 142.094C208.106 142.477 208.299 142.8 208.554 143.063C208.811 143.325 209.129 143.525 209.508 143.66C209.887 143.797 210.324 143.866 210.818 143.866C211.031 143.866 211.241 143.845 211.448 143.805C211.654 143.764 211.837 143.72 211.996 143.671C212.154 143.623 212.268 143.587 212.338 143.564L212.5 144.098C212.38 144.148 212.224 144.198 212.03 144.248C211.839 144.299 211.634 144.34 211.416 144.373C211.199 144.406 210.992 144.422 210.795 144.422ZM210.459 142.114C210.718 142.114 210.928 142.062 211.088 141.958C211.248 141.853 211.365 141.696 211.439 141.485C211.512 141.275 211.549 141.009 211.549 140.688C211.549 140.363 211.508 140.11 211.427 139.928C211.346 139.747 211.226 139.619 211.068 139.546C210.909 139.472 210.714 139.435 210.482 139.435C210.262 139.435 210.073 139.493 209.917 139.609C209.762 139.723 209.643 139.876 209.56 140.067C209.479 140.257 209.438 140.464 209.438 140.688C209.438 140.935 209.471 141.168 209.537 141.387C209.603 141.603 209.71 141.779 209.859 141.914C210.008 142.048 210.208 142.114 210.459 142.114ZM216.888 142.949C216.459 142.949 216.088 142.855 215.777 142.665C215.468 142.474 215.229 142.207 215.061 141.865C214.895 141.521 214.812 141.121 214.812 140.665C214.812 140.209 214.895 139.806 215.061 139.459C215.229 139.109 215.463 138.836 215.763 138.641C216.064 138.444 216.416 138.345 216.818 138.345C217.05 138.345 217.279 138.384 217.505 138.461C217.731 138.538 217.937 138.664 218.123 138.838C218.308 139.01 218.456 139.238 218.566 139.522C218.677 139.806 218.732 140.156 218.732 140.572V140.862H215.299V140.27H218.036C218.036 140.019 217.986 139.795 217.885 139.598C217.786 139.401 217.645 139.245 217.462 139.131C217.28 139.017 217.065 138.96 216.818 138.96C216.546 138.96 216.31 139.028 216.111 139.163C215.913 139.296 215.762 139.47 215.655 139.685C215.549 139.899 215.496 140.129 215.496 140.375V140.769C215.496 141.105 215.554 141.391 215.67 141.624C215.788 141.856 215.951 142.033 216.16 142.155C216.369 142.275 216.611 142.335 216.888 142.335C217.067 142.335 217.23 142.31 217.375 142.259C217.522 142.207 217.648 142.13 217.755 142.027C217.861 141.923 217.943 141.794 218.001 141.639L218.662 141.824C218.593 142.049 218.476 142.246 218.311 142.416C218.147 142.584 217.944 142.716 217.702 142.81C217.461 142.903 217.189 142.949 216.888 142.949ZM220.163 138.403L221.23 140.224L222.297 138.403H223.086L221.648 140.63L223.086 142.857H222.297L221.23 141.129L220.163 142.857H219.375L220.79 140.63L219.375 138.403H220.163ZM225.373 142.961C225.091 142.961 224.834 142.908 224.604 142.802C224.374 142.693 224.192 142.538 224.056 142.335C223.921 142.13 223.854 141.882 223.854 141.593C223.854 141.337 223.904 141.131 224.004 140.972C224.105 140.812 224.239 140.686 224.407 140.595C224.575 140.504 224.761 140.437 224.964 140.392C225.169 140.346 225.375 140.309 225.582 140.282C225.852 140.247 226.072 140.221 226.24 140.204C226.41 140.184 226.534 140.152 226.611 140.108C226.69 140.064 226.73 139.986 226.73 139.876V139.853C226.73 139.567 226.651 139.345 226.495 139.186C226.34 139.028 226.105 138.948 225.79 138.948C225.464 138.948 225.208 139.02 225.022 139.163C224.836 139.306 224.706 139.459 224.631 139.621L223.981 139.389C224.097 139.118 224.252 138.908 224.445 138.757C224.64 138.604 224.853 138.498 225.083 138.438C225.315 138.376 225.543 138.345 225.767 138.345C225.91 138.345 226.074 138.363 226.26 138.397C226.448 138.43 226.628 138.499 226.802 138.603C226.978 138.708 227.124 138.865 227.24 139.076C227.356 139.287 227.414 139.569 227.414 139.922V142.857H226.73V142.254H226.695C226.649 142.35 226.571 142.454 226.463 142.564C226.355 142.674 226.211 142.768 226.031 142.845C225.851 142.922 225.632 142.961 225.373 142.961ZM225.477 142.346C225.748 142.346 225.976 142.293 226.161 142.187C226.349 142.081 226.49 141.943 226.585 141.775C226.681 141.607 226.73 141.43 226.73 141.245V140.618C226.701 140.653 226.637 140.685 226.538 140.714C226.442 140.741 226.33 140.765 226.202 140.786C226.076 140.806 225.954 140.823 225.834 140.839C225.716 140.852 225.62 140.864 225.547 140.873C225.369 140.897 225.203 140.934 225.048 140.987C224.895 141.037 224.772 141.113 224.677 141.216C224.584 141.316 224.538 141.453 224.538 141.627C224.538 141.865 224.626 142.045 224.802 142.167C224.979 142.286 225.205 142.346 225.477 142.346ZM228.663 142.857V138.403H229.324V139.099H229.382C229.475 138.861 229.625 138.677 229.831 138.545C230.038 138.412 230.287 138.345 230.577 138.345C230.87 138.345 231.115 138.412 231.31 138.545C231.507 138.677 231.661 138.861 231.771 139.099H231.818C231.932 138.869 232.103 138.686 232.331 138.551C232.559 138.414 232.832 138.345 233.151 138.345C233.549 138.345 233.875 138.47 234.128 138.719C234.382 138.967 234.508 139.352 234.508 139.876V142.857H233.824V139.876C233.824 139.547 233.734 139.313 233.554 139.172C233.375 139.03 233.163 138.96 232.919 138.96C232.606 138.96 232.364 139.055 232.192 139.244C232.02 139.431 231.934 139.669 231.934 139.957V142.857H231.238V139.806C231.238 139.553 231.156 139.349 230.991 139.195C230.827 139.038 230.615 138.96 230.356 138.96C230.178 138.96 230.012 139.007 229.858 139.102C229.705 139.197 229.581 139.328 229.486 139.496C229.394 139.662 229.347 139.855 229.347 140.073V142.857H228.663ZM235.759 144.527V138.403H236.42V139.111H236.502C236.552 139.033 236.621 138.935 236.71 138.815C236.801 138.693 236.931 138.585 237.099 138.49C237.269 138.393 237.499 138.345 237.789 138.345C238.164 138.345 238.494 138.439 238.781 138.626C239.067 138.814 239.29 139.08 239.45 139.424C239.611 139.768 239.691 140.174 239.691 140.642C239.691 141.113 239.611 141.522 239.45 141.868C239.29 142.212 239.068 142.479 238.783 142.668C238.499 142.856 238.172 142.949 237.801 142.949C237.514 142.949 237.285 142.902 237.113 142.807C236.941 142.711 236.809 142.602 236.716 142.48C236.623 142.356 236.552 142.254 236.502 142.172H236.444V144.527H235.759ZM236.432 140.63C236.432 140.966 236.481 141.263 236.58 141.52C236.678 141.775 236.822 141.975 237.012 142.12C237.201 142.263 237.433 142.335 237.708 142.335C237.994 142.335 238.233 142.259 238.424 142.109C238.617 141.956 238.762 141.751 238.859 141.494C238.957 141.235 239.007 140.947 239.007 140.63C239.007 140.317 238.958 140.035 238.862 139.783C238.767 139.53 238.623 139.33 238.43 139.183C238.238 139.034 237.998 138.96 237.708 138.96C237.429 138.96 237.196 139.03 237.006 139.172C236.817 139.311 236.674 139.506 236.577 139.757C236.48 140.007 236.432 140.297 236.432 140.63ZM241.419 136.919V142.857H240.735V136.919H241.419ZM244.54 142.949C244.11 142.949 243.74 142.855 243.429 142.665C243.12 142.474 242.881 142.207 242.713 141.865C242.547 141.521 242.464 141.121 242.464 140.665C242.464 140.209 242.547 139.806 242.713 139.459C242.881 139.109 243.115 138.836 243.415 138.641C243.716 138.444 244.068 138.345 244.47 138.345C244.702 138.345 244.931 138.384 245.157 138.461C245.383 138.538 245.589 138.664 245.775 138.838C245.96 139.01 246.108 139.238 246.218 139.522C246.328 139.806 246.384 140.156 246.384 140.572V140.862H242.951V140.27H245.688C245.688 140.019 245.637 139.795 245.537 139.598C245.438 139.401 245.297 139.245 245.114 139.131C244.932 139.017 244.717 138.96 244.47 138.96C244.197 138.96 243.962 139.028 243.762 139.163C243.565 139.296 243.414 139.47 243.307 139.685C243.201 139.899 243.148 140.129 243.148 140.375V140.769C243.148 141.105 243.206 141.391 243.322 141.624C243.44 141.856 243.603 142.033 243.812 142.155C244.021 142.275 244.263 142.335 244.54 142.335C244.719 142.335 244.882 142.31 245.027 142.259C245.174 142.207 245.3 142.13 245.406 142.027C245.513 141.923 245.595 141.794 245.653 141.639L246.314 141.824C246.244 142.049 246.127 142.246 245.963 142.416C245.799 142.584 245.596 142.716 245.354 142.81C245.113 142.903 244.841 142.949 244.54 142.949ZM247.923 142.903C247.78 142.903 247.657 142.852 247.555 142.749C247.452 142.647 247.401 142.524 247.401 142.381C247.401 142.238 247.452 142.115 247.555 142.013C247.657 141.911 247.78 141.859 247.923 141.859C248.066 141.859 248.189 141.911 248.291 142.013C248.394 142.115 248.445 142.238 248.445 142.381C248.445 142.476 248.421 142.563 248.373 142.642C248.326 142.721 248.263 142.785 248.184 142.833C248.107 142.88 248.02 142.903 247.923 142.903ZM251.482 142.949C251.065 142.949 250.705 142.851 250.404 142.654C250.102 142.457 249.87 142.185 249.708 141.839C249.545 141.493 249.464 141.098 249.464 140.653C249.464 140.201 249.547 139.802 249.714 139.456C249.882 139.108 250.116 138.836 250.415 138.641C250.717 138.444 251.069 138.345 251.471 138.345C251.784 138.345 252.066 138.403 252.317 138.519C252.569 138.635 252.774 138.797 252.935 139.006C253.095 139.215 253.195 139.459 253.233 139.737H252.549C252.497 139.534 252.381 139.354 252.201 139.198C252.023 139.039 251.784 138.96 251.482 138.96C251.215 138.96 250.982 139.029 250.781 139.169C250.581 139.306 250.426 139.5 250.314 139.751C250.204 140.001 250.148 140.294 250.148 140.63C250.148 140.974 250.203 141.274 250.311 141.529C250.421 141.784 250.576 141.982 250.775 142.123C250.976 142.264 251.212 142.335 251.482 142.335C251.66 142.335 251.821 142.304 251.966 142.242C252.111 142.18 252.234 142.091 252.335 141.975C252.435 141.859 252.507 141.72 252.549 141.558H253.233C253.195 141.821 253.099 142.057 252.946 142.268C252.796 142.477 252.596 142.643 252.346 142.767C252.099 142.889 251.811 142.949 251.482 142.949ZM256.043 142.949C255.641 142.949 255.288 142.854 254.985 142.662C254.683 142.471 254.447 142.203 254.277 141.859C254.109 141.515 254.025 141.113 254.025 140.653C254.025 140.189 254.109 139.784 254.277 139.438C254.447 139.092 254.683 138.824 254.985 138.632C255.288 138.441 255.641 138.345 256.043 138.345C256.445 138.345 256.797 138.441 257.098 138.632C257.402 138.824 257.638 139.092 257.806 139.438C257.976 139.784 258.061 140.189 258.061 140.653C258.061 141.113 257.976 141.515 257.806 141.859C257.638 142.203 257.402 142.471 257.098 142.662C256.797 142.854 256.445 142.949 256.043 142.949ZM256.043 142.335C256.348 142.335 256.6 142.257 256.797 142.1C256.994 141.943 257.14 141.738 257.235 141.482C257.329 141.227 257.377 140.951 257.377 140.653C257.377 140.355 257.329 140.078 257.235 139.821C257.14 139.564 256.994 139.356 256.797 139.198C256.6 139.039 256.348 138.96 256.043 138.96C255.738 138.96 255.486 139.039 255.289 139.198C255.092 139.356 254.946 139.564 254.851 139.821C254.757 140.078 254.709 140.355 254.709 140.653C254.709 140.951 254.757 141.227 254.851 141.482C254.946 141.738 255.092 141.943 255.289 142.1C255.486 142.257 255.738 142.335 256.043 142.335ZM259.106 142.857V138.403H259.767V139.099H259.825C259.917 138.861 260.067 138.677 260.274 138.545C260.481 138.412 260.729 138.345 261.019 138.345C261.313 138.345 261.557 138.412 261.753 138.545C261.95 138.677 262.104 138.861 262.214 139.099H262.26C262.374 138.869 262.545 138.686 262.773 138.551C263.001 138.414 263.275 138.345 263.594 138.345C263.992 138.345 264.318 138.47 264.571 138.719C264.824 138.967 264.951 139.352 264.951 139.876V142.857H264.267V139.876C264.267 139.547 264.177 139.313 263.997 139.172C263.817 139.03 263.605 138.96 263.362 138.96C263.049 138.96 262.806 139.055 262.634 139.244C262.462 139.431 262.376 139.669 262.376 139.957V142.857H261.68V139.806C261.68 139.553 261.598 139.349 261.434 139.195C261.269 139.038 261.058 138.96 260.799 138.96C260.621 138.96 260.455 139.007 260.3 139.102C260.147 139.197 260.024 139.328 259.929 139.496C259.836 139.662 259.79 139.855 259.79 140.073V142.857H259.106Z" fill="#ADADB1"/>
+<g clip-path="url(#clip4_6627_62151)">
+<rect x="36.7334" y="163.018" width="18.6624" height="18.6624" rx="9.3312" fill="#EDEDF0"/>
+<path d="M45.7725 172.475C45.7725 173.018 45.6731 173.485 45.4742 173.876C45.2754 174.266 45.0029 174.565 44.6566 174.776C44.312 174.985 43.9202 175.089 43.4811 175.089C43.0404 175.089 42.6469 174.985 42.3006 174.776C41.956 174.565 41.6843 174.265 41.4855 173.874C41.2866 173.483 41.1872 173.016 41.1872 172.475C41.1872 171.931 41.2866 171.465 41.4855 171.075C41.6843 170.684 41.956 170.384 42.3006 170.176C42.6469 169.965 43.0404 169.86 43.4811 169.86C43.9202 169.86 44.312 169.965 44.6566 170.176C45.0029 170.384 45.2754 170.684 45.4742 171.075C45.6731 171.465 45.7725 171.931 45.7725 172.475ZM45.012 172.475C45.012 172.06 44.9449 171.712 44.8107 171.428C44.6781 171.143 44.4959 170.928 44.2639 170.782C44.0336 170.635 43.7727 170.561 43.4811 170.561C43.1878 170.561 42.9261 170.635 42.6958 170.782C42.4655 170.928 42.2832 171.143 42.149 171.428C42.0165 171.712 41.9502 172.06 41.9502 172.475C41.9502 172.889 42.0165 173.238 42.149 173.523C42.2832 173.807 42.4655 174.022 42.6958 174.169C42.9261 174.315 43.1878 174.388 43.4811 174.388C43.7727 174.388 44.0336 174.315 44.2639 174.169C44.4959 174.022 44.6781 173.807 44.8107 173.523C44.9449 173.238 45.012 172.889 45.012 172.475ZM49.5059 171.267C49.4794 171.031 49.37 170.849 49.1779 170.72C48.9857 170.589 48.7438 170.524 48.4522 170.524C48.2434 170.524 48.0628 170.557 47.9104 170.623C47.758 170.688 47.6395 170.777 47.555 170.891C47.4722 171.004 47.4307 171.133 47.4307 171.277C47.4307 171.398 47.4589 171.502 47.5152 171.59C47.5732 171.678 47.6486 171.751 47.7414 171.811C47.8358 171.869 47.9369 171.918 48.0446 171.958C48.1523 171.996 48.2558 172.027 48.3552 172.052L48.8523 172.181C49.0147 172.221 49.1812 172.275 49.3518 172.343C49.5225 172.411 49.6807 172.5 49.8265 172.611C49.9723 172.722 50.0899 172.86 50.1794 173.024C50.2705 173.188 50.3161 173.384 50.3161 173.613C50.3161 173.901 50.2415 174.157 50.0924 174.381C49.945 174.604 49.7304 174.781 49.4487 174.91C49.1687 175.039 48.8299 175.104 48.4323 175.104C48.0512 175.104 47.7215 175.043 47.4432 174.923C47.1648 174.802 46.947 174.63 46.7896 174.408C46.6322 174.184 46.5452 173.919 46.5286 173.613H47.299C47.3139 173.797 47.3736 173.95 47.478 174.073C47.584 174.194 47.719 174.284 47.8831 174.343C48.0487 174.401 48.2302 174.43 48.4273 174.43C48.6444 174.43 48.8374 174.396 49.0064 174.329C49.177 174.259 49.3112 174.163 49.409 174.04C49.5067 173.916 49.5556 173.771 49.5556 173.605C49.5556 173.455 49.5125 173.331 49.4264 173.235C49.3419 173.139 49.2267 173.059 49.0809 172.996C48.9368 172.934 48.7736 172.878 48.5913 172.83L47.9899 172.666C47.5823 172.555 47.2593 172.392 47.0207 172.176C46.7838 171.961 46.6653 171.676 46.6653 171.321C46.6653 171.028 46.7448 170.772 46.9039 170.553C47.0629 170.335 47.2783 170.165 47.55 170.044C47.8218 169.921 48.1283 169.86 48.4696 169.86C48.8142 169.86 49.1182 169.921 49.3816 170.042C49.6467 170.162 49.8555 170.329 50.0079 170.541C50.1604 170.751 50.2399 170.993 50.2465 171.267H49.5059Z" fill="#97979B"/>
+</g>
+<path d="M68.1238 172.38C68.1238 173.006 68.0107 173.548 67.7846 174.004C67.5584 174.46 67.2482 174.812 66.8539 175.059C66.4595 175.307 66.0092 175.43 65.5027 175.43C64.9963 175.43 64.5459 175.307 64.1516 175.059C63.7573 174.812 63.447 174.46 63.2209 174.004C62.9947 173.548 62.8816 173.006 62.8816 172.38C62.8816 171.754 62.9947 171.213 63.2209 170.756C63.447 170.3 63.7573 169.948 64.1516 169.701C64.5459 169.454 64.9963 169.33 65.5027 169.33C66.0092 169.33 66.4595 169.454 66.8539 169.701C67.2482 169.948 67.5584 170.3 67.7846 170.756C68.0107 171.213 68.1238 171.754 68.1238 172.38ZM67.4279 172.38C67.4279 171.866 67.3419 171.432 67.1699 171.078C66.9998 170.724 66.7688 170.457 66.4769 170.275C66.187 170.093 65.8623 170.003 65.5027 170.003C65.1432 170.003 64.8175 170.093 64.5256 170.275C64.2357 170.457 64.0047 170.724 63.8326 171.078C63.6625 171.432 63.5775 171.866 63.5775 172.38C63.5775 172.894 63.6625 173.328 63.8326 173.682C64.0047 174.036 64.2357 174.303 64.5256 174.485C64.8175 174.667 65.1432 174.758 65.5027 174.758C65.8623 174.758 66.187 174.667 66.4769 174.485C66.7688 174.303 66.9998 174.036 67.1699 173.682C67.3419 173.328 67.4279 172.894 67.4279 172.38ZM69.9244 169.411V175.349H69.2401V169.411H69.9244ZM71.1776 175.349V170.896H71.8619V175.349H71.1776ZM71.5256 170.153C71.3922 170.153 71.2772 170.108 71.1805 170.017C71.0858 169.926 71.0385 169.817 71.0385 169.689C71.0385 169.562 71.0858 169.453 71.1805 169.362C71.2772 169.271 71.3922 169.225 71.5256 169.225C71.6589 169.225 71.773 169.271 71.8677 169.362C71.9643 169.453 72.0127 169.562 72.0127 169.689C72.0127 169.817 71.9643 169.926 71.8677 170.017C71.773 170.108 71.6589 170.153 71.5256 170.153ZM76.7569 170.896L75.11 175.349H74.4141L72.7672 170.896H73.5095L74.7389 174.444H74.7853L76.0146 170.896H76.7569ZM77.66 175.349V170.896H78.3443V175.349H77.66ZM78.008 170.153C77.8746 170.153 77.7596 170.108 77.6629 170.017C77.5682 169.926 77.5209 169.817 77.5209 169.689C77.5209 169.562 77.5682 169.453 77.6629 169.362C77.7596 169.271 77.8746 169.225 78.008 169.225C78.1413 169.225 78.2554 169.271 78.3501 169.362C78.4468 169.453 78.4951 169.562 78.4951 169.689C78.4951 169.817 78.4468 169.926 78.3501 170.017C78.2554 170.108 78.1413 170.153 78.008 170.153ZM80.9081 175.453C80.6259 175.453 80.3698 175.4 80.1398 175.294C79.9098 175.186 79.7271 175.03 79.5918 174.827C79.4565 174.622 79.3888 174.375 79.3888 174.085C79.3888 173.83 79.4391 173.623 79.5396 173.464C79.6401 173.304 79.7745 173.178 79.9426 173.088C80.1108 172.997 80.2963 172.929 80.4993 172.885C80.7042 172.838 80.9101 172.801 81.1169 172.774C81.3875 172.74 81.6069 172.713 81.7751 172.696C81.9452 172.677 82.0689 172.645 82.1462 172.6C82.2254 172.556 82.2651 172.479 82.2651 172.368V172.345C82.2651 172.059 82.1868 171.837 82.0302 171.678C81.8756 171.52 81.6407 171.441 81.3256 171.441C80.999 171.441 80.7429 171.512 80.5573 171.655C80.3717 171.798 80.2413 171.951 80.1659 172.113L79.5164 171.881C79.6324 171.611 79.787 171.4 79.9803 171.249C80.1755 171.097 80.3882 170.99 80.6182 170.93C80.8501 170.868 81.0782 170.838 81.3025 170.838C81.4455 170.838 81.6098 170.855 81.7954 170.89C81.9829 170.923 82.1636 170.991 82.3375 171.096C82.5134 171.2 82.6594 171.358 82.7754 171.568C82.8913 171.779 82.9493 172.061 82.9493 172.415V175.349H82.2651V174.746H82.2303C82.1839 174.843 82.1066 174.946 81.9983 175.056C81.8901 175.166 81.7461 175.26 81.5663 175.337C81.3865 175.415 81.1671 175.453 80.9081 175.453ZM81.0125 174.839C81.2831 174.839 81.5112 174.786 81.6968 174.679C81.8843 174.573 82.0254 174.436 82.1201 174.268C82.2167 174.099 82.2651 173.923 82.2651 173.737V173.111C82.2361 173.145 82.1723 173.177 82.0737 173.206C81.9771 173.233 81.8649 173.258 81.7374 173.279C81.6117 173.298 81.489 173.316 81.3691 173.331C81.2512 173.345 81.1555 173.356 81.0821 173.366C80.9043 173.389 80.738 173.427 80.5834 173.479C80.4307 173.529 80.307 173.606 80.2123 173.708C80.1195 173.808 80.0731 173.946 80.0731 174.12C80.0731 174.357 80.161 174.537 80.3369 174.659C80.5148 174.779 80.74 174.839 81.0125 174.839ZM89.8348 170.896C89.8 170.602 89.6589 170.374 89.4114 170.211C89.164 170.049 88.8605 169.968 88.501 169.968C88.2381 169.968 88.0081 170.01 87.8109 170.095C87.6157 170.18 87.463 170.297 87.3528 170.446C87.2446 170.595 87.1905 170.764 87.1905 170.954C87.1905 171.112 87.2282 171.248 87.3035 171.362C87.3809 171.474 87.4794 171.568 87.5993 171.644C87.7191 171.717 87.8448 171.778 87.9762 171.826C88.1077 171.873 88.2285 171.91 88.3386 171.939L88.9417 172.102C89.0964 172.142 89.2684 172.198 89.4578 172.27C89.6492 172.341 89.8319 172.439 90.0058 172.563C90.1817 172.684 90.3267 172.841 90.4407 173.032C90.5548 173.224 90.6118 173.459 90.6118 173.737C90.6118 174.058 90.5277 174.348 90.3596 174.607C90.1933 174.866 89.9498 175.072 89.6289 175.224C89.31 175.377 88.9224 175.453 88.4662 175.453C88.041 175.453 87.6727 175.385 87.3615 175.248C87.0523 175.11 86.8087 174.919 86.6309 174.673C86.455 174.428 86.3554 174.143 86.3322 173.818H87.0745C87.0938 174.042 87.1692 174.228 87.3006 174.375C87.434 174.52 87.6022 174.628 87.8052 174.7C88.01 174.769 88.2304 174.804 88.4662 174.804C88.7407 174.804 88.9872 174.76 89.2056 174.671C89.424 174.58 89.597 174.454 89.7246 174.294C89.8521 174.131 89.9159 173.942 89.9159 173.725C89.9159 173.528 89.8608 173.368 89.7507 173.244C89.6405 173.12 89.4955 173.02 89.3158 172.943C89.136 172.865 88.9417 172.798 88.733 172.74L88.0023 172.531C87.5384 172.397 87.1711 172.207 86.9005 171.96C86.6299 171.712 86.4946 171.388 86.4946 170.988C86.4946 170.656 86.5845 170.366 86.7643 170.118C86.946 169.869 87.1895 169.676 87.4949 169.539C87.8023 169.399 88.1454 169.33 88.5242 169.33C88.9069 169.33 89.2471 169.398 89.5448 169.536C89.8425 169.671 90.0783 169.857 90.2523 170.092C90.4282 170.328 90.521 170.596 90.5306 170.896H89.8348ZM91.7013 175.349V170.896H92.3623V171.591H92.4203C92.5131 171.354 92.6629 171.169 92.8697 171.038C93.0766 170.904 93.3249 170.838 93.6149 170.838C93.9087 170.838 94.1532 170.904 94.3484 171.038C94.5456 171.169 94.6993 171.354 94.8095 171.591H94.8558C94.9699 171.361 95.141 171.179 95.369 171.043C95.5971 170.906 95.8706 170.838 96.1896 170.838C96.5878 170.838 96.9135 170.962 97.1667 171.212C97.4199 171.459 97.5465 171.845 97.5465 172.368V175.349H96.8623V172.368C96.8623 172.04 96.7724 171.805 96.5926 171.664C96.4128 171.523 96.2012 171.452 95.9576 171.452C95.6445 171.452 95.4019 171.547 95.2299 171.736C95.0578 171.924 94.9718 172.162 94.9718 172.45V175.349H94.276V172.299C94.276 172.046 94.1938 171.842 94.0295 171.687C93.8652 171.531 93.6535 171.452 93.3945 171.452C93.2167 171.452 93.0505 171.5 92.8958 171.594C92.7431 171.689 92.6194 171.82 92.5247 171.989C92.4319 172.155 92.3855 172.347 92.3855 172.566V175.349H91.7013ZM98.7976 175.349V170.896H99.4819V175.349H98.7976ZM99.1456 170.153C99.0122 170.153 98.8972 170.108 98.8005 170.017C98.7058 169.926 98.6584 169.817 98.6584 169.689C98.6584 169.562 98.7058 169.453 98.8005 169.362C98.8972 169.271 99.0122 169.225 99.1456 169.225C99.2789 169.225 99.393 169.271 99.4877 169.362C99.5843 169.453 99.6327 169.562 99.6327 169.689C99.6327 169.817 99.5843 169.926 99.4877 170.017C99.393 170.108 99.2789 170.153 99.1456 170.153ZM102.672 170.896V171.475H100.364V170.896H102.672ZM101.037 169.829H101.721V174.073C101.721 174.267 101.749 174.412 101.805 174.508C101.863 174.603 101.936 174.667 102.025 174.7C102.116 174.731 102.212 174.746 102.312 174.746C102.388 174.746 102.45 174.742 102.498 174.734C102.546 174.725 102.585 174.717 102.614 174.711L102.753 175.326C102.707 175.343 102.642 175.361 102.559 175.378C102.476 175.397 102.37 175.407 102.243 175.407C102.05 175.407 101.86 175.365 101.675 175.282C101.491 175.199 101.338 175.073 101.216 174.903C101.097 174.732 101.037 174.518 101.037 174.259V169.829ZM104.481 172.67V175.349H103.797V169.411H104.481V171.591H104.539C104.644 171.361 104.8 171.179 105.009 171.043C105.22 170.906 105.5 170.838 105.85 170.838C106.153 170.838 106.419 170.898 106.647 171.02C106.875 171.14 107.052 171.325 107.178 171.574C107.305 171.821 107.369 172.136 107.369 172.519V175.349H106.685V172.566C106.685 172.212 106.593 171.938 106.409 171.745C106.228 171.55 105.975 171.452 105.653 171.452C105.428 171.452 105.227 171.5 105.05 171.594C104.874 171.689 104.734 171.827 104.632 172.009C104.531 172.191 104.481 172.411 104.481 172.67Z" fill="#ADADB1"/>
+<path d="M151.727 175.609C151.324 175.609 150.972 175.513 150.668 175.322C150.367 175.13 150.131 174.863 149.961 174.518C149.793 174.174 149.709 173.772 149.709 173.312C149.709 172.848 149.793 172.443 149.961 172.097C150.131 171.751 150.367 171.483 150.668 171.291C150.972 171.1 151.324 171.004 151.727 171.004C152.129 171.004 152.48 171.1 152.782 171.291C153.085 171.483 153.321 171.751 153.489 172.097C153.659 172.443 153.745 172.848 153.745 173.312C153.745 173.772 153.659 174.174 153.489 174.518C153.321 174.863 153.085 175.13 152.782 175.322C152.48 175.513 152.129 175.609 151.727 175.609ZM151.727 174.994C152.032 174.994 152.283 174.916 152.48 174.759C152.678 174.603 152.823 174.397 152.918 174.142C153.013 173.886 153.06 173.61 153.06 173.312C153.06 173.015 153.013 172.737 152.918 172.48C152.823 172.223 152.678 172.015 152.48 171.857C152.283 171.698 152.032 171.619 151.727 171.619C151.421 171.619 151.17 171.698 150.973 171.857C150.776 172.015 150.63 172.223 150.535 172.48C150.44 172.737 150.393 173.015 150.393 173.312C150.393 173.61 150.44 173.886 150.535 174.142C150.63 174.397 150.776 174.603 150.973 174.759C151.17 174.916 151.421 174.994 151.727 174.994ZM155.473 169.578V175.516H154.789V169.578H155.473ZM156.727 175.516V171.062H157.411V175.516H156.727ZM157.075 170.32C156.941 170.32 156.826 170.275 156.73 170.184C156.635 170.093 156.587 169.984 156.587 169.856C156.587 169.729 156.635 169.619 156.73 169.529C156.826 169.438 156.941 169.392 157.075 169.392C157.208 169.392 157.322 169.438 157.417 169.529C157.513 169.619 157.562 169.729 157.562 169.856C157.562 169.984 157.513 170.093 157.417 170.184C157.322 170.275 157.208 170.32 157.075 170.32ZM162.306 171.062L160.659 175.516H159.963L158.316 171.062H159.058L160.288 174.611H160.334L161.564 171.062H162.306ZM163.209 175.516V171.062H163.893V175.516H163.209ZM163.557 170.32C163.424 170.32 163.309 170.275 163.212 170.184C163.117 170.093 163.07 169.984 163.07 169.856C163.07 169.729 163.117 169.619 163.212 169.529C163.309 169.438 163.424 169.392 163.557 169.392C163.69 169.392 163.804 169.438 163.899 169.529C163.996 169.619 164.044 169.729 164.044 169.856C164.044 169.984 163.996 170.093 163.899 170.184C163.804 170.275 163.69 170.32 163.557 170.32ZM166.457 175.62C166.175 175.62 165.919 175.567 165.689 175.461C165.459 175.353 165.276 175.197 165.141 174.994C165.005 174.789 164.938 174.542 164.938 174.252C164.938 173.997 164.988 173.79 165.089 173.631C165.189 173.471 165.323 173.345 165.492 173.254C165.66 173.163 165.845 173.096 166.048 173.051C166.253 173.005 166.459 172.968 166.666 172.941C166.936 172.906 167.156 172.88 167.324 172.863C167.494 172.844 167.618 172.812 167.695 172.767C167.774 172.723 167.814 172.645 167.814 172.535V172.512C167.814 172.226 167.736 172.004 167.579 171.845C167.425 171.687 167.19 171.607 166.875 171.607C166.548 171.607 166.292 171.679 166.106 171.822C165.921 171.965 165.79 172.118 165.715 172.28L165.065 172.048C165.181 171.778 165.336 171.567 165.529 171.416C165.725 171.263 165.937 171.157 166.167 171.097C166.399 171.035 166.627 171.004 166.851 171.004C166.994 171.004 167.159 171.022 167.344 171.057C167.532 171.089 167.713 171.158 167.887 171.262C168.062 171.367 168.208 171.524 168.324 171.735C168.44 171.946 168.498 172.228 168.498 172.582V175.516H167.814V174.913H167.779C167.733 175.009 167.656 175.113 167.547 175.223C167.439 175.333 167.295 175.427 167.115 175.504C166.936 175.582 166.716 175.62 166.457 175.62ZM166.561 175.006C166.832 175.006 167.06 174.952 167.246 174.846C167.433 174.74 167.574 174.603 167.669 174.434C167.766 174.266 167.814 174.089 167.814 173.904V173.278C167.785 173.312 167.721 173.344 167.623 173.373C167.526 173.4 167.414 173.424 167.286 173.446C167.161 173.465 167.038 173.482 166.918 173.498C166.8 173.511 166.705 173.523 166.631 173.533C166.453 173.556 166.287 173.594 166.132 173.646C165.98 173.696 165.856 173.772 165.761 173.875C165.668 173.975 165.622 174.113 165.622 174.287C165.622 174.524 165.71 174.704 165.886 174.826C166.064 174.946 166.289 175.006 166.561 175.006ZM170.246 175.562C170.103 175.562 169.98 175.511 169.878 175.409C169.775 175.306 169.724 175.183 169.724 175.04C169.724 174.897 169.775 174.775 169.878 174.672C169.98 174.57 170.103 174.518 170.246 174.518C170.389 174.518 170.512 174.57 170.614 174.672C170.717 174.775 170.768 174.897 170.768 175.04C170.768 175.135 170.744 175.222 170.695 175.301C170.649 175.381 170.586 175.444 170.507 175.493C170.43 175.539 170.343 175.562 170.246 175.562ZM175.15 172.06L174.536 172.234C174.497 172.131 174.44 172.032 174.365 171.935C174.291 171.837 174.191 171.755 174.063 171.692C173.935 171.628 173.772 171.596 173.573 171.596C173.3 171.596 173.073 171.659 172.892 171.784C172.712 171.908 172.622 172.066 172.622 172.257C172.622 172.427 172.684 172.561 172.808 172.66C172.931 172.759 173.125 172.841 173.387 172.906L174.049 173.069C174.447 173.165 174.743 173.313 174.939 173.512C175.134 173.71 175.232 173.964 175.232 174.275C175.232 174.53 175.158 174.758 175.011 174.959C174.866 175.16 174.663 175.319 174.402 175.435C174.141 175.551 173.838 175.609 173.492 175.609C173.038 175.609 172.662 175.51 172.364 175.313C172.066 175.116 171.878 174.828 171.799 174.449L172.448 174.287C172.51 174.526 172.627 174.706 172.799 174.826C172.973 174.946 173.2 175.006 173.48 175.006C173.799 175.006 174.052 174.938 174.24 174.803C174.429 174.665 174.524 174.501 174.524 174.31C174.524 174.155 174.47 174.026 174.362 173.921C174.253 173.815 174.087 173.736 173.863 173.683L173.121 173.509C172.713 173.413 172.413 173.263 172.222 173.06C172.032 172.855 171.938 172.599 171.938 172.292C171.938 172.04 172.008 171.818 172.149 171.625C172.292 171.432 172.487 171.28 172.732 171.17C172.98 171.059 173.26 171.004 173.573 171.004C174.014 171.004 174.36 171.101 174.611 171.294C174.864 171.488 175.044 171.743 175.15 172.06ZM176.262 175.516V171.062H176.923V171.758H176.981C177.073 171.52 177.223 171.336 177.43 171.204C177.637 171.071 177.885 171.004 178.175 171.004C178.469 171.004 178.713 171.071 178.909 171.204C179.106 171.336 179.26 171.52 179.37 171.758H179.416C179.53 171.528 179.701 171.346 179.929 171.21C180.157 171.073 180.431 171.004 180.75 171.004C181.148 171.004 181.474 171.129 181.727 171.378C181.98 171.626 182.107 172.011 182.107 172.535V175.516H181.423V172.535C181.423 172.207 181.333 171.972 181.153 171.831C180.973 171.69 180.761 171.619 180.518 171.619C180.205 171.619 179.962 171.714 179.79 171.903C179.618 172.091 179.532 172.328 179.532 172.616V175.516H178.836V172.466C178.836 172.212 178.754 172.009 178.59 171.854C178.425 171.697 178.214 171.619 177.955 171.619C177.777 171.619 177.611 171.666 177.456 171.761C177.303 171.856 177.18 171.987 177.085 172.155C176.992 172.322 176.946 172.514 176.946 172.732V175.516H176.262ZM183.358 175.516V171.062H184.042V175.516H183.358ZM183.706 170.32C183.572 170.32 183.457 170.275 183.361 170.184C183.266 170.093 183.219 169.984 183.219 169.856C183.219 169.729 183.266 169.619 183.361 169.529C183.457 169.438 183.572 169.392 183.706 169.392C183.839 169.392 183.953 169.438 184.048 169.529C184.145 169.619 184.193 169.729 184.193 169.856C184.193 169.984 184.145 170.093 184.048 170.184C183.953 170.275 183.839 170.32 183.706 170.32ZM187.232 171.062V171.642H184.924V171.062H187.232ZM185.597 169.995H186.281V174.24C186.281 174.433 186.309 174.578 186.365 174.675C186.423 174.77 186.497 174.834 186.586 174.866C186.677 174.897 186.772 174.913 186.873 174.913C186.948 174.913 187.01 174.909 187.058 174.901C187.107 174.892 187.145 174.884 187.174 174.878L187.313 175.493C187.267 175.51 187.202 175.527 187.119 175.545C187.036 175.564 186.931 175.574 186.803 175.574C186.61 175.574 186.42 175.532 186.235 175.449C186.051 175.366 185.899 175.239 185.777 175.069C185.657 174.899 185.597 174.685 185.597 174.426V169.995ZM189.042 172.837V175.516H188.357V169.578H189.042V171.758H189.099C189.204 171.528 189.36 171.346 189.569 171.21C189.78 171.073 190.06 171.004 190.41 171.004C190.714 171.004 190.979 171.065 191.207 171.187C191.435 171.307 191.612 171.491 191.738 171.741C191.866 171.988 191.929 172.303 191.929 172.686V175.516H191.245V172.732C191.245 172.379 191.153 172.105 190.97 171.912C190.788 171.717 190.536 171.619 190.213 171.619C189.989 171.619 189.788 171.666 189.61 171.761C189.434 171.856 189.295 171.994 189.192 172.176C189.092 172.357 189.042 172.578 189.042 172.837ZM196.602 177.082C196.011 177.082 195.488 177 195.034 176.838C194.58 176.678 194.198 176.441 193.889 176.128C193.579 175.815 193.345 175.431 193.187 174.977C193.028 174.522 192.949 174.002 192.949 173.417C192.949 172.85 193.029 172.344 193.19 171.897C193.352 171.451 193.587 171.072 193.894 170.761C194.204 170.448 194.579 170.209 195.019 170.045C195.462 169.88 195.963 169.798 196.521 169.798C197.064 169.798 197.54 169.887 197.948 170.065C198.358 170.241 198.7 170.48 198.974 170.781C199.251 171.081 199.457 171.418 199.595 171.793C199.734 172.168 199.803 172.555 199.803 172.953C199.803 173.233 199.79 173.517 199.763 173.805C199.736 174.093 199.679 174.358 199.592 174.6C199.505 174.839 199.37 175.033 199.189 175.18C199.009 175.326 198.765 175.4 198.458 175.4C198.323 175.4 198.174 175.379 198.012 175.336C197.849 175.294 197.705 175.223 197.58 175.124C197.454 175.026 197.38 174.893 197.356 174.727H197.322C197.275 174.839 197.204 174.946 197.107 175.046C197.012 175.147 196.888 175.227 196.733 175.287C196.58 175.347 196.394 175.373 196.173 175.365C195.922 175.355 195.701 175.299 195.509 175.197C195.318 175.093 195.158 174.951 195.028 174.774C194.901 174.594 194.804 174.386 194.738 174.15C194.674 173.913 194.642 173.656 194.642 173.382C194.642 173.121 194.681 172.882 194.758 172.666C194.836 172.449 194.943 172.26 195.08 172.097C195.219 171.935 195.382 171.806 195.567 171.709C195.755 171.61 195.957 171.549 196.173 171.526C196.367 171.507 196.543 171.516 196.701 171.552C196.86 171.587 196.99 171.64 197.092 171.712C197.195 171.781 197.26 171.859 197.287 171.944H197.322V171.619H197.936V174.24C197.936 174.403 197.982 174.546 198.073 174.669C198.163 174.793 198.296 174.855 198.47 174.855C198.667 174.855 198.818 174.787 198.922 174.652C199.028 174.517 199.101 174.308 199.139 174.026C199.18 173.743 199.2 173.382 199.2 172.941C199.2 172.682 199.165 172.427 199.093 172.176C199.024 171.923 198.917 171.686 198.774 171.465C198.633 171.245 198.454 171.051 198.238 170.883C198.021 170.714 197.767 170.583 197.475 170.488C197.185 170.392 196.856 170.343 196.487 170.343C196.032 170.343 195.625 170.414 195.266 170.555C194.908 170.694 194.604 170.898 194.353 171.167C194.103 171.433 193.913 171.758 193.781 172.141C193.652 172.522 193.587 172.955 193.587 173.44C193.587 173.933 193.652 174.371 193.781 174.753C193.913 175.136 194.106 175.459 194.361 175.722C194.618 175.985 194.936 176.184 195.315 176.319C195.694 176.456 196.131 176.525 196.626 176.525C196.838 176.525 197.048 176.505 197.255 176.464C197.462 176.423 197.644 176.379 197.803 176.331C197.961 176.282 198.075 176.247 198.145 176.223L198.307 176.757C198.188 176.807 198.031 176.857 197.838 176.908C197.646 176.958 197.441 176.999 197.223 177.032C197.006 177.065 196.8 177.082 196.602 177.082ZM196.266 174.774C196.525 174.774 196.735 174.721 196.895 174.617C197.056 174.513 197.173 174.355 197.246 174.144C197.32 173.934 197.356 173.668 197.356 173.347C197.356 173.022 197.316 172.769 197.235 172.587C197.153 172.406 197.034 172.278 196.875 172.205C196.717 172.131 196.521 172.095 196.289 172.095C196.069 172.095 195.881 172.153 195.724 172.269C195.569 172.383 195.45 172.535 195.367 172.727C195.286 172.916 195.246 173.123 195.246 173.347C195.246 173.595 195.278 173.827 195.344 174.046C195.41 174.262 195.517 174.438 195.666 174.574C195.815 174.707 196.015 174.774 196.266 174.774ZM202.695 175.609C202.266 175.609 201.896 175.514 201.584 175.325C201.275 175.133 201.036 174.866 200.868 174.524C200.702 174.18 200.619 173.78 200.619 173.324C200.619 172.868 200.702 172.466 200.868 172.118C201.036 171.768 201.27 171.495 201.57 171.3C201.871 171.103 202.223 171.004 202.625 171.004C202.857 171.004 203.086 171.043 203.313 171.12C203.539 171.198 203.745 171.323 203.93 171.497C204.116 171.669 204.264 171.897 204.374 172.182C204.484 172.466 204.539 172.816 204.539 173.231V173.521H201.106V172.93H203.843C203.843 172.678 203.793 172.454 203.692 172.257C203.594 172.06 203.453 171.904 203.269 171.79C203.087 171.676 202.873 171.619 202.625 171.619C202.353 171.619 202.117 171.687 201.918 171.822C201.721 171.955 201.569 172.129 201.463 172.344C201.356 172.558 201.303 172.789 201.303 173.034V173.428C201.303 173.765 201.361 174.05 201.477 174.284C201.595 174.516 201.758 174.692 201.967 174.814C202.176 174.934 202.419 174.994 202.695 174.994C202.875 174.994 203.037 174.969 203.182 174.919C203.329 174.866 203.456 174.789 203.562 174.687C203.668 174.582 203.75 174.453 203.808 174.298L204.469 174.484C204.4 174.708 204.283 174.905 204.119 175.075C203.954 175.243 203.751 175.375 203.51 175.47C203.268 175.562 202.996 175.609 202.695 175.609ZM205.971 171.062L207.038 172.883L208.105 171.062H208.893L207.455 173.289L208.893 175.516H208.105L207.038 173.788L205.971 175.516H205.182L206.597 173.289L205.182 171.062H205.971ZM211.18 175.62C210.898 175.62 210.642 175.567 210.412 175.461C210.182 175.353 209.999 175.197 209.864 174.994C209.728 174.789 209.661 174.542 209.661 174.252C209.661 173.997 209.711 173.79 209.812 173.631C209.912 173.471 210.046 173.345 210.215 173.254C210.383 173.163 210.568 173.096 210.771 173.051C210.976 173.005 211.182 172.968 211.389 172.941C211.659 172.906 211.879 172.88 212.047 172.863C212.217 172.844 212.341 172.812 212.418 172.767C212.497 172.723 212.537 172.645 212.537 172.535V172.512C212.537 172.226 212.459 172.004 212.302 171.845C212.148 171.687 211.913 171.607 211.598 171.607C211.271 171.607 211.015 171.679 210.829 171.822C210.644 171.965 210.513 172.118 210.438 172.28L209.788 172.048C209.904 171.778 210.059 171.567 210.252 171.416C210.448 171.263 210.66 171.157 210.89 171.097C211.122 171.035 211.35 171.004 211.574 171.004C211.717 171.004 211.882 171.022 212.067 171.057C212.255 171.089 212.436 171.158 212.61 171.262C212.785 171.367 212.931 171.524 213.047 171.735C213.163 171.946 213.221 172.228 213.221 172.582V175.516H212.537V174.913H212.502C212.456 175.009 212.379 175.113 212.27 175.223C212.162 175.333 212.018 175.427 211.838 175.504C211.659 175.582 211.439 175.62 211.18 175.62ZM211.284 175.006C211.555 175.006 211.783 174.952 211.969 174.846C212.156 174.74 212.297 174.603 212.392 174.434C212.489 174.266 212.537 174.089 212.537 173.904V173.278C212.508 173.312 212.444 173.344 212.346 173.373C212.249 173.4 212.137 173.424 212.009 173.446C211.884 173.465 211.761 173.482 211.641 173.498C211.523 173.511 211.428 173.523 211.354 173.533C211.176 173.556 211.01 173.594 210.855 173.646C210.703 173.696 210.579 173.772 210.484 173.875C210.391 173.975 210.345 174.113 210.345 174.287C210.345 174.524 210.433 174.704 210.609 174.826C210.787 174.946 211.012 175.006 211.284 175.006ZM214.47 175.516V171.062H215.131V171.758H215.189C215.282 171.52 215.432 171.336 215.639 171.204C215.846 171.071 216.094 171.004 216.384 171.004C216.678 171.004 216.922 171.071 217.117 171.204C217.315 171.336 217.468 171.52 217.578 171.758H217.625C217.739 171.528 217.91 171.346 218.138 171.21C218.366 171.073 218.64 171.004 218.959 171.004C219.357 171.004 219.682 171.129 219.936 171.378C220.189 171.626 220.315 172.011 220.315 172.535V175.516H219.631V172.535C219.631 172.207 219.541 171.972 219.362 171.831C219.182 171.69 218.97 171.619 218.727 171.619C218.413 171.619 218.171 171.714 217.999 171.903C217.827 172.091 217.741 172.328 217.741 172.616V175.516H217.045V172.466C217.045 172.212 216.963 172.009 216.798 171.854C216.634 171.697 216.423 171.619 216.164 171.619C215.986 171.619 215.819 171.666 215.665 171.761C215.512 171.856 215.388 171.987 215.294 172.155C215.201 172.322 215.155 172.514 215.155 172.732V175.516H214.47ZM221.567 177.186V171.062H222.228V171.77H222.309C222.359 171.693 222.429 171.594 222.518 171.474C222.608 171.352 222.738 171.244 222.906 171.149C223.076 171.053 223.306 171.004 223.596 171.004C223.971 171.004 224.302 171.098 224.588 171.286C224.874 171.473 225.097 171.739 225.258 172.083C225.418 172.427 225.498 172.833 225.498 173.301C225.498 173.772 225.418 174.181 225.258 174.527C225.097 174.871 224.875 175.138 224.591 175.327C224.307 175.515 223.979 175.609 223.608 175.609C223.322 175.609 223.093 175.561 222.921 175.467C222.749 175.37 222.616 175.261 222.523 175.139C222.431 175.015 222.359 174.913 222.309 174.832H222.251V177.186H221.567ZM222.239 173.289C222.239 173.625 222.289 173.922 222.387 174.179C222.486 174.434 222.63 174.634 222.819 174.779C223.009 174.922 223.241 174.994 223.515 174.994C223.801 174.994 224.04 174.919 224.231 174.768C224.424 174.615 224.569 174.41 224.666 174.153C224.765 173.894 224.814 173.606 224.814 173.289C224.814 172.976 224.766 172.694 224.669 172.443C224.574 172.189 224.43 171.989 224.237 171.842C224.046 171.693 223.805 171.619 223.515 171.619C223.237 171.619 223.003 171.69 222.813 171.831C222.624 171.97 222.481 172.165 222.384 172.416C222.288 172.666 222.239 172.957 222.239 173.289ZM227.226 169.578V175.516H226.542V169.578H227.226ZM230.347 175.609C229.918 175.609 229.548 175.514 229.236 175.325C228.927 175.133 228.688 174.866 228.52 174.524C228.354 174.18 228.271 173.78 228.271 173.324C228.271 172.868 228.354 172.466 228.52 172.118C228.688 171.768 228.922 171.495 229.222 171.3C229.523 171.103 229.875 171.004 230.277 171.004C230.509 171.004 230.738 171.043 230.964 171.12C231.191 171.198 231.396 171.323 231.582 171.497C231.768 171.669 231.915 171.897 232.026 172.182C232.136 172.466 232.191 172.816 232.191 173.231V173.521H228.758V172.93H231.495C231.495 172.678 231.445 172.454 231.344 172.257C231.246 172.06 231.105 171.904 230.921 171.79C230.739 171.676 230.525 171.619 230.277 171.619C230.005 171.619 229.769 171.687 229.57 171.822C229.373 171.955 229.221 172.129 229.115 172.344C229.008 172.558 228.955 172.789 228.955 173.034V173.428C228.955 173.765 229.013 174.05 229.129 174.284C229.247 174.516 229.41 174.692 229.619 174.814C229.828 174.934 230.07 174.994 230.347 174.994C230.527 174.994 230.689 174.969 230.834 174.919C230.981 174.866 231.107 174.789 231.214 174.687C231.32 174.582 231.402 174.453 231.46 174.298L232.121 174.484C232.052 174.708 231.935 174.905 231.77 175.075C231.606 175.243 231.403 175.375 231.162 175.47C230.92 175.562 230.648 175.609 230.347 175.609ZM233.73 175.562C233.587 175.562 233.465 175.511 233.362 175.409C233.26 175.306 233.209 175.183 233.209 175.04C233.209 174.897 233.26 174.775 233.362 174.672C233.465 174.57 233.587 174.518 233.73 174.518C233.873 174.518 233.996 174.57 234.099 174.672C234.201 174.775 234.252 174.897 234.252 175.04C234.252 175.135 234.228 175.222 234.18 175.301C234.133 175.381 234.071 175.444 233.991 175.493C233.914 175.539 233.827 175.562 233.73 175.562ZM237.289 175.609C236.872 175.609 236.512 175.51 236.211 175.313C235.909 175.116 235.677 174.844 235.515 174.498C235.353 174.152 235.271 173.757 235.271 173.312C235.271 172.86 235.355 172.461 235.521 172.115C235.689 171.767 235.923 171.495 236.223 171.3C236.524 171.103 236.876 171.004 237.278 171.004C237.591 171.004 237.873 171.062 238.125 171.178C238.376 171.294 238.582 171.457 238.742 171.665C238.903 171.874 239.002 172.118 239.041 172.396H238.356C238.304 172.193 238.188 172.013 238.009 171.857C237.831 171.698 237.591 171.619 237.289 171.619C237.023 171.619 236.789 171.689 236.588 171.828C236.389 171.965 236.233 172.159 236.121 172.411C236.011 172.66 235.956 172.953 235.956 173.289C235.956 173.633 236.01 173.933 236.118 174.188C236.228 174.443 236.383 174.641 236.582 174.782C236.783 174.923 237.019 174.994 237.289 174.994C237.467 174.994 237.629 174.963 237.774 174.901C237.919 174.839 238.041 174.75 238.142 174.634C238.242 174.518 238.314 174.379 238.356 174.217H239.041C239.002 174.48 238.906 174.717 238.754 174.927C238.603 175.136 238.403 175.302 238.154 175.426C237.906 175.548 237.618 175.609 237.289 175.609ZM241.85 175.609C241.448 175.609 241.095 175.513 240.792 175.322C240.49 175.13 240.255 174.863 240.085 174.518C239.916 174.174 239.832 173.772 239.832 173.312C239.832 172.848 239.916 172.443 240.085 172.097C240.255 171.751 240.49 171.483 240.792 171.291C241.095 171.1 241.448 171.004 241.85 171.004C242.252 171.004 242.604 171.1 242.906 171.291C243.209 171.483 243.445 171.751 243.613 172.097C243.783 172.443 243.868 172.848 243.868 173.312C243.868 173.772 243.783 174.174 243.613 174.518C243.445 174.863 243.209 175.13 242.906 175.322C242.604 175.513 242.252 175.609 241.85 175.609ZM241.85 174.994C242.156 174.994 242.407 174.916 242.604 174.759C242.801 174.603 242.947 174.397 243.042 174.142C243.137 173.886 243.184 173.61 243.184 173.312C243.184 173.015 243.137 172.737 243.042 172.48C242.947 172.223 242.801 172.015 242.604 171.857C242.407 171.698 242.156 171.619 241.85 171.619C241.545 171.619 241.294 171.698 241.096 171.857C240.899 172.015 240.753 172.223 240.659 172.48C240.564 172.737 240.517 173.015 240.517 173.312C240.517 173.61 240.564 173.886 240.659 174.142C240.753 174.397 240.899 174.603 241.096 174.759C241.294 174.916 241.545 174.994 241.85 174.994ZM244.913 175.516V171.062H245.574V171.758H245.632C245.725 171.52 245.874 171.336 246.081 171.204C246.288 171.071 246.537 171.004 246.826 171.004C247.12 171.004 247.365 171.071 247.56 171.204C247.757 171.336 247.911 171.52 248.021 171.758H248.067C248.181 171.528 248.353 171.346 248.581 171.21C248.809 171.073 249.082 171.004 249.401 171.004C249.799 171.004 250.125 171.129 250.378 171.378C250.631 171.626 250.758 172.011 250.758 172.535V175.516H250.074V172.535C250.074 172.207 249.984 171.972 249.804 171.831C249.624 171.69 249.413 171.619 249.169 171.619C248.856 171.619 248.613 171.714 248.441 171.903C248.269 172.091 248.183 172.328 248.183 172.616V175.516H247.488V172.466C247.488 172.212 247.405 172.009 247.241 171.854C247.077 171.697 246.865 171.619 246.606 171.619C246.428 171.619 246.262 171.666 246.107 171.761C245.955 171.856 245.831 171.987 245.736 172.155C245.643 172.322 245.597 172.514 245.597 172.732V175.516H244.913Z" fill="#ADADB1"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_bddddd_6627_62151" x="-11.6717" y="14.8846" width="287.518" height="261.857" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.6656"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6627_62151"/>
+<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/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_6627_62151" result="effect2_dropShadow_6627_62151"/>
+<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="-1.1664" dy="2.3328"/>
+<feGaussianBlur stdDeviation="2.6244"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_6627_62151" result="effect3_dropShadow_6627_62151"/>
+<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="-4.6656" dy="8.748"/>
+<feGaussianBlur stdDeviation="4.9572"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_6627_62151" result="effect4_dropShadow_6627_62151"/>
+<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="-11.0808" dy="19.8288"/>
+<feGaussianBlur stdDeviation="6.7068"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect4_dropShadow_6627_62151" result="effect5_dropShadow_6627_62151"/>
+<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="-19.2456" dy="34.992"/>
+<feGaussianBlur stdDeviation="7.8732"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+<feBlend mode="normal" in2="effect5_dropShadow_6627_62151" result="effect6_dropShadow_6627_62151"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_6627_62151" result="shape"/>
+</filter>
+<filter id="filter1_b_6627_62151" x="-7.00665" y="26.5481" width="303.847" height="229.781" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.496"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6627_62151"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6627_62151" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6627_62151" x1="144.918" y1="24.2158" x2="144.626" y2="226.003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0D0D0" stop-opacity="0.41"/>
+<stop offset="1" stop-color="#E7E7E7"/>
+</linearGradient>
+<clipPath id="clip0_6627_62151">
+<path d="M0 0H260V173.8C260 177.776 256.776 181 252.8 181H0V0Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_6627_62151">
+<rect width="233.863" height="159.797" fill="white" transform="translate(27.9854 61.5401)"/>
+</clipPath>
+<clipPath id="clip2_6627_62151">
+<rect x="36.7334" y="97.6985" width="18.6624" height="18.6624" rx="9.3312" fill="white"/>
+</clipPath>
+<clipPath id="clip3_6627_62151">
+<rect x="36.7334" y="130.358" width="18.6624" height="18.6624" rx="9.3312" fill="white"/>
+</clipPath>
+<clipPath id="clip4_6627_62151">
+<rect x="36.7334" y="163.018" width="18.6624" height="18.6624" rx="9.3312" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/bandwidth.svelte b/src/routes/(console)/project-[region]-[project]/overview/bandwidth.svelte
index a6e1b53c9..bc46005c0 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/bandwidth.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/bandwidth.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
-    import { Card, DropList, DropListItem } from '$lib/components';
+    import { Card } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { totalMetrics } from './+layout.svelte';
     import { usage } from './store';
     import type { UsagePeriods } from '$lib/layout';
     import { createEventDispatcher } from 'svelte';
     import { BarChart } from '$lib/charts';
+    import {
+        Popover,
+        Typography,
+        Icon,
+        ActionMenu,
+        Layout,
+        Button
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconChartSquareBar,
+        IconChevronDown,
+        IconChevronUp
+    } from '@appwrite.io/pink-icons-svelte';
 
     export let period: UsagePeriods;
 
-    let showPeriod = false;
-
     const dispatch = createEventDispatcher();
 
     $: network = $usage?.network as unknown as Array<{
@@ -19,64 +30,64 @@
     }>;
 
     $: bandwidth = humanFileSize(totalMetrics($usage?.network));
-
-    $: if (period) {
-        showPeriod = false;
-    }
 </script>
 
-<div class="u-flex u-gap-16 u-main-space-between">
-    <div>
-        <div class="heading-level-4">
-            {bandwidth.value}
-            <span class="body-text-2">{bandwidth.unit}</span>
+<Layout.Stack gap="l">
+    <Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
+        <div>
+            <Typography.Title>
+                {bandwidth.value}
+                <span class="body-text-2">{bandwidth.unit}</span>
+            </Typography.Title>
+            <Typography.Text>Bandwidth</Typography.Text>
         </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 bandwidth.value !== '0'}
-    <div style="height: 12rem;">
-        <BarChart
-            options={{
-                yAxis: {
-                    axisLabel: {
-                        formatter: (value) =>
-                            value
-                                ? `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
-                                : '0'
+        <Popover let:toggle padding="none" let:showing>
+            <Button.Button on:click={toggle} variant="extra-compact">
+                {period}
+                <Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
+            </Button.Button>
+            <svelte:fragment slot="tooltip">
+                <ActionMenu.Root>
+                    <ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
+                        >24h</ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
+                        >30d</ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
+                        >90d</ActionMenu.Item.Button>
+                </ActionMenu.Root>
+            </svelte:fragment>
+        </Popover>
+    </Layout.Stack>
+    {#if bandwidth.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}`
+                }}
+                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}
+    {:else}
+        <Card isDashed>
+            <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                <Icon icon={IconChartSquareBar} size="l" />
+                <Typography.Text variant="m-600">No data to show</Typography.Text>
+            </Layout.Stack>
+        </Card>
+    {/if}
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
index 5fff6c258..0cfaf93aa 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -11,7 +11,7 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/context.ts b/src/routes/(console)/project-[region]-[project]/overview/context.ts
new file mode 100644
index 000000000..6edf53149
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/context.ts
@@ -0,0 +1,8 @@
+import { getContext, type Component } from 'svelte';
+import type { Writable } from 'svelte/store';
+
+export type OverviewActionContext = Writable<Component>;
+
+export function setOverviewAction(component: Component) {
+    getContext<OverviewActionContext>('overview-action').set(component);
+}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/+page.svelte
new file mode 100644
index 000000000..cd3f896e2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Action from './action.svelte';
+    import { setOverviewAction } from '../context';
+    import Table from '../(components)/table.svelte';
+
+    export let data;
+
+    setOverviewAction(Action);
+</script>
+
+<Table keys={data.devKeys} keyType="dev" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/+page.ts b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/+page.ts
new file mode 100644
index 000000000..5f7e3e623
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/+page.ts
@@ -0,0 +1,13 @@
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import { selectedTab } from '../store';
+import type { PageLoad } from './$types';
+
+selectedTab.set('dev-keys');
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.DEV_KEYS);
+    return {
+        devKeys: await sdk.forConsole.projects.listDevKeys(params.project)
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/+page.ts b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/+page.ts
new file mode 100644
index 000000000..d54a142ca
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/+page.ts
@@ -0,0 +1,22 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.DEV_KEY);
+
+    const key = await sdk.forConsole.projects.getDevKey(params.project, params.key);
+    if (key.expire) {
+        key.expire = new Date(key.expire).toISOString().slice(0, 23);
+    } else {
+        key.expire = undefined;
+    }
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        key
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/+page@project-[region]-[project].svelte
new file mode 100644
index 000000000..9e16d83b5
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/+page@project-[region]-[project].svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { devKey } from './store';
+    import KeyDetails from '../../(components)/keyDetails.svelte';
+</script>
+
+<KeyDetails key={$devKey} keyType="dev" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
new file mode 100644
index 000000000..65cbd2fa1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { devKey } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys`,
+            title: 'Dev keys'
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys/${$devKey?.$id}`,
+            title: $devKey?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte
new file mode 100644
index 000000000..a3bc8feb6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { devKey } from './store';
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle
+            href={`${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys`}>
+            {$devKey?.name}
+        </CoverTitle>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/store.ts b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/store.ts
new file mode 100644
index 000000000..baf2031a7
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/store.ts
@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+import type { Models } from '@appwrite.io/console';
+
+export const devKey = derived(page, ($page) => $page.data.key as Models.DevKey);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
new file mode 100644
index 000000000..cf9287ef7
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import Button from '$lib/elements/forms/button.svelte';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import { Icon, Modal, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Form, InputText } from '$lib/elements/forms/index.js';
+    import { ExpirationInput } from '$lib/components';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { base } from '$app/paths';
+    import { addNotification } from '$lib/stores/notifications';
+    import { page } from '$app/state';
+    import { showDevKeysCreateModal } from '$routes/(console)/project-[region]-[project]/overview/store';
+
+    let isSubmitting = false;
+    let name = '',
+        expire = '';
+
+    const projectId = page.params.project;
+
+    async function create() {
+        try {
+            isSubmitting = true;
+            const { $id } = await sdk.forConsole.projects.createDevKey(
+                projectId,
+                name,
+                expire || undefined
+            );
+
+            $showDevKeysCreateModal = false;
+            trackEvent(Submit.DevKeyCreate);
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys/${$id}`
+            );
+            addNotification({
+                message: `Dev key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DevKeyCreate);
+        } finally {
+            isSubmitting = false;
+        }
+    }
+</script>
+
+{#if $canWriteKeys}
+    <Button on:click={() => ($showDevKeysCreateModal = true)}>
+        <Icon icon={IconPlus} slot="start" size="s" />
+        Create dev key
+    </Button>
+
+    <Form onSubmit={create} isModal>
+        <Modal title="Create dev key" bind:open={$showDevKeysCreateModal}>
+            <span slot="description">
+                Bypass Appwrite rate limits and CORS errors in your development environment.
+            </span>
+
+            <Layout.Stack>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Enter key name"
+                    required
+                    bind:value={name} />
+
+                <ExpirationInput bind:value={expire} expiryOptions="limited" />
+            </Layout.Stack>
+
+            <Layout.Stack direction="row" justifyContent="flex-end" slot="footer">
+                <Button fullWidthMobile secondary on:click={() => ($showDevKeysCreateModal = false)}
+                    >Cancel</Button>
+                <Button fullWidthMobile submit disabled={isSubmitting}>Create</Button>
+            </Layout.Stack>
+        </Modal>
+    </Form>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/header.svelte
index 98a9bd266..a59b86d80 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/header.svelte
@@ -1,19 +1,62 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import { Id, RegionEndpoint } from '$lib/components';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
     import { project } from '../store';
+    import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Layout, Button, Typography } from '@appwrite.io/pink-svelte';
+    import { user } from '$lib/stores/user';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { Dependencies } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
 </script>
 
-<Cover>
-    <svelte:fragment slot="header">
-        <CoverTitle>
-            {$project?.name}
-        </CoverTitle>
-
-        <div class="u-flex u-gap-8 u-cross-center">
-            <Id value={$project.$id}>{$project.$id}</Id>
-
-            <RegionEndpoint />
-        </div>
-    </svelte:fragment>
-</Cover>
+{#if !page.url.pathname.includes('get-started')}
+    <Cover>
+        <svelte:fragment slot="header">
+            <Typography.Title color="--fgcolor-neutral-primary" size="xl">
+                {$project?.name}
+            </Typography.Title>
+            <Layout.Stack alignItems="center" direction="row" inline>
+                <Id value={$project.$id}>{$project.$id}</Id>
+                <RegionEndpoint />
+            </Layout.Stack>
+        </svelte:fragment>
+    </Cover>
+{:else}
+    <Cover blocksize={$isSmallViewport ? 'auto' : '152px'}>
+        <svelte:fragment slot="header">
+            <Layout.Stack
+                direction={$isSmallViewport ? 'column' : 'row'}
+                justifyContent="space-between"
+                alignItems={$isSmallViewport ? 'flex-start' : 'center'}
+                gap="xl">
+                <Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
+                    <Typography.Title color="--fgcolor-neutral-primary" size="xl"
+                        >{#if $user.name === $user.email}
+                            Welcome to Appwrite
+                        {:else}
+                            Welcome, {$user.name}
+                        {/if}</Typography.Title>
+                    <Typography.Text size="m" color="--fgcolor-neutral-secondary"
+                        >Follow a few quick steps to get started with Appwrite</Typography.Text>
+                </Layout.Stack>
+                <div class="dashboard-header-button">
+                    {#if !hasOnboardingDismissed($project.$id)}
+                        <Button.Button
+                            variant="secondary"
+                            size="s"
+                            on:click={async () => {
+                                trackEvent('onboarding_hub_platform_dismiss');
+                                await setHasOnboardingDismissed($project.$id);
+                                await invalidate(Dependencies.ORGANIZATION);
+                                goto(`${base}/project-${$project.region}-${$project.$id}/overview`);
+                            }}>Dismiss this page</Button.Button>
+                    {/if}
+                </div>
+            </Layout.Stack>
+        </svelte:fragment>
+    </Cover>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/+page.svelte
index 7a54cf018..f9f98b736 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/+page.svelte
@@ -1,77 +1,12 @@
-<script lang="ts" context="module">
-    export function createApiKey() {
-        if (!get(canWriteKeys)) {
-            return;
-        }
-        wizard.start(Wizard);
-    }
-</script>
-
 <script lang="ts">
-    import { Empty, Heading } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRowLink
-    } from '$lib/elements/table';
-    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
-    import { canWriteKeys } from '$lib/stores/roles';
-    import { wizard } from '$lib/stores/wizard';
-    import { get } from 'svelte/store';
     import type { PageData } from './$types';
-    import Wizard from './wizard.svelte';
+    import Action from './action.svelte';
+    import { setOverviewAction } from '../context';
+    import Table from '../(components)/table.svelte';
 
     export let data: PageData;
+
+    setOverviewAction(Action);
 </script>
 
-<div class="common-section u-flex u-gap-12">
-    <Heading tag="h3" size="7">API keys</Heading>
-    {#if $canWriteKeys}
-        <span class="u-margin-inline-start-auto">
-            <Button on:click={createApiKey}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create API key</span>
-            </Button>
-        </span>
-    {/if}
-</div>
-
-{#if data.keys.total}
-    <Table>
-        <TableHeader>
-            <TableCellHead>Name</TableCellHead>
-            <TableCellHead onlyDesktop>last accessed</TableCellHead>
-            <TableCellHead onlyDesktop>expiration date</TableCellHead>
-            <TableCellHead onlyDesktop>scopes</TableCellHead>
-        </TableHeader>
-        <TableBody>
-            {#each data.keys.keys as key}
-                <TableRowLink href={`keys/${key.$id}`}>
-                    <TableCellText title="Name">
-                        {key.name}
-                    </TableCellText>
-                    <TableCellText onlyDesktop title="Last Accessed">
-                        {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
-                    </TableCellText>
-                    <TableCellText onlyDesktop title="Expiration Date">
-                        {key.expire ? toLocaleDateTime(key.expire) : 'never'}
-                    </TableCellText>
-                    <TableCellText onlyDesktop title="Expiration Date">
-                        {key.scopes.length} Scopes
-                    </TableCellText>
-                </TableRowLink>
-            {/each}
-        </TableBody>
-    </Table>
-{:else}
-    <Empty
-        single
-        allowCreate={$canWriteKeys}
-        href="https://appwrite.io/docs/advanced/platform/api-keys"
-        target="API key"
-        on:click={createApiKey} />
-{/if}
+<Table keys={data.keys} />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/+page@project-[region]-[project].svelte
index bbf1c1b6e..82d29d955 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/+page@project-[region]-[project].svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/+page@project-[region]-[project].svelte
@@ -1,173 +1,6 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Box, CardGrid, Heading, Secret } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
-    import { symmetricDifference } from '$lib/helpers/array';
-    import { toLocaleDate } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { project } from '../../../store';
-    import Scopes from '../scopes.svelte';
-    import Delete from './delete.svelte';
     import { key } from './store';
-    import UpdateExpirationDate from './updateExpirationDate.svelte';
-
-    let showDelete = false;
-    let name: string = null;
-    let secret: string = null;
-    let scopes: string[] = null;
-
-    onMount(() => {
-        name ??= $key.name;
-        secret ??= $key.secret;
-        scopes ??= $key.scopes;
-    });
-
-    async function updateName() {
-        try {
-            await sdk.forConsole.projects.updateKey(
-                $project.$id,
-                $key.$id,
-                name,
-                $key.scopes,
-                $key.expire
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateName);
-            addNotification({
-                type: 'success',
-                message: 'API key name has been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateName);
-        }
-    }
-
-    async function updateScopes() {
-        try {
-            await sdk.forConsole.projects.updateKey(
-                $project.$id,
-                $key.$id,
-                $key.name,
-                scopes,
-                $key.expire
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateScopes, {
-                scopes
-            });
-            addNotification({
-                type: 'success',
-                message: 'API key scopes have been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateScopes);
-        }
-    }
+    import KeyDetails from '../../(components)/keyDetails.svelte';
 </script>
 
-<svelte:head>
-    <title>API key - Appwrite</title>
-</svelte:head>
-
-<Container>
-    {@const accessedAt = $key.accessedAt ? toLocaleDate($key.accessedAt) : 'never'}
-    <CardGrid>
-        <div data-private>
-            <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 copyEvent="key" bind:value={secret} />
-        </svelte:fragment>
-    </CardGrid>
-
-    <Form onSubmit={updateName}>
-        <CardGrid>
-            <Heading tag="h6" size="7">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 onSubmit={updateScopes}>
-        <CardGrid>
-            <Heading tag="h6" size="7">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>
-
-    <UpdateExpirationDate />
-
-    <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">
-            <Box>
-                <div class="u-flex u-gap-16">
-                    <div class="u-cross-child-center u-line-height-1-5">
-                        <h6 class="u-bold" data-private>{$key.name}</h6>
-                        <p>Last accessed: {accessedAt}</p>
-                    </div>
-                </div>
-            </Box>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Container>
-
-<Delete bind:showDelete />
+<KeyDetails key={$key} keyType="api" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
index a163a9fe6..00fa0e8f7 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/overview/keys`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/overview/keys`,
             title: 'API keys'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/overview/keys/${$key?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/overview/keys/${$key?.$id}`,
             title: $key?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/delete.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/delete.svelte
index 872967a54..78d94982b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/delete.svelte
@@ -2,15 +2,15 @@
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../../store';
     import { key } from './store';
 
     export let showDelete = false;
+    let error: string;
 
     async function handleDelete() {
         try {
@@ -23,27 +23,13 @@
             });
             trackEvent(Submit.KeyDelete);
             await goto(`${base}/project-${$project.region}-${$project.$id}/overview/keys`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.KeyDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete API key"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <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>
+<Confirm onSubmit={handleDelete} title="Delete API key" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this execution?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte
index 753a6a7f9..0fd354e94 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Id } from '$lib/components';
+    import { page } from '$app/state';
     import { Cover, CoverTitle } from '$lib/layout';
     import { key } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/overview/keys`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/overview/keys`}>
             {$key?.name}
         </CoverTitle>
-        <Id value={$key?.secret}>API key secret</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/store.ts b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/store.ts
index dc984c86c..5a1a9f936 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/store.ts
@@ -1,5 +1,5 @@
-import { derived } from 'svelte/store';
 import { page } from '$app/stores';
+import { derived } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 
 export const key = derived(page, ($page) => $page.data.key as Models.Key);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/updateExpirationDate.svelte
index 2a819a37a..e69de29bb 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -1,74 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList } from '$lib/elements/forms';
-    import { diffDays } from '$lib/helpers/date';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { project } from '../../../store';
-    import ExpirationInput from '../expirationInput.svelte';
-    import { key } from './store';
-
-    let expiration = $key.expire;
-
-    async function updateExpire() {
-        try {
-            await sdk.forConsole.projects.updateKey(
-                $project.$id,
-                $key.$id,
-                $key.name,
-                $key.scopes,
-                expiration
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateExpire);
-            addNotification({
-                type: 'success',
-                message: 'API key expiration has been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateExpire);
-        }
-    }
-
-    let alertsDismissed = false;
-    $: isExpiring =
-        !alertsDismissed && $key.expire && diffDays(new Date(), new Date($key.expire)) < 14;
-    $: isExpired = !alertsDismissed && $key.expire !== null && new Date($key.expire) < new Date();
-</script>
-
-<Form onSubmit={updateExpire}>
-    <CardGrid>
-        <Heading tag="h6" size="7">Expiration date</Heading>
-        <p class="text">Set a date after which your API key will expire.</p>
-        <svelte:fragment slot="aside">
-            {#if isExpired}
-                <Alert type="error" dismissible on:dismiss={() => (alertsDismissed = true)}>
-                    <span slot="title">Your API key has expired</span>
-                    <p>
-                        For security reasons, we recommend you delete your expired key and create a
-                        new one.
-                    </p>
-                </Alert>
-            {:else if isExpiring}
-                <Alert type="warning" dismissible on:dismiss={() => (alertsDismissed = true)}>
-                    <span slot="title">Your API key is about to expire</span>
-                    <p>Update the expiration date to keep the key active</p>
-                </Alert>
-            {/if}
-            <FormList>
-                <ExpirationInput bind:value={expiration} />
-            </FormList>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button disabled={expiration === $key.expire} submit>Update</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte
new file mode 100644
index 000000000..ba746e54a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte
@@ -0,0 +1,16 @@
+<script>
+    import Button from '$lib/elements/forms/button.svelte';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+</script>
+
+{#if $canWriteKeys}
+    <Button
+        href={`${base}/project-${page.params.region}-${page.params.project}/overview/keys/create`}>
+        <Icon icon={IconPlus} slot="start" size="s" />
+        Create API key
+    </Button>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/create/+page.svelte
new file mode 100644
index 000000000..dd2233840
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/create/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import CreateKey from '../../(components)/create.svelte';
+</script>
+
+<CreateKey />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/scopes.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/scopes.svelte
index 946de6153..d3a7601e6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/scopes.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/scopes.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { Collapsible, CollapsibleItem } from '$lib/components';
-    import { Button, FormList, InputChoice } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { scopes as allScopes } from '$lib/constants';
     import { onMount } from 'svelte';
     import { symmetricDifference } from '$lib/helpers/array';
-    import Checkbox from './checkbox.svelte';
+    import { Accordion, Divider, Layout, Selector } from '@appwrite.io/pink-svelte';
 
     export let scopes: string[];
 
@@ -13,10 +12,21 @@
         Database = 'Database',
         Functions = 'Functions',
         Messaging = 'Messaging',
+        Sites = 'Sites',
         Storage = 'Storage',
         Other = 'Other'
     }
 
+    const categories = [
+        Category.Auth,
+        Category.Database,
+        Category.Functions,
+        Category.Storage,
+        Category.Messaging,
+        Category.Sites,
+        Category.Other
+    ];
+
     let mounted = false;
 
     onMount(() => {
@@ -39,7 +49,7 @@
         }
     }
 
-    function categoryState(category: string, s: string[]): boolean | null {
+    function categoryState(category: string, s: string[]): boolean | 'indeterminate' {
         const scopesByCategory = allScopes.filter((n) => n.category === category);
         const filtered = scopesByCategory.filter((n) => s.includes(n.scope));
         if (filtered.length === 0) {
@@ -47,16 +57,15 @@
         } else if (filtered.length === scopesByCategory.length) {
             return true;
         } else {
-            return null;
+            return 'indeterminate';
         }
     }
 
-    function onCategoryChange(event: Event, category: Category) {
+    function onCategoryChange(event: CustomEvent<boolean | 'indeterminate'>, category: Category) {
+        if (event.detail === 'indeterminate') return;
         allScopes.forEach((s) => {
             if (s.category === category) {
-                activeScopes[s.scope] = (
-                    event.currentTarget as EventTarget & HTMLInputElement
-                ).checked;
+                activeScopes[s.scope] = event.detail;
             }
         });
     }
@@ -80,47 +89,41 @@
     }
 </script>
 
-<ul class="buttons-list u-main-end">
-    <li class="buttons-list-item">
-        <Button text on:click={deselectAll}>Deselect all</Button>
-    </li>
-    <li class="buttons-list-item">
-        <Button text on:click={selectAll}>Select all</Button>
-    </li>
-</ul>
+<Layout.Stack>
+    <Layout.Stack direction="row" alignItems="center" gap="s">
+        <Button compact on:click={selectAll}>Select all</Button>
+        <span style:height="20px">
+            <Divider vertical />
+        </span>
+        <Button compact on:click={deselectAll}>Deselect all</Button>
+    </Layout.Stack>
+    <Layout.Stack gap="none">
+        <Divider />
 
-<Collapsible>
-    {#each [Category.Auth, Category.Database, Category.Functions, Category.Storage, Category.Messaging, Category.Other] as category}
-        {@const checked = categoryState(category, scopes)}
-        <CollapsibleItem withIndentation>
-            <svelte:fragment slot="beforetitle">
-                <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">
-                {@const scopesLength = allScopes.filter(
-                    (n) => n.category === category && scopes.includes(n.scope)
-                ).length}
-                ({scopesLength}
-                {scopesLength === 1 ? 'Scope' : 'Scopes'})
-            </svelte:fragment>
-            <div class="form">
-                <FormList>
+        {#each categories as category, index}
+            {@const checked = categoryState(category, scopes)}
+            {@const isLastItem = index === categories.length - 1}
+            {@const scopesLength = allScopes.filter(
+                (n) => n.category === category && scopes.includes(n.scope)
+            ).length}
+            <Accordion
+                selectable
+                title={category}
+                hideDivider={isLastItem}
+                badge={`${scopesLength} ${scopesLength === 1 ? 'Scope' : 'Scopes'}`}
+                {checked}
+                on:change={(event) => onCategoryChange(event, category)}>
+                <Layout.Stack>
                     {#each allScopes.filter((s) => s.category === category) as scope}
-                        <InputChoice
+                        <Selector.Checkbox
+                            size="s"
                             id={scope.scope}
                             label={scope.scope}
-                            bind:value={activeScopes[scope.scope]}>
-                            {scope.description}
-                        </InputChoice>
+                            description={scope.description}
+                            bind:checked={activeScopes[scope.scope]} />
                     {/each}
-                </FormList>
-            </div>
-        </CollapsibleItem>
-    {/each}
-</Collapsible>
+                </Layout.Stack>
+            </Accordion>
+        {/each}
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/wizard.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/wizard.svelte
deleted file mode 100644
index c4da8075b..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/wizard.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import { goto, invalidate } from '$app/navigation';
-    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 { sdk } 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';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { base } from '$app/paths';
-
-    async function onFinish() {
-        try {
-            const { $id } = await sdk.forConsole.projects.createKey(
-                $page.params.project,
-                $key.name,
-                $key.scopes,
-                $key.expire || undefined
-            );
-            if ($onboarding) {
-                await invalidate(Dependencies.PROJECT);
-            }
-            trackEvent(Submit.KeyCreate, {
-                scopes: $key.scopes
-            });
-            goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/overview/keys/${$id}`
-            );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyCreate);
-        }
-    }
-
-    onDestroy(() => {
-        key.reset();
-    });
-
-    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-[region]-[project]/overview/keys/wizard/step1.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/step1.svelte
deleted file mode 100644
index cb53ed034..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/step1.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import ExpirationInput from '../expirationInput.svelte';
-    import { key } from './store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">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} />
-        <ExpirationInput bind:value={$key.expire} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/step2.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/step2.svelte
deleted file mode 100644
index 383a8d426..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/step2.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<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">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-[region]-[project]/overview/keys/wizard/store.ts b/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/store.ts
deleted file mode 100644
index 49f23c0e9..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/wizard/store.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Models } from '@appwrite.io/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-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
index 47d727bf2..3a7d7d5a5 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
@@ -1,246 +1,679 @@
 <script lang="ts">
-    import { addPlatform, Platform } from './platforms/+page.svelte';
-    import OnboardDark1Desktop from './onboard-1-dark-desktop.svg';
-    import OnboardDark1Mobile from './onboard-1-dark-mobile.svg';
-    import OnboardLight1Desktop from './onboard-1-light-desktop.svg';
-    import OnboardLight1Mobile from './onboard-1-light-mobile.svg';
-    import OnboardDark2Desktop from './onboard-2-dark-desktop.svg';
-    import OnboardDark2Mobile from './onboard-2-dark-mobile.svg';
-    import OnboardLight2Desktop from './onboard-2-light-desktop.svg';
-    import OnboardLight2Mobile from './onboard-2-light-mobile.svg';
+    import {
+        Step,
+        Link,
+        Icon,
+        Layout,
+        Card,
+        Typography,
+        Badge,
+        ProgressCircle,
+        Button
+    } from '@appwrite.io/pink-svelte';
+    import { addPlatform, continuePlatform } from './platforms/+page.svelte';
     import { app } from '$lib/stores/app';
-    import { wizard } from '$lib/stores/wizard';
-    import Wizard from './keys/wizard.svelte';
-    import { canWriteKeys, canWritePlatforms } from '$lib/stores/roles';
+    import {
+        IconArrowRight,
+        IconNodeJs,
+        IconPhp,
+        IconPython
+    } from '@appwrite.io/pink-icons-svelte';
+    import DatabaseImgSource from './assets/database.png';
+    import DatabaseImgSourceDark from './assets/database-dark.png';
+    import UsersImgSource from './assets/users.svg';
+    import UsersImgSourceDark from './assets/users-dark.svg';
+    import DiscordImgSource from './assets/discord.png';
+    import DiscordImgSourceDark from './assets/discord-dark.png';
+    import PlatformIosImgSource from './assets/platform-ios.svg';
+    import PlatformIosImgSourceDark from './assets/platform-ios-dark.svg';
+    import PlatformAndroidImgSource from './assets/platform-android.svg';
+    import PlatformAndroidImgSourceDark from './assets/platform-android-dark.svg';
+    import PlatformFlutterImgSource from './assets/platform-flutter.svg';
+    import PlatformFlutterImgSourceDark from './assets/platform-flutter-dark.svg';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-
-    export let projectId: string;
-
-    const platforms = [
-        {
-            title: 'Web',
-            icon: 'grayscale/code',
-            platform: Platform.Web
-        },
-        {
-            title: 'Flutter',
-            icon: 'color/flutter',
-            platform: Platform.Flutter
-        },
-        {
-            title: 'Apple',
-            icon: 'color/apple',
-            platform: Platform.Apple
-        },
-        {
-            title: 'Android',
-            icon: 'color/android',
-            platform: Platform.Android
-        },
-        {
-            title: 'React Native',
-            icon: 'color/react',
-            platform: Platform.ReactNative
-        }
-    ];
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { AvatarGroup } from '$lib/components';
+    import type { Models } from '@appwrite.io/console';
+    import { getPlatformInfo } from '$lib/helpers/platform';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { goto } from '$app/navigation';
+    import { page } from '$app/state';
 
     function createKey() {
-        wizard.start(Wizard);
+        trackEvent(Click.KeyCreateClick, {
+            source: 'onboarding'
+        });
+        goto(`${base}/project-${page.params.region}-${page.params.project}/overview/keys/create`, {
+            replaceState: true
+        });
     }
 
-    $: onBoardImage1Mobile = $app.themeInUse === 'dark' ? OnboardDark1Mobile : OnboardLight1Mobile;
-    $: onBoardImage1Desktop =
-        $app.themeInUse === 'dark' ? OnboardDark1Desktop : OnboardLight1Desktop;
-    $: onBoardImage2Mobile = $app.themeInUse === 'dark' ? OnboardDark2Mobile : OnboardLight2Mobile;
-    $: onBoardImage2Desktop =
-        $app.themeInUse === 'dark' ? OnboardDark2Desktop : OnboardLight2Desktop;
+    export let platforms: Models.Platform[] = [];
+    export let pingCount = 0;
+
+    function openPlatformWizard(type: number, platform?: Models.Platform) {
+        if (platform) {
+            continuePlatform(type, platform.name, platform.key, platform.type);
+        } else {
+            trackEvent(Click.PlatformCreateClick, { source: 'onboarding' });
+            addPlatform(type);
+        }
+    }
+
+    let platformMap = new Map();
+
+    $: {
+        let updatedMap = new Map();
+        platforms.forEach((platform) => {
+            const platformInfo = getPlatformInfo(platform.type);
+            updatedMap.set(platformInfo.name, platform);
+        });
+        platformMap = updatedMap;
+    }
 </script>
 
-{#if $canWriteKeys || $canWritePlatforms}
-    <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</h2>
-                <p class="u-line-height-1-5 u-margin-block-start-12">
-                    Here are some next steps to start building
-                </p>
-            </div>
-        </header>
-
-        {#if $canWritePlatforms}
-            <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 u-margin-block-start-16">
-                        Our SDKs make it possible to easily integrate with any platform.
-                    </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">
+<div style:container-type="inline-size">
+    <div class="console-container">
+        <div class="dashboard-content">
+            {#if platforms.length === 0 || pingCount === 0}
+                <Step.List>
+                    <Step.Item state="previous"
+                        ><div>
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
+                                >Create project</Typography.Title>
+                        </div></Step.Item>
+                    <Step.Item state="current">
+                        <Layout.Stack
+                            direction={$isSmallViewport ? 'column' : 'row'}
+                            gap={$isSmallViewport ? 'xl' : 'xxl'}>
+                            <div class="step-info">
+                                <Layout.Stack gap="m">
+                                    <Typography.Title color="--fgcolor-neutral-primary" size="s"
+                                        >Connect your platform</Typography.Title>
+                                    <div class="build-info">
+                                        <span>
+                                            Start building with your preferred web, mobile, and
+                                            native frameworks.
+                                        </span>
+                                    </div>
+                                </Layout.Stack>
+                            </div>
+                            <Layout.Stack gap="l">
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(0, platformMap.get('Web'));
+                                        }}
+                                        padding="s"
+                                        ><Layout.Stack
+                                            gap={platformMap.has('Web') ? 'm' : 'xl'}
+                                            height="100%"
+                                            justifyContent="space-between"
+                                            ><div class="card-top-image web-image-light"></div>
+                                            <div class="card-top-image web-image-dark"></div>
+                                            {#if platformMap.has('Web')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 0 0 2px">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Typography.Title size="s">Web</Typography.Title>
+                                                {#if platformMap.has('Web')}<Button.Button size="xs"
+                                                        >Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}
+                                            </Layout.Stack>
+                                        </Layout.Stack></Card.Button>
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(4, platformMap.get('React Native'));
+                                        }}
+                                        padding="s"
+                                        ><Layout.Stack
+                                            gap={platformMap.has('React Native') ? 'm' : 'xl'}
+                                            height="100%"
+                                            justifyContent="space-between">
+                                            <div class="card-top-image reactnative-image-light">
+                                            </div>
+                                            <div class="card-top-image reactnative-image-dark">
+                                            </div>
+                                            {#if platformMap.has('React Native')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 0 0 2px">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Typography.Title size="s"
+                                                    >React Native</Typography.Title>
+                                                {#if platformMap.has('React Native')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}
+                                            </Layout.Stack>
+                                        </Layout.Stack></Card.Button>
+                                </Layout.Stack>
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(3, platformMap.get('Apple'));
+                                        }}
+                                        padding="s">
+                                        <Layout.Stack
+                                            gap={platformMap.has('Apple') ? 's' : 'xxl'}
+                                            height="100%"
+                                            justifyContent="space-between">
                                             <img
-                                                src={`${base}/icons/${$app.themeInUse}/${platform.icon}.svg`}
-                                                alt="technology" />
+                                                class="platform-image"
+                                                src={$app.themeInUse === 'dark'
+                                                    ? PlatformIosImgSourceDark
+                                                    : PlatformIosImgSource}
+                                                alt="" />
+                                            {#if platformMap.has('Apple')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 0 0 2px">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Typography.Title size="s">Apple</Typography.Title>
+                                                {#if platformMap.has('Apple')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}</Layout.Stack>
+                                        </Layout.Stack>
+                                    </Card.Button>
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(2, platformMap.get('Android'));
+                                        }}
+                                        padding="s">
+                                        <Layout.Stack
+                                            gap={platformMap.has('Android') ? 's' : 'xxl'}
+                                            height="100%"
+                                            justifyContent="space-between">
+                                            <img
+                                                class="platform-image"
+                                                src={$app.themeInUse === 'dark'
+                                                    ? PlatformAndroidImgSourceDark
+                                                    : PlatformAndroidImgSource}
+                                                alt="" />
+                                            {#if platformMap.has('Android')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 0 0 2px">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Typography.Title size="s"
+                                                    >Android</Typography.Title>
+                                                {#if platformMap.has('Android')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}</Layout.Stack>
+                                        </Layout.Stack>
+                                    </Card.Button>
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(1, platformMap.get('Flutter'));
+                                        }}
+                                        padding="s">
+                                        <Layout.Stack
+                                            gap={platformMap.has('Flutter') ? 's' : 'xxl'}
+                                            height="100%"
+                                            justifyContent="space-between">
+                                            <img
+                                                class="platform-image"
+                                                src={$app.themeInUse === 'dark'
+                                                    ? PlatformFlutterImgSourceDark
+                                                    : PlatformFlutterImgSource}
+                                                alt="" />
+                                            {#if platformMap.has('Flutter')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 0 0 2px">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Typography.Title size="s"
+                                                    >Flutter</Typography.Title>
+                                                {#if platformMap.has('Flutter')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}</Layout.Stack>
+                                        </Layout.Stack>
+                                    </Card.Button>
+                                </Layout.Stack>
+                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                                    <Typography.Text>Or connect</Typography.Text>
+                                    <Link.Button variant="muted" on:click={createKey}
+                                        >server side</Link.Button>
+                                    <div style:padding-inline-start="8px">
+                                        <AvatarGroup
+                                            icons={[IconPython, IconNodeJs, IconPhp]}
+                                            total={7}
+                                            size="s" />
+                                    </div>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Layout.Stack></Step.Item>
+                    <Step.Item state="next"
+                        ><div>
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
+                                >Build your app</Typography.Title>
+                        </div></Step.Item>
+                </Step.List>
+            {:else}
+                <Step.List>
+                    <Step.Item state="previous"
+                        ><div>
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
+                                >Create project</Typography.Title>
+                        </div></Step.Item>
+                    <Step.Item state="previous"
+                        ><div>
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
+                                >Connect your platform</Typography.Title>
+                        </div></Step.Item>
+                    <Step.Item state="current">
+                        <Layout.Stack
+                            direction={$isSmallViewport ? 'column' : 'row'}
+                            gap={$isSmallViewport ? 'xl' : 'xxl'}>
+                            <div class="step-info">
+                                <Layout.Stack gap="m">
+                                    <Typography.Title color="--fgcolor-neutral-primary" size="s"
+                                        >Build your app</Typography.Title>
+                                    <div class="build-info">
+                                        <span>
+                                            Continue building your app by setting up services such
+                                            as Auth, Databases, Storage and Functions.
+                                        </span>
+                                    </div>
+                                </Layout.Stack>
+                            </div>
+                            <Layout.Stack gap="l">
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
+                                    <Card.Button
+                                        on:click={() => {
+                                            trackEvent(Click.OnboardingSetupDatabaseClick);
+                                            goto(
+                                                `${base}/project-${page.params.region}-${page.params.project}/databases`
+                                            );
+                                        }}
+                                        padding="s"
+                                        ><Layout.Stack gap="xl"
+                                            ><div
+                                                class="card-top-image database-card-image"
+                                                style:background-image={`url('${
+                                                    $app.themeInUse === 'dark'
+                                                        ? DatabaseImgSourceDark
+                                                        : DatabaseImgSource
+                                                }')`}>
+                                            </div>
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Typography.Title size="s"
+                                                    >Set up your database</Typography.Title>
+                                                <div class="arrow-icon">
+                                                    <Icon icon={IconArrowRight} size="s" />
+                                                </div>
+                                            </Layout.Stack>
+                                        </Layout.Stack></Card.Button>
+                                    <Card.Base padding="s"
+                                        ><div class="full-height-card">
+                                            <Layout.Stack gap="xl" justifyContent="space-between">
+                                                <Typography.Title size="s"
+                                                    >Discover our docs</Typography.Title>
+                                                <Layout.Stack
+                                                    direction="column"
+                                                    gap="s"
+                                                    justifyContent="flex-end">
+                                                    <Link.Anchor
+                                                        variant="quiet-muted"
+                                                        href="https://appwrite.io/docs/references"
+                                                        on:click={() => {
+                                                            trackEvent(
+                                                                Click.OnboardingApiReferencesClick
+                                                            );
+                                                        }}
+                                                        target="_blank">API references</Link.Anchor>
+                                                    <Link.Anchor
+                                                        variant="quiet-muted"
+                                                        href="https://appwrite.io/docs/tutorials"
+                                                        on:click={() => {
+                                                            trackEvent(
+                                                                Click.OnboardingTutorialsClick
+                                                            );
+                                                        }}
+                                                        target="_blank">Tutorials</Link.Anchor>
+                                                    <Link.Anchor
+                                                        variant="quiet-muted"
+                                                        href="https://appwrite.io/docs/products/storage/quick-start"
+                                                        on:click={() => {
+                                                            trackEvent(
+                                                                Click.OnboardingStorageQuickstartClick
+                                                            );
+                                                        }}
+                                                        target="_blank"
+                                                        >Storage quick start
+                                                    </Link.Anchor>
+                                                    <Link.Anchor
+                                                        variant="quiet-muted"
+                                                        href="https://appwrite.io/docs/products/functions/quick-start"
+                                                        on:click={() => {
+                                                            trackEvent(
+                                                                Click.OnboardingFunctionsQuickstartClick
+                                                            );
+                                                        }}
+                                                        target="_blank"
+                                                        >Functions quick start</Link.Anchor>
+                                                </Layout.Stack>
+                                            </Layout.Stack>
+                                        </div></Card.Base>
+                                </Layout.Stack>
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
+                                    <div class="double-width-card">
+                                        <Card.Base padding="s"
+                                            ><div class="full-height-card">
+                                                <Layout.Stack direction="row">
+                                                    <Layout.Stack
+                                                        gap="xl"
+                                                        justifyContent="space-between">
+                                                        <Typography.Title size="s"
+                                                            >Set up Auth</Typography.Title>
+                                                        <Layout.Stack
+                                                            direction="column"
+                                                            gap="s"
+                                                            justifyContent="flex-end">
+                                                            <Link.Anchor
+                                                                variant="quiet-muted"
+                                                                href={`${base}/project-${page.params.region}-${page.params.project}/auth/settings`}
+                                                                on:click={() => {
+                                                                    trackEvent(
+                                                                        Click.OnboardingAuthEmailPasswordClick
+                                                                    );
+                                                                }}
+                                                                >E-mail and password
+                                                            </Link.Anchor>
+                                                            <Link.Anchor
+                                                                variant="quiet-muted"
+                                                                href={`${base}/project-${page.params.region}-${page.params.project}/auth/settings`}
+                                                                on:click={() => {
+                                                                    trackEvent(
+                                                                        Click.OnboardingAuthOauth2Click
+                                                                    );
+                                                                }}>OAuth 2</Link.Anchor>
+                                                            <Link.Anchor
+                                                                variant="quiet-muted"
+                                                                href={`${base}/project-${page.params.region}-${page.params.project}/auth/settings`}
+                                                                on:click={() => {
+                                                                    trackEvent(
+                                                                        Click.OnboardingAuthAllMethodsClick
+                                                                    );
+                                                                }}>View all methods</Link.Anchor>
+                                                        </Layout.Stack>
+                                                    </Layout.Stack>
+                                                    <div
+                                                        class="auth-image"
+                                                        style:background-image={`url('${
+                                                            $app.themeInUse === 'dark'
+                                                                ? UsersImgSourceDark
+                                                                : UsersImgSource
+                                                        }')`}>
+                                                    </div>
+                                                </Layout.Stack>
+                                            </div></Card.Base>
+                                    </div>
+
+                                    <Card.Link
+                                        href="https://appwrite.io/discord"
+                                        padding="s"
+                                        on:click={() => {
+                                            trackEvent(Click.OnboardingDiscordClick);
+                                        }}>
+                                        <div class="full-height-card">
+                                            <Layout.Stack gap="xs" justifyContent="space-between">
+                                                <Layout.Stack direction="column" gap="xxxs">
+                                                    <img
+                                                        src={$app.themeInUse === 'dark'
+                                                            ? DiscordImgSourceDark
+                                                            : DiscordImgSource}
+                                                        class="discord"
+                                                        alt="" />
+                                                    <Typography.Title size="s"
+                                                        >Discord</Typography.Title>
+                                                </Layout.Stack>
+                                                <Layout.Stack
+                                                    direction="row"
+                                                    alignItems="flex-end"
+                                                    justifyContent="space-between">
+                                                    <Typography.Text
+                                                        size="m"
+                                                        color="--fgcolor-neutral-secondary">
+                                                        Join our Discord for support, tips and
+                                                        product updates</Typography.Text>
+                                                    <div class="arrow-icon arrow-icon-discord">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                </Layout.Stack>
+                                            </Layout.Stack>
                                         </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>
-        {/if}
-
-        {#if $canWriteKeys}
-            <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 u-margin-block-start-16">
-                        Appwrite is designed to adapt to your existing backend. Integrate Appwrite
-                        with your backend code base using Server SDKs or Webhooks.
-                    </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={`${base}/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={`${base}/project-${$page.params.region}-${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={`${base}/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>
-        {/if}
-    </div>
-{/if}
-
-<article class="u-grid u-width-full-line common-section onboard-cover">
-    <img src={onBoardImage1Mobile} class="is-only-mobile u-width-full-line" alt="statistics" />
-    <img src={onBoardImage1Desktop} class="is-not-mobile u-width-full-line" alt="statistics" />
-    <div class="u-height-100-percent u-width-full-line u-padding-block-start-20">
-        <div class="u-flex u-flex-vertical u-height-100-percent u-cross-center u-padding-inline-24">
-            <div class="avatar">
-                <i class="icon-lock-closed" />
-            </div>
-            <div class="common-section u-text-center">
-                <h5 class="heading-level-5">Add a platform to view data about your project</h5>
-            </div>
+                                    </Card.Link>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Layout.Stack></Step.Item>
+                </Step.List>
+            {/if}
         </div>
     </div>
-</article>
-
-<img
-    src={onBoardImage2Mobile}
-    class="common-section is-only-mobile u-width-full-line"
-    alt="statistics" />
-<img
-    src={onBoardImage2Desktop}
-    class="common-section is-not-mobile u-width-full-line"
-    alt="statistics" />
+</div>
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
-    .card {
-        :global(.theme-dark) & {
-            background: #19191c !important;
+    :global(.theme-light) {
+        --progress-background-color: var(--neutral-200);
+        .web-image-dark,
+        .reactnative-image-dark {
+            display: none;
         }
     }
 
-    :global(.theme-dark .card-header) {
-        background: unset !important;
+    :global(.theme-dark) {
+        --progress-background-color: var(--neutral-600);
+        .web-image-light,
+        .reactnative-image-light {
+            display: none;
+        }
     }
 
-    .card-header {
-        min-block-size: 4.5625rem !important;
-    }
+    .dashboard-content {
+        .card-top-image {
+            margin-top: calc(-1 * var(--base-16, 16px));
+            margin-left: calc(-1 * var(--base-16, 16px));
+            width: calc(100% + var(--base-32, 32px));
+            height: 160px;
+            background-size: cover;
+            background-position: center;
+            border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
 
-    .card-separator {
-        border-block-start: unset !important;
-    }
+            @media (min-width: 1200px) {
+                height: 187px;
+            }
+        }
 
-    .grid-box-item .card {
-        padding: 1rem !important;
-    }
+        .web-image-light {
+            background-image: url('./assets/platform-web.png');
+        }
+        .web-image-dark {
+            background-image: url('./assets/platform-web-dark.png');
+        }
 
-    article .heading-level-5 {
-        margin-inline: 4rem;
-    }
-
-    @media #{devices.$break2open} {
-        .card-header {
-            background-image: var(--url);
+        .reactnative-image-light {
+            background-image: url('./assets/platform-reactnative.png');
+        }
+        .reactnative-image-dark {
+            background-image: url('./assets/platform-reactnative-dark.png');
+        }
+        .database-card-image {
+            background-size: cover;
+            background-position: bottom;
             background-repeat: no-repeat;
-            background-position: top right;
         }
-    }
-    .onboard-cover img {
-        max-inline-size: none;
-        max-block-size: none;
-    }
-    .onboard-cover {
-        position: relative;
-    }
-    .onboard-cover > div {
-        background-color: transparent;
-        z-index: 1;
-        position: absolute;
-
-        @media #{devices.$break1} {
-            margin-block-start: 15%;
+        .full-height-card {
+            height: 100%;
         }
 
-        @media #{devices.$break2open} {
-            margin-block-start: 2rem;
+        .auth-image {
+            width: 100%;
+            height: 200px;
+            margin-right: calc(-1 * var(--base-16, 16px));
+            margin-bottom: calc(-1 * var(--base-16, 16px));
+            align-self: flex-end;
+            background-size: cover;
+            background-position: left bottom;
+            background-repeat: no-repeat;
         }
+        :global(.full-height-card div) {
+            height: 100%;
+        }
+
+        .double-width-card {
+            @media (min-width: 768px) {
+                width: 250%;
+            }
+        }
+
+        .arrow-icon {
+            color: var(--border-neutral-strong);
+            display: none;
+            @media (min-width: 768px) {
+                display: flex;
+            }
+        }
+        .arrow-icon-discord {
+            align-items: flex-end;
+        }
+
+        .platform-image {
+            width: 56px;
+            margin-left: calc(-1 * var(--base-4, 4px));
+        }
+
+        .step-info {
+            @media (min-width: 768px) {
+                max-width: 100px;
+            }
+            @media (min-width: 1024px) {
+                max-width: 200px;
+            }
+            @media (min-width: 1400px) {
+                max-width: 300px;
+            }
+        }
+    }
+    .discord {
+        width: 24px;
     }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index 126dbe854..ff85cf31a 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts" context="module">
-    import SearchDark from '$lib/images/search-dark.svg';
-    import SearchLight from '$lib/images/search-light.svg';
     import { wizard } from '$lib/stores/wizard';
     import CreateAndroid from './createAndroid.svelte';
     import CreateApple from './createApple.svelte';
     import CreateFlutter from './createFlutter.svelte';
-    import CreateWeb from './createWeb.svelte';
     import CreateReactNative from './createReactNative.svelte';
-    import { versions } from './wizard/store';
+    import CreateWeb from './createWeb.svelte';
+    import { createPlatform, versions } from './wizard/store';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export enum Platform {
         Web,
@@ -19,9 +18,37 @@
 
     export async function addPlatform(type: Platform) {
         await versions.load();
+        createPlatform.reset();
+        trackEvent(Click.PlatformCreateClick, {
+            platform: platforms[type],
+            source: 'platforms_page'
+        });
         wizard.start(platforms[type]);
     }
 
+    export async function continuePlatform(
+        platform: Platform,
+        name: string,
+        key: string,
+        type: string
+    ) {
+        await versions.load();
+        createPlatform.set({
+            name: name,
+            key: key,
+            type: type
+        });
+        trackEvent(Click.PlatformCreateClick, {
+            platform: platforms[platform],
+            state: 'continue'
+        });
+        wizard.start(platforms[platform], null, 1, {
+            isPlatformCreated: true,
+            platform: type,
+            key: key
+        });
+    }
+
     const platforms = {
         [Platform.Web]: CreateWeb,
         [Platform.Flutter]: CreateFlutter,
@@ -33,16 +60,31 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { DropList, DropListItem, Heading } from '$lib/components';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { app } from '$lib/stores/app';
-    import type { PageData } from './$types';
-    import { ContainerHeader } from '$lib/layout';
     import { canWritePlatforms } from '$lib/stores/roles';
+    import { setOverviewAction } from '../context';
+    import {
+        ActionMenu,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Popover,
+        Table
+    } from '@appwrite.io/pink-svelte';
+    import Action from './action.svelte';
+    import {
+        IconAndroid,
+        IconApple,
+        IconCode,
+        IconFlutter,
+        IconReact
+    } from '@appwrite.io/pink-icons-svelte';
+    import type { ComponentType } from 'svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
 
-    export let data: PageData;
+    export let data;
 
     enum PlatformTypes {
         'apple-ios' = 'iOS',
@@ -56,135 +98,101 @@
         'flutter-macos' = 'macOS',
         'flutter-windows' = 'Windows',
         'flutter-web' = 'Web',
-        'web' = 'Web',
         'react-native-android' = 'Android',
-        'react-native-ios' = 'iOS'
+        'react-native-ios' = 'iOS',
+        'web' = 'Web'
     }
-    let showDropdown = false;
-    let showDropdownEmpty = false;
-    const path = `${base}/project-${$page.params.region}-${$page.params.project}/overview/platforms`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/overview/platforms`;
 
-    const getPlatformInfo = (platform: string) => {
+    function getPlatformInfo(platform: string): ComponentType {
         if (platform.includes('flutter')) {
-            return 'color/flutter';
+            return IconFlutter;
         } else if (platform.includes('react-native')) {
-            return 'color/react';
+            return IconReact;
         } else if (platform.includes('apple')) {
-            return 'color/apple';
+            return IconApple;
         } else if (platform.includes('android')) {
-            return 'color/android';
-        } else if (platform.includes('web')) {
-            return 'grayscale/code';
+            return IconAndroid;
         } else {
-            return 'unknown';
+            return IconCode;
         }
-    };
+    }
+
+    setOverviewAction(Action);
 </script>
 
-<ContainerHeader
-    title="Platforms"
-    titleTag="h3"
-    titleSize="7"
-    total={data?.platforms?.total}
-    let:isButtonDisabled>
-    <DropList bind:show={showDropdown} placement="bottom-start">
-        {#if $canWritePlatforms}
-            <Button on:click={() => (showDropdown = !showDropdown)} disabled={isButtonDisabled}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add platform</span>
-            </Button>
-        {/if}
-        <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>
-            <DropListItem on:click={() => addPlatform(Platform.ReactNative)}
-                >React Native app</DropListItem>
-        </svelte:fragment>
-    </DropList>
-</ContainerHeader>
-
 {#if data.platforms.platforms.length}
-    <div
-        class="grid-box u-margin-block-start-32"
-        style="--grid-gap:1.5rem; --grid-item-size:20rem;"
-        data-private>
+    <Table.Root columns={3} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Platform type</Table.Header.Cell>
+            <Table.Header.Cell {root}>Last updated</Table.Header.Cell>
+        </svelte:fragment>
         {#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-16 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>
-                            <div>
-                                <Heading size="6" tag="h3">{platform.name}</Heading>
-                                <p class="text">{PlatformTypes[platform.type]}</p>
-                            </div>
-                        </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>
+            <Table.Row.Link href={`${path}/${platform.$id}`} {root}>
+                <Table.Cell {root}>
+                    {platform.name}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    <Layout.Stack direction="row" gap="s" alignItems="center">
+                        <Icon icon={getPlatformInfo(platform.type)} />
+                        {PlatformTypes[platform.type]}
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {#if platform.$updatedAt}
+                        <DualTimeView time={platform.$updatedAt} />
+                    {:else}
+                        never
+                    {/if}
+                </Table.Cell>
+            </Table.Row.Link>
         {/each}
-    </div>
+    </Table.Root>
 {: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 a platform to get started.</Heading>
-                    <p class="body-text-2 u-bold u-margin-block-start-4">
-                        Need a hand? Learn more in 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">
-                        {#if $canWritePlatforms}
-                            <Button
-                                secondary
-                                on:click={() => (showDropdownEmpty = !showDropdownEmpty)}>
-                                <span class="text">Add platform</span>
-                            </Button>
-                        {/if}
-                        <svelte:fragment slot="list">
-                            <DropListItem on:click={() => addPlatform(Platform.Web)}>
+    <Card.Base padding="none">
+        <Empty
+            title="Add a platform to get started."
+            description="Need a hand? Learn more in our documentation.">
+            <svelte:fragment slot="actions">
+                <Button external href="https://appwrite.io/docs/sdks" text>Documentation</Button>
+                <Popover let:toggle padding="none" placement="bottom-end">
+                    {#if $canWritePlatforms}
+                        <Button secondary on:click={toggle}>
+                            <span class="text">Add platform</span>
+                        </Button>
+                    {/if}
+                    <svelte:fragment slot="tooltip">
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button
+                                on:click={() => addPlatform(Platform.Web)}
+                                leadingIcon={IconCode}>
                                 Web
-                            </DropListItem>
-                            <DropListItem on:click={() => addPlatform(Platform.Flutter)}>
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                on:click={() => addPlatform(Platform.Flutter)}
+                                leadingIcon={IconFlutter}>
                                 Flutter
-                            </DropListItem>
-                            <DropListItem on:click={() => addPlatform(Platform.Android)}>
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                on:click={() => addPlatform(Platform.Android)}
+                                leadingIcon={IconAndroid}>
                                 Android
-                            </DropListItem>
-                            <DropListItem on:click={() => addPlatform(Platform.Apple)}>
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                on:click={() => addPlatform(Platform.Apple)}
+                                leadingIcon={IconApple}>
                                 Apple
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </div>
-            </slot>
-        </div>
-    </article>
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                on:click={() => addPlatform(Platform.ReactNative)}
+                                leadingIcon={IconReact}>
+                                React Native
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </svelte:fragment>
+                </Popover>
+            </svelte:fragment>
+        </Empty>
+    </Card.Base>
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
index d9005ad9f..09335b492 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
@@ -11,18 +11,18 @@
     import AppleWatchOs from './appleWatchOS.svelte';
     import AppleTvos from './appleTvOS.svelte';
     import Android from './android.svelte';
-    import { Box, CardGrid, Heading } from '$lib/components';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Box, CardGrid } from '$lib/components';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { onMount, SvelteComponent } from 'svelte';
+    import { onMount, type Component } from 'svelte';
     import { project } from '../../../store';
     import { platform } from './store';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
 
-    const types: Record<string, typeof SvelteComponent<unknown>> = {
+    const types: Record<string, Component> = {
         web: Web,
         android: Android,
         'apple-ios': AppleiOs,
@@ -71,17 +71,15 @@
 <Container>
     <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Name</Heading>
-            <p class="text">Choose any name that will help you distinguish between platforms.</p>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            Choose any name that will help you distinguish between platforms.
             <svelte:fragment slot="aside">
-                <FormList>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        bind:value={name}
-                        required
-                        placeholder="Enter name" />
-                </FormList>
+                <InputText
+                    id="name"
+                    label="Name"
+                    bind:value={name}
+                    required
+                    placeholder="Enter name" />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
@@ -92,11 +90,9 @@
 
     <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>
+    <CardGrid>
+        <svelte:fragment slot="title">Delete platform</svelte:fragment>
+        The Platform will be permanently deleted. This action is irreversible.
         <svelte:fragment slot="aside">
             <Box>
                 <div class="u-flex u-gap-16">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/android.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/android.svelte
index 0c18d467f..91a692d8d 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/android.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/android.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,19 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">
-            Your package name is generally the applicationId in your app-level build.gradle file.
-        </p>
+        <svelte:fragment slot="title">Package name</svelte:fragment>
+        Your package name is generally the applicationId in your app-level build.gradle file.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="key"
-                    label="Package Name"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="key"
+                label="Package name"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleIOS.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleIOS.svelte
index 717e74d58..cd9402d5c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleIOS.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,20 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="bundle-id"
-                    label="Bundle ID"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="bundle-id"
+                label="Bundle ID"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleMacOS.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleMacOS.svelte
index d3ee9f781..10cb67b30 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleMacOS.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,20 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="bundle-id"
-                    label="Bundle ID"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="bundle-id"
+                label="Bundle ID"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleTvOS.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleTvOS.svelte
index b003d7167..7c21a006c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleTvOS.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,20 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="bundle-id"
-                    label="Bundle ID"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="bundle-id"
+                label="Bundle ID"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleWatchOS.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleWatchOS.svelte
index 1f2874532..90419a0e0 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleWatchOS.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,20 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="bundle-id"
-                    label="Bundle ID"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="bundle-id"
+                label="Bundle ID"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte
index 85cd732f6..dcc39086e 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte
@@ -2,16 +2,15 @@
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../../store';
     import { platform } from './store';
 
     export let showDelete = false;
-
+    let error: string;
     async function handleDelete() {
         try {
             await sdk.forConsole.projects.deletePlatform($project.$id, $platform.$id);
@@ -23,27 +22,13 @@
             });
             trackEvent(Submit.PlatformDelete);
             await goto(`${base}/project-${$project.region}-${$project.$id}/overview/platforms`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.PlatformDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.PlatformDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete platform"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <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>
+<Confirm onSubmit={handleDelete} title="Delete platform" bind:open={showDelete} bind:error>
+    The Platform will be permanently deleted. This action is irreversible.
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterAndroid.svelte
index c3e30ad26..de9995a0e 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,19 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">
-            Your package name is generally the applicationId in your app-level build.gradle file.
-        </p>
+        <svelte:fragment slot="title">Package name</svelte:fragment>
+        Your package name is generally the applicationId in your app-level build.gradle file.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="package-name"
-                    label="Package Name"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="package-name"
+                label="Package name"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterIOS.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterIOS.svelte
index ceddc2018..5f718c1d6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterIOS.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,20 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="bundle-id"
-                    label="Bundle ID"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="bundle-id"
+                label="Bundle ID"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterLinux.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterLinux.svelte
index 1f0179b9a..69d9fd4cd 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterLinux.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,17 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">Your application name.</p>
+        <svelte:fragment slot="title">Package name</svelte:fragment>
+        Your application name.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="package-name"
-                    label="Package Name"
-                    bind:value={key}
-                    required
-                    placeholder="appname" />
-            </FormList>
+            <InputText
+                id="package-name"
+                label="Package Name"
+                bind:value={key}
+                required
+                placeholder="appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterMacOS.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterMacOS.svelte
index e3b842650..5a631456c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterMacOS.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,20 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="bundle-id"
-                    label="Bundle ID"
-                    bind:value={key}
-                    required
-                    placeholder="com.company.appname" />
-            </FormList>
+            <InputText
+                id="bundle-id"
+                label="Bundle ID"
+                bind:value={key}
+                required
+                placeholder="com.company.appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterWindows.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterWindows.svelte
index 90e5a1de6..9ac6a3ff2 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterWindows.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -46,17 +46,15 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">Your application name.</p>
+        <svelte:fragment slot="title">Package name</svelte:fragment>
+        Your application name.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="package-name"
-                    label="Package Name"
-                    bind:value={key}
-                    required
-                    placeholder="appname" />
-            </FormList>
+            <InputText
+                id="package-name"
+                label="Package Name"
+                bind:value={key}
+                required
+                placeholder="appname" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte
index 5a43ed907..b52019a57 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Cover, CoverTitle } from '$lib/layout';
     import { platform } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/overview/platforms`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/overview/platforms`}>
             {$platform?.name}
         </CoverTitle>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/web.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/web.svelte
index 3f2c7fbb6..9b7688de4 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/web.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -42,18 +42,17 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Hostname</Heading>
-        <p class="text">You can use * to allow wildcard hostnames or subdomains.</p>
+        <svelte:fragment slot="title">Hostname</svelte:fragment>
+        You can use * to allow wildcard hostnames or subdomains.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="hostname"
-                    label="Hostname"
-                    bind:value={hostname}
-                    pattern={extendedHostnameRegex}
-                    patternError="Please enter a valid hostname"
-                    placeholder="myapp.com" />
-            </FormList>
+            <InputText
+                id="hostname"
+                label="Hostname"
+                bind:value={hostname}
+                pattern={extendedHostnameRegex}
+                patternError="Please enter a valid hostname"
+                required
+                placeholder="myapp.com" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
new file mode 100644
index 000000000..0f3c96b17
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
@@ -0,0 +1,54 @@
+<script>
+    import Button from '$lib/elements/forms/button.svelte';
+    import { canWritePlatforms } from '$lib/stores/roles';
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+    import { addPlatform, Platform } from './+page.svelte';
+    import {
+        IconAndroid,
+        IconApple,
+        IconCode,
+        IconFlutter,
+        IconPlus,
+        IconReact
+    } from '@appwrite.io/pink-icons-svelte';
+</script>
+
+{#if $canWritePlatforms}
+    <Popover let:toggle padding="none" placement="bottom-end">
+        {#if $canWritePlatforms}
+            <Button on:click={toggle}>
+                <Icon icon={IconPlus} slot="start" />
+                <span class="text">Add platform</span>
+            </Button>
+        {/if}
+        <div style:min-width="232px" slot="tooltip">
+            <ActionMenu.Root>
+                <ActionMenu.Item.Button
+                    on:click={() => addPlatform(Platform.Web)}
+                    leadingIcon={IconCode}>
+                    Web
+                </ActionMenu.Item.Button>
+                <ActionMenu.Item.Button
+                    on:click={() => addPlatform(Platform.Flutter)}
+                    leadingIcon={IconFlutter}>
+                    Flutter
+                </ActionMenu.Item.Button>
+                <ActionMenu.Item.Button
+                    on:click={() => addPlatform(Platform.Android)}
+                    leadingIcon={IconAndroid}>
+                    Android
+                </ActionMenu.Item.Button>
+                <ActionMenu.Item.Button
+                    on:click={() => addPlatform(Platform.Apple)}
+                    leadingIcon={IconApple}>
+                    Apple
+                </ActionMenu.Item.Button>
+                <ActionMenu.Item.Button
+                    on:click={() => addPlatform(Platform.ReactNative)}
+                    leadingIcon={IconReact}>
+                    React Native
+                </ActionMenu.Item.Button>
+            </ActionMenu.Root>
+        </div>
+    </Popover>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/AngularFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/AngularFrameworkIcon.svelte
new file mode 100644
index 000000000..3707a3c6e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/AngularFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="angular" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/ConnectionLine.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/ConnectionLine.svelte
new file mode 100644
index 000000000..51e4af067
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/ConnectionLine.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconCheck } from '@appwrite.io/pink-icons-svelte';
+
+    export let status: boolean = false;
+</script>
+
+<div class="connection-line u-flex u-cross-center">
+    <div
+        class="line-left"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 5s;`}
+        data-status={status}>
+    </div>
+
+    <div
+        class="tick-container"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 2.5s;`}
+        data-status={status}>
+        {#if status}
+            <!-- todo: xs missing atm, need to test -->
+            <Icon icon={IconCheck} size="s" color="#fd366e" />
+        {/if}
+    </div>
+
+    <div
+        class="line-right"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 5s;`}
+        data-status={status}>
+    </div>
+</div>
+
+<style>
+    .connection-line {
+        display: flex;
+        width: 6.125rem;
+        align-items: center;
+    }
+
+    .line-left[data-status='false'],
+    .line-right[data-status='false'] {
+        flex: 1;
+        height: 1px;
+        background: none;
+        border-top: 1px dashed #d8d8db;
+    }
+
+    .line-left[data-status='true'] {
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(to left, #f02e65 0%, rgba(254, 149, 103, 0.15) 100%);
+    }
+
+    .line-right[data-status='true'] {
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(to right, #f02e65 6.32%, rgba(254, 149, 103, 0.15) 116.81%);
+    }
+
+    .tick-container[data-status='false'] {
+        width: 7px;
+        height: 7px;
+        display: flex;
+        border-radius: 50%;
+        margin-inline: 0.25rem;
+        background-color: #ccc;
+    }
+
+    .tick-container[data-status='true'] {
+        display: flex;
+        width: 25px;
+        height: 25px;
+        color: #fd366e;
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+        border: 1.8px solid hsla(343, 98%, 60%, 0.32);
+        background-color: hsla(343, 98%, 60%, 0.08);
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte
new file mode 100644
index 000000000..8f9d7f204
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="js" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte
new file mode 100644
index 000000000..db1f87b92
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="nextjs" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NoFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NoFrameworkIcon.svelte
new file mode 100644
index 000000000..2daf0fbd9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NoFrameworkIcon.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import noFrameworkIcon from './noFrameworkIcon.svg';
+    import noFrameworkIconDark from './noFrameworkIconDark.svg';
+    import { app } from '$lib/stores/app';
+</script>
+
+{#if $app.themeInUse === 'light'}
+    <img src={noFrameworkIcon} alt="" />
+{:else}
+    <img src={noFrameworkIconDark} alt="" />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NuxtFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NuxtFrameworkIcon.svelte
new file mode 100644
index 000000000..2f07bfb8d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/NuxtFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="nuxt" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/OnboardingPlatformCard.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
new file mode 100644
index 000000000..3b3105ab6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import type { ComponentType } from 'svelte';
+
+    // export let icon: Component;
+    export let icon: ComponentType; //TODO: switch to Component after pink 2 uses svelte 5
+    export let iconSize: number | undefined = undefined;
+    export let iconColor: string | undefined = undefined;
+</script>
+
+<div class="outer-card">
+    <div
+        class="inner-card"
+        style="
+            --icon-color: {iconColor || 'inherit'};
+            --icon-size: {iconSize ? `${iconSize}rem` : 'inherit'};
+        ">
+        <svelte:component this={icon} />
+    </div>
+</div>
+
+<style lang="scss">
+    .outer-card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 94.304px;
+        height: 94.303px;
+        flex-shrink: 0;
+        border-radius: 26.944px;
+        border: 1.684px solid rgba(255, 255, 255, 0.08);
+        background: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 8.757px 8.757px 0 rgba(0, 0, 0, 0.04);
+    }
+
+    .inner-card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80.832px;
+        height: 80.831px;
+        flex-shrink: 0;
+        border-radius: 20.208px;
+        background: #fff;
+        border: 0.54px solid #ededf0;
+        box-shadow: 0 6.736px 6.736px 0 rgba(0, 0, 0, 0.05);
+
+        & :global(svg) {
+            width: var(--icon-size);
+            height: var(--icon-size);
+            color: var(--icon-color);
+        }
+    }
+
+    :global(.theme-dark) {
+        & .outer-card {
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        & .inner-card {
+            border: 0.54px solid rgba(237, 237, 240, 0.08);
+            background: var(--bgcolor-neutral-primary, #1d1d21);
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/ReactFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/ReactFrameworkIcon.svelte
new file mode 100644
index 000000000..91fa150ac
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/ReactFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="react" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/SvelteFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/SvelteFrameworkIcon.svelte
new file mode 100644
index 000000000..e0e15b109
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/SvelteFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="svelte" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/VueFrameworkIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/VueFrameworkIcon.svelte
new file mode 100644
index 000000000..fcfa8e65f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/VueFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="vue" type="color" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/index.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/index.ts
new file mode 100644
index 000000000..1cdbbfe20
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/index.ts
@@ -0,0 +1,9 @@
+export { default as AngularFrameworkIcon } from './AngularFrameworkIcon.svelte';
+export { default as ConnectionLine } from './ConnectionLine.svelte';
+export { default as JavascriptFrameworkIcon } from './JavascriptFrameworkIcon.svelte';
+export { default as NextjsFrameworkIcon } from './NextjsFrameworkIcon.svelte';
+export { default as NoFrameworkIcon } from './NoFrameworkIcon.svelte';
+export { default as NuxtFrameworkIcon } from './NuxtFrameworkIcon.svelte';
+export { default as ReactFrameworkIcon } from './ReactFrameworkIcon.svelte';
+export { default as SvelteFrameworkIcon } from './SvelteFrameworkIcon.svelte';
+export { default as VueFrameworkIcon } from './AngularFrameworkIcon.svelte';
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/noFrameworkIcon.svg b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/noFrameworkIcon.svg
new file mode 100644
index 000000000..20ab4b4f7
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/noFrameworkIcon.svg
@@ -0,0 +1,8 @@
+<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.5 0L22 79" stroke="#EDEDF0" stroke-dasharray="2 2"/>
+    <path d="M79 23L-2.38419e-06 23" stroke="#EDEDF0" stroke-dasharray="2 2"/>
+    <path d="M79 56.5L-2.38419e-06 56.5" stroke="#EDEDF0" stroke-dasharray="2 2"/>
+    <path d="M56.5 0V79" stroke="#EDEDF0" stroke-dasharray="2 2"/>
+    <circle cx="39.5" cy="39.5" r="17" stroke="#EDEDF0" stroke-dasharray="2 2"/>
+    <circle cx="39.5" cy="39.5" r="25" stroke="#EDEDF0" stroke-dasharray="2 2"/>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/components/noFrameworkIconDark.svg b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/noFrameworkIconDark.svg
new file mode 100644
index 000000000..ae29faf6e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/components/noFrameworkIconDark.svg
@@ -0,0 +1,8 @@
+<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.5 0L22 79" stroke="#2D2D31" stroke-dasharray="2 2"/>
+    <path d="M79 23L-2.38419e-06 23" stroke="#2D2D31" stroke-dasharray="2 2"/>
+    <path d="M79 56.5L-2.38419e-06 56.5" stroke="#2D2D31" stroke-dasharray="2 2"/>
+    <path d="M56.5 0V79" stroke="#2D2D31" stroke-dasharray="2 2"/>
+    <circle cx="39.5" cy="39.5" r="17" stroke="#2D2D31" stroke-dasharray="2 2"/>
+    <circle cx="39.5" cy="39.5" r="25" stroke="#2D2D31" stroke-dasharray="2 2"/>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index cbda8fa6c..3c37a0a7e 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -1,41 +1,261 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    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 { invalidate } from '$app/navigation';
+    import { createPlatform } from './wizard/store';
+    import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconAndroid, IconAppwrite, IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { page } from '$app/state';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
 
-    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = page.params.project;
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-android\ncd starter-for-android\n';
+
+    const updateConfigCode = isCloud
+        ? `const val APPWRITE_PROJECT_ID = "${projectId}"`
+        : `const val APPWRITE_PROJECT_ID = "${projectId}"
+const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"
+        `;
+
+    async function createAndroidPlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                PlatformType.Android,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: 'android'
+            });
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
+    }
+
+    async function resetPlatformStore() {
+        createPlatform.reset();
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+            resetPlatformStore();
+        };
     });
 </script>
 
-<Wizard
-    title="Add an Android platform"
-    steps={stepsComponents}
-    manualExitControl
-    on:finish={onPlatformSetupFinish}
-    on:exit={onPlatformSetupFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add Android platform" bind:showExitModal confirmExit>
+    <Form onSubmit={createAndroidPlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder="My Android app"
+                                required
+                                bind:value={$createPlatform.name} />
 
-<Skipped />
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="key"
+                                required
+                                label="Package name"
+                                placeholder="com.company.appname"
+                                bind:value={$createPlatform.key}>
+                                <Tooltip slot="info" maxWidth="15rem">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <Typography.Caption variant="400" slot="tooltip">
+                                        Your package name is generally the applicationId in your
+                                        app-level build.gradle file.
+                                    </Typography.Caption>
+                                </Tooltip>
+                            </InputText>
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconAndroid} />
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Two -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal or Android
+                            Studio.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode
+                                size="s"
+                                code="data/repository/AppwriteRepository.kt" /> and update the configuration
+                            settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="kotlin" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or emulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#3ddc84"
+                        icon={IconAndroid} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                {#if isPlatformCreated}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="center"
+                        alignItems="center"
+                        gap="l">
+                        {#if !connectionSuccessful}
+                            <Typography.Text variant="m-400"
+                                >Waiting for connection...</Typography.Text>
+                        {:else}
+                            <!-- cannot apply fade on components -->
+                            <div
+                                in:fade={{ duration: 2500 }}
+                                class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                                <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                                <Typography.Text variant="m-400"
+                                    >You connected your app successfully.</Typography.Text>
+                            </div>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        {#if isPlatformCreated}
+            <Button
+                size="s"
+                fullWidthMobile
+                secondary
+                disabled={isCreatingPlatform}
+                href={location.pathname}>
+                Go to dashboard
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index e65ab1e8d..9c603e342 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -1,41 +1,286 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    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 { invalidate } from '$app/navigation';
+    import { createPlatform } from './wizard/store';
+    import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconApple, IconAppwrite, IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { page } from '$app/state';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import { app } from '$lib/stores/app';
+    import { LabelCard } from '$lib/components';
 
-    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = page.params.project;
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-ios\ncd starter-for-ios\n';
+
+    const updateConfigCode = isCloud
+        ? `APPWRITE_PROJECT_ID: "${projectId}"`
+        : `APPWRITE_PROJECT_ID: "${projectId}"
+APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"
+        `;
+
+    export let platform: PlatformType = PlatformType.Appleios;
+
+    let platforms: { [key: string]: PlatformType } = {
+        iOS: PlatformType.Appleios,
+        macOS: PlatformType.Applemacos,
+        watchOS: PlatformType.Applewatchos,
+        tvOS: PlatformType.Appletvos
+    };
+
+    async function createApplePlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                platform,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
+    }
+
+    async function resetPlatformStore() {
+        createPlatform.reset();
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+            resetPlatformStore();
+        };
     });
 </script>
 
-<Wizard
-    title="Add an Apple platform"
-    steps={stepsComponents}
-    manualExitControl
-    on:finish={onPlatformSetupFinish}
-    on:exit={onPlatformSetupFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add Apple platform" bind:showExitModal confirmExit>
+    <Form onSubmit={createApplePlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            <Layout.Stack gap="l" direction="row">
+                {#each Object.entries(platforms) as [key, value]}
+                    <div class="u-width-full-line">
+                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
+                        <LabelCard
+                            name={key}
+                            bind:group={platform}
+                            variant="primary"
+                            {value}
+                            title={key}
+                            disabled={isPlatformCreated} />
+                    </div>
+                {/each}
+            </Layout.Stack>
 
-<Skipped />
+            <!-- Step Two -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder="My Apple App"
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="hostname"
+                                label="Bundle ID"
+                                placeholder="com.company.appname"
+                                required
+                                bind:value={$createPlatform.key}>
+                                <Tooltip slot="info" maxWidth="15rem">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <Typography.Caption variant="400" slot="tooltip">
+                                        You can find your Bundle Identifier in the General tab for
+                                        your app's primary target in Xcode.
+                                    </Typography.Caption>
+                                </Tooltip>
+                            </InputText>
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!platform ||
+                                !$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconApple} />
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Three -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal or XCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode size="s" code="Sources/Config.plist" /> and
+                            update the configuration settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="plaintext" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor={$app.themeInUse === 'light' ? '#000' : '#fff'}
+                        icon={IconApple} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                {#if isPlatformCreated}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="center"
+                        alignItems="center"
+                        gap="l">
+                        {#if !connectionSuccessful}
+                            <Typography.Text variant="m-400"
+                                >Waiting for connection...</Typography.Text>
+                        {:else}
+                            <!-- cannot apply fade on components -->
+                            <div
+                                in:fade={{ duration: 2500 }}
+                                class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                                <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                                <Typography.Text variant="m-400"
+                                    >You connected your app successfully.</Typography.Text>
+                            </div>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        {#if isPlatformCreated}
+            <Button
+                size="s"
+                fullWidthMobile
+                secondary
+                disabled={isCreatingPlatform}
+                href={location.pathname}>
+                Go to dashboard
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 4eda4ac8c..311f4ebe5 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -1,41 +1,343 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    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 { invalidate } from '$app/navigation';
+    import { createPlatform } from './wizard/store';
+    import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconFlutter, IconAppwrite, IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { page } from '$app/state';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import { LabelCard } from '$lib/components';
 
-    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = page.params.project;
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-flutter\ncd starter-for-flutter\n';
+
+    const updateConfigCode = isCloud
+        ? `static const String APPWRITE_PROJECT_ID = "${projectId}"`
+        : `static const String APPWRITE_PROJECT_ID = "${projectId}"
+static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"
+        `;
+
+    export let platform: PlatformType = PlatformType.Flutterandroid;
+
+    let platforms: { [key: string]: PlatformType } = {
+        Android: PlatformType.Flutterandroid,
+        iOS: PlatformType.Flutterios,
+        Linux: PlatformType.Flutterlinux,
+        macOS: PlatformType.Fluttermacos,
+        Windows: PlatformType.Flutterwindows,
+        Web: PlatformType.Flutterweb
+    };
+
+    const placeholder: Partial<
+        Record<
+            PlatformType,
+            {
+                name: string;
+                hostname: string;
+                tooltip: string;
+            }
+        >
+    > = {
+        [PlatformType.Flutterandroid]: {
+            name: 'My Android app',
+            hostname: 'com.company.appname',
+            tooltip:
+                'Your package name is generally the applicationId in your app-level build.gradle file.'
+        },
+        [PlatformType.Flutterios]: {
+            name: 'My iOS app',
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+        },
+        [PlatformType.Flutterlinux]: {
+            name: 'My Linux app',
+            hostname: 'appname',
+            tooltip: 'Your application name'
+        },
+        [PlatformType.Fluttermacos]: {
+            name: 'My mac OS app',
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+        },
+        [PlatformType.Flutterwindows]: {
+            name: 'My Windows app',
+            hostname: 'appname',
+            tooltip: 'Your application name'
+        },
+        [PlatformType.Flutterweb]: {
+            name: 'My Web app',
+            hostname: 'localhost',
+            tooltip:
+                'The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required.'
+        }
+    };
+
+    const hostname: Partial<Record<PlatformType, string>> = {
+        [PlatformType.Flutterandroid]: 'Package name',
+        [PlatformType.Flutterios]: 'Bundle ID',
+        [PlatformType.Flutterlinux]: 'Package name',
+        [PlatformType.Fluttermacos]: 'Bundle ID',
+        [PlatformType.Flutterweb]: 'Hostname',
+        [PlatformType.Flutterwindows]: 'Package name'
+    };
+
+    async function createFlutterPlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                platform,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
+    }
+
+    async function resetPlatformStore() {
+        createPlatform.reset();
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+            resetPlatformStore();
+        };
     });
 </script>
 
-<Wizard
-    title="Add a Flutter platform"
-    steps={stepsComponents}
-    manualExitControl
-    on:finish={onPlatformSetupFinish}
-    on:exit={onPlatformSetupFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
+    <Form onSubmit={createFlutterPlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            <Layout.Stack gap="l" direction="row">
+                {#each Object.entries(platforms) as [key, value]}
+                    <div class="u-width-full-line">
+                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
+                        <LabelCard
+                            name={key}
+                            bind:group={platform}
+                            variant="primary"
+                            {value}
+                            title={key} />
+                    </div>
+                {/each}
+            </Layout.Stack>
 
-<Skipped />
+            <!-- Step Two -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder={placeholder[platform].name}
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="hostname"
+                                label={hostname[platform]}
+                                placeholder={placeholder[platform].hostname}
+                                required
+                                bind:value={$createPlatform.key}>
+                                <Tooltip slot="info" maxWidth="15rem">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <Typography.Caption variant="400" slot="tooltip">
+                                        {placeholder[platform].tooltip}
+                                    </Typography.Caption>
+                                </Tooltip>
+                            </InputText>
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!platform ||
+                                !$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconFlutter} />
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Three -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal, Android Studio
+                            or VSCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode
+                                size="s"
+                                code="lib/constants/appwrite.dart" /> and update the configuration settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="dart" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#47C5FB"
+                        icon={IconFlutter} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                {#if isPlatformCreated}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="center"
+                        alignItems="center"
+                        gap="l">
+                        {#if !connectionSuccessful}
+                            <Typography.Text variant="m-400"
+                                >Waiting for connection...</Typography.Text>
+                        {:else}
+                            <!-- cannot apply fade on components -->
+                            <div
+                                in:fade={{ duration: 2500 }}
+                                class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                                <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                                <Typography.Text variant="m-400"
+                                    >You connected your app successfully.</Typography.Text>
+                            </div>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        {#if isPlatformCreated}
+            <Button
+                size="s"
+                fullWidthMobile
+                secondary
+                disabled={isCreatingPlatform}
+                href={location.pathname}>
+                Go to dashboard
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index 7c59eaa88..a37b3a5e6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -1,41 +1,309 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import Step1 from './wizard/react-native/step1.svelte';
-    import Step2 from './wizard/react-native/step2.svelte';
-    import Step3 from './wizard/react-native/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
+    import { invalidate } from '$app/navigation';
+    import { createPlatform } from './wizard/store';
+    import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconReact, IconAppwrite, IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { page } from '$app/state';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import { LabelCard } from '$lib/components';
 
-    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
+    let showExitModal = false;
+    export let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = page.params.project;
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-react-native\ncd starter-for-react-native\n';
+
+    const updateConfigCode = isCloud
+        ? `const APPWRITE_PROJECT_ID = "${projectId}";`
+        : `const APPWRITE_PROJECT_ID = "${projectId}";
+const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}";
+        `;
+
+    export let platform: PlatformType = PlatformType.Reactnativeandroid;
+
+    let platforms: { [key: string]: PlatformType } = {
+        Android: PlatformType.Reactnativeandroid,
+        iOS: PlatformType.Reactnativeios
+    };
+
+    const placeholder: Partial<
+        Record<
+            PlatformType,
+            {
+                name: string;
+                hostname: string;
+                tooltip: string;
+            }
+        >
+    > = {
+        [PlatformType.Reactnativeandroid]: {
+            name: 'My Android App',
+            hostname: 'com.company.appname',
+            tooltip:
+                'Your package name is generally the applicationId in your app-level build.gradle file.'
+        },
+        [PlatformType.Reactnativeios]: {
+            name: 'My iOS App',
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+        }
+    };
+
+    const hostname: Partial<Record<PlatformType, string>> = {
+        [PlatformType.Reactnativeandroid]: 'Package name',
+        [PlatformType.Reactnativeios]: 'Bundle ID'
+    };
+
+    async function createReactNativePlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                platform,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
+    }
+
+    async function resetPlatformStore() {
+        createPlatform.reset();
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+            resetPlatformStore();
+        };
     });
 </script>
 
-<Wizard
-    title="Add a React Native platform"
-    steps={stepsComponents}
-    manualExitControl
-    on:finish={onPlatformSetupFinish}
-    on:exit={onPlatformSetupFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add React Native platform" bind:showExitModal confirmExit>
+    <Form onSubmit={createReactNativePlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            <Layout.Stack gap="l" direction="row">
+                {#each Object.entries(platforms) as [key, value]}
+                    <div class="u-width-full-line">
+                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
+                        <LabelCard
+                            name={key}
+                            bind:group={platform}
+                            variant="primary"
+                            {value}
+                            title={key}
+                            disabled={isPlatformCreated} />
+                    </div>
+                {/each}
+            </Layout.Stack>
 
-<Skipped />
+            <!-- Step Two -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder={placeholder[platform].name}
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="hostname"
+                                label={hostname[platform]}
+                                placeholder={placeholder[platform].hostname}
+                                required
+                                bind:value={$createPlatform.key}>
+                                <Tooltip slot="info" maxWidth="15rem">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <Typography.Caption variant="400" slot="tooltip">
+                                        {placeholder[platform].tooltip}
+                                    </Typography.Caption>
+                                </Tooltip>
+                            </InputText>
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!platform ||
+                                !$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconReact} />
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Three -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal or VSCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode
+                                size="s"
+                                code="lib/constants/appwrite.js" /> and update the configuration settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="javascript" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard iconSize={2.526} iconColor="#61DBFB" icon={IconReact} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                {#if isPlatformCreated}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="center"
+                        alignItems="center"
+                        gap="l">
+                        {#if !connectionSuccessful}
+                            <Typography.Text variant="m-400"
+                                >Waiting for connection...</Typography.Text>
+                        {:else}
+                            <!-- cannot apply fade on components -->
+                            <div
+                                in:fade={{ duration: 2500 }}
+                                class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                                <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                                <Typography.Text variant="m-400"
+                                    >You connected your app successfully.</Typography.Text>
+                            </div>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        {#if isPlatformCreated}
+            <Button
+                size="s"
+                fullWidthMobile
+                secondary
+                disabled={isCreatingPlatform}
+                href={location.pathname}>
+                Go to dashboard
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index c1a860660..b76ff9604 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -1,41 +1,421 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    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 { invalidate } from '$app/navigation';
+    import { createPlatform } from './wizard/store';
+    import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Card,
+        Button,
+        Tooltip
+    } from '@appwrite.io/pink-svelte';
+    import { Form, InputText } from '$lib/elements/forms';
+    import {
+        IconVue,
+        IconAppwrite,
+        IconSvelte,
+        IconReact,
+        IconNuxt,
+        IconInfo,
+        IconExternalLink,
+        IconAngular,
+        IconJs
+    } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
+    import { type ComponentType, onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import {
+        ReactFrameworkIcon,
+        SvelteFrameworkIcon,
+        NuxtFrameworkIcon,
+        NextjsFrameworkIcon,
+        VueFrameworkIcon,
+        NoFrameworkIcon,
+        AngularFrameworkIcon,
+        JavascriptFrameworkIcon
+    } from './components/index';
+    import { hostnameRegex } from '$lib/helpers/string';
 
-    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
+    export let key;
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    let showExitModal = false;
+    let isPlatformCreated = !!key;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    let isChangingFramework = false;
+
+    const projectId = page.params.project;
+
+    const updateConfigCode = (prefix = '') => `${prefix}APPWRITE_PROJECT_ID = "${projectId}"
+${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"
+        `;
+    type FrameworkType = {
+        key: string;
+        label: string;
+        icon: ComponentType;
+        smallIcon: ComponentType;
+        portNumber: number;
+        runCommand: string;
+        updateConfigCode: string;
+    };
+    export let platform: PlatformType = PlatformType.Flutterandroid;
+    export let selectedFrameworkKey: string | undefined = key ? key : undefined;
+    let hostname;
+    let hostnameError = false;
+
+    let frameworks: Array<FrameworkType> = [
+        {
+            key: 'svelte',
+            label: 'Svelte',
+            icon: SvelteFrameworkIcon,
+            smallIcon: IconSvelte,
+            portNumber: 5173,
+            runCommand: 'npm run dev',
+            updateConfigCode: updateConfigCode('PUBLIC_')
+        },
+        {
+            key: 'react',
+            label: 'React',
+            icon: ReactFrameworkIcon,
+            smallIcon: IconReact,
+            portNumber: 5173,
+            runCommand: 'npm run dev',
+            updateConfigCode: updateConfigCode('VITE_')
+        },
+        {
+            key: 'nuxt',
+            label: 'Nuxt',
+            icon: NuxtFrameworkIcon,
+            smallIcon: IconNuxt,
+            portNumber: 3000,
+            runCommand: 'npm run dev',
+            updateConfigCode: updateConfigCode('NUXT_')
+        },
+        {
+            key: 'nextjs',
+            label: 'Next.js',
+            icon: NextjsFrameworkIcon,
+            smallIcon: NextjsFrameworkIcon,
+            portNumber: 3000,
+            runCommand: 'npm run dev',
+            updateConfigCode: updateConfigCode('NEXT_PUBLIC_')
+        },
+        {
+            key: 'vue',
+            label: 'Vue',
+            icon: VueFrameworkIcon,
+            smallIcon: IconVue,
+            portNumber: 5173,
+            runCommand: 'npm run dev',
+            updateConfigCode: updateConfigCode('VITE_')
+        },
+        {
+            key: 'angular',
+            label: 'Angular',
+            icon: AngularFrameworkIcon,
+            smallIcon: IconAngular,
+            portNumber: 4200,
+            runCommand: 'npm run start',
+            updateConfigCode: `appwriteEndpoint: '${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}',\nappwriteProjectId:'${projectId}'`
+        },
+        {
+            key: 'js',
+            label: 'Javascript',
+            icon: JavascriptFrameworkIcon,
+            smallIcon: IconJs,
+            portNumber: 5173,
+            runCommand: 'npm run dev',
+            updateConfigCode: updateConfigCode('VITE_')
+        }
+    ];
+
+    $: selectedFramework = frameworks.find((framework) => framework.key === selectedFrameworkKey);
+    $: selectedFrameworkIcon = selectedFramework ? selectedFramework.icon : NoFrameworkIcon;
+
+    async function createWebPlatform() {
+        hostnameError = hostname !== '' ? !new RegExp(hostnameRegex).test(hostname) : null;
+
+        if (hostnameError) {
+            return;
+        }
+
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                PlatformType.Web,
+                `${selectedFramework.label} app`,
+                selectedFrameworkKey,
+                undefined,
+                hostname === '' ? undefined : hostname
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
+    }
+
+    async function resetPlatformStore() {
+        createPlatform.reset();
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+            resetPlatformStore();
+        };
     });
 </script>
 
-<Wizard
-    title="Add a web platform"
-    steps={stepsComponents}
-    manualExitControl
-    on:finish={onPlatformSetupFinish}
-    on:exit={onPlatformSetupFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add web platform" bind:showExitModal>
+    <Form onSubmit={createWebPlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            {#if !isPlatformCreated || isChangingFramework}
+                <Fieldset legend="Type">
+                    <Layout.Stack>
+                        <div class="frameworks">
+                            {#each frameworks as framework}
+                                <Card.Selector
+                                    bind:group={selectedFrameworkKey}
+                                    name="framework"
+                                    id={framework.key}
+                                    value={framework.key}
+                                    title={framework.label}
+                                    icon={framework.icon}
+                                    imageRadius="s" />
+                            {/each}
+                        </div>
+                        <Layout.Stack direction="row" justifyContent="flex-end">
+                            {#if isChangingFramework}
+                                <Button.Button
+                                    disabled={!selectedFramework}
+                                    on:click={() => (isChangingFramework = false)}>
+                                    Save</Button.Button>
+                            {/if}
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Fieldset>
+                {#if !isChangingFramework}
+                    <Fieldset legend="Details">
+                        <InputText
+                            id="hostname"
+                            label="Hostname"
+                            placeholder="localhost"
+                            error={hostnameError && 'Please enter a valid hostname'}
+                            bind:value={hostname}>
+                            <Tooltip slot="info">
+                                <Icon icon={IconInfo} size="s" />
+                                <span slot="tooltip">
+                                    The hostname that your website will use to interact with the
+                                    Appwrite APIs in production or development environments. No
+                                    protocol or port number required.
+                                </span>
+                            </Tooltip>
+                        </InputText></Fieldset>
+                    <Layout.Stack direction="row" justifyContent="flex-end"
+                        ><Button.Button type="submit" disabled={!selectedFramework}
+                            >Create platform</Button.Button
+                        ></Layout.Stack>
+                {/if}
+            {:else}
+                <Card.Base padding="s"
+                    ><Layout.Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center">
+                        <Layout.Stack gap="xxs" direction="row">
+                            <Icon icon={selectedFramework.smallIcon} />
+                            <Typography.Text variant="m-500"
+                                >{selectedFramework.label}</Typography.Text>
+                        </Layout.Stack>
+                        <Button.Button
+                            variant="secondary"
+                            size="s"
+                            on:click={() => {
+                                isChangingFramework = true;
+                            }}>Change</Button.Button>
+                    </Layout.Stack></Card.Base>
+            {/if}
 
-<Skipped />
+            <!-- Step Three -->
+            {#if isPlatformCreated && !isChangingFramework}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal or VSCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code
+                                lang="bash"
+                                lineNumbers
+                                code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for-${selectedFramework.key}`} />
+                        </div>
+
+                        {#if selectedFramework.key === 'angular'}
+                            <Typography.Text variant="m-500"
+                                >2. Change <InlineCode
+                                    size="s"
+                                    code="src/environments/environment.ts" />
+                                to reflect the values below:</Typography.Text>
+                        {:else}
+                            <Typography.Text variant="m-500"
+                                >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
+                                    size="s"
+                                    code=".env" /> and update the values.</Typography.Text>
+                        {/if}
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code
+                                lang="bash"
+                                lineNumbers
+                                code={selectedFramework.updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Install project dependencies</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={'npm install'} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >4. Run the app, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={selectedFramework.runCommand} />
+                        </div>
+                    </Layout.Stack>
+                </Fieldset>
+                <Card.Base padding="s"
+                    ><Layout.Stack direction="row" justifyContent="space-between"
+                        ><Layout.Stack direction="row" alignItems="center">
+                            <Icon
+                                icon={IconInfo}
+                                color="--fgcolor-neutral-tertiary" /><Typography.Text
+                                variant="m-500"
+                                color="--fgcolor-neutral-primary">
+                                Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
+                            ></Layout.Stack>
+                        <Button.Anchor
+                            variant="secondary"
+                            href={`http://localhost:${selectedFramework.portNumber}`}
+                            target="_blank"
+                            ><Layout.Stack direction="row" gap="xs"
+                                >Open <Icon
+                                    icon={IconExternalLink}
+                                    color="--fgcolor-neutral-tertiary" /></Layout.Stack
+                            ></Button.Anchor
+                        ></Layout.Stack
+                    ></Card.Base>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card.Base>
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard iconSize={2.526} icon={selectedFrameworkIcon} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                {#if isPlatformCreated}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="center"
+                        alignItems="center"
+                        gap="l">
+                        {#if !connectionSuccessful}
+                            <Typography.Text variant="m-400"
+                                >Waiting for connection...</Typography.Text>
+                        {:else}
+                            <!-- cannot apply fade on components -->
+                            <div
+                                in:fade={{ duration: 2500 }}
+                                class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                                <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                                <Typography.Text variant="m-400"
+                                    >You connected your app successfully.</Typography.Text>
+                            </div>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Card.Base>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        {#if isPlatformCreated}
+            <Button.Anchor
+                href={location.pathname}
+                variant="secondary"
+                disabled={isCreatingPlatform}>Go to dashboard</Button.Anchor>
+        {/if}
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+
+    .frameworks {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--gap-l, 16px);
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step1.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step1.svelte
deleted file mode 100644
index bdd6b79a1..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step1.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-
-    const projectId = $page.params.project;
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.updatePlatform(
-                projectId,
-                $createPlatform.$id,
-                $createPlatform.name,
-                $createPlatform.key || undefined,
-                $createPlatform.store || undefined,
-                $createPlatform.hostname || undefined
-            );
-
-            return;
-        }
-
-        const platform = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            PlatformType.Android,
-            $createPlatform.name,
-            $createPlatform.key || undefined,
-            undefined,
-            undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: 'android'
-        });
-
-        $createPlatform.$id = platform.$id;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Android registration</svelte:fragment>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="My Android App"
-            required
-            bind:value={$createPlatform.name} />
-        <InputText
-            id="key"
-            label="Package Name"
-            placeholder="com.company.appname"
-            tooltip="Your package name is generally the applicationId in your app-level build.gradle file."
-            required
-            bind:value={$createPlatform.key} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step2.svelte
deleted file mode 100644
index a2c5dd1fb..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step2.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { versions } from '../store';
-
-    const example1 = `repositories {
-    mavenCentral()
-}`;
-    const example2 = `implementation("io.appwrite:sdk-for-android:${$versions['client-android']}")`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-    <p>First, add this to your root level <code class="inline-code">build.gradle</code> file.</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
-    <p class="common-section">And add this to your project's build.gradle file.</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step3.svelte
deleted file mode 100644
index ccb1a9315..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step3.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { WizardStep } from '$lib/layout';
-    import { Code } from '$lib/components';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-    const code = `import io.appwrite.Client
-import io.appwrite.services.Account
-
-val client = Client(context)
-    .setEndpoint("${getProjectEndpoint()}")
-    .setProject("${project}")
-    .setSelfSigned(status: true) // For self signed certificates, only use for development
-`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-    <p>Initialize your SDK by pointing the client to your Appwrite project.</p>
-    <div class="u-margin-block-start-16">
-        <Code
-            label="Android SDK"
-            labelIcon="android"
-            language="kotlin"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step1.svelte
deleted file mode 100644
index b8ed50003..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step1.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormItem, FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-    import { invalidateDependencies } from '../skipped.svelte';
-
-    let platform: PlatformType = PlatformType.Appleios;
-
-    const projectId = $page.params.project;
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id);
-        }
-
-        const response = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            platform,
-            $createPlatform.name,
-            $createPlatform.key,
-            undefined,
-            undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: platform
-        });
-
-        $createPlatform.$id = response.$id;
-        $createPlatform.type = platform;
-
-        await invalidateDependencies();
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Apple registration</svelte:fragment>
-
-    <FormList isCommonSection>
-        <FormItem>
-            <p>Choose an Apple platform</p>
-            <div class="u-flex u-gap-16 u-margin-block-start-8">
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Appleios)}
-                    selected={platform === PlatformType.Appleios}>
-                    iOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Applemacos)}
-                    selected={platform === PlatformType.Applemacos}>
-                    macOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Applewatchos)}
-                    selected={platform === PlatformType.Applewatchos}>
-                    watchOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Appletvos)}
-                    selected={platform === PlatformType.Appletvos}>
-                    tvOS
-                </Pill>
-            </div>
-        </FormItem>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="My Apple App"
-            required
-            bind:value={$createPlatform.name} />
-        <InputText
-            id="hostname"
-            label="Bundle ID"
-            placeholder="com.company.appname"
-            tooltip="You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-            required
-            bind:value={$createPlatform.key} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step2.svelte
deleted file mode 100644
index d77381e5b..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step2.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { WizardStep } from '$lib/layout';
-    import { versions } from '../store';
-
-    enum Method {
-        Xcode,
-        Swift
-    }
-
-    let method: Method = Method.Xcode;
-
-    const example1 = `dependencies: [
-    .package(
-        name: "Appwrite",
-        url: "https://github.com/appwrite/sdk-for-swift",
-        .exact("${$versions['client-apple']}")
-    )
-]')`;
-    const example2 = `targets: [
-    .target(
-        name: "[YOUR_TARGET]",
-        dependencies: [
-            "Appwrite"
-        ]
-    )
-]`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-    <div class="u-flex u-gap-16 u-margin-block-start-8">
-        <Pill button on:click={() => (method = Method.Xcode)} selected={method === Method.Xcode}>
-            Xcode
-        </Pill>
-        <Pill button on:click={() => (method = Method.Swift)} selected={method === Method.Swift}>
-            Swift Packages
-        </Pill>
-    </div>
-    <div class="common-section">
-        {#if method === Method.Xcode}
-            <ol class="numeric-list">
-                <li class="numeric-list-item">
-                    <span class="text">
-                        In the menu bar under Select File, select Add Packages
-                    </span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text">
-                        Search for the Appwrite SDK with the URL
-                        <a class="link" href="https://github.com/appwrite/sdk-for-apple">
-                            https://github.com/appwrite/sdk-for-apple
-                        </a>
-                    </span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text"
-                        >In the right panel, select your target project and add your desired version
-                        rules</span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text">
-                        Select Add Package and wait for package resolution to complete
-                    </span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text">
-                        Make sure the Appwrite package product is checked and select Add Package
-                        again
-                    </span>
-                </li>
-            </ol>
-        {:else if method === Method.Swift}
-            <p>Add this to your <code class="inline-code">Package.swift</code> file.</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
-            <p class="common-section">Then add the dependency to your target.</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
-        {/if}
-    </div>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step3.svelte
deleted file mode 100644
index e42e5538b..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step3.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { isCloud } from '$lib/system';
-    import { WizardStep } from '$lib/layout';
-    import { Alert, Code } from '$lib/components';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-    const code = `import Appwrite
-
-let client = Client()
-    .setEndpoint("${getProjectEndpoint()}")
-    .setProject("${project}")
-    .setSelfSigned(true) // For self signed certificates, only use for development
-`;
-
-    let showAlert = true;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <p>Initialize your SDK by pointing the client to your Appwrite project.</p>
-
-    <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
-    <p class="u-margin-block-start-24">
-        Before sending any API calls to your new Appwrite project, make sure your device or emulator
-        has network access to your Appwrite project's hostname or IP address.
-    </p>
-    {#if showAlert && !isCloud}
-        <div class="common-section">
-            <Alert type="info" dismissible on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
-                When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
-                you should use the private IP of the device running your Appwrite project as the hostname
-                of the endpoint instead of localhost. You can also use a service like ngrok to proxy
-                the Appwrite server.
-            </Alert>
-        </div>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step1.svelte
deleted file mode 100644
index bda3e569c..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step1.svelte
+++ /dev/null
@@ -1,202 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { extendedHostnameRegex } from '$lib/helpers/string';
-
-    // enum Platform {
-    //     Android = 'flutter-android',
-    //     Ios = 'flutter-ios',
-    //     Linux = 'flutter-linux',
-    //     Macos = 'flutter-macos',
-    //     Windows = 'flutter-windows',
-    //     Web = 'flutter-web'
-    // }
-
-    // function isPlatform(value: string): value is Platform {
-    //     return Object.values(Platform).includes(value as Platform);
-    // }
-
-    let platform: PlatformType = isValueOfStringEnum(PlatformType, $createPlatform.type)
-        ? $createPlatform.type
-        : PlatformType.Flutterandroid;
-
-    const projectId = $page.params.project;
-    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io'];
-    const placeholder: Partial<
-        Record<
-            PlatformType,
-            {
-                name: string;
-                hostname: string;
-                tooltip: string;
-            }
-        >
-    > = {
-        [PlatformType.Flutterandroid]: {
-            name: 'My Android App',
-            hostname: 'com.company.appname',
-            tooltip:
-                'Your package name is generally the applicationId in your app-level build.gradle file.'
-        },
-        [PlatformType.Flutterios]: {
-            name: 'My iOS App',
-            hostname: 'com.company.appname',
-            tooltip:
-                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-        },
-        [PlatformType.Flutterlinux]: {
-            name: 'My Linux App',
-            hostname: 'appname',
-            tooltip: 'Your application name'
-        },
-        [PlatformType.Fluttermacos]: {
-            name: 'My mac OS App',
-            hostname: 'com.company.appname',
-            tooltip:
-                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-        },
-        [PlatformType.Flutterweb]: {
-            name: 'My Web App',
-            hostname: 'localhost',
-            tooltip:
-                'The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required.'
-        },
-        [PlatformType.Flutterwindows]: {
-            name: 'My Windows App',
-            hostname: 'appname',
-            tooltip: 'Your application name'
-        }
-    };
-
-    const hostname: Partial<Record<PlatformType, string>> = {
-        [PlatformType.Flutterandroid]: 'Package Name',
-        [PlatformType.Flutterios]: 'Bundle ID',
-        [PlatformType.Flutterlinux]: 'Package Name',
-        [PlatformType.Fluttermacos]: 'Bundle ID',
-        [PlatformType.Flutterweb]: 'Hostname',
-        [PlatformType.Flutterwindows]: 'Package Name'
-    };
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id);
-        }
-
-        const response = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            platform,
-            $createPlatform.name,
-            platform !== PlatformType.Flutterweb ? $createPlatform.key : undefined,
-            undefined,
-            platform === PlatformType.Flutterweb ? $createPlatform.hostname : undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: platform
-        });
-
-        $createPlatform.$id = response.$id;
-        $createPlatform.type = platform;
-    }
-
-    $: registee = {
-        [PlatformType.Flutterandroid]: 'Package name',
-        [PlatformType.Flutterios]: 'Bundle ID',
-        [PlatformType.Flutterlinux]: 'Package name',
-        [PlatformType.Fluttermacos]: 'Bundle ID',
-        [PlatformType.Flutterwindows]: 'Package name',
-        [PlatformType.Flutterweb]: 'Hostname'
-    }[platform];
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">{registee} registration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterandroid)}
-                selected={platform === PlatformType.Flutterandroid}>
-                Android
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterios)}
-                selected={platform === PlatformType.Flutterios}>
-                iOS
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterlinux)}
-                selected={platform === PlatformType.Flutterlinux}>
-                Linux
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Fluttermacos)}
-                selected={platform === PlatformType.Fluttermacos}>
-                macOS
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterwindows)}
-                selected={platform === PlatformType.Flutterwindows}>
-                Windows
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterweb)}
-                selected={platform === PlatformType.Flutterweb}>
-                Web
-            </Pill>
-        </div>
-    </svelte:fragment>
-
-    <FormList isCommonSection>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder={placeholder[platform].name}
-            required
-            bind:value={$createPlatform.name} />
-        {#if platform === PlatformType.Flutterweb}
-            <div>
-                <InputText
-                    id="hostname"
-                    label={hostname[platform]}
-                    placeholder={placeholder[platform].hostname}
-                    tooltip={placeholder[platform].tooltip}
-                    required
-                    pattern={extendedHostnameRegex}
-                    patternError="Please enter a valid hostname"
-                    bind:value={$createPlatform.hostname} />
-
-                <div class="u-flex u-gap-16 u-margin-block-start-8">
-                    {#each suggestions as suggestion}
-                        <Pill
-                            button
-                            selected={$createPlatform.hostname === suggestion}
-                            on:click={() => ($createPlatform.hostname = suggestion)}>
-                            {suggestion}
-                        </Pill>
-                    {/each}
-                </div>
-            </div>
-        {:else}
-            <InputText
-                id="key"
-                label={hostname[platform]}
-                placeholder={placeholder[platform].hostname}
-                tooltip={placeholder[platform].tooltip}
-                required
-                bind:value={$createPlatform.key} />
-        {/if}
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step2.svelte
deleted file mode 100644
index 27d4667f3..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { versions } from '../store';
-
-    const example1 = `dependencies:
-  appwrite: ^${$versions['client-flutter']}`;
-    const example2 = `flutter pub add appwrite`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-
-    <p>
-        Add Appwrite SDK to your package's <code class="inline-code">pubspec.yaml</code> file. You can
-        view an example here.
-    </p>
-    <Code label="YAML" language="yml" code={example1} withCopy />
-    <p class="common-section">
-        You can also install the SDK using the Dart package manager from your terminal.
-    </p>
-    <div class="u-margin-block-start-16">
-        <Code label="Bash" language="sh" code={example2} withCopy noMargin />
-    </div>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step3.svelte
deleted file mode 100644
index e80da67a8..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step3.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { isCloud } from '$lib/system';
-    import { WizardStep } from '$lib/layout';
-    import { Alert, Code } from '$lib/components';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-    const code = `import 'package:appwrite/appwrite.dart';
-
-Client client = Client();
-client
-    .setEndpoint('${getProjectEndpoint()}')
-    .setProject('${project}')
-    .setSelfSigned(status: true); // For self signed certificates, only use for development;
-`;
-
-    let showAlert = true;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <p>Initialize your SDK by pointing the client to your Appwrite project.</p>
-
-    <div class="u-margin-block-start-16">
-        <Code
-            label="Flutter SDK"
-            labelIcon="flutter"
-            language="dart"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-    <p class="common-section">
-        Before sending any API calls to your new Appwrite project, make sure your device or emulator
-        has network access to your Appwrite project's hostname or IP address.
-    </p>
-    {#if showAlert && !isCloud}
-        <div class="common-section">
-            <Alert type="info" on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
-                When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
-                you should use the private IP of the device running your Appwrite project as the hostname
-                of the endpoint instead of localhost. You can also use a service like ngrok to proxy
-                the Appwrite server.
-            </Alert>
-        </div>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step1.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step1.svelte
deleted file mode 100644
index fd283249e..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step1.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { invalidateDependencies } from '../skipped.svelte';
-
-    let platform: PlatformType = isValueOfStringEnum(PlatformType, $createPlatform.type)
-        ? $createPlatform.type
-        : PlatformType.Reactnativeandroid;
-
-    const projectId = $page.params.project;
-    const placeholder: Partial<
-        Record<
-            PlatformType,
-            {
-                name: string;
-                hostname: string;
-                tooltip: string;
-            }
-        >
-    > = {
-        [PlatformType.Reactnativeandroid]: {
-            name: 'My Android App',
-            hostname: 'com.company.appname',
-            tooltip:
-                'Your package name is generally the applicationId in your app-level build.gradle file.'
-        },
-        [PlatformType.Reactnativeios]: {
-            name: 'My iOS App',
-            hostname: 'com.company.appname',
-            tooltip:
-                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-        }
-    };
-
-    const hostname: Partial<Record<PlatformType, string>> = {
-        [PlatformType.Reactnativeandroid]: 'Package Name',
-        [PlatformType.Reactnativeios]: 'Bundle ID'
-    };
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id);
-        }
-
-        const response = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            platform,
-            $createPlatform.name,
-            $createPlatform.key
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: platform
-        });
-
-        $createPlatform.$id = response.$id;
-        $createPlatform.type = platform;
-
-        await invalidateDependencies();
-    }
-
-    $: registee = {
-        [PlatformType.Reactnativeandroid]: 'Package name',
-        [PlatformType.Reactnativeios]: 'Bundle ID'
-    }[platform];
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">{registee} registration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Reactnativeandroid)}
-                selected={platform === PlatformType.Reactnativeandroid}>
-                Android
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Reactnativeios)}
-                selected={platform === PlatformType.Reactnativeios}>
-                iOS
-            </Pill>
-        </div>
-    </svelte:fragment>
-
-    <FormList isCommonSection>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder={placeholder[platform].name}
-            required
-            bind:value={$createPlatform.name} />
-        <InputText
-            id="key"
-            label={hostname[platform]}
-            placeholder={placeholder[platform].hostname}
-            tooltip={placeholder[platform].tooltip}
-            required
-            bind:value={$createPlatform.key} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step2.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step2.svelte
deleted file mode 100644
index 76b2bdb3c..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step2.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-
-    const example = `npx expo install react-native-appwrite react-native-url-polyfill`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-
-    <p>Install the Appwrite SDK for React Native and required dependencies.</p>
-    <Code label="Bash" language="sh" code={example} withCopy />
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step3.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step3.svelte
deleted file mode 100644
index 1f3af8ec6..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step3.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { isCloud } from '$lib/system';
-    import { WizardStep } from '$lib/layout';
-    import { createPlatform } from '../store';
-    import { Alert, Code } from '$lib/components';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-    const code = `import { Client, Account } from 'react-native-appwrite';
-
-const client = new Client()
-    .setEndpoint('${getProjectEndpoint()}')
-    .setProject('${project}')
-    .setPlatform('${$createPlatform.key}');
-`;
-
-    let showAlert = true;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <p>Initialize your SDK by pointing the client to your Appwrite project.</p>
-
-    <div class="u-margin-block-start-16">
-        <Code
-            label="React Native"
-            labelIcon="code"
-            language="js"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-    <p class="common-section">
-        Before sending any API calls to your new Appwrite project, make sure your device or emulator
-        has network access to your Appwrite project's hostname or IP address.
-    </p>
-    {#if showAlert && !isCloud}
-        <div class="common-section">
-            <Alert type="info" on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
-                When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
-                you should use the private IP of the device running your Appwrite project as the hostname
-                of the endpoint instead of localhost. You can also use a service like ngrok to proxy
-                the Appwrite server.
-            </Alert>
-        </div>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte
deleted file mode 100644
index cebaaff36..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script context="module" lang="ts">
-    import { createPlatform } from './store';
-    import { wizard } from '$lib/stores/wizard';
-    import { writable } from 'svelte/store';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-
-    const showSkippedModal = writable(false);
-
-    async function closeWizard() {
-        wizard.hide();
-        createPlatform.reset();
-    }
-
-    /**
-     * Previously, data was updated after the wizard was closed,
-     * this sometimes caused outdated data to be visible for a brief moment.
-     */
-    export async function invalidateDependencies(): Promise<void> {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-    }
-
-    export async function onPlatformSetupFinish(event: CustomEvent): Promise<void> {
-        const type = event.type;
-        const skipped = event.detail?.skipped ?? false;
-        const optional = event.detail?.optional ?? false;
-
-        const isSkipped = type === 'finish' ? skipped : type === 'exit' ? optional : false;
-
-        showSkippedModal.set(isSkipped);
-
-        if (!isSkipped) {
-            await closeWizard();
-        }
-    }
-</script>
-
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { CopyInput, Modal } from '$lib/components';
-    import { Button, FormList } from '$lib/elements/forms';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-</script>
-
-<Modal
-    closable={false}
-    closeByEscape={false}
-    headerDivider={false}
-    onSubmit={closeWizard}
-    bind:show={$showSkippedModal}
-    title="Skipping optional steps">
-    <FormList>
-        <p>
-            The platform will be added to your project. Access Appwrite services using this
-            project's API Endpoint and Project ID:
-        </p>
-
-        <CopyInput label="API Endpoint" showLabel={true} value={getProjectEndpoint()} />
-        <CopyInput label="Project ID" showLabel={true} value={project} />
-    </FormList>
-
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => ($showSkippedModal = false)}>Cancel</Button>
-        <Button submit>Go to dashboard</Button>
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/step4.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/step4.svelte
deleted file mode 100644
index b14c8c108..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/step4.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { WizardStep } from '$lib/layout';
-    import { CopyInput } from '$lib/components';
-    import { FormList } from '$lib/elements/forms';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">All set! Your project is ready to go</svelte:fragment>
-    <FormList gap={16}>
-        <p>
-            You've successfully added a platform to your project. Access Appwrite services using
-            this project's API Endpoint and Project ID:
-        </p>
-
-        <CopyInput label="API Endpoint" showLabel={true} value={getProjectEndpoint()} />
-        <CopyInput label="Project ID" showLabel={true} value={project} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step1.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step1.svelte
deleted file mode 100644
index 1d81e6ebb..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step1.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-    import { extendedHostnameRegex } from '$lib/helpers/string';
-
-    const projectId = $page.params.project;
-    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io'];
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.updatePlatform(
-                projectId,
-                $createPlatform.$id,
-                $createPlatform.name,
-                $createPlatform.key || undefined,
-                $createPlatform.store || undefined,
-                $createPlatform.hostname || undefined
-            );
-
-            return;
-        }
-
-        const platform = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            PlatformType.Web,
-            $createPlatform.name,
-            undefined,
-            undefined,
-            $createPlatform.hostname || undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: 'web'
-        });
-
-        $createPlatform.$id = platform.$id;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Hostname registration</svelte:fragment>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="My Web App"
-            required
-            bind:value={$createPlatform.name} />
-        <div>
-            <InputText
-                id="hostname"
-                label="Hostname"
-                placeholder="localhost"
-                tooltip="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
-                required
-                pattern={extendedHostnameRegex}
-                patternError="Please enter a valid hostname"
-                bind:value={$createPlatform.hostname} />
-
-            <div class="u-flex u-gap-16 u-margin-block-start-8">
-                {#each suggestions as suggestion}
-                    <Pill
-                        button
-                        selected={$createPlatform.hostname === suggestion}
-                        on:click={() => ($createPlatform.hostname = suggestion)}>
-                        {suggestion}
-                    </Pill>
-                {/each}
-            </div>
-        </div>
-        <Alert type="warning">
-            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-[region]-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step2.svelte
deleted file mode 100644
index 9c21ccc48..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step2.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { versions } from '../store';
-
-    import { Code } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { WizardStep } from '$lib/layout';
-
-    enum Method {
-        NPM,
-        CDN
-    }
-
-    let method: Method = Method.NPM;
-
-    const example1 = `import { Client } from 'appwrite';`;
-    const example2 =
-        `<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script` +
-        `>\n` +
-        `<script>
-    const { Client } = Appwrite;
-</script` +
-        `>`; // Prevent svelte from processing the closing script tag
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose your preferred method of installation
-        <div class="u-flex u-gap-16 u-margin-block-start-8">
-            <Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
-                NPM
-            </Pill>
-            <Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
-                CDN
-            </Pill>
-        </div>
-    </svelte:fragment>
-    {#if method === Method.NPM}
-        <p>
-            Use <a
-                href="https://npmjs.com/package/appwrite"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">NPM (node package manager)</a> from your command line to add Appwrite SDK
-            to your project.
-        </p>
-        <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
-        <p class="common-section">
-            If you're using a bundler like <a
-                href="https://vitejs.dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Vite</a>
-            or
-            <a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
-                >Rollup</a
-            >, import Appwrite as a module.
-        </p>
-        <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
-    {:else if method === Method.CDN}
-        <p>Add the following script tags to install Appwrite with a CDN.</p>
-        <Code label="HTML" language="html" code={example2} withCopy />
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step3.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step3.svelte
deleted file mode 100644
index f3a381cac..000000000
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step3.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { getProjectEndpoint } from '$lib/helpers/project';
-
-    const project = $page.params.project;
-
-    const code = `const client = new Client();
-client
-    .setEndpoint('${getProjectEndpoint()}')
-    .setProject('${project}');`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
-
-    <p>Initialize your SDK by pointing the client to your Appwrite project.</p>
-
-    <div class="u-margin-block-start-16">
-        <Code
-            label="Web SDK"
-            labelIcon="code"
-            language="js"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/realtime.svelte b/src/routes/(console)/project-[region]-[project]/overview/realtime.svelte
index 852065d0b..49e8ae721 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/realtime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/realtime.svelte
@@ -1,45 +1,43 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { BarChart } from '$lib/charts';
     import { Card } from '$lib/components';
     import { formatNum } from '$lib/helpers/string';
+    import { Icon, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
     import { stats } from '../store';
+    import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
 
-    $: projectId = $page.params.project;
+    $: 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">
-    {formatNum(current)}
-</div>
-<div>Realtime Connections</div>
-{#if total}
-    <div style="height: 18em">
-        <BarChart
-            series={[
-                {
-                    name: 'Realtime connection',
-                    data: $stats.get(projectId)
-                }
-            ]} />
+<Layout.Stack gap="l">
+    <div class="heading-level-4">
+        {formatNum(current)}
     </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/apis/realtime"
-                target="_blank"
-                rel="noopener noreferrer">Get started with Realtime</a>
+    <div>Realtime Connections</div>
+    {#if total}
+        <div style="height: 18em">
+            <BarChart
+                series={[
+                    {
+                        name: 'Realtime connection',
+                        data: $stats.get(projectId)
+                    }
+                ]} />
         </div>
-    </Card>
-{/if}
+    {:else}
+        <Card isDashed>
+            <Layout.Stack gap="xs" alignItems="center" justifyContent="center" height="10rem">
+                <Icon icon={IconChartSquareBar} size="l" />
+                <Typography.Text variant="m-600">No data to show</Typography.Text>
+                <Link.Anchor
+                    href="https://appwrite.io/docs/apis/realtime"
+                    target="_blank"
+                    rel="noopener noreferrer">Get started with Realtime</Link.Anchor>
+            </Layout.Stack>
+        </Card>
+    {/if}
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/requests.svelte b/src/routes/(console)/project-[region]-[project]/overview/requests.svelte
index 7fe57efda..c4d5aa9fd 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/requests.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/requests.svelte
@@ -1,72 +1,82 @@
 <script lang="ts">
-    import { Card, DropList, DropListItem } from '$lib/components';
+    import { Card } from '$lib/components';
     import { totalMetrics } from './+layout.svelte';
     import { usage } from './store';
     import type { UsagePeriods } from '$lib/layout';
     import { createEventDispatcher } from 'svelte';
     import { LineChart } from '$lib/charts';
     import { formatNum } from '$lib/helpers/string';
+    import {
+        ActionMenu,
+        Icon,
+        Layout,
+        Button,
+        Popover,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconChartSquareBar,
+        IconChevronDown,
+        IconChevronUp
+    } from '@appwrite.io/pink-icons-svelte';
 
     export let period: UsagePeriods;
 
-    let showPeriod = false;
-
     const dispatch = createEventDispatcher();
 
     $: requests = $usage?.requests as unknown as Array<{
         date: number;
         value: number;
     }>;
-
-    $: if (period) {
-        showPeriod = false;
-    }
 </script>
 
-<div class="u-flex u-gap-16 u-main-space-between">
-    <div>
-        <div class="heading-level-4">
-            {formatNum(totalMetrics($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 totalMetrics($usage?.requests) !== 0}
-    <div style="height: 12rem;">
-        <LineChart
-            options={{
-                yAxis: {
-                    axisLabel: {
-                        formatter: formatNum
+<Layout.Stack gap="l">
+    <Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
+        <Layout.Stack gap="xxs">
+            <Typography.Title>
+                {formatNum(totalMetrics($usage?.requests))}
+            </Typography.Title>
+            <Typography.Text>Requests</Typography.Text>
+        </Layout.Stack>
+        <Popover let:toggle padding="none" let:showing>
+            <Button.Button on:click={toggle} variant="extra-compact">
+                {period}
+                <Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
+            </Button.Button>
+            <ActionMenu.Root slot="tooltip">
+                <ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
+                    >24h</ActionMenu.Item.Button>
+                <ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
+                    >30d</ActionMenu.Item.Button>
+                <ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
+                    >90d</ActionMenu.Item.Button>
+            </ActionMenu.Root>
+        </Popover>
+    </Layout.Stack>
+
+    {#if totalMetrics($usage?.requests) !== 0}
+        <div style="height: 12rem;">
+            <LineChart
+                options={{
+                    yAxis: {
+                        axisLabel: {
+                            formatter: formatNum
+                        }
                     }
-                }
-            }}
-            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>
+                }}
+                series={[
+                    {
+                        name: 'Requests',
+                        data: [...requests.map((e) => [e.date, e.value])]
+                    }
+                ]} />
         </div>
-    </Card>
-{/if}
+    {:else}
+        <Card isDashed>
+            <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                <Icon icon={IconChartSquareBar} size="l" />
+                <Typography.Text variant="m-600">No data to show</Typography.Text>
+            </Layout.Stack>
+        </Card>
+    {/if}
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/store.ts b/src/routes/(console)/project-[region]-[project]/overview/store.ts
index bd869930a..aa98e893b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/store.ts
@@ -1,8 +1,9 @@
 import { sdk } from '$lib/stores/sdk';
 import { cachedStore } from '$lib/helpers/cache';
-import { get, writable, type Writable } from 'svelte/store';
+import { get, readable, writable, type Writable } from 'svelte/store';
 import type { Models, ProjectUsageRange } from '@appwrite.io/console';
-import { page } from '$app/stores';
+import { page } from '$app/state';
+import type { Column } from '$lib/helpers/types';
 
 export const usage = cachedStore<
     Models.UsageProject,
@@ -12,13 +13,25 @@ export const usage = cachedStore<
 >('projectUsage', function ({ set }) {
     return {
         load: async (start, end, period) => {
-            const $page = get(page);
             const usages = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .project.getUsage(start, end, period);
             set(usages);
         }
     };
 });
 
-export const selectedTab: Writable<'platforms' | 'keys'> = writable('platforms');
+export const selectedTab: Writable<'platforms' | 'keys' | 'dev-keys'> = writable('platforms');
+
+export const showDevKeysCreateModal: Writable<boolean> = writable(false);
+
+export const devKeyColumns = readable<Column[]>([
+    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: 'last_accessed', title: 'Last accessed', type: 'datetime', width: { min: 120 } },
+    { id: 'expiration', title: 'Expiration date', type: 'datetime', width: { min: 120 } }
+]);
+
+export const keyColumns = readable<Column[]>([
+    ...get(devKeyColumns),
+    { id: 'scopes', title: 'Scopes', type: 'string', width: { min: 120 } }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/promoteVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/promoteVariableModal.svelte
index 8216fed3a..fdb26c011 100644
--- a/src/routes/(console)/project-[region]-[project]/promoteVariableModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/promoteVariableModal.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import Modal from '$lib/components/modal.svelte';
+    import { Confirm } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import type { Models } from '@appwrite.io/console';
+    import { InlineCode } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
     export let showPromote = false;
@@ -11,29 +12,26 @@
     const dispatch = createEventDispatcher();
 </script>
 
-<Modal
-    bind:show={showPromote}
+<Confirm
+    title={isConflicting ? 'Overwrite global variable' : 'Promote variable'}
+    bind:open={showPromote}
     onSubmit={() => {
         dispatch('promoted');
-    }}
-    headerDivider={false}>
-    <svelte:fragment slot="title">
-        {isConflicting ? 'Overwrite global variable' : 'Promote variable'}
-    </svelte:fragment>
+    }}>
+    <svelte:fragment slot="title"></svelte:fragment>
     {#if isConflicting}
         <p data-private>
             Promoting this variable will overwrite your global variable with the same name. Are you
-            sure you want to promote <span class="inline-code">{selectedVar.key}</span>?
+            sure you want to promote <InlineCode code={selectedVar.key} />?
         </p>
     {:else}
         <p data-private>
-            Are you sure you want to promote <span class="inline-code">{selectedVar.key}</span>?
-            This will convert it to a global variable that can be accessed by other functions in
-            your project.
+            Are you sure you want to promote <InlineCode code={selectedVar.key} />? This will
+            convert it to a global variable that can be accessed by other resources in your project.
         </p>
     {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showPromote = false)}>Cancel</Button>
         <Button submit>{isConflicting ? 'Promote anyway' : 'Promote'}</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/rawVariableEditor.svelte b/src/routes/(console)/project-[region]-[project]/rawVariableEditor.svelte
index 888bf3931..ae1a72f2a 100644
--- a/src/routes/(console)/project-[region]-[project]/rawVariableEditor.svelte
+++ b/src/routes/(console)/project-[region]-[project]/rawVariableEditor.svelte
@@ -1,47 +1,57 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { SecondaryTabs, SecondaryTabsItem } from '$lib/components';
     import Copy from '$lib/components/copy.svelte';
     import Modal from '$lib/components/modal.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
-    import { parse } from 'envfile';
+    import { parse } from '$lib/helpers/envfile';
+    import { Icon, InlineCode, Layout, Tabs } from '@appwrite.io/pink-svelte';
+    import { InputTextarea } from '$lib/elements/forms';
+    import { IconDownload, IconDuplicate } from '@appwrite.io/pink-icons-svelte';
 
     export let isGlobal: boolean;
     export let showEditor = false;
     export let variableList: Models.VariableList;
 
-    export let sdkCreateVariable: (key: string, value: string) => Promise<unknown>;
+    const editableVariables = variableList.variables.filter((variable) => !variable.secret);
+    const secretVariables = variableList.variables.filter((variable) => variable.secret);
+
+    export let sdkCreateVariable: (
+        key: string,
+        value: string,
+        secret?: boolean
+    ) => Promise<unknown>;
     export let sdkUpdateVariable: (
         variableId: string,
         key: string,
-        value: string
+        value: string,
+        secret?: boolean
     ) => Promise<unknown>;
     export let sdkDeleteVariable: (variableId: string) => Promise<unknown>;
 
     let error = '';
-    let envCode = variableList.variables
+    let envCode = editableVariables
         .map((variable) => `${variable.key}=${variable.value}`)
         .join('\n');
     let jsonCode = JSON.stringify(
         JSON.parse(
-            `{${variableList.variables
+            `{${editableVariables
                 .map((variable) => `"${variable.key}":"${variable.value.split('"').join('\\"')}"`)
                 .join(',')}}`
         ),
         null,
         2
     );
-    const baseEnvCode = envCode;
-    const baseJsonCode = jsonCode;
+    let baseEnvCode = envCode;
+    let baseJsonCode = jsonCode;
 
     if (jsonCode === '{}') {
         jsonCode = '';
+        baseJsonCode = '';
     }
 
     let tab: 'env' | 'json' = 'env';
-    let copyParent: HTMLElement;
 
     async function handleSubmit() {
         try {
@@ -56,24 +66,31 @@
             }
 
             await Promise.all(
-                variableList.variables.map(async (variable) => {
+                editableVariables.map(async (variable) => {
                     const newValue = vars[variable.key] ?? null;
 
                     if (newValue === null) {
                         await sdkDeleteVariable(variable.$id);
                     } else if (newValue !== variable.value) {
-                        await sdkUpdateVariable(variable.$id, variable.key, newValue);
+                        await sdkUpdateVariable(variable.$id, variable.key, newValue, false);
                     }
-
                     delete vars[variable.key];
                 })
             );
 
+            // Add new variables, skipping keys that exist in secret variables
             await Promise.all(
                 Object.keys(vars).map(async (key) => {
-                    await sdkCreateVariable(key, vars[key]);
+                    if (!secretVariables.some((v) => v.key === key)) {
+                        await sdkCreateVariable(key, vars[key], false);
+                    }
                 })
             );
+            // Ensure secret variables are preserved
+            variableList.variables = [
+                ...secretVariables,
+                ...variableList.variables.filter((v) => !v.secret)
+            ];
 
             showEditor = false;
 
@@ -114,98 +131,54 @@
         (tab === 'env' && baseEnvCode === envCode) || (tab === 'json' && baseJsonCode === jsonCode);
 </script>
 
-<Modal
-    title="Editor"
-    headerDivider={false}
-    bind:show={showEditor}
-    onSubmit={handleSubmit}
-    bind:error
-    size="big">
-    <p>
+<Modal title="Editor" bind:show={showEditor} onSubmit={handleSubmit} bind:error>
+    <p slot="description">
         Edit {isGlobal ? 'global' : 'environment'} variables below or download as a
-        <span class="inline-code">.{tab}</span> file.
+        <InlineCode size="s" code={`.${tab}`} /> file.
     </p>
-
-    <div class="editor-border">
-        <SecondaryTabs large class="u-sep-block-end u-padding-8">
-            <SecondaryTabsItem
-                stretch
-                fullWidth
-                center
-                on:click={() => (tab = 'env')}
-                disabled={tab === 'env'}>
+    <Layout.Stack gap="s">
+        <Tabs.Root stretch let:root>
+            <Tabs.Item.Button {root} on:click={() => (tab = 'env')} active={tab === 'env'}>
                 ENV
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                stretch
-                fullWidth
-                center
-                on:click={() => (tab = 'json')}
-                disabled={tab === 'json'}>
+            </Tabs.Item.Button>
+            <Tabs.Item.Button {root} on:click={() => (tab = 'json')} active={tab === 'json'}>
                 JSON
-            </SecondaryTabsItem>
-        </SecondaryTabs>
+            </Tabs.Item.Button>
+        </Tabs.Root>
 
-        <div class="input-text-wrapper">
+        <Layout.Stack gap="xs">
             {#if tab === 'env'}
-                <textarea
-                    placeholder={`SECRET_KEY=dQw4w9WgXcQ...`}
-                    class="input-text u-border-width-0"
+                <InputTextarea
+                    spellcheck={false}
+                    id="variables"
                     bind:value={envCode}
-                    style:--amount-of-buttons={0.25}
-                    style:border-radius="var(--border-radius-small)" />
+                    rows={10}
+                    placeholder={`SECRET_KEY=dQw4w9WgXcQ...`} />
             {:else if tab === 'json'}
-                <textarea
-                    placeholder={`{\n  "SECRET_KEY": "dQw4w9WgXcQ..."\n}`}
-                    class="input-text u-border-width-0"
+                <InputTextarea
+                    spellcheck={false}
+                    id="variables"
                     bind:value={jsonCode}
-                    style:--amount-of-buttons={0.25}
-                    style:border-radius="var(--border-radius-small)" />
+                    rows={10}
+                    placeholder={`{\n  "SECRET_KEY": "dQw4w9WgXcQ..."\n}`} />
             {/if}
-            <ul
-                class="buttons-list u-gap-8 u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12"
-                style="border-end-end-radius:0.0625rem;">
-                <li class="buttons-list-item">
-                    <div class="tooltip" aria-label={`Download .${tab} file`}>
-                        <button
-                            on:click={() => downloadVariables()}
-                            type="button"
-                            class="button is-small is-text is-only-icon"
-                            aria-label={`Download .${tab} file`}>
-                            <span class="icon-download" aria-hidden="true" />
-                        </button>
-                        <span class="tooltip-popup" role="tooltip">
-                            Download .{tab} file.
-                        </span>
-                    </div>
-                </li>
-                <li class="buttons-list-item">
-                    <div bind:this={copyParent}>
-                        {#key copyParent}
-                            <Copy appendTo={copyParent} value={tab == 'json' ? jsonCode : envCode}>
-                                <button
-                                    type="button"
-                                    class="button is-small is-text is-only-icon"
-                                    aria-label="Click to copy">
-                                    <span class="icon-duplicate" aria-hidden="true" />
-                                </button>
-                            </Copy>
-                        {/key}
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
+            <Layout.Stack direction="row" gap="xs">
+                <Button size="xs" on:click={() => downloadVariables()} secondary>
+                    <Icon size="s" slot="start" icon={IconDownload} />
+                    Download
+                </Button>
+                <Copy value={tab == 'json' ? jsonCode : envCode}>
+                    <Button size="xs" secondary>
+                        <Icon size="s" slot="start" icon={IconDuplicate} />
+                        Copy
+                    </Button>
+                </Copy>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showEditor = false)}>Cancel</Button>
         <Button submit disabled={isButtonDisabled}>Save</Button>
     </svelte:fragment>
 </Modal>
-
-<style lang="scss">
-    .editor-border {
-        border: solid 0.0625rem hsl(var(--color-border));
-        border-radius: var(--border-radius-small);
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/secretVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/secretVariableModal.svelte
new file mode 100644
index 000000000..a13333238
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/secretVariableModal.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { Dialog, Layout } from '@appwrite.io/pink-svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    export let show = false;
+
+    export let selectedVar: Partial<Models.Variable>;
+    let pair = {
+        $id: selectedVar?.$id,
+        key: selectedVar?.key,
+        value: selectedVar?.value,
+        secret: true
+    };
+    const dispatch = createEventDispatcher();
+    function markAsSecret() {
+        dispatch('updated', pair);
+
+        selectedVar = null;
+        show = false;
+    }
+
+    $: if (!show) {
+        selectedVar = null;
+    }
+</script>
+
+<Dialog title="Secret variable" bind:open={show}>
+    <Layout.Stack gap="l">
+        <p>
+            Secret variables are hidden from both the UI and API. Once a variable is marked as
+            secret, this action cannot be reversed.
+        </p>
+        <p>Are you sure you want to make this variable secret?</p>
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button on:click={markAsSecret}>Mark as secret</Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Dialog>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte b/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte
index da22182b3..fbe135724 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { canWriteProjects } from '$lib/stores/roles';
-    import { openWebhooksWizard } from './webhooks/+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
             label: 'Create webhook',
-            icon: 'plus',
-            keys: $page.url.pathname.includes('webhooks') ? ['c'] : ['c', 'w'],
+            icon: IconPlus,
+            keys: page.url.pathname.includes('webhooks') ? ['c'] : ['c', 'w'],
             callback: () => {
-                openWebhooksWizard();
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`
+                );
             },
             group: 'webhooks',
             disabled: !$canWriteProjects
diff --git a/src/routes/(console)/project-[region]-[project]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/+page.svelte
index 2b666647e..3a3228fbf 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/+page.svelte
@@ -2,7 +2,6 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
-    import { organizationList } from '$lib/stores/organization';
     import { project } from '../store';
     import { Container } from '$lib/layout';
     import { invalidate } from '$app/navigation';
@@ -10,19 +9,16 @@
     import UpdateName from './updateName.svelte';
     import UpdateServices from './updateServices.svelte';
     import UpdateInstallations from './updateInstallations.svelte';
-    import UpdateVariables from '../updateVariables.svelte';
     import DeleteProject from './deleteProject.svelte';
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, FormList, InputSelect } from '$lib/elements/forms';
     import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
     import { canWriteProjects } from '$lib/stores/roles';
-    import Transfer from './transferProject.svelte';
+    import ChangeOrganization from './changeOrganization.svelte';
+    import UpdateVariables from '../updateVariables.svelte';
+    import { page } from '$app/state';
 
     export let data;
 
     let teamId: string = null;
-    let showTransfer = false;
 
     onMount(() => {
         teamId ??= $project.teamId;
@@ -59,23 +55,28 @@
         }
     });
 
-    async function sdkCreateVariable(key: string, value: string) {
+    async function sdkCreateVariable(key: string, value: string, secret: boolean) {
         await sdk
-            .forProject($page.params.region, $page.params.project)
-            .projectApi.createVariable(key, value);
+            .forProject(page.params.region, page.params.project)
+            .projectApi.createVariable(key, value, secret);
         await invalidate(Dependencies.PROJECT_VARIABLES);
     }
 
-    async function sdkUpdateVariable(variableId: string, key: string, value: string) {
+    async function sdkUpdateVariable(
+        variableId: string,
+        key: string,
+        value: string,
+        secret: boolean
+    ) {
         await sdk
-            .forProject($page.params.region, $page.params.project)
-            .projectApi.updateVariable(variableId, key, value);
+            .forProject(page.params.region, page.params.project)
+            .projectApi.updateVariable(variableId, key, value, secret);
         await invalidate(Dependencies.PROJECT_VARIABLES);
     }
 
     async function sdkDeleteVariable(variableId: string) {
         await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .projectApi.deleteVariable(variableId);
         await invalidate(Dependencies.PROJECT_VARIABLES);
     }
@@ -92,39 +93,10 @@
                 {sdkUpdateVariable}
                 {sdkDeleteVariable}
                 isGlobal={true}
-                variableList={data.variables} />
-            <CardGrid>
-                <Heading tag="h6" size="7">Transfer project</Heading>
-                <p class="text">Transfer your project to another organization that you own.</p>
-
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputSelect
-                            id="organization"
-                            label="Available organizations"
-                            bind:value={teamId}
-                            options={$organizationList.teams.map((team) => ({
-                                value: team.$id,
-                                label: team.name
-                            }))} />
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button
-                        secondary
-                        disabled={teamId === $project.teamId}
-                        on:click={() => (showTransfer = true)}>Transfer</Button>
-                </svelte:fragment>
-            </CardGrid>
+                variableList={data.variables}
+                analyticsSource="project_settings" />
+            <ChangeOrganization />
             <DeleteProject />
         {/if}
     {/if}
 </Container>
-
-{#if teamId}
-    <Transfer
-        bind:teamId
-        teamName={$organizationList.teams.find((t) => t.$id === teamId).name}
-        bind:show={showTransfer} />
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/GitDisconnectModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/GitDisconnectModal.svelte
index 32e32a3ae..c3e288fcf 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/GitDisconnectModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/GitDisconnectModal.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import Modal from '$lib/components/modal.svelte';
     import { Dependencies } from '$lib/constants';
     import Button from '$lib/elements/forms/button.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@appwrite.io/console';
-    import { SvgIcon } from '$lib/components';
+    import { Avatar, Confirm } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { page } from '$app/stores';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconGlobeAlt, IconLightningBolt } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     export let showGitDisconnect: boolean;
     export let selectedInstallation: Models.Installation;
@@ -17,7 +18,7 @@
     async function handleSubmit() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .vcs.deleteInstallation(selectedInstallation.$id);
             await invalidate(Dependencies.PROJECT_INSTALLATIONS);
             addNotification({
@@ -40,52 +41,76 @@
 
     async function loadFunctions() {
         return await sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .functions.list([
                 Query.limit(100),
                 Query.equal('installationId', selectedInstallation.$id)
             ]);
     }
+
+    async function loadSites() {
+        return await sdk
+            .forProject(page.params.region, page.params.project)
+            .sites.list([
+                Query.limit(100),
+                Query.equal('installationId', selectedInstallation.$id)
+            ]);
+    }
 </script>
 
-<Modal
-    title="Disconnect installation"
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:show={showGitDisconnect}
-    onSubmit={handleSubmit}
-    size="big">
-    {#await loadFunctions()}
+<Confirm title="Disconnect installation" bind:open={showGitDisconnect} onSubmit={handleSubmit}>
+    {#await Promise.all([loadFunctions(), loadSites()])}
         <div class="u-flex u-main-center">
             <div class="avatar is-size-x-small">
-                <div class="loader u-margin-16" />
+                <div class="loader u-margin-16"></div>
             </div>
         </div>
-    {:then functions}
-        {#if functions.total}
+    {:then [functions, sites]}
+        {#if functions?.total || sites?.total}
             <p>
                 Are you sure you want to disconnect this git installation? This will affect future
-                deployments to the following functions:
+                deployments to the following sites and functions:
             </p>
-            <div class="u-flex u-flex-vertical u-gap-12">
-                {#each functions.functions as func}
-                    <div class="u-flex u-main-start u-gap-8">
-                        <div class="avatar is-size-x-small">
-                            <SvgIcon name={func.runtime.split('-')[0]} />
-                        </div>
-                        <div
-                            class="u-cross-child-center u-flex u-main-space-between u-flex-wrap u-gap-8 u-width-full-line">
-                            <h6>{func.name}</h6>
-                            <p
-                                class="u-x-small u-cross-child-center"
-                                style="color: hsl(var(--color-neutral-70));">
-                                Last deployed: {toLocaleDateTime(func.$updatedAt)}
-                            </p>
-                        </div>
-                    </div>
+            <Layout.Stack>
+                {#each sites.sites as site}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center">
+                        <Layout.Stack direction="row" gap="s" alignItems="center" inline>
+                            <Avatar size="xs" alt={site.name}>
+                                <Icon icon={IconGlobeAlt} size="s" />
+                            </Avatar>
+                            <Typography.Text color="--fgcolor-neutral-primary">
+                                {site.name}
+                            </Typography.Text>
+                        </Layout.Stack>
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
+                            Last deployed: {toLocaleDateTime(site.$updatedAt)}
+                        </Typography.Caption>
+                    </Layout.Stack>
                 {/each}
-            </div>
+                {#each functions.functions as func}
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center">
+                        <Layout.Stack direction="row" gap="s" alignItems="center" inline>
+                            {#if func?.runtime}
+                                <Avatar size="xs" alt={func.name}>
+                                    <Icon icon={IconLightningBolt} size="s" />
+                                </Avatar>
+                                <Typography.Text color="--fgcolor-neutral-primary">
+                                    {func.name}
+                                </Typography.Text>
+                            {/if}
+                        </Layout.Stack>
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
+                            Last deployed: {toLocaleDateTime(func.$updatedAt)}
+                        </Typography.Caption>
+                    </Layout.Stack>
+                {/each}
+            </Layout.Stack>
         {:else}
             <p>Are you sure you want to disconnect this git installation?</p>
         {/if}
@@ -95,4 +120,4 @@
         <Button text on:click={() => (showGitDisconnect = false)}>Cancel</Button>
         <Button secondary submit={true}>Disconnect</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/GitInstallationModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/GitInstallationModal.svelte
deleted file mode 100644
index a86d68ce1..000000000
--- a/src/routes/(console)/project-[region]-[project]/settings/GitInstallationModal.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import Modal from '$lib/components/modal.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
-
-    export let showGitInstall: boolean;
-
-    function connectGitHub() {
-        const redirect = new URL($page.url);
-        redirect.searchParams.append('alert', 'installation-created');
-        const target = new URL(
-            `${sdk.forProject($page.params.region, $page.params.project).client.config.endpoint}/vcs/github/authorize`
-        );
-        target.searchParams.set('project', $page.params.project);
-        target.searchParams.set('success', redirect.toString());
-        target.searchParams.set('failure', redirect.toString());
-        target.searchParams.set('mode', 'admin');
-        return target;
-    }
-</script>
-
-<Modal title="Install" headerDivider={false} bind:show={showGitInstall} size="big">
-    <p>Select a provider to import an existing git repository.</p>
-
-    <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
-        <Button href={connectGitHub().toString()} fullWidth secondary>
-            <span class="icon-github" aria-hidden="true" />
-            <span class="text">GitHub</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-gitlab" aria-hidden="true" />
-            <span class="text">GitLab (coming soon)</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-bitBucket" aria-hidden="true" />
-            <span class="text">BitBucket (coming soon)</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-azure" aria-hidden="true" />
-            <span class="text">Azure (coming soon)</span>
-        </Button>
-    </div>
-
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showGitInstall = false)}>Cancel</Button>
-    </svelte:fragment>
-</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
index cef3df714..43332805b 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -11,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/settings`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings`,
             title: 'Settings'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/settings/changeOrganization.svelte b/src/routes/(console)/project-[region]-[project]/settings/changeOrganization.svelte
new file mode 100644
index 000000000..848b718db
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/changeOrganization.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, InputSelect } from '$lib/elements/forms';
+    import { organizationList } from '$lib/stores/organization';
+    import { project } from '../store';
+    import TransferProjectModal from './transferProjectModal.svelte';
+
+    let teamId: string;
+    let showTransfer = false;
+</script>
+
+<CardGrid>
+    <svelte:fragment slot="title">Change organization</svelte:fragment>
+    Select an organization you own to move this project.
+    <svelte:fragment slot="aside">
+        <InputSelect
+            required
+            id="organization"
+            placeholder="Select destination"
+            label="Move to"
+            bind:value={teamId}
+            options={$organizationList.teams
+                .filter((team) => team.$id !== $project.teamId)
+                .map((team) => ({
+                    value: team.$id,
+                    label: team.name
+                }))} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button
+            secondary
+            disabled={teamId === $project.teamId}
+            on:click={() => (showTransfer = true)}>Move</Button>
+    </svelte:fragment>
+</CardGrid>
+
+{#if teamId}
+    <TransferProjectModal
+        bind:teamId
+        teamName={$organizationList.teams.find((t) => t.$id == teamId).name}
+        bind:show={showTransfer} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/deleteProject.svelte b/src/routes/(console)/project-[region]-[project]/settings/deleteProject.svelte
index 052e284d7..8d6d13661 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/deleteProject.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/deleteProject.svelte
@@ -2,16 +2,18 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { BoxAvatar, CardGrid, Heading, Modal } from '$lib/components';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { BoxAvatar, CardGrid } from '$lib/components';
+    import { Button, InputText } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { isCloud } from '$lib/system';
+    import Confirm from '$lib/components/confirm.svelte';
     import { project, projectRegion } from '../store';
 
     let showDelete = false;
     let name: string = null;
+    let error: string;
 
     const handleDelete = async () => {
         try {
@@ -23,24 +25,17 @@
             });
             trackEvent(Submit.ProjectDelete);
             await goto(base);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.ProjectDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.ProjectDelete);
         }
     };
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete project</Heading>
-    </div>
-    <p>
-        The project will be permanently deleted, including all the metadata, resources and stats
-        within it. This action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete project</svelte:fragment>
+    The project will be permanently deleted, including all the metadata, resources and stats within it.
+    This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
@@ -58,29 +53,21 @@
     </svelte:fragment>
 </CardGrid>
 
-<Modal
-    title="Delete project"
-    bind:show={showDelete}
+<Confirm
+    disabled={name !== $project.name}
     onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+    title="Delete project"
+    bind:open={showDelete}
+    bind:error>
     <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="project-name"
-            autofocus
-            required
-            bind:value={name} />
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button disabled={!name || name !== $project.name} secondary submit>Delete</Button>
-    </svelte:fragment>
-</Modal>
+    <InputText
+        label={`Enter "${$project.name}" to continue`}
+        placeholder="Enter name"
+        id="project-name"
+        autofocus
+        required
+        bind:value={name} />
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/disableAllServices.svelte b/src/routes/(console)/project-[region]-[project]/settings/disableAllServices.svelte
index 4c81f671e..56e4e6d24 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/disableAllServices.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/disableAllServices.svelte
@@ -6,12 +6,7 @@
     export let handleDisableAll;
 </script>
 
-<Modal
-    title="Disable all services"
-    icon="exclamation"
-    state="warning"
-    bind:show
-    onSubmit={handleDisableAll}>
+<Modal title="Disable all services" bind:show onSubmit={handleDisableAll}>
     <p class="text" data-private>
         Are you sure you want to disable all services? This will disable API requests to this
         project for all Client SDKs.
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte
index f281c55b5..927045162 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte
@@ -1,15 +1,77 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
-    import type { PageData } from './$types';
-    import { ProxyRulesPage } from '$lib/pages/domains';
-    import { Dependencies } from '$lib/constants';
-    import { ResourceType } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js';
+    import { Button } from '$lib/elements/forms';
+    import Container from '$lib/layout/container.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Empty, Icon } from '@appwrite.io/pink-svelte';
+    import { app } from '$lib/stores/app';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import Table from './table.svelte';
+    import { ResponsiveContainerHeader } from '$lib/layout';
 
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <Container>
-    <ProxyRulesPage rules={data.rules} type={ResourceType.Api} dependency={Dependencies.DOMAINS}>
-        <svelte:fragment slot="heading">Custom Domains</svelte:fragment>
-    </ProxyRulesPage>
+    <ResponsiveContainerHeader
+        hasSearch
+        hideView
+        searchPlaceholder="Search by domain"
+        analyticsSource="settings_domain_overview">
+        <Button
+            href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/add-domain`}
+            on:click={() => {
+                trackEvent(Click.DomainCreateClick, {
+                    source: 'settings_domain_overview'
+                });
+            }}>
+            <Icon icon={IconPlus} size="s" />
+            Add domain
+        </Button>
+    </ResponsiveContainerHeader>
+    {#if data.rules.total}
+        <Table domains={data.rules} />
+
+        <PaginationWithLimit
+            name="Domains"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.rules.total} />
+    {:else if data?.search}
+        <EmptySearch hidePages bind:search={data.search} target="domains" hidePagination>
+            <Button
+                secondary
+                on:click={() => {
+                    data.search = '';
+                }}>Clear search</Button>
+        </EmptySearch>
+    {:else}
+        <Card.Base padding="none">
+            <Empty
+                src={$app.themeInUse === 'dark'
+                    ? `${base}/images/domains/empty-domain-dark.svg`
+                    : `${base}/images/domains/empty-domain-light.svg`}
+                title="Use a custom domain for your API"
+                description="Connect your own domain to Appwrite, so your API is accessible from a custom URL instead of the default Appwrite endpoint.">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        href="#/"
+                        text
+                        event="empty_documentation"
+                        size="s"
+                        ariaLabel="add domain">Documentation</Button>
+
+                    <Button
+                        secondary
+                        href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/add-domain`}
+                        size="s">
+                        Add domain
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
+    {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/domains/+page.ts
index faf8c9675..4ca5a72c5 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/domains/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/+page.ts
@@ -1,15 +1,38 @@
-import { Dependencies } from '$lib/constants';
-import { sdk } from '$lib/stores/sdk';
-import { Query, ResourceType } from '@appwrite.io/console';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { RuleTrigger, sdk } from '$lib/stores/sdk';
+import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
+import { getSearch } from '$lib/helpers/load';
+import { RuleType } from '$lib/stores/sdk';
+import { queries } from '$lib/components/filters';
+import { queryParamToMap } from '$lib/components/filters';
+import { getQuery } from '$lib/helpers/load';
+import { pageToOffset } from '$lib/helpers/load';
+import { getLimit } from '$lib/helpers/load';
+import { getPage } from '$lib/helpers/load';
 
-export const load: PageLoad = async ({ depends, url, params }) => {
+export const load: PageLoad = async ({ depends, url, route, params }) => {
     depends(Dependencies.DOMAINS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+    const search = getSearch(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
 
     return {
         rules: await sdk
             .forProject(params.region, params.project)
-            .proxy.listRules([Query.equal('resourceType', ResourceType.Api)]),
-        create: url.searchParams.get('create') !== null
+            .proxy.listRules(
+                [Query.equal('type', RuleType.API), Query.equal('trigger', RuleTrigger.MANUAL)],
+                search || undefined
+            ),
+        offset,
+        limit,
+        query,
+        search,
+        create: url.searchParams.get('create') !== null //TODO: port logic to new wizards
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
new file mode 100644
index 000000000..dbaeb6244
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Button, Form, InputDomain } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { writable } from 'svelte/store';
+    import { onMount } from 'svelte';
+
+    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/settings/domains`;
+
+    // let { data } = $props();
+
+    let formComponent: Form;
+    let isSubmitting = $state(writable(false));
+    let domainName = $state('');
+
+    onMount(() => {
+        if (page.url.searchParams.has('domain')) {
+            domainName = page.url.searchParams.get('domain');
+        }
+    });
+
+    async function addDomain() {
+        try {
+            const rule = await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.createAPIRule(domainName);
+            if (rule?.status === 'verified') {
+                await goto(routeBase);
+                await invalidate(Dependencies.DOMAINS);
+            } else {
+                await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
+                await invalidate(Dependencies.DOMAINS);
+            }
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<Wizard title="Add domain" href={routeBase} column columnSize="s" confirmExit>
+    <Form bind:this={formComponent} onSubmit={addDomain} bind:isSubmitting>
+        <InputDomain
+            label="Domain"
+            id="domain"
+            bind:value={domainName}
+            required
+            placeholder="appwrite.example.com" />
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button secondary href={routeBase}>Cancel</Button>
+        <Button on:click={() => formComponent.triggerSubmit()} bind:disabled={$isSubmitting}>
+            Add
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.ts
new file mode 100644
index 000000000..d4e21a917
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { RuleTrigger, RuleType } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants.js';
+
+export const load = async ({ depends, params }) => {
+    depends(Dependencies.DOMAINS);
+
+    const [rules] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.API),
+                Query.equal('trigger', RuleTrigger.MANUAL)
+            ])
+    ]);
+
+    return {
+        rules
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte
new file mode 100644
index 000000000..083034326
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Card,
+        Divider,
+        Fieldset,
+        Icon,
+        Layout,
+        Tabs,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { organization } from '$lib/stores/organization';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { isCloud } from '$lib/system';
+    import { page } from '$app/state';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { base } from '$app/paths';
+    import { writable } from 'svelte/store';
+    import { consoleVariables } from '$routes/(console)/store';
+    import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
+    import RecordTable from '$lib/components/domains/recordTable.svelte';
+
+    let { data } = $props();
+
+    const ruleId = page.url.searchParams.get('rule');
+    let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3);
+
+    let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
+    $effect(() => {
+        if ($consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
+            selectedTab = 'cname';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_A) {
+            selectedTab = 'a';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_AAAA) {
+            selectedTab = 'aaaa';
+        }
+    });
+    let verified = $state(false);
+
+    let routeBase = `${base}/project-${page.params.region}-${page.params.project}/settings/domains`;
+    let isSubmitting = $state(writable(false));
+
+    async function verify() {
+        const isNewDomain =
+            data.domainsList.domains.findIndex((rule) => rule.domain === page.params.domain) === -1;
+        try {
+            if (selectedTab !== 'nameserver') {
+                const ruleData = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.updateRuleVerification(ruleId);
+                verified = ruleData.status === 'verified';
+            } else if (isNewDomain && isCloud) {
+                const domainData = await sdk.forConsole.domains.create(
+                    $organization.$id,
+                    page.params.domain
+                );
+                verified = domainData.nameservers.toLocaleLowerCase() === 'appwrite';
+            }
+
+            addNotification({
+                type: 'success',
+                message: 'Domain added successfully'
+            });
+            await goto(routeBase);
+            await invalidate(Dependencies.DOMAINS);
+        } catch (error) {
+            verified = false;
+            isSubmitting.set(false);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function back() {
+        if (ruleId) {
+            await sdk.forProject(page.params.region, page.params.project).proxy.deleteRule(ruleId);
+        }
+        await goto(`${routeBase}/add-domain?domain=${page.params.domain}`);
+    }
+</script>
+
+<Wizard title="Add domain" href={routeBase} column columnSize="s">
+    <Form onSubmit={verify} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Card.Base radius="s" padding="s">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="xs">
+                        <Icon icon={IconGlobeAlt} color="--fgcolor-neutral-primary" />
+
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
+                            {page.params.domain}
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Button secondary on:click={back}>Change</Button>
+                </Layout.Stack>
+            </Card.Base>
+
+            <Fieldset legend="Verification">
+                <Layout.Stack gap="xl">
+                    <div>
+                        <Tabs.Root variant="secondary" let:root>
+                            {#if isSubDomain && !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && $consoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'cname')}
+                                    active={selectedTab === 'cname'}>
+                                    CNAME
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if isCloud}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'nameserver')}
+                                    active={selectedTab === 'nameserver'}>
+                                    Nameservers
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'a')}
+                                    active={selectedTab === 'a'}>
+                                    A
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'aaaa')}
+                                    active={selectedTab === 'aaaa'}>
+                                    AAAA
+                                </Tabs.Item.Button>
+                            {/if}
+                        </Tabs.Root>
+                        <Divider />
+                    </div>
+                    {#if selectedTab === 'nameserver'}
+                        <NameserverTable domain={page.params.domain} {verified} />
+                    {:else}
+                        <RecordTable domain={page.params.domain} {verified} variant={selectedTab} />
+                    {/if}
+                    <Divider />
+                    <Layout.Stack direction="row" justifyContent="flex-end">
+                        <div>
+                            <Button submit disabled={$isSubmitting}>Verify</Button>
+                        </div>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.ts
new file mode 100644
index 000000000..6e84864d1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.ts
@@ -0,0 +1,22 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants.js';
+import { isCloud } from '$lib/system';
+import type { Domain, DomainsList } from '$lib/sdk/domains.js';
+
+export const load = async ({ depends, params }) => {
+    depends(Dependencies.DOMAINS);
+
+    let domain: Domain;
+    let domainsList: DomainsList;
+    if (isCloud) {
+        [domain, domainsList] = await Promise.all([
+            sdk.forConsole.domains.get(params.domain),
+            sdk.forConsole.domains.list()
+        ]);
+    }
+
+    return {
+        domain,
+        domainsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/deleteDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/deleteDomainModal.svelte
new file mode 100644
index 000000000..1003a8fc2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/deleteDomainModal.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import type { Models } from '@appwrite.io/console';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Confirm } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
+
+    let {
+        show = $bindable(),
+        selectedDomain
+    }: {
+        show: boolean;
+        selectedDomain: Models.ProxyRule;
+    } = $props();
+
+    let error: string = $state(null);
+
+    async function deleteDomain() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.deleteRule(selectedDomain.$id);
+            await invalidate(Dependencies.DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Domain has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+</script>
+
+<Confirm title="Delete domain" bind:open={show} onSubmit={deleteDomain} bind:error confirmDeletion>
+    {#if selectedDomain}
+        <Typography.Text variant="m-400">
+            Are you sure you want to delete this domain?
+        </Typography.Text>
+    {/if}
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/retryDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/retryDomainModal.svelte
new file mode 100644
index 000000000..a97fe7fab
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/retryDomainModal.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@appwrite.io/console';
+    import CnameTable from '$lib/components/domains/cnameTable.svelte';
+    import { page } from '$app/state';
+
+    let {
+        show = $bindable(),
+        selectedDomain
+    }: {
+        show: boolean;
+        selectedDomain: Models.ProxyRule;
+    } = $props();
+    let error = $state(null);
+
+    async function retryDomain() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.updateRuleVerification(selectedDomain.$id);
+            await invalidate(Dependencies.DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `${selectedDomain.domain} has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+
+    $effect(() => {
+        if (!show) {
+            error = null;
+        }
+    });
+</script>
+
+<Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
+    {#if selectedDomain}
+        <CnameTable
+            domain={selectedDomain.domain}
+            verified={selectedDomain.status === 'verified'} />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Retry</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/store.ts b/src/routes/(console)/project-[region]-[project]/settings/domains/store.ts
new file mode 100644
index 000000000..8d7cb0d66
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/store.ts
@@ -0,0 +1,25 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    {
+        id: 'domain',
+        title: 'Domain',
+        type: 'string',
+        format: 'string',
+        width: { min: 200, max: 550 }
+    },
+
+    {
+        id: 'redirectUrl',
+        title: 'Redirect to',
+        type: 'string',
+        width: { min: 120, max: 400 }
+    },
+    {
+        id: 'deploymentVcsProviderBranch',
+        title: 'Production branch',
+        type: 'string',
+        width: { min: 90, max: 220 }
+    }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte
new file mode 100644
index 000000000..8529c72dc
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { protocol } from '$routes/(console)/store';
+    import type { Models } from '@appwrite.io/console';
+    import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import DeleteDomainModal from './deleteDomainModal.svelte';
+    import RetryDomainModal from './retryDomainModal.svelte';
+    import { columns } from './store';
+
+    let {
+        domains
+    }: {
+        domains: Models.ProxyRuleList;
+    } = $props();
+
+    let showDelete = $state(false);
+    let showRetry = $state(false);
+    let selectedDomain: Models.ProxyRule = $state(null);
+</script>
+
+<Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>
+                {title}
+            </Table.Header.Cell>
+        {/each}
+        <Table.Header.Cell column="actions" {root} />
+    </svelte:fragment>
+    {#each domains.rules as domain}
+        <Table.Row.Base {root}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === 'domain'}
+                        <Link external href={`${$protocol}${domain.domain}`} variant="quiet" icon>
+                            <Typography.Text truncate>
+                                {domain.domain}
+                                {#if domain.status !== 'verified'}
+                                    <Badge
+                                        variant="secondary"
+                                        type="error"
+                                        content="Verification failed"
+                                        size="s" />
+                                {/if}
+                            </Typography.Text>
+                        </Link>
+                    {/if}
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="actions" {root}>
+                <Layout.Stack direction="row" justifyContent="flex-end">
+                    <Popover let:toggle placement="bottom-start" padding="none">
+                        <Button
+                            text
+                            icon
+                            on:click={(e) => {
+                                e.preventDefault();
+                                toggle(e);
+                            }}>
+                            <Icon icon={IconDotsHorizontal} size="s" />
+                        </Button>
+
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root>
+                                {#if domain.status !== 'verified'}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconRefresh}
+                                        on:click={(e) => {
+                                            selectedDomain = domain;
+                                            showRetry = true;
+                                            toggle(e);
+                                        }}>
+                                        Retry
+                                    </ActionMenu.Item.Button>
+                                {/if}
+                                <ActionMenu.Item.Button
+                                    status="danger"
+                                    leadingIcon={IconTrash}
+                                    on:click={(e) => {
+                                        selectedDomain = domain;
+                                        showDelete = true;
+                                        toggle(e);
+                                        trackEvent(Click.DomainDeleteClick, {
+                                            source: 'settings_domain_overview'
+                                        });
+                                    }}>
+                                    Delete
+                                </ActionMenu.Item.Button>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </Layout.Stack>
+            </Table.Cell>
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
+
+{#if showDelete}
+    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
+{/if}
+
+{#if showRetry}
+    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/header.svelte b/src/routes/(console)/project-[region]-[project]/settings/header.svelte
index d39584b42..d7a715c2c 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import type { TabElement } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
     import { canWriteProjects } from '$lib/stores/roles';
     import { isCloud } from '$lib/system';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
-    const path = `${base}/project-${$page.params.region}-${projectId}/settings`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/settings`;
     const tabs: TabElement[] = [
         {
             href: path,
@@ -18,7 +18,7 @@
         },
         {
             href: `${path}/domains`,
-            title: 'Custom Domains',
+            title: 'Custom domains',
             event: 'domains'
         },
         {
@@ -50,14 +50,14 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle>Settings</CoverTitle>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Settings</Typography.Title>
     </svelte:fragment>
 
     <Tabs>
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
index 41d649cb5..badd138cf 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
-    import {
-        FormList,
-        InputNumber,
-        InputPassword,
-        InputText,
-        InputTextarea
-    } from '$lib/elements/forms';
+    import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import type { Provider } from '$lib/stores/migration';
     import { provider } from '.';
@@ -46,117 +40,102 @@
     </div>
 
     {#if $provider.provider === 'appwrite'}
-        <FormList class="u-margin-block-start-24">
-            <InputText
-                id="endpoint"
-                label="Endpoint"
-                required
-                placeholder="Enter endpoint"
-                bind:value={$provider.endpoint} />
-            <InputText
-                id="project-id"
-                label="Project ID"
-                required
-                placeholder="Enter project ID"
-                bind:value={$provider.projectID} />
-            <InputPassword
-                id="api-key"
-                label="API Key"
-                required
-                placeholder="Enter API Key"
-                showPasswordButton
-                bind:value={$provider.apiKey} />
-        </FormList>
+        <InputText
+            id="endpoint"
+            label="Endpoint"
+            required
+            placeholder="Enter endpoint"
+            bind:value={$provider.endpoint} />
+        <InputText
+            id="project-id"
+            label="Project ID"
+            required
+            placeholder="Enter project ID"
+            bind:value={$provider.projectID} />
+        <InputPassword
+            id="api-key"
+            label="API Key"
+            required
+            placeholder="Enter API Key"
+            bind:value={$provider.apiKey} />
     {:else if $provider.provider === 'firebase'}
-        <FormList class="u-margin-block-start-24">
-            <div class="u-margin-block-start-16">
-                <InputTextarea
-                    id="credentials"
-                    label="Account credentials"
-                    required
-                    bind:value={$provider.serviceAccount}
-                    placeholder="Enter account credentials" />
-            </div>
-        </FormList>
+        <div class="u-margin-block-start-16">
+            <InputTextarea
+                id="credentials"
+                label="Account credentials"
+                required
+                bind:value={$provider.serviceAccount}
+                placeholder="Enter account credentials" />
+        </div>
     {:else if $provider.provider === 'supabase'}
-        <FormList class="u-margin-block-start-24">
-            <p class="body-text-1 u-bold">Postgres credentials</p>
+        <p class="body-text-1 u-bold">Postgres credentials</p>
 
-            <InputText
-                id="host"
-                label="Host"
-                required
-                placeholder="Enter host"
-                bind:value={$provider.host} />
-            <InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
-            <InputText
-                id="username"
-                label="Username"
-                placeholder="postgres"
-                bind:value={$provider.username} />
-            <InputPassword
-                id="password"
-                label="Password"
-                required
-                placeholder="Enter password"
-                showPasswordButton
-                bind:value={$provider.password} />
-            <p class="body-text-1 u-bold">Supabase credentials</p>
+        <InputText
+            id="host"
+            label="Host"
+            required
+            placeholder="Enter host"
+            bind:value={$provider.host} />
+        <InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
+        <InputText
+            id="username"
+            label="Username"
+            placeholder="postgres"
+            bind:value={$provider.username} />
+        <InputPassword
+            id="password"
+            label="Password"
+            required
+            placeholder="Enter password"
+            bind:value={$provider.password} />
+        <p class="body-text-1 u-bold">Supabase credentials</p>
 
-            <InputText
-                id="endpoint"
-                label="Endpoint"
-                required
-                placeholder="Enter endpoint"
-                bind:value={$provider.endpoint} />
-            <InputPassword
-                id="api-key"
-                label="API Key"
-                required
-                placeholder="Enter API Key"
-                showPasswordButton
-                bind:value={$provider.apiKey} />
-        </FormList>
+        <InputText
+            id="endpoint"
+            label="Endpoint"
+            required
+            placeholder="Enter endpoint"
+            bind:value={$provider.endpoint} />
+        <InputPassword
+            id="api-key"
+            label="API Key"
+            required
+            placeholder="Enter API Key"
+            bind:value={$provider.apiKey} />
     {:else if $provider.provider === 'nhost'}
-        <FormList class="u-margin-block-start-24">
-            <InputText
-                id="region"
-                label="Region"
-                required
-                placeholder="Enter region"
-                bind:value={$provider.region} />
-            <InputText
-                id="subdomain"
-                label="Subdomain"
-                required
-                placeholder="Enter subdomain"
-                bind:value={$provider.subdomain} />
-            <InputText
-                id="database"
-                label="Database"
-                placeholder={$provider.subdomain
-                    ? `Default: ${$provider.subdomain}`
-                    : 'Enter database'}
-                bind:value={$provider.database} />
-            <InputText
-                id="username"
-                label="Username"
-                placeholder="postgres"
-                bind:value={$provider.username} />
-            <InputPassword
-                id="password"
-                label="Password"
-                required
-                placeholder="Enter password"
-                showPasswordButton
-                bind:value={$provider.password} />
-            <InputPassword
-                id="adminSecret"
-                label="Admin secret"
-                required
-                placeholder="Enter admin secret"
-                showPasswordButton
-                bind:value={$provider.adminSecret} />
-        </FormList>
+        <InputText
+            id="region"
+            label="Region"
+            required
+            placeholder="Enter region"
+            bind:value={$provider.region} />
+        <InputText
+            id="subdomain"
+            label="Subdomain"
+            required
+            placeholder="Enter subdomain"
+            bind:value={$provider.subdomain} />
+        <InputText
+            id="database"
+            label="Database"
+            placeholder={$provider.subdomain ? `Default: ${$provider.subdomain}` : 'Enter database'}
+            bind:value={$provider.database} />
+        <InputText
+            id="username"
+            label="Username"
+            placeholder="postgres"
+            bind:value={$provider.username} />
+        <InputPassword
+            id="password"
+            label="Password"
+            required
+            placeholder="Enter password"
+            bind:value={$provider.password} />
+        <InputPassword
+            id="adminSecret"
+            label="Admin secret"
+            required
+            placeholder="Enter admin secret"
+            bind:value={$provider.adminSecret} />
     {/if}
 </WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
index cf0ade667..726792087 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import ResourceForm from '$routes/(console)/(migration-wizard)/resource-form.svelte';
     import { formData, provider } from '.';
 </script>
@@ -21,5 +21,5 @@
     <ResourceForm
         {formData}
         {provider}
-        projectSdk={sdk.forProject($page.params.region, $page.params.project)} />
+        projectSdk={sdk.forProject(page.params.region, page.params.project)} />
 </WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte
index 289ba745a..38c8f84a3 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import Wizard from '$lib/layout/wizard.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
+    import Wizard from '$lib/layout/wizardWithSteps.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
     import { onDestroy } from 'svelte';
@@ -13,7 +13,7 @@
     import { started } from '../stores';
     import { showMigrationBox } from '$lib/components/migrationBox.svelte';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     const onExit = () => {
         resetImportStores();
@@ -26,7 +26,7 @@
             switch ($provider.provider) {
                 case 'appwrite': {
                     await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .migrations.createAppwriteMigration(
                             resources,
                             $provider.endpoint,
@@ -39,7 +39,7 @@
                 }
                 case 'supabase': {
                     await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .migrations.createSupabaseMigration(
                             resources,
                             $provider.endpoint,
@@ -55,14 +55,14 @@
                 }
                 case 'firebase': {
                     await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .migrations.createFirebaseMigration(resources, $provider.serviceAccount);
                     invalidate(Dependencies.MIGRATIONS);
                     break;
                 }
                 case 'nhost': {
                     await sdk
-                        .forProject($page.params.region, $page.params.project)
+                        .forProject(page.params.region, page.params.project)
                         .migrations.createNHostMigration(
                             resources,
                             $provider.subdomain,
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte
index 90de184a9..87490b4f7 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte
@@ -1,18 +1,10 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
-    import { Arrow, CardGrid, Heading } from '$lib/components';
+    import { Arrow, Avatar, AvatarGroup, CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import Table from '$lib/elements/table/table.svelte';
-    import { isSameDay, toLocaleDate } from '$lib/helpers/date';
+    import { isSameDay } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { realtime, sdk } from '$lib/stores/sdk';
     import { GRACE_PERIOD_OVERRIDE, isSelfHosted } from '$lib/system';
@@ -21,12 +13,24 @@
     import { openImportWizard } from './(import)';
     import Details from './details.svelte';
     import ExportModal from './exportModal.svelte';
-    import Status from '$lib/components/status.svelte';
-    import { capitalize } from '$lib/helpers/string';
     import { readOnly } from '$lib/stores/billing';
     import type { Models } from '@appwrite.io/console';
     import { canWriteProjects } from '$lib/stores/roles';
-    import { page } from '$app/stores';
+    import {
+        IconCloud,
+        IconDatabase,
+        IconDownload,
+        IconFolder,
+        IconLightningBolt,
+        IconServer,
+        IconUpload,
+        IconUserGroup
+    } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Link, Status, Table } from '@appwrite.io/pink-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/state';
 
     export let data;
     let migration: Models.Migration = null;
@@ -37,7 +41,7 @@
         if (status === 'failed') {
             return 'failed';
         } else if (status === 'completed') {
-            return 'completed';
+            return 'complete';
         } else if (status === 'processing') {
             return 'processing';
         }
@@ -47,7 +51,7 @@
 
     onMount(() => {
         return realtime
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .subscribe(['project', 'console'], (response) => {
                 if (response.events.includes('migrations.*')) {
                     invalidate(Dependencies.MIGRATIONS);
@@ -58,7 +62,7 @@
     $: $registerCommands([
         {
             label: 'Import data',
-            icon: 'download',
+            icon: IconDownload,
             keys: ['i', 'd'],
             callback: openImportWizard,
             group: 'migrations',
@@ -67,14 +71,14 @@
         isSelfHosted
             ? {
                   label: 'Deploy to cloud',
-                  icon: 'cloud',
+                  icon: IconCloud,
                   keys: ['d', 'c'],
                   callback: deployToCloud,
                   group: 'migrations'
               }
             : {
                   label: 'Export data',
-                  icon: 'upload',
+                  icon: IconUpload,
                   keys: ['e', 'd'],
                   callback: () => (showExport = true),
                   group: 'migrations'
@@ -127,16 +131,6 @@
         window.location.href = `https://cloud.appwrite.io/?migrate=${encodeURIComponent(
             JSON.stringify(migrationData)
         )}`;
-
-        // const migrationData = {
-        //     endpoint: PUBLIC_MOCK_ENDPOINT,
-        //     projectId: PUBLIC_MOCK_PROJECTID,
-        //     apiKey: PUBLIC_MOCK_APIKEY
-        // };
-
-        // window.location.href = `http://localhost:3000/?migrate=${encodeURIComponent(
-        //     JSON.stringify(migrationData)
-        // )}`;
     };
 
     function showDetails(m: Models.Migration) {
@@ -146,24 +140,14 @@
 </script>
 
 <Container>
-    <div class="u-flex u-cross-center u-gap-8">
-        <Heading tag="h2" size="5">Migrations</Heading>
-        <div class="tag eyebrow-heading-3">
-            <span class="text u-x-small">Experimental</span>
-        </div>
-    </div>
-
     <CardGrid>
-        <Heading tag="h3" size="7">Import project data</Heading>
-        <p class="text">
-            Import data from another platform or from a different Appwrite instance. <a
-                class="link"
-                href="https://appwrite.io/docs/advanced/migrations"
-                target="_blank"
-                rel="noopener noreferrer">
-                Learn about which platforms are supported</a
-            >.
-        </p>
+        <svelte:fragment slot="title">Import project data</svelte:fragment>
+        Import data from another platform or from a different Appwrite instance.
+        <Link.Anchor
+            href="https://appwrite.io/docs/advanced/migrations"
+            target="_blank"
+            rel="noopener noreferrer">
+            Learn more</Link.Anchor>
         <svelte:fragment slot="aside">
             {#if data.migrations.length}
                 <div class="u-flex">
@@ -172,137 +156,114 @@
                     </div>
                 </div>
 
-                <Table noStyles>
-                    <TableHeader>
-                        <TableCellHead>Date</TableCellHead>
-                        <TableCellHead>Source</TableCellHead>
-                        <TableCellHead>Status</TableCellHead>
-                        <TableCellHead />
-                    </TableHeader>
-                    <TableBody>
-                        {#each data.migrations as entry}
-                            <TableRow>
-                                {@const status = getStatus(entry.status)}
-                                <TableCell title="Data">
-                                    {isSameDay(new Date(), new Date(entry.$createdAt))
-                                        ? 'Today'
-                                        : toLocaleDate(entry.$createdAt)}
-                                </TableCell>
-                                <TableCell title="Source">{entry.source}</TableCell>
-                                <TableCell title="Status">
-                                    <Status {status}>
-                                        {capitalize(status)}
-                                    </Status>
-                                </TableCell>
-                                <TableCell title="" showOverflow>
-                                    <div class="u-flex u-main-end">
-                                        <Button secondary on:click={() => showDetails(entry)}
-                                            >Details</Button>
-                                    </div>
-                                </TableCell>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
+                <Table.Root columns={4} let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell {root}>Date</Table.Header.Cell>
+                        <Table.Header.Cell {root}>Source</Table.Header.Cell>
+                        <Table.Header.Cell {root}>Status</Table.Header.Cell>
+                        <Table.Header.Cell {root} />
+                    </svelte:fragment>
+                    {#each data.migrations as entry}
+                        <Table.Row.Base {root}>
+                            {@const status = getStatus(entry.status)}
+                            <Table.Cell {root}>
+                                {#if isSameDay(new Date(), new Date(entry.$createdAt))}
+                                    Today
+                                {:else}
+                                    <DualTimeView time={entry.$createdAt} />
+                                {/if}
+                            </Table.Cell>
+                            <Table.Cell {root}>{entry.source}</Table.Cell>
+                            <Table.Cell {root}>
+                                <Status label={capitalize(status)} {status} />
+                            </Table.Cell>
+                            <Table.Cell {root}>
+                                <div class="u-flex u-main-end">
+                                    <Button secondary on:click={() => showDetails(entry)}
+                                        >Details</Button>
+                                </div>
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
             {:else}
-                <div class="import-box">
-                    <ul class="avatars-group is-with-border">
-                        <li class="avatars-group-item">
-                            <div class="avatar">
-                                <i class="icon-user-group" />
-                            </div>
-                        </li>
-
-                        <li class="avatars-group-item">
-                            <div class="avatar">
-                                <i class="icon-database" />
-                            </div>
-                        </li>
-
-                        <li class="avatars-group-item">
-                            <div class="avatar">
-                                <i class="icon-lightning-bolt" />
-                            </div>
-                        </li>
-
-                        <li class="avatars-group-item">
-                            <div class="avatar">
-                                <i class="icon-folder" />
-                            </div>
-                        </li>
-                    </ul>
-                    <div class="u-margin-block-start-8">
+                <Layout.Stack alignItems="center" gap="xl">
+                    <Layout.Stack alignItems="center">
+                        <AvatarGroup
+                            --icon-fill="var(--fgcolor-neutral-tertiary)"
+                            icons={[IconUserGroup, IconDatabase, IconLightningBolt, IconFolder]}
+                            size="s" />
                         <Arrow direction="down" />
-                    </div>
-                    <div class="avatar u-margin-block-start-8" style="--size: {48 / 16}rem">
-                        <span class="icon-cloud" />
-                    </div>
+                        <Avatar alt="appwrite" size="s">
+                            <Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
+                        </Avatar>
+                    </Layout.Stack>
                     <Button
-                        class="u-margin-block-start-20"
                         secondary
                         on:click={openImportWizard}
                         disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
                         Import data
                     </Button>
-                </div>
+                </Layout.Stack>
             {/if}
         </svelte:fragment>
     </CardGrid>
     {#if isSelfHosted}
         <CardGrid>
-            <Heading tag="h3" size="7">Deploy to Cloud</Heading>
-            <p class="text">
-                Export data from your project to Appwrite Cloud. <a
-                    class="link"
-                    href="https://appwrite.io/docs/advanced/migrations/self-hosted"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    Learn more in our documentation.</a>
-            </p>
+            <svelte:fragment slot="title">Deploy to Cloud</svelte:fragment>
+            Export data from your project to Appwrite Cloud.
+            <Link.Anchor
+                href="https://appwrite.io/docs/advanced/migrations/self-hosted"
+                target="_blank"
+                rel="noopener noreferrer">
+                Learn more</Link.Anchor>
             <svelte:fragment slot="aside">
-                <div class="import-box">
-                    <div class="u-flex u-cross-center u-gap-8">
-                        <div class="avatar" style="--size: {48 / 16}rem">
-                            <span class="icon-server" />
-                        </div>
+                <Layout.Stack alignItems="center" gap="xl">
+                    <Layout.Stack direction="row" justifyContent="center" alignItems="center">
+                        <Avatar alt="appwrite" size="s">
+                            <Icon icon={IconServer} size="s" color="--fgcolor-neutral-tertiary" />
+                        </Avatar>
                         <Arrow direction="right" />
-                        <div class="avatar" style="--size: {48 / 16}rem">
-                            <span class="icon-cloud" />
-                        </div>
+                        <Avatar alt="appwrite" size="s">
+                            <Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
+                        </Avatar>
+                    </Layout.Stack>
+                    <div>
+                        <Button secondary on:click={deployToCloud}>Deploy to Cloud</Button>
                     </div>
-                    <Button class="u-margin-block-start-48" secondary on:click={deployToCloud}>
-                        Deploy to Cloud
-                    </Button>
-                </div>
+                </Layout.Stack>
             </svelte:fragment>
         </CardGrid>
     {:else}
         <CardGrid>
-            <Heading tag="h3" size="7">Export to self-hosted instance</Heading>
-            <p class="text">
-                Export data from your project to a self-hosted instance. <a
-                    class="link"
-                    href="https://appwrite.io/docs/advanced/migrations/self-hosted"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    Learn more in our documentation.</a>
-            </p>
+            <svelte:fragment slot="title">Export to self-hosted instance</svelte:fragment>
+            Export data from your project to a self-hosted instance.
+            <Link.Anchor
+                class="link"
+                href="https://appwrite.io/docs/advanced/migrations/self-hosted"
+                target="_blank"
+                rel="noopener noreferrer">
+                Learn more</Link.Anchor>
             <svelte:fragment slot="aside">
-                <div class="import-box">
-                    <div class="u-flex u-cross-center u-gap-8">
-                        <div class="avatar" style="--size: {48 / 16}rem">
-                            <span class="icon-cloud" />
-                        </div>
+                <Layout.Stack alignItems="center" gap="xl">
+                    <Layout.Stack direction="row" justifyContent="center" alignItems="center">
+                        <Avatar alt="appwrite" size="s">
+                            <Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
+                        </Avatar>
                         <Arrow direction="right" />
-                        <div class="avatar" style="--size: {48 / 16}rem">
-                            <span class="icon-server" />
-                        </div>
+                        <Avatar alt="appwrite" size="s">
+                            <Icon icon={IconServer} size="s" color="--fgcolor-neutral-tertiary" />
+                        </Avatar>
+                    </Layout.Stack>
+                    <div>
+                        <Button
+                            secondary
+                            on:click={() => {
+                                showExport = true;
+                                trackEvent(Click.SettingsStartMigrationClick);
+                            }}>Export data</Button>
                     </div>
-                    <Button
-                        class="u-margin-block-start-48"
-                        secondary
-                        on:click={() => (showExport = true)}>Export data</Button>
-                </div>
+                </Layout.Stack>
             </svelte:fragment>
         </CardGrid>
     {/if}
@@ -310,18 +271,6 @@
 
 <ExportModal bind:show={showExport} />
 
-<Details {migration} bind:show={showMigration} />
-
-<style lang="scss">
-    .import-box {
-        display: grid;
-        place-items: center;
-
-        border: 1px dashed hsl(var(--color-border));
-        border-radius: 1rem;
-
-        height: 100%;
-
-        padding: 1.5rem;
-    }
-</style>
+{#if showMigration}
+    <Details {migration} bind:show={showMigration} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte
index f83ec4482..d26f39209 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, Code, Modal, Tab } from '$lib/components';
+    import { Alert, Modal, Tab } from '$lib/components';
     import Tabs from '$lib/components/tabs.svelte';
     import { total } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -7,6 +7,7 @@
     import { formatNum } from '$lib/helpers/string';
     import type { Models } from '@appwrite.io/console';
     import { ResourcesFriendly } from '$lib/stores/migration';
+    import { Card, Layout, Typography, Code } from '@appwrite.io/pink-svelte';
 
     export let migration: Models.Migration = null;
     export let show = false;
@@ -45,28 +46,34 @@
     let tab = 'details' as 'details' | 'logs';
 </script>
 
-<Modal bind:show size="big">
-    <svelte:fragment slot="title">
-        {#if migration.status === 'failed'}
-            Resolve migration issues
-        {:else}
-            Migration details
-        {/if}
-    </svelte:fragment>
-    <Tabs>
-        <Tab selected={tab === 'details'} on:click={() => (tab = 'details')}>Details</Tab>
-        <Tab selected={tab === 'logs'} on:click={() => (tab = 'logs')}>Logs</Tab>
+<Modal
+    bind:show
+    title={migration.status === 'failed' ? 'Resolve migration issues' : 'Migration details'}
+    hideFooter>
+    <Tabs stretch let:root>
+        <Tab {root} selected={tab === 'details'} on:click={() => (tab = 'details')}>Details</Tab>
+        <Tab {root} selected={tab === 'logs'} on:click={() => (tab = 'logs')}>Logs</Tab>
     </Tabs>
 
     {#if tab === 'logs'}
-        <Code code={JSON.stringify(migration, null, 2)} language="json" allowScroll />
+        <Code code={JSON.stringify(migration, null, 2)} lang="json" hideHeader />
     {:else if tab === 'details'}
-        <div class="box meta">
-            <span>Date</span>
-            <span>{toLocaleDateTime(migration.$createdAt)}</span>
-            <span>Source</span>
-            <span>{migration.source}</span>
-        </div>
+        <Card.Base variant="secondary" padding="s">
+            <Layout.Stack>
+                <Layout.Stack direction="row">
+                    <span style:flex-basis="50%">
+                        <Typography.Text variant="m-600">Date</Typography.Text>
+                    </span>
+                    <span>{toLocaleDateTime(migration.$createdAt)}</span>
+                </Layout.Stack>
+                <Layout.Stack direction="row">
+                    <span style:flex-basis="50%">
+                        <Typography.Text variant="m-600">Source</Typography.Text>
+                    </span>
+                    <span>{migration.source}</span>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card.Base>
 
         {#if Object.values(statusCounters).some(hasError)}
             <Alert
@@ -90,15 +97,15 @@
                     <div class="u-flex u-cross-center u-gap-16">
                         <div class="icon-wrapper">
                             {#if hasError(entityCounter)}
-                                <i class="icon-exclamation" />
+                                <i class="icon-exclamation"></i>
                             {:else if isLoading(entityCounter)}
                                 <div class="u-flex">
-                                    <span class="loader" />
+                                    <span class="loader"></span>
                                 </div>
                             {:else if hasSucceeded(entityCounter)}
-                                <i class="icon-check" />
+                                <i class="icon-check"></i>
                             {:else}
-                                <i class="icon-clock" />
+                                <i class="icon-clock"></i>
                             {/if}
                         </div>
 
@@ -124,22 +131,11 @@
             padding: 1.25rem;
 
             &:not(:last-child) {
-                border-bottom: 1px solid hsl(var(--color-border));
+                border-bottom: 1px solid hsl(var(--border));
             }
         }
     }
 
-    .meta {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.5rem;
-        padding: 1.5rem;
-
-        :nth-child(2n) {
-            font-weight: 600;
-        }
-    }
-
     .icon-wrapper {
         position: relative;
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte
index b24be298d..0f4658324 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Alert, Box, Modal } from '$lib/components';
-    import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
+    import { Button, InputText, InputTextarea } from '$lib/elements/forms';
     import { getFormData } from '$lib/helpers/form';
     import { feedback, feedbackData } from '$lib/stores/feedback';
     import { organization } from '$lib/stores/organization';
@@ -58,7 +58,7 @@
             await feedback.submitFeedback(
                 `feedback-${$feedback.type}`,
                 message,
-                $page.url.href,
+                page.url.href,
                 $user.name,
                 $user.email,
                 $organization?.billingPlan,
@@ -116,50 +116,50 @@
         )}`;
         window.location.href = dest;
     };
+
+    function handleInvalid(event: Event) {
+        const input = event.target as HTMLInputElement;
+        const value = input.value;
+
+        if (!isValidEndpoint(value)) {
+            input.setCustomValidity('Please enter a valid endpoint');
+        } else {
+            input.setCustomValidity('');
+        }
+        input.reportValidity();
+    }
 </script>
 
 <Modal title="Export to self-hosted instance" bind:show {onSubmit}>
-    <FormList gap={24}>
-        <Alert isStandalone>
-            <svelte:fragment slot="title">API key creation</svelte:fragment>
-            By initiating the transfer, an API key will be automatically generated in the background,
-            which you can delete after completion
-        </Alert>
+    <Alert isStandalone>
+        <svelte:fragment slot="title">API key creation</svelte:fragment>
+        By initiating the transfer, an API key will be automatically generated in the background, which
+        you can delete after completion
+    </Alert>
 
-        <InputText
-            label="Endpoint self-hosted instance"
-            required
-            id="endpoint"
-            placeholder="https://[YOUR_APPWRITE_HOSTNAME]"
-            autofocus
-            on:input={(e) => {
-                if (!submitted) return;
-                const input = e.target;
-                const value = input.value;
+    <InputText
+        label="Endpoint self-hosted instance"
+        required
+        id="endpoint"
+        placeholder="https://[YOUR_APPWRITE_HOSTNAME]"
+        autofocus
+        on:input={(e) => {
+            if (!submitted) return;
+            handleInvalid(e);
+        }} />
 
-                if (!isValidEndpoint(value)) {
-                    input.setCustomValidity('Please enter a valid endpoint');
-                } else {
-                    input.setCustomValidity('');
-                }
-                input.reportValidity();
-            }} />
-
-        <Box>
-            <p class="u-bold">
-                Share your feedback: why our self-hosted solution works better for you
-            </p>
-            <p class="u-margin-block-start-8">
-                We appreciate your continued support and we understand that our self-hosted solution
-                might better fit your needs. To help us improve our Cloud solution, please share why
-                it works better for you. Your feedback is important to us and we'll use it to make
-                our services better.
-            </p>
-            <div class="u-margin-block-start-24">
-                <InputTextarea id="feedback" label="Your feedback" placeholder="Type here..." />
-            </div>
-        </Box>
-    </FormList>
+    <Box>
+        <p class="u-bold">Share your feedback: why our self-hosted solution works better for you</p>
+        <p class="u-margin-block-start-8">
+            We appreciate your continued support and we understand that our self-hosted solution
+            might better fit your needs. To help us improve our Cloud solution, please share why it
+            works better for you. Your feedback is important to us and we'll use it to make our
+            services better.
+        </p>
+        <div class="u-margin-block-start-24">
+            <InputTextarea id="feedback" label="Your feedback" placeholder="Type here..." />
+        </div>
+    </Box>
 
     <div class="u-flex u-gap-16 u-cross-center" slot="footer">
         <span> You will be redirected to your self-hosted instance </span>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte
index 3d49bcf59..7df564ceb 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte
@@ -1,13 +1,6 @@
 <script lang="ts">
-    import { Alert, CardGrid, Heading } from '$lib/components';
-    import {
-        Button,
-        Form,
-        FormList,
-        InputText,
-        InputChoice,
-        InputEmail
-    } from '$lib/elements/forms';
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, InputText, InputEmail } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { project } from '../../store';
     import InputPassword from '$lib/elements/forms/inputPassword.svelte';
@@ -15,7 +8,7 @@
     import { invalidate } from '$app/navigation';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import InputNumber from '$lib/elements/forms/inputNumber.svelte';
     import { base } from '$app/paths';
     import deepEqual from 'deep-equal';
@@ -24,6 +17,7 @@
     import { type SMTPSecure } from '@appwrite.io/console';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import { upgradeURL } from '$lib/stores/billing';
+    import { Link, Selector, Alert } from '@appwrite.io/pink-svelte';
 
     let enabled = false;
     let senderName: string;
@@ -124,83 +118,81 @@
 <Container>
     <Form onSubmit={updateSmtp}>
         <CardGrid>
-            <Heading tag="h6" size="7">SMTP server</Heading>
-            <p class="text">
-                You can customize the email service by providing your own SMTP server. View your
-                email templates <a
-                    href={`${base}/project-${$project.region}-${$project.$id}/auth/templates`}
-                    class="link">here</a>
-            </p>
+            <svelte:fragment slot="title">SMTP server</svelte:fragment>
+            You can customize the email service by providing your own SMTP server. View your email templates
+            <Link.Anchor href={`${base}/project-${$project.region}-${$project.$id}/auth/templates`}
+                >here</Link.Anchor>
             <svelte:fragment slot="aside">
                 {#if $organization.billingPlan === BillingPlan.FREE}
-                    <Alert type="info">
-                        Custom SMTP is a Pro plan feature. Upgrade to enable custom SMTP sever.
-                        <svelte:fragment slot="action">
-                            <div class="alert-buttons u-flex">
-                                <Button text href={$upgradeURL}>Upgrade plan</Button>
-                            </div>
+                    <Alert.Inline
+                        status="info"
+                        title="Custom SMTP is a Pro plan feature. Upgrade to enable custom SMTP sever.">
+                        <svelte:fragment slot="actions">
+                            <Button
+                                compact
+                                href={$upgradeURL}
+                                on:click={() => {
+                                    trackEvent(Click.OrganizationClickUpgrade, {
+                                        source: 'project_settings'
+                                    });
+                                }}>Upgrade plan</Button>
                         </svelte:fragment>
-                    </Alert>
+                    </Alert.Inline>
                 {:else}
-                    <FormList>
-                        <InputChoice
-                            type="switchbox"
-                            id="enabled"
-                            bind:value={enabled}
-                            label="Custom SMTP server">
-                            Enabling this option allows customizing email templates and prevents
-                            emails from being labeled as spam.
-                        </InputChoice>
+                    <Selector.Switch
+                        id="enabled"
+                        bind:checked={enabled}
+                        label="Custom SMTP server"
+                        description="Enabling this option allows customizing email templates and prevents emails
+                from being labeled as spam." />
 
-                        {#if enabled}
-                            <InputText
-                                id="senderName"
-                                label="Sender name"
-                                bind:value={senderName}
-                                required
-                                placeholder="Enter sender name" />
-                            <InputEmail
-                                id="senderEmail"
-                                label="Sender email"
-                                bind:value={senderEmail}
-                                required
-                                placeholder="user@example.io" />
-                            <InputEmail
-                                id="replyTo"
-                                label="Reply to"
-                                bind:value={replyTo}
-                                placeholder="user@example.io" />
-                            <InputText
-                                id="serverHost"
-                                label="Server host"
-                                bind:value={host}
-                                required
-                                placeholder="smtp.server.com" />
-                            <InputNumber
-                                id="serverPort"
-                                label="Server port"
-                                bind:value={port}
-                                required
-                                placeholder="587" />
-                            <InputText
-                                id="username"
-                                label="Username"
-                                bind:value={username}
-                                placeholder="Enter username" />
-                            <InputPassword
-                                showPasswordButton
-                                id="passwort"
-                                label="Password"
-                                bind:value={password}
-                                placeholder="Enter password" />
-                            <InputSelect
-                                id="tls"
-                                label="Secure protocol"
-                                placeholder="Select protocol"
-                                bind:value={secure}
-                                {options} />
-                        {/if}
-                    </FormList>
+                    {#if enabled}
+                        <InputText
+                            id="senderName"
+                            label="Sender name"
+                            bind:value={senderName}
+                            required
+                            placeholder="Enter sender name" />
+                        <InputEmail
+                            id="senderEmail"
+                            label="Sender email"
+                            bind:value={senderEmail}
+                            required
+                            placeholder="user@example.io" />
+                        <InputEmail
+                            id="replyTo"
+                            label="Reply to"
+                            bind:value={replyTo}
+                            placeholder="user@example.io" />
+                        <InputText
+                            id="serverHost"
+                            label="Server host"
+                            bind:value={host}
+                            required
+                            placeholder="smtp.server.com" />
+                        <InputNumber
+                            id="serverPort"
+                            label="Server port"
+                            bind:value={port}
+                            required
+                            placeholder="587" />
+                        <InputText
+                            id="username"
+                            label="Username"
+                            bind:value={username}
+                            placeholder="Enter username" />
+                        <InputPassword
+                            id="passwort"
+                            label="Password"
+                            bind:value={password}
+                            placeholder="Enter password" />
+                        <InputSelect
+                            id="tls"
+                            label="Secure protocol"
+                            placeholder="Select protocol"
+                            bind:value={secure}
+                            {options} />
+                    {/if}
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/transferProject.svelte b/src/routes/(console)/project-[region]-[project]/settings/transferProject.svelte
index 11997a4ef..3ad4c9e72 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/transferProject.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/transferProject.svelte
@@ -2,15 +2,16 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import { Confirm } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../store';
 
     export let show = false;
-    export let teamName;
-    export let teamId;
+    export let teamName: string;
+    export let teamId: string;
 
     const handleTransfer = async () => {
         try {
@@ -32,15 +33,17 @@
     };
 </script>
 
-<Modal title="Transfer project" bind:show onSubmit={handleTransfer} headerDivider={false}>
-    <p>Are you sure you want to transfer <b>{$project.name}</b> to <b>{teamName}</b>?</p>
-    <p>
+<Confirm title="Change organization" bind:open={show} onSubmit={handleTransfer}>
+    <Typography.Text
+        >Are you sure you want to move <b>{$project.name}</b> to
+        <b>{teamName}</b>?</Typography.Text>
+    <Typography.Text>
         Members who are not part of the destination organization must be invited to gain access to
         this project.
-    </p>
+    </Typography.Text>
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit>Transfer</Button>
+        <Button secondary submit>Move</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/transferProjectModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/transferProjectModal.svelte
new file mode 100644
index 000000000..3ad4c9e72
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/transferProjectModal.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Confirm } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { project } from '../store';
+
+    export let show = false;
+    export let teamName: string;
+    export let teamId: string;
+
+    const handleTransfer = async () => {
+        try {
+            await sdk.forConsole.projects.updateTeam($project.$id, teamId);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `${$project.name} has been transferred to ${teamName}`
+            });
+            trackEvent(Submit.ProjectUpdateTeam);
+            await goto(`${base}/organization-${teamId}`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.ProjectUpdateTeam);
+        }
+    };
+</script>
+
+<Confirm title="Change organization" bind:open={show} onSubmit={handleTransfer}>
+    <Typography.Text
+        >Are you sure you want to move <b>{$project.name}</b> to
+        <b>{teamName}</b>?</Typography.Text>
+    <Typography.Text>
+        Members who are not part of the destination organization must be invited to gain access to
+        this project.
+    </Typography.Text>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Move</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
index 7817da15b..aadcb6a02 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
@@ -1,43 +1,39 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
-    import {
-        Alert,
-        Arrow,
-        AvatarGroup,
-        CardGrid,
-        DropList,
-        DropListItem,
-        DropListLink,
-        Heading,
-        Id,
-        PaginationInline,
-        SvgIcon
-    } from '$lib/components';
+    import { page } from '$app/state';
+    import { Avatar, CardGrid, PaginationInline } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import GitInstallationModal from './GitInstallationModal.svelte';
     import GitDisconnectModal from './GitDisconnectModal.svelte';
-    import dayjs from 'dayjs';
     import { isSelfHosted } from '$lib/system';
     import { consoleVariables } from '$routes/(console)/store';
+    import {
+        ActionMenu,
+        Alert,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Popover,
+        Table
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconExternalLink,
+        IconGithub,
+        IconPlus,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import type { ComponentType } from 'svelte';
+    import { Link } from '$lib/elements';
 
     export let total: number;
     export let limit: number;
     export let offset: number;
     export let installations: Models.Installation[];
 
-    let showGitIstall = false;
     let showGitDisconnect = false;
     let showInstallationDropdown: boolean[] = [];
     let selectedInstallation: Models.Installation;
@@ -52,22 +48,20 @@
         }
     }
 
-    function getProviderIcon(provider: string): string {
+    function getProviderIcon(provider: string): ComponentType {
         switch (provider) {
             case 'github':
-                return 'icon-github';
-            default:
-                return '';
+                return IconGithub;
         }
     }
 
     function configureGitHub() {
-        const redirect = new URL($page.url);
+        const redirect = new URL(page.url);
         redirect.searchParams.append('alert', 'installation-updated');
         const target = new URL(
-            `${sdk.forProject($page.params.region, $page.params.project).client.config.endpoint}/vcs/github/authorize`
+            `${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}/vcs/github/authorize`
         );
-        target.searchParams.set('project', $page.params.project);
+        target.searchParams.set('project', page.params.project);
         target.searchParams.set('success', redirect.toString());
         target.searchParams.set('failure', redirect.toString());
         target.searchParams.set('mode', 'admin');
@@ -75,7 +69,7 @@
     }
 
     async function navigateInstallations() {
-        const next = new URL($page.url);
+        const next = new URL(page.url);
         next.searchParams.set('offset', offset.toString());
         await goto(next, {
             noScroll: true
@@ -84,161 +78,122 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Git configuration</Heading>
-    <p class="text">
-        Add a Git installation to your project. You can connect a repository in your function
-        settings.
-    </p>
+    <svelte:fragment slot="title">Git configuration</svelte:fragment>
+    Add a Git installation to your project so you can connect repositories later through your function
+    or site settings.
     <svelte:fragment slot="aside">
         {#if total > 0}
-            <div>
-                <div class="u-flex u-flex-vertical-mobile u-main-end u-padding-block-end-16">
-                    <ul class="buttons-list">
-                        <li class="buttons-list-item">
-                            <Button secondary on:click={() => (showGitIstall = true)}>
-                                <span class="icon-plus" />
-                                <span class="text">Add installation</span>
-                            </Button>
-                        </li>
-                    </ul>
-                </div>
+            <Layout.Stack gap="l">
+                <Layout.Stack direction="row" justifyContent="flex-end">
+                    <Button
+                        secondary
+                        href={configureGitHub()}
+                        on:click={() => {
+                            trackEvent(Click.SettingsInstallProviderClick);
+                        }}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add installation
+                    </Button>
+                </Layout.Stack>
 
-                <div style="overflow: auto">
-                    <Table noMargin noStyles isAutoLayout>
-                        <TableHeader>
-                            <TableCellHead width={150}>Installation ID</TableCellHead>
-                            <TableCellHead>Repository</TableCellHead>
-                            <TableCellHead>Updated</TableCellHead>
-                            <TableCellHead width={40} />
-                        </TableHeader>
-                        <TableBody>
-                            {#each installations as installation, i}
-                                <TableRow>
-                                    <TableCell title="installations">
-                                        <Id value={installation.$id}>{installation.$id}</Id>
-                                    </TableCell>
-                                    <TableCell title="repository">
-                                        <div class="u-flex u-gap-8 u-cross-center">
-                                            <div class="avatar is-size-small">
-                                                <span
-                                                    class={getProviderIcon(installation.provider)}
-                                                    style="font-size: var(--icon-size-medium)!important" />
-                                            </div>
-                                            <a
-                                                href={getInstallationLink(installation)}
-                                                target="_blank"
-                                                class="u-flex u-gap-4 u-cross-center">
-                                                <span>{installation.organization}</span><span
-                                                    style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
-                                                    class="icon-external-link" /></a>
-                                        </div>
-                                    </TableCell>
-                                    <TableCellText title="updated">
-                                        {dayjs().to(installation.$updatedAt)}
-                                    </TableCellText>
-
-                                    <TableCell>
-                                        <DropList
-                                            bind:show={showInstallationDropdown[i]}
-                                            placement="bottom-start"
-                                            noArrow>
-                                            <button
-                                                class="button is-text is-only-icon"
-                                                aria-label="more options"
-                                                on:click|preventDefault={() =>
-                                                    (showInstallationDropdown[i] =
-                                                        !showInstallationDropdown[i])}>
-                                                <span
-                                                    class="icon-dots-horizontal"
-                                                    aria-hidden="true" />
-                                            </button>
-                                            <svelte:fragment slot="list">
-                                                <DropListLink
-                                                    href={configureGitHub()}
-                                                    icon="external-link"
-                                                    on:click={() => {
-                                                        showInstallationDropdown[i] = false;
-                                                    }}>
-                                                    Configure
-                                                </DropListLink>
-                                                <DropListItem
-                                                    icon="x-circle"
-                                                    on:click={async () => {
-                                                        showInstallationDropdown[i] = false;
-                                                        showGitDisconnect = true;
-                                                        selectedInstallation = installation;
-                                                    }}>
-                                                    Disconnect
-                                                </DropListItem>
-                                            </svelte:fragment>
-                                        </DropList>
-                                    </TableCell>
-                                </TableRow>
-                            {/each}
-                        </TableBody>
-                    </Table>
-                </div>
-            </div>
-            <div class="u-flex u-main-space-between">
-                <p class="text">Total installations: {total}</p>
-                <PaginationInline
-                    {limit}
-                    sum={total}
-                    on:change={navigateInstallations}
-                    bind:offset />
-            </div>
-        {:else}
-            {#if isSelfHosted && !isVcsEnabled}
-                <Alert type="info">
-                    <svelte:fragment slot="title">
-                        Installing Git to a self-hosted instance
+                <Table.Root
+                    let:root
+                    columns={[
+                        { id: 'owner', width: { min: 150, max: 500 } },
+                        { id: 'updated', width: { min: 150, max: 500 } },
+                        { id: 'actions', width: 60 }
+                    ]}>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="owner" {root}>Owner</Table.Header.Cell>
+                        <Table.Header.Cell column="updated" {root}>Updated</Table.Header.Cell>
+                        <Table.Header.Cell column="actions" {root} />
                     </svelte:fragment>
-                    When installing Git in a locally hosted Appwrite project, you must first configure
-                    environment variables.
-                    <svelte:fragment slot="buttons">
-                        <Button
-                            href="https://appwrite.io/docs/advanced/self-hosting/functions"
-                            external
-                            text>
-                            Learn more
+                    {#each installations as installation, i}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="owner" {root}>
+                                <Layout.Stack direction="row" gap="s" alignItems="center">
+                                    <Avatar alt={installation.provider} size="xs">
+                                        <Icon
+                                            icon={getProviderIcon(installation.provider)}
+                                            size="s" />
+                                    </Avatar>
+                                    <Link href={getInstallationLink(installation)} external icon>
+                                        {installation.organization}
+                                    </Link>
+                                </Layout.Stack>
+                            </Table.Cell>
+                            <Table.Cell column="updated" {root}>
+                                <DualTimeView time={installation.$updatedAt} />
+                            </Table.Cell>
+                            <Table.Cell column="actions" {root}>
+                                <Popover let:toggle padding="none" placement="bottom-end">
+                                    <button
+                                        type="button"
+                                        class="button is-text is-only-icon"
+                                        aria-label="more options"
+                                        on:click={toggle}>
+                                        <span class="icon-dots-horizontal" aria-hidden="true"
+                                        ></span>
+                                    </button>
+                                    <ActionMenu.Root slot="tooltip">
+                                        <ActionMenu.Item.Anchor
+                                            href={configureGitHub()}
+                                            trailingIcon={IconExternalLink}
+                                            on:click={() => (showInstallationDropdown[i] = false)}>
+                                            Configure
+                                        </ActionMenu.Item.Anchor>
+                                        <ActionMenu.Item.Button
+                                            trailingIcon={IconXCircle}
+                                            on:click={() => {
+                                                showInstallationDropdown[i] = false;
+                                                showGitDisconnect = true;
+                                                selectedInstallation = installation;
+                                            }}>
+                                            Disconnect
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                </Popover>
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
+                {#if total > limit}
+                    <Layout.Stack justifyContent="space-between">
+                        <p class="text">Total installations: {total}</p>
+                        <PaginationInline
+                            {limit}
+                            {total}
+                            on:change={navigateInstallations}
+                            bind:offset />
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        {:else if isSelfHosted && !isVcsEnabled}
+            <Alert.Inline status="info" title="Installing Git on a self-hosted instance">
+                Before installing Git in a locally hosted Appwrite project, ensure your environment
+                variables are configured.
+                <svelte:fragment slot="actions">
+                    <Button compact href="#" external>Learn more</Button>
+                </svelte:fragment>
+            </Alert.Inline>
+        {:else}
+            <Card.Base padding="none" border="dashed">
+                <Empty
+                    type="secondary"
+                    title="No installation was added to the project yet"
+                    description="Add an installation to connect repositories">
+                    <svelte:fragment slot="actions">
+                        <Button secondary href={configureGitHub()} external>
+                            <Icon icon={IconGithub} size="s" slot="start" />
+                            Connect to GitHub
                         </Button>
                     </svelte:fragment>
-                </Alert>
-            {/if}
-            <article class="card-git card is-border-dashed is-no-shadow">
-                <div class="u-flex u-cross-center u-flex-vertical u-gap-32">
-                    <div class="u-flex u-cross-center u-flex-vertical u-gap-8">
-                        <AvatarGroup
-                            class="git-installation-avatar-group"
-                            bordered
-                            icons={['github', 'gitlab', 'bitBucket', 'azure']} />
-
-                        <Arrow direction="down" />
-
-                        <div class="avatar"><SvgIcon name="appwrite" type="color" size={80} /></div>
-                    </div>
-                    <Button
-                        disabled={isSelfHosted && !isVcsEnabled}
-                        on:click={() => (showGitIstall = true)}
-                        secondary>
-                        <span class="text">Add Installation</span>
-                    </Button>
-                </div>
-            </article>
+                </Empty>
+            </Card.Base>
         {/if}
     </svelte:fragment>
 </CardGrid>
 
-{#if showGitIstall}
-    <GitInstallationModal bind:showGitInstall={showGitIstall} />
-{/if}
-
 {#if showGitDisconnect}
     <GitDisconnectModal bind:showGitDisconnect {selectedInstallation} />
 {/if}
-
-<style>
-    :global(.git-installation-avatar-group .icon-gitlab, .icon-bitBucket, .icon-azure) {
-        color: hsl(var(--color-neutral-50));
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
index 379562757..a4ca90b67 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, CopyInput, Heading } from '$lib/components';
+    import { CardGrid, CopyInput } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project } from '../store';
     import { canWriteProjects } from '$lib/stores/roles';
-    import { getProjectEndpoint } from '$lib/helpers/project';
 
-    const { project: projectId } = $page.params;
+    const endpoint = sdk.forConsole.client.config.endpoint;
 
     let name: string = null;
 
@@ -25,6 +24,7 @@
         try {
             await sdk.forConsole.projects.update($project.$id, name);
             await invalidate(Dependencies.PROJECT);
+            await invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 type: 'success',
                 message: 'Project name has been updated'
@@ -40,45 +40,38 @@
     }
 </script>
 
-<Form onSubmit={updateName}>
-    <CardGrid>
-        <Heading tag="h6" size="7">API credentials</Heading>
-        <p class="text">
-            Access Appwrite services using this project's API Endpoint and Project ID.
-        </p>
-        <svelte:fragment slot="aside">
-            <FormList>
-                <CopyInput label="API Endpoint" showLabel={true} value={getProjectEndpoint()} />
-                <CopyInput label="Project ID" showLabel={true} value={$project.$id} />
-            </FormList>
-        </svelte:fragment>
-        <svelte:fragment slot="actions">
-            <Button
-                secondary
-                event="view_keys"
-                href={`${base}/project-${$page.params.region}-${projectId}/overview/keys#integrations`}>
-                View API keys
-            </Button>
-        </svelte:fragment>
-    </CardGrid>
-    {#if $canWriteProjects}
+<CardGrid>
+    <svelte:fragment slot="title">API credentials</svelte:fragment>
+    Access Appwrite services using this project's API Endpoint and Project ID.
+    <svelte:fragment slot="aside">
+        <CopyInput label="Project ID" value={$project.$id} />
+        <CopyInput label="API Endpoint" value={endpoint} />
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+        <Button
+            secondary
+            event="view_keys"
+            href={`${base}/project-${page.params.region}-${page.params.project}/overview/keys#integrations`}>
+            View API keys
+        </Button>
+    </svelte:fragment>
+</CardGrid>
+{#if $canWriteProjects}
+    <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Name</Heading>
-
+            <svelte:fragment slot="title">Name</svelte:fragment>
             <svelte:fragment slot="aside">
-                <FormList>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        bind:value={name}
-                        required
-                        placeholder="Enter name" />
-                </FormList>
+                <InputText
+                    id="name"
+                    label="Name"
+                    bind:value={name}
+                    required
+                    placeholder="Enter name" />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
                 <Button disabled={name === $project.name} submit>Update</Button>
             </svelte:fragment>
         </CardGrid>
-    {/if}
-</Form>
+    </Form>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateServices.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateServices.svelte
index 0318f8866..e544437e4 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateServices.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateServices.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { FormList, InputSwitch } from '$lib/elements/forms';
+    import { InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { services, type Service } from '$lib/stores/project-services';
     import { sdk } from '$lib/stores/sdk';
@@ -11,6 +11,7 @@
     import EnableAllServices from './enableAllServices.svelte';
     import DisableAllServices from './disableAllServices.svelte';
     import Button from '$lib/elements/forms/button.svelte';
+    import { Divider, Layout } from '@appwrite.io/pink-svelte';
 
     let showDisableAll = false;
     let showEnableAll = false;
@@ -80,38 +81,33 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Services</Heading>
-    <p class="text">
-        Choose services you wish to enable or disable for the client API. When disabled, the
-        services are not accessible to client SDKs but remain accessible to server SDKs.
-    </p>
+    <svelte:fragment slot="title">Services</svelte:fragment>
+    Choose services you wish to enable or disable for the client API. When disabled, the services are
+    not accessible to client SDKs but remain accessible to server SDKs.
     <svelte:fragment slot="aside">
-        <div>
-            <ul class="buttons-list u-main-end">
-                <li class="buttons-list-item">
-                    <Button text={true} on:click={() => toggleAllServices(true)}>Enable all</Button>
-                </li>
-                <li class="buttons-list-item">
-                    <Button text={true} on:click={() => toggleAllServices(false)}>
-                        Disable all
-                    </Button>
-                </li>
-            </ul>
-            <div class="u-sep-block-start u-padding-block-8 u-margin-block-start-8" />
-            <form class="form">
-                <FormList class="is-multiple">
+        <Layout.Stack gap="m">
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                <Button extraCompact on:click={() => toggleAllServices(true)}>Enable all</Button>
+                <span style:height="20px">
+                    <Divider vertical />
+                </span>
+                <Button extraCompact on:click={() => toggleAllServices(false)}>Disable all</Button>
+            </Layout.Stack>
+            <Layout.Stack gap="l">
+                <Divider />
+                <Layout.Stack direction="row" wrap="wrap">
                     {#each $services.list as service}
-                        <InputSwitch
-                            label={service.label}
-                            id={service.method}
-                            bind:value={service.value}
-                            on:change={() => {
-                                serviceUpdate(service);
-                            }} />
+                        <span style:flex-basis="30%">
+                            <InputSwitch
+                                label={service.label}
+                                id={service.method}
+                                bind:value={service.value}
+                                on:change={() => serviceUpdate(service)} />
+                        </span>
                     {/each}
-                </FormList>
-            </form>
-        </div>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
     </svelte:fragment>
 </CardGrid>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
index 6e2f1c228..81ee6ada9 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -1,32 +1,24 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { BarChart, Legend } from '$lib/charts';
-    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
-    import Collapsible from '$lib/components/collapsible.svelte';
-    import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
-    import { BillingPlan } from '$lib/constants.js';
-    import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow,
-        TableRowLink
-    } from '$lib/elements/table';
-    import { getCountryName } from '$lib/helpers/diallingCodes.js';
-    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
-    import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
-    import { formatNum } from '$lib/helpers/string';
     import { Container } from '$lib/layout';
-    import { total } from '$lib/layout/usage.svelte';
+    import { CardGrid, Card, ProgressBarBig } from '$lib/components';
     import { showUsageRatesModal, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import { Button } from '$lib/elements/forms';
+    import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
+    import { BarChart, Legend } from '$lib/charts';
+    import { formatNum } from '$lib/helpers/string';
+    import { total } from '$lib/layout/usage.svelte';
+    import { BillingPlan } from '$lib/constants.js';
+    import { base } from '$app/paths';
+    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { getCountryName } from '$lib/helpers/diallingCodes.js';
+    import { Accordion, Icon, Layout, Link, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
+    import { page } from '$app/state';
 
     export let data;
 
-    $: baseRoute = `${base}/project-${data.project.region}-${data.project.$id}`;
+    $: baseRoute = `${base}/project-${page.params.region}-${page.params.project}`;
     $: network = data.usage.network;
     $: users = data.usage.users;
     $: usersTotal = data.usage.usersTotal;
@@ -48,24 +40,11 @@
 
     const tier = data?.currentInvoice?.plan ?? $organization?.billingPlan;
     const plan = tierToPlan(tier).name;
-
-    // let invoice = null;
-    // async function handlePeriodChange() {
-    //     const target = invoice ? `${base}/settings/usage/${invoice}` : `${base}/settings/usage`;
-    //     if ($page.url.pathname !== target) {
-    //         await goto(target);
-    //     }
-    // }
-
-    // const cycles = data.invoices.invoices.map((invoice) => ({
-    //     label: toLocaleDate(invoice.from),
-    //     value: invoice.$id
-    // }));
 </script>
 
 <Container>
     <div class="u-flex u-cross-center u-main-space-between">
-        <Heading tag="h2" size="5">Usage</Heading>
+        <Typography.Title>Usage</Typography.Title>
 
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Button href={$upgradeURL}>
@@ -77,55 +56,38 @@
         {#if $organization.billingPlan === BillingPlan.SCALE}
             <p class="text">
                 On the Scale plan, you'll be charged only for any usage that exceeds the thresholds
-                per resource listed below. <Button
+                per resource listed below. <Link.Button
                     on:click={() => ($showUsageRatesModal = true)}
-                    link>Learn more about plan usage limits.</Button>
+                    >Learn more about plan usage limits.</Link.Button>
             </p>
         {:else if $organization.billingPlan === BillingPlan.PRO}
             <p class="text">
                 On the Pro plan, you'll be charged only for any usage that exceeds the thresholds
-                per resource listed below. <Button
+                per resource listed below. <Link.Button
                     on:click={() => ($showUsageRatesModal = true)}
-                    link>Learn more about plan usage limits.</Button>
+                    >Learn more about plan usage limits.</Link.Button>
             </p>
         {:else if $organization.billingPlan === BillingPlan.FREE}
             <p class="text">
                 If you exceed the limits of the {plan} plan, services for your projects may be disrupted.
-                <a href={$upgradeURL} class="link">Upgrade for greater capacity</a>.
+                <Link.Anchor href={$upgradeURL} class="link"
+                    >Upgrade for greater capacity</Link.Anchor
+                >.
             </p>
         {/if}
-
-        <!--<div class="u-flex u-gap-8 u-cross-center">
-            <p class="text">Usage period:</p>
-            <InputSelect
-                wrapperTag="div"
-                id="period"
-                label="Usage period"
-                showLabel={false}
-                bind:value={invoice}
-                on:change={handlePeriodChange}
-                options={[
-                    {
-                        label: 'Current billing cycle',
-                        value: null
-                    },
-                    ...cycles
-                ]} />
-                </div>-->
     </div>
     <CardGrid>
-        <Heading tag="h4" size="7">Bandwidth</Heading>
-        <p class="text">
-            Calculated for all bandwidth used across your project. Resets at the start of each
-            billing cycle.
-        </p>
+        <svelte:fragment slot="title">Bandwidth</svelte:fragment>
+        Calculated for all bandwidth used across your project. Resets at the start of each billing cycle.
         <svelte:fragment slot="aside">
             {#if network}
                 {@const humanized = humanFileSize(total(network))}
-                <div class="u-flex u-gap-8 u-cross-baseline">
-                    <Heading tag="h5" size="4">{humanized.value}</Heading>
-                    <Heading tag="h6" size="6">{humanized.unit}</Heading>
-                </div>
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {humanized.value}
+                    </Typography.Title>
+                    <Typography.Text>{humanized.unit}</Typography.Text>
+                </Layout.Stack>
                 <BarChart
                     options={{
                         yAxis: {
@@ -151,33 +113,26 @@
                     ]} />
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Users</Heading>
-
-        <p class="text">Total user in your project.</p>
-
+        <svelte:fragment slot="title">Users</svelte:fragment>
+        Total user in your project.
         <svelte:fragment slot="aside">
             {#if users}
                 {@const current = formatNum(usersTotal)}
-                <div class="u-flex u-flex-vertical">
-                    <div class="u-flex u-main-space-between">
-                        <p>
-                            <span class="heading-level-4">{current}</span>
-                            <span class="body-text-1 u-bold">Users</span>
-                        </p>
-                    </div>
-                </div>
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {current}
+                    </Typography.Title>
+                    <Typography.Text>Users</Typography.Text>
+                </Layout.Stack>
                 <BarChart
                     options={{
                         yAxis: {
@@ -194,22 +149,17 @@
                     ]} />
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Database reads and writes</Heading>
-
-        <p class="text">Total database reads and writes in your project.</p>
-
+        <svelte:fragment slot="title">Database reads and writes</svelte:fragment>
+        Total database reads and writes in your project.
         <svelte:fragment slot="aside">
             {#if dbReads || dbWrites}
                 <div style:margin-top="-1.5em" style:margin-bottom="-1em">
@@ -240,7 +190,7 @@
                         <span
                             class="icon-chart-square-bar text-large"
                             aria-hidden="true"
-                            style="font-size: 32px;" />
+                            style="font-size: 32px;"></span>
                         <p class="u-bold">No data to show</p>
                     </div>
                 </Card>
@@ -248,10 +198,8 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Image transformations</Heading>
-
-        <p class="text">Total unique image transformations in your project.</p>
-
+        <svelte:fragment slot="title">Image transformations</svelte:fragment>
+        Total unique image transformations in your project.
         <svelte:fragment slot="aside">
             {#if imageTransformations}
                 {@const current = formatNum(imageTransformationsTotal)}
@@ -279,35 +227,26 @@
                     ]} />
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Executions</Heading>
-
-        <p class="text">
-            Calculated for all functions that are executed in all projects in your project.
-        </p>
-
+        <svelte:fragment slot="title">Executions</svelte:fragment>
+        Calculated for all functions that are executed in all projects in your project.
         <svelte:fragment slot="aside">
             {#if executions}
                 {@const current = formatNum(executionsTotal)}
-                <div class="u-flex u-flex-vertical">
-                    <div class="u-flex u-main-space-between">
-                        <p>
-                            <span class="heading-level-4">{current}</span>
-                            <span class="body-text-1 u-bold">Executions</span>
-                        </p>
-                    </div>
-                </div>
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {current}
+                    </Typography.Title>
+                    <Typography.Text>Executions</Typography.Text>
+                </Layout.Stack>
                 <BarChart
                     options={{
                         yAxis: {
@@ -323,50 +262,38 @@
                         }
                     ]} />
                 {#if data.usage.executionsBreakdown.length > 0}
-                    <Table noMargin noStyles style="table-layout: auto">
-                        <TableHeader>
-                            <TableCellHead>Function</TableCellHead>
-                            <TableCellHead>Usage</TableCellHead>
-                            <TableCellHead />
-                        </TableHeader>
-                        <TableBody>
-                            {#each data.usage.executionsBreakdown as func}
-                                <TableRowLink
-                                    href={`${baseRoute}/functions/function-${func.resourceId}`}>
-                                    <TableCell title="Function">
-                                        {func.name ?? func.resourceId}
-                                    </TableCell>
-                                    <TableCell title="Usage">
-                                        {formatNum(func.value)} executions
-                                    </TableCell>
-                                    <TableCell right={true}>
-                                        <span class="icon-cheveron-right u-cross-child-center" />
-                                    </TableCell>
-                                </TableRowLink>
-                            {/each}
-                        </TableBody>
-                    </Table>
+                    <Table.Root columns={2} let:root>
+                        <svelte:fragment slot="header" let:root>
+                            <Table.Header.Cell {root}>Function</Table.Header.Cell>
+                            <Table.Header.Cell {root}>Usage</Table.Header.Cell>
+                        </svelte:fragment>
+                        {#each data.usage.executionsBreakdown as func}
+                            <Table.Row.Link
+                                href={`${baseRoute}/functions/function-${func.resourceId}`}
+                                {root}>
+                                <Table.Cell {root}>
+                                    {func.name ?? func.resourceId}
+                                </Table.Cell>
+                                <Table.Cell {root}>
+                                    {formatNum(func.value)} executions
+                                </Table.Cell>
+                            </Table.Row.Link>
+                        {/each}
+                    </Table.Root>
                 {/if}
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Storage</Heading>
-
-        <p class="text">
-            Calculated for all your files, deployments, builds, databases and backups.
-        </p>
-
+        <svelte:fragment slot="title">Storage</svelte:fragment>
+        Calculated for all your files, deployments, builds, databases and backups.
         <svelte:fragment slot="aside">
             {#if storage}
                 {@const humanized = humanFileSize(storage)}
@@ -396,38 +323,30 @@
                         }
                     }
                 ]}
-                <div class="u-flex u-flex-vertical">
-                    <div class="u-flex u-main-space-between">
-                        <p>
-                            <span class="heading-level-4">{humanized.value}</span>
-                            <span class="body-text-1 u-bold">{humanized.unit}</span>
-                        </p>
-                    </div>
-                </div>
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {humanized.value}
+                    </Typography.Title>
+                    <Typography.Text>{humanized.unit}</Typography.Text>
+                </Layout.Stack>
                 <ProgressBarBig
                     progressValue={bytesToSize(storage, 'MB')}
                     progressMax={bytesToSize(storage, 'MB')}
                     progressBarData={progressBarStorageDate} />
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">GB hours</Heading>
-
-        <p class="text">
-            GB hours represent the memory usage (in gigabytes) of your function executions and
-            builds, multiplied by the total execution time (in hours).
-        </p>
+        <svelte:fragment slot="title">GB hours</svelte:fragment>
+        GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied
+        by the total execution time (in hours).
         <svelte:fragment slot="aside">
             {#if data.usage.executionsMbSecondsTotal}
                 {@const totalGbHours = mbSecondsToGBHours(
@@ -451,48 +370,39 @@
                         }
                     }
                 ]}
-                <div class="u-flex u-flex-vertical">
-                    <div class="u-flex u-main-space-between">
-                        <p>
-                            <span class="heading-level-4"
-                                >{(Math.ceil(totalGbHours * 100) / 100).toLocaleString(
-                                    'en-US'
-                                )}</span>
-                            <span class="body-text-1 u-bold">{`GB hours`}</span>
-                        </p>
-                    </div>
-                </div>
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {(Math.ceil(totalGbHours * 100) / 100).toLocaleString('en-US')}
+                    </Typography.Title>
+                    <Typography.Text>GB hours</Typography.Text>
+                </Layout.Stack>
                 <ProgressBarBig
                     progressMax={totalGbHours}
                     progressValue={totalGbHours}
                     progressBarData={progressBarStorageDate} />
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Phone OTP</Heading>
-        <p class="text">
-            Calculated for all Phone OTP sent across your project. Resets at the start of each
-            billing cycle.
-        </p>
+        <svelte:fragment slot="title">Phone OTP</svelte:fragment>
+        Calculated for all Phone OTP sent across your project. Resets at the start of each billing cycle.<br />
+        You will not be charged for Phone OTPs before February 10th.
         <svelte:fragment slot="aside">
             {#if data.usage.authPhoneTotal}
                 <div class="u-flex u-main-space-between">
-                    <p>
-                        <span class="heading-level-4"
-                            >{formatNumberWithCommas(data.usage.authPhoneTotal)}</span>
-                        <span class="body-text-1 u-bold">OTPs</span>
-                    </p>
+                    <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                        <Typography.Title>
+                            {formatNumberWithCommas(data.usage.authPhoneTotal)}
+                        </Typography.Title>
+                        <Typography.Text>OTPs</Typography.Text>
+                    </Layout.Stack>
                     <p class="u-flex u-gap-8 u-cross-center">
                         <span class="u-color-text-offline">Estimated cost</span>
                         <span class="body-text-2">
@@ -501,43 +411,35 @@
                     </p>
                 </div>
                 {#if data.usage.authPhoneCountryBreakdown.length > 0}
-                    <Collapsible>
-                        <CollapsibleItem>
-                            <svelte:fragment slot="title">Region breakdown</svelte:fragment>
-                            <Table noMargin noStyles style="table-layout: auto">
-                                <TableHeader>
-                                    <TableCellHead>Region</TableCellHead>
-                                    <TableCellHead>Amount</TableCellHead>
-                                    <TableCellHead>Estimated cost</TableCellHead>
-                                </TableHeader>
-                                <TableBody>
-                                    {#each data.usage.authPhoneCountryBreakdown as phone}
-                                        <TableRow>
-                                            <TableCell title="Region">
-                                                {getCountryName(phone.name)}
-                                            </TableCell>
-                                            <TableCell title="Usage">
-                                                {formatNumberWithCommas(phone.value)}
-                                            </TableCell>
-                                            <TableCell title="Estimated cost">
-                                                {formatCurrency(phone.estimate)}
-                                            </TableCell>
-                                        </TableRow>
-                                    {/each}
-                                </TableBody>
-                            </Table>
-                        </CollapsibleItem>
-                    </Collapsible>
+                    <Accordion title="Region breakdown">
+                        <Table.Root columns={3} let:root>
+                            <svelte:fragment slot="header" let:root>
+                                <Table.Header.Cell {root}>Region</Table.Header.Cell>
+                                <Table.Header.Cell {root}>Amount</Table.Header.Cell>
+                                <Table.Header.Cell {root}>Estimated cost</Table.Header.Cell>
+                            </svelte:fragment>
+                            {#each data.usage.authPhoneCountryBreakdown as phone}
+                                <Table.Row.Base {root}>
+                                    <Table.Cell {root}>
+                                        {getCountryName(phone.name)}
+                                    </Table.Cell>
+                                    <Table.Cell {root}>
+                                        {formatNumberWithCommas(phone.value)}
+                                    </Table.Cell>
+                                    <Table.Cell {root}>
+                                        {formatCurrency(phone.estimate)}
+                                    </Table.Cell>
+                                </Table.Row.Base>
+                            {/each}
+                        </Table.Root>
+                    </Accordion>
                 {/if}
             {: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>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
                 </Card>
             {/if}
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index 9063f3da8..3d642cd9e 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -1,53 +1,27 @@
-<script lang="ts" context="module">
-    export function openWebhooksWizard() {
-        if (!get(canWriteWebhooks)) {
-            return;
-        }
-        wizard.start(Create);
-    }
-</script>
-
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Empty, Id } from '$lib/components';
-    import {
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCell,
-        TableCellText,
-        TableHeader,
-        TableScroll
-    } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container, GridHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
-    import { wizard } from '$lib/stores/wizard';
     import type { PageData } from './$types';
     import { columns } from './store';
     import { updateCommandGroupRanks } from '$lib/commandCenter';
     import { type Models } from '@appwrite.io/console';
-    import Create from './createWebhook.svelte';
     import FailedModal from './failedModal.svelte';
-    import MessageStatusPill from './messageStatusPill.svelte';
     import { canWriteWebhooks } from '$lib/stores/roles';
-    import { get } from 'svelte/store';
+    import { Icon, Layout, Link, Status, Table } from '@appwrite.io/pink-svelte';
+    import ViewSelector from '$lib/components/viewSelector.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { View } from '$lib/helpers/load';
+    import { goto } from '$app/navigation';
 
     export let data: PageData;
 
     let showFailed = false;
     let selectedWebhook: Models.Webhook;
 
-    function openWizard() {
-        if (!$canWriteWebhooks) {
-            return;
-        }
-        wizard.start(Create);
-    }
-
-    const projectId = $page.params.project;
-
     $: $updateCommandGroupRanks({ webhooks: 20, domains: 10 });
 </script>
 
@@ -56,81 +30,72 @@
 </svelte:head>
 
 <Container>
-    <GridHeader title="Webhooks" {columns} view={data.view} hideColumns={false} hideView={true}>
+    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+        <ViewSelector {columns} view={View.Table} hideView />
         {#if $canWriteWebhooks}
-            <Button on:click={openWizard} event="create_webhook">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create webhook</span>
+            <Button
+                href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
+                event="create_webhook">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create webhook
             </Button>
         {/if}
-    </GridHeader>
+    </Layout.Stack>
 
     {#if data.webhooks.total}
-        <TableScroll>
-            <TableHeader>
-                {#each $columns as column}
-                    {#if column.show}
-                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
-                    {/if}
+        <Table.Root columns={$columns} let:root>
+            <svelte:fragment slot="header" let:root>
+                {#each $columns as { id, title }}
+                    <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
                 {/each}
-            </TableHeader>
-            <TableBody service="webhooks" total={data.webhooks.total}>
-                {#each data.webhooks.webhooks as webhook}
-                    <TableRowLink
-                        href={`${base}/project-${$page.params.region}-${projectId}/settings/webhooks/${webhook.$id}`}>
-                        {#each $columns as column (column.id)}
-                            {#if column.show}
-                                {#if column.id === '$id'}
-                                    {#key $columns}
-                                        <TableCell title={column.title} width={column.width}>
-                                            <Id value={webhook.$id}>{webhook.$id}</Id>
-                                        </TableCell>
-                                    {/key}
-                                {:else if column.id === 'events'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {webhook.events.length}
-                                    </TableCellText>
-                                {:else if column.type === 'datetime'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {#if !webhook[column.id]}
-                                            -
-                                        {:else}
-                                            {toLocaleDateTime(webhook[column.id])}
-                                        {/if}
-                                    </TableCellText>
-                                {:else if column.id === 'enabled'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        <MessageStatusPill enabled={webhook.enabled} />
+            </svelte:fragment>
+            {#each data.webhooks.webhooks as webhook}
+                <Table.Row.Link
+                    {root}
+                    href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${webhook.$id}`}>
+                    {#each $columns as column (column.id)}
+                        <Table.Cell column={column.id} {root}>
+                            {#if column.id === '$id'}
+                                {#key $columns}
+                                    <Id value={webhook.$id}>{webhook.$id}</Id>
+                                {/key}
+                            {:else if column.id === 'events'}
+                                {webhook.events.length}
+                            {:else if column.type === 'datetime'}
+                                {webhook[column.id] ? toLocaleDateTime(webhook[column.id]) : '-'}
+                            {:else if column.id === 'enabled'}
+                                <Layout.Stack direction="row" gap="s" alignItems="normal">
+                                    <Status
+                                        label={webhook.enabled ? 'Enabled' : 'Disabled'}
+                                        status={webhook.enabled ? 'complete' : 'failed'} />
 
-                                        &nbsp;
-
-                                        {#if webhook.enabled === false}
-                                            <Button
-                                                link
-                                                on:click={(e) => {
-                                                    e.preventDefault();
-                                                    selectedWebhook = webhook;
-                                                    showFailed = true;
-                                                }}>Details</Button>
-                                        {/if}
-                                    </TableCellText>
-                                {:else}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {webhook[column.id]}
-                                    </TableCellText>
-                                {/if}
+                                    {#if webhook.enabled === false}
+                                        <Link.Button
+                                            variant="muted"
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                selectedWebhook = webhook;
+                                                showFailed = true;
+                                            }}>Details</Link.Button>
+                                    {/if}
+                                </Layout.Stack>
+                            {:else}
+                                {webhook[column.id]}
                             {/if}
-                        {/each}
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </TableScroll>
+                        </Table.Cell>
+                    {/each}
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
     {:else}
         <Empty
             single
             href="https://appwrite.io/docs/advanced/platform/webhooks"
             target="webhook"
-            on:click={openWizard} />
+            on:click={() =>
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`
+                )} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.ts
index 048eb91ce..7cfa65995 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.ts
@@ -1,17 +1,15 @@
 import { Dependencies } from '$lib/constants';
-import { View, getPage, getView } from '$lib/helpers/load';
+import { getPage } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, url, route, depends }) => {
+export const load: PageLoad = async ({ params, url, depends }) => {
     depends(Dependencies.WEBHOOKS);
 
     const page = getPage(url);
-    const view = getView(params.project, url, route, View.Grid);
 
     return {
         page,
-        view,
         webhooks: await sdk.forConsole.projects.listWebhooks(params.project)
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
index e4fc8517c..21da5269b 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/settings/webhooks`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks`,
             title: 'Settings'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/settings/webhooks/webhook/${$webhook?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/webhook/${$webhook?.$id}`,
             title: $webhook?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/dangerZone.svelte
index ad4b0cf0c..424dd7259 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/dangerZone.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { webhook } from './store';
     import Delete from './delete.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Card, Typography } from '@appwrite.io/pink-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h2" size="7">Delete webhook</Heading>
-    </div>
-    <p>The webhook will be permanently deleted. This action is irreversible.</p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete webhooks</svelte:fragment>
+    The webhook will be permanently deleted. This action is irreversible.
     <svelte:fragment slot="aside">
-        <BoxAvatar>
-            <svelte:fragment slot="title">
-                <h6 class="u-bold u-trim-1">{$webhook.name}</h6>
-            </svelte:fragment>
-            <p>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</p>
-        </BoxAvatar>
+        <Card.Base variant="secondary" padding="s">
+            <Typography.Text variant="m-600">{$webhook.name}</Typography.Text>
+            <Typography.Text>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</Typography.Text>
+        </Card.Base>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        <Button
+            secondary
+            on:click={() => {
+                showDelete = true;
+                trackEvent(Click.SettingsWebhookDeleteClick);
+            }}>Delete</Button>
     </svelte:fragment>
 </CardGrid>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte
index 2fc48dae7..03aa60206 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte
@@ -2,16 +2,16 @@
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../../../store';
     import { webhook } from './store';
 
     export let showDelete = false;
-
+    let error: string;
     async function handleDelete() {
         try {
             await sdk.forConsole.projects.deleteWebhook($project.$id, $webhook.$id);
@@ -23,28 +23,15 @@
             });
             trackEvent(Submit.WebhookDelete);
             await goto(`${base}/project-${$project.region}-${$project.$id}/settings/webhooks`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.WebhookDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.WebhookDelete);
         }
     }
 </script>
 
-<Modal
-    title="Delete webhook"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>
+<Confirm onSubmit={handleDelete} title="Delete webhook" bind:open={showDelete} bind:error>
+    <Typography.Text>
         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>
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/details.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/details.svelte
index 37424e263..49d29a42b 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/details.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/details.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import { InputSwitch } from '$lib/elements/forms';
     import { webhook } from './store';
@@ -12,10 +12,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import MessageStatusPill from '../messageStatusPill.svelte';
-    import FormList from '$lib/elements/forms/formList.svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     let enabled: boolean;
 
@@ -55,22 +53,18 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">{$webhook.url}</Heading>
-
+    <svelte:fragment slot="title">{$webhook.name}</svelte:fragment>
     <svelte:fragment slot="aside">
         <div class="u-flex u-gap-16">
             <ul class="u-stretch">
-                <FormList>
-                    <InputSwitch
-                        label={enabled ? 'Enabled' : 'Disabled'}
-                        id="enable-switch"
-                        bind:value={enabled} />
-                </FormList>
+                <InputSwitch
+                    label={enabled ? 'Enabled' : 'Disabled'}
+                    id="enable-switch"
+                    bind:value={enabled} />
 
                 <li style="margin-top:16px">Created: {toLocaleDateTime($webhook.$createdAt)}</li>
                 <li>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</li>
             </ul>
-            <MessageStatusPill enabled={$webhook.enabled} />
         </div>
     </svelte:fragment>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte
index a64993d69..54f69c8ee 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { webhook } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/settings/webhooks`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/settings/webhooks`}>
             {$webhook?.name}
         </CoverTitle>
         <Id value={$webhook?.$id} event="webhook">{$webhook?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/regenerate.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/regenerate.svelte
index a57746991..debc8b833 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/regenerate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/regenerate.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
+    import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { webhook } from './store';
 
     export let show = false;
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     async function regenerate() {
         try {
@@ -32,13 +31,7 @@
     }
 </script>
 
-<Modal title="Regenerate Key" bind:show onSubmit={regenerate}>
-    <p class="u-text">
-        Are you sure you want to generate a new Signature Key?
-        <b>You will not be able to recover the current key.</b>
-    </p>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit>Regenerate</Button>
-    </svelte:fragment>
-</Modal>
+<Confirm title="Regenerate Key" bind:open={show} onSubmit={regenerate} action="Regenerate">
+    Are you sure you want to generate a new Signature key?
+    <b>You will not be able to recover the current key.</b>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateEvents.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateEvents.svelte
index 5852e3d74..a7f191b8a 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateEvents.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateEvents.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Empty, EventModal, Heading } from '$lib/components';
+    import { CardGrid, Empty, EventModal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
-    import { TableCell, TableCellText, TableList } from '$lib/elements/table';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { writable, type Writable } from 'svelte/store';
     import { webhook } from './store';
+    import { Icon, Layout, Link, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     const eventSet: Writable<Set<string>> = writable(new Set());
 
     let showCreateEvent = false;
@@ -67,36 +68,37 @@
 
 <Form onSubmit={updateEvents}>
     <CardGrid>
-        <Heading tag="h6" size="7">Events</Heading>
-        <p class="text">
-            Set the events that will trigger your webhook. Maximum 100 events allowed.
-        </p>
+        <svelte:fragment slot="title">Events</svelte:fragment>
+        Set the events that will trigger your webhook. Maximum 100 events allowed.
         <svelte:fragment slot="aside">
             {#if $eventSet.size}
-                <TableList>
+                <Table.Root columns={1} let:root>
                     {#each Array.from($eventSet) as event}
-                        <li class="table-row">
-                            <TableCellText title="id">
-                                {event}
-                            </TableCellText>
-                            <TableCell showOverflow title="options" width={40}>
-                                <button
-                                    class="button is-text is-only-icon"
-                                    aria-label="delete id"
-                                    on:click|preventDefault={() => {
-                                        $eventSet.delete(event);
-                                        eventSet.set($eventSet);
-                                    }}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </button>
-                            </TableCell>
-                        </li>
+                        <Table.Row.Base {root}>
+                            <Table.Cell {root}>
+                                <Layout.Stack
+                                    direction="row"
+                                    justifyContent="space-between"
+                                    alignItems="center">
+                                    {event}
+                                    <Button
+                                        extraCompact
+                                        ariaLabel="delete event"
+                                        on:click={() => {
+                                            $eventSet.delete(event);
+                                            eventSet.set($eventSet);
+                                        }}>
+                                        <Icon icon={IconX} size="s" />
+                                    </Button>
+                                </Layout.Stack>
+                            </Table.Cell>
+                        </Table.Row.Base>
                     {/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>
+                </Table.Root>
+                <div>
+                    <Button secondary on:click={() => (showCreateEvent = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add event
                     </Button>
                 </div>
             {:else}
@@ -111,12 +113,11 @@
 </Form>
 
 <EventModal bind:show={showCreateEvent} on:created={handleEvent}>
-    <p class="text">
-        Select events in your Appwrite project that will trigger your webhook. <a
+    <Typography.Text>
+        Select events in your Appwrite project that will trigger your webhook. <Link.Anchor
             href="https://appwrite.io/docs/advanced/platform/events"
             target="_blank"
             rel="noopener noreferrer"
-            class="link">Learn more about Appwrite Events</a
-        >.
-    </p>
+            class="link">Learn more</Link.Anchor>
+    </Typography.Text>
 </EventModal>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateName.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateName.svelte
index fcbca7cd7..a23919ce8 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateName.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { webhook } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let name: string = null;
 
     onMount(async () => {
@@ -48,17 +48,10 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h2" size="7">Name</Heading>
-        <p>Choose any name that will help you distinguish between Webhooks.</p>
+        <svelte:fragment slot="title">Name</svelte:fragment>
+        Choose any name that will help you distinguish between Webhooks.
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="name"
-                    label="Name"
-                    bind:value={name}
-                    required
-                    placeholder="Enter name" />
-            </FormList>
+            <InputText id="name" label="Name" bind:value={name} required placeholder="Enter name" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSecurity.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
index afdbaed62..db499d775 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
@@ -1,23 +1,17 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import {
-        Button,
-        Form,
-        FormList,
-        InputChoice,
-        InputPassword,
-        InputText
-    } from '$lib/elements/forms';
+    import { Button, Form, InputPassword, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { webhook } from './store';
+    import { Selector, Typography } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let httpUser: string = null;
     let httpPass: string = null;
     let security = false;
@@ -59,44 +53,35 @@
 
 <Form onSubmit={updateSecurity}>
     <CardGrid>
-        <Heading tag="h2" size="7">Security</Heading>
-        <p class="text">
-            Set an optional basic HTTP authentication username and password to protect your endpoint
-            from unauthorized access.
-        </p>
+        <svelte:fragment slot="title">Security</svelte:fragment>
+        Set an optional basic HTTP authentication username and password to protect your endpoint from
+        unauthorized access.
         <svelte:fragment slot="aside">
-            <FormList>
-                <div>
-                    <Heading tag="h3" size="7">HTTP Authentication</Heading>
-                    <p class="text">Use to secure your endpoint from untrusted sources.</p>
-                </div>
-                <InputText
-                    label="User"
-                    id="user"
-                    placeholder="Enter username"
-                    bind:value={httpUser} />
-                <InputPassword
-                    label="Password"
-                    id="password"
-                    minlength={0}
-                    showPasswordButton
-                    placeholder="Enter password"
-                    bind:value={httpPass} />
+            <div>
+                <Typography.Title size="s">HTTP Authentication</Typography.Title>
+                <p class="text">Use to secure your endpoint from untrusted sources.</p>
+            </div>
+            <InputText label="User" id="user" placeholder="Enter username" bind:value={httpUser} />
+            <InputPassword
+                label="Password"
+                id="password"
+                minlength={0}
+                placeholder="Enter password"
+                bind:value={httpPass} />
 
-                <InputChoice
-                    id="Security"
-                    label="Certificate verification (SSL/TLS)"
-                    bind:value={security}>
-                    <span class="u-color-text-danger">Warning:</span> Untrusted or self-signed
-                    certificates may not be secure.
-                    <a
-                        href="https://appwrite.io/docs/advanced/self-hosting/tls-certificates"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="link">
-                        Learn more</a>
-                </InputChoice>
-            </FormList>
+            <Selector.Checkbox
+                id="security"
+                label="Certificate verification (SSL/TLS)"
+                bind:checked={security}
+                description="Placeholder" />
+            <!-- <span class="u-color-text-danger">Warning:</span> Untrusted or self-signed certificates
+            may not be secure.
+            <a
+                href="https://appwrite.io/docs/advanced/self-hosting/tls-certificates"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">
+                Learn more</a> -->
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSignature.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSignature.svelte
index 4d2db1e82..1632e7dbc 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSignature.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateSignature.svelte
@@ -1,29 +1,35 @@
 <script lang="ts">
-    import { CardGrid, Heading, Secret } from '$lib/components';
+    import { CardGrid, Secret } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Link } from '@appwrite.io/pink-svelte';
     import Regenerate from './regenerate.svelte';
     import { webhook } from './store';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     let showRegenerate = false;
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">Signature key</Heading>
-    <p>
-        Add the Signature Key to the X-Appwrite-Webhook-Signature header to validate your webhooks. <a
-            href="https://appwrite.io/docs/advanced/platform/webhooks#verification"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">Learn more about webhook validation.</a>
-    </p>
+    <svelte:fragment slot="title">Signature key</svelte:fragment>
+    Add the Signature Key to the X-Appwrite-Webhook-Signature header to validate your webhooks.
+    <Link.Anchor
+        href="https://appwrite.io/docs/advanced/platform/webhooks#verification"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link">Learn more</Link.Anchor>
     <svelte:fragment slot="aside">
         <div>
-            <p>Key</p>
-            <Secret copyEvent="signature" bind:value={$webhook.signatureKey} />
+            <Secret label="Key" copyEvent="signature" 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;
+                trackEvent(Click.SettingsWebhookUpdateSignatureClick);
+            }}
+            secondary
+            submit>Regenerate key</Button>
     </svelte:fragment>
 </CardGrid>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateURL.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateURL.svelte
index c37169404..cf41f800c 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateURL.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/updateURL.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { webhook } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
     let url: string = null;
 
     onMount(async () => {
@@ -48,17 +48,14 @@
 
 <Form onSubmit={updateUrl}>
     <CardGrid>
-        <Heading tag="h2" size="7">URL</Heading>
-
+        <svelte:fragment slot="title">URL</svelte:fragment>
         <svelte:fragment slot="aside">
-            <FormList>
-                <InputText
-                    id="url"
-                    label="POST URL"
-                    bind:value={url}
-                    required
-                    placeholder="https://example.com/callback" />
-            </FormList>
+            <InputText
+                id="url"
+                label="POST URL"
+                bind:value={url}
+                required
+                placeholder="https://example.com/callback" />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
new file mode 100644
index 000000000..4b21c8848
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { goto } from '$app/navigation';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import Step1 from './step1.svelte';
+    import Step2 from './step2.svelte';
+    import Step3 from './step3.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+
+    let showExitModal = false;
+
+    let name = '',
+        events: string[] = [],
+        url = '',
+        security = true,
+        httpUser = '',
+        httpPass = '';
+
+    export let data;
+    async function create() {
+        try {
+            const webhook = await sdk.forConsole.projects.createWebhook(
+                data.project.$id,
+                name,
+                events,
+                url,
+                security,
+                true,
+                httpUser || undefined,
+                httpPass || undefined
+            );
+            addNotification({
+                message: 'Webhook has been created',
+                type: 'success'
+            });
+            trackEvent(Submit.WebhookCreate, {
+                events: events
+            });
+            goto(
+                `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${webhook.$id}`
+            );
+        } catch (error) {
+            trackError(error.message, Submit.DomainCreate);
+            throw new Error(error.message);
+        }
+    }
+</script>
+
+<Form onSubmit={create}>
+    <Wizard
+        title="Create webhook"
+        href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks`}
+        bind:showExitModal
+        column
+        confirmExit>
+        <Layout.Stack gap="xxl">
+            <Step1 bind:name bind:url />
+            <Step2 bind:events />
+            <Step3 bind:httpUser bind:httpPass bind:security />
+        </Layout.Stack>
+
+        <svelte:fragment slot="footer">
+            <Button submit>Create webhook</Button>
+        </svelte:fragment>
+    </Wizard>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte
new file mode 100644
index 000000000..e4595151e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { InputText, InputURL } from '$lib/elements/forms';
+    import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
+
+    export let name: string;
+    export let url: string;
+</script>
+
+<Fieldset legend="Configuration">
+    <Layout.Stack gap="s">
+        <InputText label="Name" id="name" placeholder="Enter name" bind:value={name} required />
+        <InputURL
+            label="POST URL"
+            id="url"
+            placeholder="https://example.com/callback"
+            bind:value={url}
+            required />
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step2.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step2.svelte
new file mode 100644
index 000000000..228109413
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step2.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Empty } from '$lib/components';
+    import { EventModal } from '$lib/components';
+    import { Icon, Typography, Link, Table, Layout, Fieldset } from '@appwrite.io/pink-svelte';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+
+    let showCreate = false;
+
+    export let events: string[];
+
+    const eventSet = new Set<string>();
+
+    function handleCreated(event: CustomEvent) {
+        eventSet.add(event.detail);
+        events = Array.from(eventSet);
+    }
+</script>
+
+<Fieldset legend="Events">
+    <Layout.Stack gap="s">
+        {#if events.length}
+            <Table.Root columns={1} let:root>
+                {#each events as event}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center">
+                                {event}
+                                <Button
+                                    extraCompact
+                                    ariaLabel="delete event"
+                                    on:click={() => {
+                                        eventSet.delete(event);
+                                        events = Array.from(eventSet);
+                                    }}>
+                                    <Icon icon={IconX} size="s" />
+                                </Button>
+                            </Layout.Stack>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+            <div>
+                <Button secondary on:click={() => (showCreate = !showCreate)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add event
+                </Button>
+            </div>
+        {:else}
+            <Empty on:click={() => (showCreate = !showCreate)}>Add an event</Empty>
+        {/if}
+    </Layout.Stack>
+</Fieldset>
+
+{#if showCreate}
+    <EventModal bind:show={showCreate} on:created={handleCreated}>
+        <Typography.Text>
+            Select events in your Appwrite project that will trigger your webhook. <Link.Anchor
+                href="https://appwrite.io/docs/advanced/platform/events"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Learn more</Link.Anchor>
+        </Typography.Text>
+    </EventModal>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step3.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step3.svelte
new file mode 100644
index 000000000..e782e0398
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step3.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { InputText, InputPassword, InputChoice } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { Alert, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let httpUser: string;
+    export let httpPass: string;
+    export let security: boolean;
+</script>
+
+<Fieldset legend="Security">
+    <Layout.Stack gap="xl">
+        <Layout.Stack gap="s">
+            <InputChoice
+                type="switchbox"
+                id="Security"
+                label="Certificate verification (SSL/TLS)"
+                bind:value={security} />
+            {#if !security}
+                <Alert.Inline
+                    status="warning"
+                    title="Untrusted or self-signed certificates may not be secure.">
+                    <Button
+                        compact
+                        href="https://appwrite.io/docs/advanced/self-hosting/tls-certificates"
+                        external>
+                        Learn more</Button>
+                </Alert.Inline>
+            {/if}
+        </Layout.Stack>
+        <Layout.Stack gap="m">
+            <div>
+                <Typography.Text variant="m-600">HTTP authentication</Typography.Text>
+                <Typography.Text
+                    >Use to secure your endpoint from untrusted sources.</Typography.Text>
+            </div>
+            <InputText label="User" id="user" placeholder="Enter username" bind:value={httpUser} />
+            <InputPassword
+                label="Password"
+                id="password"
+                placeholder="Enter password"
+                minlength={0}
+                bind:value={httpPass} />
+        </Layout.Stack>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/createWebhook.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/createWebhook.svelte
deleted file mode 100644
index 401719b1e..000000000
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/createWebhook.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import { onDestroy } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { wizard } from '$lib/stores/wizard';
-    import { createWebhook } from './wizard/store';
-    import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
-    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';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-
-    const projectId = $page.params.project;
-    async function create() {
-        try {
-            await sdk.forConsole.projects.createWebhook(
-                projectId,
-                $createWebhook.name,
-                $createWebhook.events,
-                $createWebhook.url,
-                $createWebhook.security,
-                true,
-                $createWebhook.httpUser || undefined,
-                $createWebhook.httpPass || undefined
-            );
-            await invalidate(Dependencies.WEBHOOKS);
-            addNotification({
-                message: 'Webhook has been created',
-                type: 'success'
-            });
-            wizard.hide();
-            trackEvent(Submit.WebhookCreate, {
-                events: $createWebhook.events
-            });
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.WebhookCreate);
-        }
-    }
-
-    onDestroy(() => {
-        $createWebhook = {
-            name: null,
-            url: null,
-            events: [],
-            security: false,
-            httpUser: null,
-            httpPass: null
-        };
-    });
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Configure',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Events',
-        component: Step2
-    });
-    stepsComponents.set(3, {
-        label: 'Security',
-        component: Step3,
-        optional: true
-    });
-</script>
-
-<Wizard confirmExit title="Create Webhook" steps={stepsComponents} on:finish={create}>
-    <svelte:fragment slot="exit">Are you sure you want to exit from this process?</svelte:fragment>
-</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte
index 897986ebb..70673eff1 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     import Code from '$lib/components/code.svelte';
     import Modal from '$lib/components/modal.svelte';
@@ -11,10 +11,10 @@
     export let webhook: Models.Webhook;
     export let showUpdateButton: boolean = true;
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     $: webhookPath = webhook
-        ? `${base}/project-${$page.params.region}-${projectId}/settings/webhooks/` +
+        ? `${base}/project-${page.params.region}-${projectId}/settings/webhooks/` +
           (webhook['$id'] ?? '')
         : '';
 
@@ -24,11 +24,11 @@
     $: iconClass = enabled ? 'icon-check-circle' : 'icon-exclamation-circle';
 </script>
 
-<Modal title="Webhook error" headerDivider={false} bind:show size="big">
+<Modal title="Webhook error" bind:show>
     <div class="box u-flex-vertical u-gap-24">
         <div class="u-inline-flex u-cross-center u-gap-8">
             <p class="u-stretch">
-                <span class={`${iconClass} u-font-size-20`} aria-hidden="true" {style} />
+                <span class={`${iconClass} u-font-size-20`} aria-hidden="true" {style}></span>
                 <span>Webhook {webhook.enabled ? 'enabled' : 'disabled'}</span>
             </p>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
index 2c12a4ee0..75e6dd5a6 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
@@ -9,7 +9,7 @@
 
 <Pill success={enabled} danger={!enabled} on:click>
     <span class="text u-font-size-12 u-trim">
-        <span class={iconClass} aria-hidden="true" {style} />
+        <span class={iconClass} aria-hidden="true" {style}></span>
 
         <span>{enabled ? 'enabled' : 'stopped'}</span>
     </span>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/store.ts b/src/routes/(console)/project-[region]-[project]/settings/webhooks/store.ts
index 4d7bfd323..85f0e8159 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/store.ts
@@ -1,17 +1,12 @@
-// import { page } from '$app/stores';
 import type { Column } from '$lib/helpers/types';
-// import type { Models } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
 
-// export const database = derived(page, ($page) => $page.data.database as Models.Database);
-// export const showCreate = writable(false);
-
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Webhook ID', type: 'string', show: true, width: 150 },
-    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
-    { id: 'url', title: 'Post URL', type: 'string', show: true, width: 120 },
-    { id: 'events', title: 'Events', type: 'string', show: true, width: 60 },
-    { id: 'enabled', title: 'Status', type: 'string', show: true, width: 150 },
-    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+    { id: '$id', title: 'Webhook ID', type: 'string', hide: true, width: 200 },
+    { id: 'name', title: 'Name', type: 'string', width: { min: 200 } },
+    { id: 'url', title: 'Post URL', type: 'string', width: { min: 200 } },
+    { id: 'events', title: 'Events', type: 'string', width: { min: 120 } },
+    { id: 'enabled', title: 'Status', type: 'string', width: { min: 180 } },
+    { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 200 } },
+    { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 200 } }
 ]);
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step1.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step1.svelte
deleted file mode 100644
index c48e6b0ab..000000000
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step1.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { InputText, InputURL, FormList } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { createWebhook } from './store';
-    //TODO: Create InputURL component
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Configuration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Use webhooks to build integrations that subscribe to specific events on Appwrite. Appwrite
-        will send an HTTP POST payload to the webhook's configured URL when one of the specified
-        events is triggered.
-    </svelte:fragment>
-    <FormList>
-        <InputText
-            label="Name"
-            id="name"
-            placeholder="Enter name"
-            bind:value={$createWebhook.name}
-            required />
-        <InputURL
-            label="POST URL"
-            id="url"
-            placeholder="https://example.com/callback"
-            bind:value={$createWebhook.url}
-            required />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step2.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step2.svelte
deleted file mode 100644
index 591ecc903..000000000
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step2.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { Button } from '$lib/elements/forms';
-    import { Empty } from '$lib/components';
-    import { createWebhook } from './store';
-    import { EventModal } from '$lib/components';
-    import { TableList, TableCellText, TableCell } from '$lib/elements/table';
-
-    let showCreate = false;
-
-    let eventSet = new Set<string>();
-
-    function handleCreated(event: CustomEvent) {
-        eventSet.add(event.detail);
-        $createWebhook.events = Array.from(eventSet);
-    }
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Webhook events</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Set the events that will trigger your function. Maximum 100 events allowed.
-    </svelte:fragment>
-
-    {#if $createWebhook?.events?.length}
-        <TableList>
-            {#each $createWebhook.events as event}
-                <li class="table-row">
-                    <TableCellText title="id">
-                        {event}
-                    </TableCellText>
-                    <TableCell showOverflow title="options" width={40}>
-                        <button
-                            class="button is-text is-only-icon"
-                            aria-label="delete id"
-                            on:click|preventDefault={() => {
-                                eventSet.delete(event);
-                                $createWebhook.events = Array.from(eventSet);
-                            }}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    </TableCell>
-                </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 on:click={() => (showCreate = !showCreate)}>Add an event</Empty>
-    {/if}
-</WizardStep>
-
-{#if showCreate}
-    <EventModal bind:show={showCreate} on:created={handleCreated}>
-        <p class="text">
-            Select events in your Appwrite project that will trigger your webhook. <a
-                href="https://appwrite.io/docs/advanced/platform/events"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more about Appwrite Events</a
-            >.
-        </p>
-    </EventModal>
-{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step3.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step3.svelte
deleted file mode 100644
index fd30d5872..000000000
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/step3.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { FormList, InputText, InputPassword, InputChoice } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { createWebhook } from './store';
-</script>
-
-<WizardStep>
-    <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.
-    </svelte:fragment>
-    <FormList>
-        <div>
-            <h2 class="heading-level-7">HTTP Authentication</h2>
-            <p class="text">Use to secure your endpoint from untrusted sources.</p>
-        </div>
-        <InputText
-            label="User"
-            id="user"
-            placeholder="Enter username"
-            bind:value={$createWebhook.httpUser} />
-        <InputPassword
-            label="Password"
-            id="password"
-            showPasswordButton
-            placeholder="Enter password"
-            minlength={0}
-            bind:value={$createWebhook.httpPass} />
-
-        <InputChoice
-            id="Security"
-            label="Certificate verification (SSL/TLS)"
-            bind:value={$createWebhook.security}>
-            <span class="u-color-text-danger">Warning:</span> Untrusted or self-signed certificates
-            may not be secure.
-            <a
-                href="https://appwrite.io/docs/advanced/self-hosting/tls-certificates"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                Learn more</a
-            ></InputChoice>
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/store.ts b/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/store.ts
deleted file mode 100644
index ce04edac8..000000000
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/wizard/store.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Models } from '@appwrite.io/console';
-import { writable } from 'svelte/store';
-
-export const createWebhook = writable<Partial<Models.Webhook>>({
-    name: null,
-    url: null,
-    events: [],
-    security: false,
-    httpUser: null,
-    httpPass: null
-});
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/addCollaboratorModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/addCollaboratorModal.svelte
new file mode 100644
index 000000000..dc06a9f51
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/addCollaboratorModal.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Modal } from '$lib/components';
+    import { InputEmail, Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { organization } from '$lib/stores/organization';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { roles } from '$lib/stores/billing';
+    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { isCloud, isSelfHosted } from '$lib/system';
+
+    export let show = false;
+
+    const dispatch = createEventDispatcher();
+
+    const url = `${page.url.origin}${base}/invite`;
+
+    let email: string,
+        name: string,
+        error: string,
+        role: string = isSelfHosted ? 'owner' : 'viewer';
+
+    async function create() {
+        try {
+            const team = await sdk.forConsole.teams.createMembership(
+                $organization.$id,
+                [role],
+                email,
+                undefined,
+                undefined,
+                url,
+                name || undefined
+            );
+            await invalidate(Dependencies.ACCOUNT);
+            await invalidate(Dependencies.ORGANIZATION);
+            await invalidate(Dependencies.MEMBERS);
+
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Invite has been sent to ${email}`
+            });
+            trackEvent(Submit.MemberCreate);
+            dispatch('created', team);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MemberCreate);
+        }
+    }
+
+    $: if (!show) {
+        error = null;
+        email = null;
+        name = null;
+    }
+</script>
+
+<Modal title="Add collaborator" {error} bind:show onSubmit={create}>
+    <span slot="description">
+        Share your progress and start collaborating by adding members to your organization.
+    </span>
+    <Layout.Stack direction="row">
+        <InputEmail
+            required
+            id="email"
+            label="Email"
+            placeholder="Enter email"
+            autofocus={true}
+            bind:value={email} />
+        {#if isCloud}
+            <InputSelect
+                id="role"
+                label="Role"
+                placeholder="Select role"
+                required
+                options={roles}
+                bind:value={role} />
+        {/if}
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit submissionLoader>Send invite</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/deploymentActionMenu.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/deploymentActionMenu.svelte
new file mode 100644
index 000000000..b30bd56ae
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/deploymentActionMenu.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { Menu } from '$lib/components/menu';
+    import SubMenu from '$lib/components/menu/subMenu.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
+    import {
+        IconChevronRight,
+        IconDotsHorizontal,
+        IconDownload,
+        IconLightningBolt,
+        IconRefresh,
+        IconTrash,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu, Icon } from '@appwrite.io/pink-svelte';
+
+    export let selectedDeployment: Models.Deployment;
+    export let deployment: Models.Deployment;
+    export let showDelete = false;
+    export let showActivate = false;
+    export let showRedeploy = false;
+    export let showCancel = false;
+    export let activeDeployment: string;
+    export let inCard = false;
+
+    function getOutputDownload(deploymentId: string) {
+        return (
+            sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.getDeploymentDownload(
+                    page.params.site,
+                    deploymentId.toString(),
+                    DeploymentDownloadType.Output
+                ) + '&mode=admin'
+        );
+    }
+    function getSourceDownload(deploymentId: string) {
+        return (
+            sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.getDeploymentDownload(
+                    page.params.site,
+                    deploymentId.toString(),
+                    DeploymentDownloadType.Source
+                ) + '&mode=admin'
+        );
+    }
+</script>
+
+<Menu>
+    <Button text={!inCard} secondary={inCard} icon size="s">
+        <Icon size="s" icon={IconDotsHorizontal} />
+    </Button>
+    <svelte:fragment slot="menu" let:toggle>
+        <ActionMenu.Root>
+            {#if !inCard}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconRefresh}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showRedeploy = true;
+                        toggle();
+                    }}>
+                    Redeploy
+                </ActionMenu.Item.Button>
+            {/if}
+            {#if deployment?.status === 'ready' && deployment?.$id !== activeDeployment}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconLightningBolt}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showActivate = true;
+                        toggle();
+                    }}>
+                    Activate
+                </ActionMenu.Item.Button>
+            {/if}
+            {#if deployment?.status === 'ready' || deployment?.status === 'failed' || deployment?.status === 'building'}
+                <SubMenu>
+                    <ActionMenu.Root noPadding>
+                        <ActionMenu.Item.Button
+                            leadingIcon={IconDownload}
+                            trailingIcon={IconChevronRight}>
+                            Download
+                        </ActionMenu.Item.Button>
+                    </ActionMenu.Root>
+                    <svelte:fragment slot="menu">
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Anchor
+                                on:click={toggle}
+                                href={getSourceDownload(deployment.$id)}
+                                external>
+                                Download source
+                            </ActionMenu.Item.Anchor>
+
+                            <ActionMenu.Item.Anchor
+                                disabled={deployment?.status !== 'ready'}
+                                on:click={toggle}
+                                href={getOutputDownload(deployment.$id)}
+                                external>
+                                Download output
+                            </ActionMenu.Item.Anchor>
+                        </ActionMenu.Root>
+                    </svelte:fragment>
+                </SubMenu>
+            {/if}
+
+            {#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconXCircle}
+                    status="danger"
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showCancel = true;
+                    }}>
+                    Cancel
+                </ActionMenu.Item.Button>
+            {/if}
+            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
+                <ActionMenu.Item.Button
+                    status="danger"
+                    leadingIcon={IconTrash}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showDelete = true;
+                    }}>
+                    Delete
+                </ActionMenu.Item.Button>
+            {/if}
+        </ActionMenu.Root>
+    </svelte:fragment>
+</Menu>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/logs.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/logs.svelte
new file mode 100644
index 000000000..415652cdd
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/logs.svelte
@@ -0,0 +1,90 @@
+<script module lang="ts">
+    export function badgeTypeDeployment(status: string) {
+        switch (status) {
+            case 'failed':
+                return 'error';
+            case 'ready':
+                return 'success';
+            case 'building':
+                return 'warning';
+            case 'processing':
+                return undefined;
+            default:
+                return undefined;
+        }
+    }
+</script>
+
+<script lang="ts">
+    import { capitalize } from '$lib/helpers/string';
+    import { app } from '$lib/stores/app';
+    import type { Models } from '@appwrite.io/console';
+    import { Badge, Card, Layout, Logs, Spinner, Typography } from '@appwrite.io/pink-svelte';
+    import LogsTimer from './logsTimer.svelte';
+
+    let {
+        deployment = $bindable(),
+        hideTitle = false,
+        hideScrollButtons = false,
+        height = 'auto',
+        fullHeight = false,
+        emptyCopy = 'No logs available'
+    }: {
+        deployment: Models.Deployment;
+        hideTitle?: boolean;
+        hideScrollButtons?: boolean;
+        height?: string;
+        fullHeight?: boolean;
+        emptyCopy?: string;
+    } = $props();
+
+    function setCopy() {
+        if (deployment.status === 'failed') {
+            return 'Your deployment has failed.';
+        } else if (deployment.status === 'building') {
+            //Do not remove empty space before the string it's an invisible character
+            return 'Preparing for build ... \n';
+        } else if (deployment.status === 'waiting') {
+            return 'Preparing for build ... \n';
+        } else if (deployment.status === 'processing') {
+            return 'Preparing for build ... \n';
+        } else {
+            return emptyCopy;
+        }
+    }
+</script>
+
+<Layout.Stack gap="xl">
+    {#if !hideTitle}
+        <Layout.Stack direction="row" justifyContent="space-between">
+            <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                    Deployment logs
+                </Typography.Text>
+                <Badge
+                    content={capitalize(deployment.status)}
+                    size="xs"
+                    variant="secondary"
+                    type={badgeTypeDeployment(deployment.status)} />
+            </Layout.Stack>
+            <LogsTimer status={deployment.status} {deployment} />
+        </Layout.Stack>
+    {/if}
+
+    {#if ['waiting', 'processing'].includes(deployment.status) || (deployment.status === 'building' && !deployment?.buildLogs?.length)}
+        <Card.Base variant="secondary">
+            <Layout.Stack direction="row" justifyContent="center" gap="s">
+                <Spinner /> Waiting for build to start...
+            </Layout.Stack>
+        </Card.Base>
+    {:else}
+        {#key deployment.buildLogs}
+            <Logs
+                {fullHeight}
+                {height}
+                showScrollButton={!hideScrollButtons}
+                logs={deployment.buildLogs || setCopy()}
+                bind:theme={$app.themeInUse} />
+        {/key}
+    {/if}
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/logsTimer.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/logsTimer.svelte
new file mode 100644
index 000000000..9a79c5e58
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/logsTimer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { timer } from '$lib/actions/timer';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+    import type { Models } from '@appwrite.io/console';
+
+    import { Layout, Spinner, Typography } from '@appwrite.io/pink-svelte';
+
+    export let status: string;
+    export let deployment: Models.Deployment;
+</script>
+
+<Layout.Stack direction="row" alignItems="center" inline>
+    {#if ['processing'].includes(status)}
+        <Typography.Code color="--fgcolor-neutral-secondary">
+            <Layout.Stack direction="row" alignItems="center" inline>
+                0s
+                <Spinner size="s" />
+            </Layout.Stack>
+        </Typography.Code>
+    {:else if ['building'].includes(status)}
+        <Typography.Code color="--fgcolor-neutral-secondary">
+            <Layout.Stack direction="row" alignItems="center" inline>
+                <p use:timer={{ start: deployment.$createdAt }}></p>
+                <Spinner size="s" />
+            </Layout.Stack>
+        </Typography.Code>
+    {:else}
+        <Typography.Code color="--fgcolor-neutral-secondary">
+            {formatTimeDetailed(deployment.buildDuration)}
+        </Typography.Code>
+    {/if}
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/openOnMobileModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/openOnMobileModal.svelte
new file mode 100644
index 000000000..97021ef42
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/openOnMobileModal.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { Modal } from '$lib/components';
+    import Card from '$lib/components/card.svelte';
+    import { Button, InputSelect } from '$lib/elements/forms';
+    import { copy } from '$lib/helpers/copy';
+    import { sdk } from '$lib/stores/sdk';
+    import { protocol } from '$routes/(console)/store';
+    import type { Models } from '@appwrite.io/console';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Image, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+
+    let {
+        show = $bindable(),
+        proxyRuleList,
+        selectedUrl = ''
+    }: {
+        show: boolean;
+        proxyRuleList: Models.ProxyRuleList;
+        selectedUrl?: string;
+    } = $props();
+
+    const options = proxyRuleList?.total
+        ? proxyRuleList.rules.map((rule) => {
+              return {
+                  label: rule.domain,
+                  value: $protocol + rule.domain
+              };
+          })
+        : [];
+
+    let url = $state(selectedUrl ? $protocol + selectedUrl : (options[0]?.value ?? ''));
+    let tooltipMessage = $state('Copy');
+
+    function getImage(url: string) {
+        return sdk.forProject(page.params.region, page.params.project).avatars.getQR(url, 352);
+    }
+</script>
+
+<Modal title="Open on mobile" bind:show hideFooter>
+    <span slot="description">Open the preview of your site on any mobile or tablet device.</span>
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="m" direction="row">
+            <div style="width: 100%;max-width: 91.5%">
+                <InputSelect id="copy" bind:value={url} {options}></InputSelect>
+            </div>
+            <Tooltip placement="bottom">
+                <div>
+                    <Button
+                        secondary
+                        icon
+                        on:click={() => {
+                            copy(url);
+                            tooltipMessage = 'Copied';
+                            setTimeout(() => {
+                                tooltipMessage = 'Copy';
+                            }, 1000);
+                        }}>
+                        <Icon icon={IconDuplicate}></Icon>
+                    </Button>
+                </div>
+                <svelte:fragment slot="tooltip">{tooltipMessage}</svelte:fragment>
+            </Tooltip>
+        </Layout.Stack>
+        <Card padding="l" radius="l">
+            <Layout.Stack justifyContent="center" alignItems="center">
+                <Image src={getImage(url)} height={176} width={176} alt="QR code" radius="xxs" />
+            </Layout.Stack>
+        </Card>
+    </Layout.Stack>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
new file mode 100644
index 000000000..f01665e55
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+    import { Card } from '$lib/components/index.js';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Badge,
+        Divider,
+        Icon,
+        Image,
+        Layout,
+        Status,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import OpenOnMobileModal from './openOnMobileModal.svelte';
+    import DeploymentDomains from '$lib/components/git/deploymentDomains.svelte';
+    import { app } from '$lib/stores/app';
+    import { base } from '$app/paths';
+    import { isCloud } from '$lib/system';
+    import { getApiEndpoint } from '$lib/stores/sdk';
+    import { capitalize } from '$lib/helpers/string';
+
+    export let deployment: Models.Deployment;
+    export let proxyRuleList: Models.ProxyRuleList;
+    export let hideQRCode = false;
+    export let variant: 'primary' | 'secondary' = 'primary';
+
+    let show = false;
+
+    $: totalSize = humanFileSize(deployment?.totalSize ?? 0);
+
+    function getScreenshot(theme: string, deployment: Models.Deployment) {
+        if (theme === 'dark') {
+            return deployment.screenshotDark
+                ? getFilePreview(deployment.screenshotDark)
+                : `${base}/images/sites/screenshot-placeholder-dark.svg`;
+        } else {
+            return deployment.screenshotLight
+                ? getFilePreview(deployment.screenshotLight)
+                : `${base}/images/sites/screenshot-placeholder-light.svg`;
+        }
+    }
+
+    function getFilePreview(fileId: string) {
+        // TODO: @Meldiron use sdk.forConsole.storage.getFilePreview
+        const endpoint = getApiEndpoint();
+        return endpoint + `/storage/buckets/screenshots/files/${fileId}/view?project=console`;
+    }
+</script>
+
+<Card padding="s" radius="m" {variant}>
+    <Layout.Stack gap="l">
+        <div class="card-grid">
+            <Image
+                border
+                radius="s"
+                ratio="16/9"
+                style="width: 100%; align-self: start"
+                src={getScreenshot($app.themeInUse, deployment)}
+                alt="Screenshot" />
+
+            <Layout.Stack gap="xl">
+                <Layout.Stack direction="row" alignItems="flex-start">
+                    <Layout.Stack gap="xxs">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                            Domains
+                        </Typography.Text>
+                        <DeploymentDomains
+                            domains={proxyRuleList}
+                            {hideQRCode}
+                            showQR={() => (show = !show)} />
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" gap="xl">
+                    {#if deployment.status === 'failed'}
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                Status
+                            </Typography.Text>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                <Status
+                                    status={deployment.status}
+                                    label={capitalize(deployment.status)} />
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {:else}
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                Deployed
+                            </Typography.Text>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                <DeploymentCreatedBy {deployment} />
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+
+                <Layout.Stack gap="xxl" direction="row" wrap="wrap">
+                    <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
+                        {#if deployment?.buildDuration}
+                            <Layout.Stack gap="xxs" inline>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Build duration
+                                </Typography.Text>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                    {formatTimeDetailed(deployment.buildDuration)}
+                                </Typography.Text>
+                            </Layout.Stack>
+                        {/if}
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                Total size
+                            </Typography.Text>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                {totalSize.value}{totalSize.unit}
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                    <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                                    Global CDN <Tooltip>
+                                        <Icon icon={IconInfo} size="s" />
+                                        <span slot="tooltip">
+                                            Optimized speed by caching content on servers closer to
+                                            users.
+                                        </span>
+                                    </Tooltip>
+                                </Layout.Stack>
+                            </Typography.Text>
+                            <Layout.Stack inline alignItems="flex-start">
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    type={isCloud ? 'success' : null}
+                                    content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                            </Layout.Stack>
+                        </Layout.Stack>
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                                    DDoS protection <Tooltip>
+                                        <Icon icon={IconInfo} size="s" />
+                                        <span slot="tooltip">
+                                            Safeguards your site by detecting and blocking malicious
+                                            traffic.
+                                        </span>
+                                    </Tooltip>
+                                </Layout.Stack>
+                            </Typography.Text>
+                            <Layout.Stack inline alignItems="flex-start">
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    type={isCloud ? 'success' : null}
+                                    content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Layout.Stack>
+                <Layout.Stack gap="xxs" inline style="width: min-content;">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        Source
+                    </Typography.Text>
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                        <DeploymentSource {deployment} />
+                    </Typography.Text>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+        {#if $$slots.footer}
+            <span
+                style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
+                <Divider />
+            </span>
+            <Layout.Stack direction="row-reverse">
+                <slot name="footer" />
+            </Layout.Stack>
+        {/if}
+    </Layout.Stack>
+</Card>
+
+{#if show && proxyRuleList.total}
+    <OpenOnMobileModal bind:show {proxyRuleList} />
+{/if}
+
+<style lang="scss">
+    .card-grid {
+        display: grid;
+        grid-template-columns: 45% auto;
+        // justify-content: center;
+        align-items: center;
+        gap: var(--gap-xl);
+
+        @media (max-width: 930px) {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(images)/empty-sites-dark.svg b/src/routes/(console)/project-[region]-[project]/sites/(images)/empty-sites-dark.svg
new file mode 100644
index 000000000..b64811a48
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(images)/empty-sites-dark.svg
@@ -0,0 +1,239 @@
+<svg width="1080" height="184" viewBox="0 0 1080 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6392_11964)">
+<mask id="mask0_6392_11964" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1080" height="184">
+<path d="M1080 0H0V184H1080V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6392_11964)">
+<path d="M1080 0H0V184H1080V0Z" fill="#1D1D21"/>
+<path d="M964.808 82.3695C964.314 80.739 963.947 79.5306 963.735 78.5504C963.523 77.5731 963.471 76.8445 963.59 76.1731C963.806 74.9637 964.399 73.8537 965.285 73.0022C965.776 72.5294 966.411 72.1683 967.341 71.801C968.274 71.4326 969.482 71.0656 971.113 70.5708L1036.27 50.7975C1037.9 50.3027 1039.1 49.9362 1040.08 49.724C1041.06 49.5125 1041.79 49.4598 1042.46 49.5796C1043.67 49.7954 1044.78 50.3885 1045.63 51.2739C1046.11 51.7655 1046.47 52.4006 1046.83 53.3305C1047.2 54.2632 1047.57 55.4715 1048.06 57.1021L1067.84 122.255C1068.33 123.885 1068.7 125.093 1068.91 126.074C1069.12 127.051 1069.18 127.78 1069.06 128.451C1068.84 129.66 1068.25 130.77 1067.36 131.622C1066.87 132.095 1066.23 132.456 1065.3 132.823C1064.37 133.191 1063.16 133.558 1061.53 134.053L996.38 153.826C994.75 154.321 993.541 154.688 992.561 154.9C991.584 155.111 990.855 155.164 990.184 155.044C988.975 154.829 987.865 154.235 987.013 153.35C986.54 152.859 986.179 152.223 985.812 151.293C985.443 150.361 985.077 149.152 984.582 147.522L964.808 82.3695Z" fill="url(#paint0_linear_6392_11964)"/>
+<path d="M964.808 82.3695C964.314 80.739 963.947 79.5306 963.735 78.5504C963.523 77.5731 963.471 76.8445 963.59 76.1731C963.806 74.9637 964.399 73.8537 965.285 73.0022C965.776 72.5294 966.411 72.1683 967.341 71.801C968.274 71.4326 969.482 71.0656 971.113 70.5708L1036.27 50.7975C1037.9 50.3027 1039.1 49.9362 1040.08 49.724C1041.06 49.5125 1041.79 49.4598 1042.46 49.5796C1043.67 49.7954 1044.78 50.3885 1045.63 51.2739C1046.11 51.7655 1046.47 52.4006 1046.83 53.3305C1047.2 54.2632 1047.57 55.4715 1048.06 57.1021L1067.84 122.255C1068.33 123.885 1068.7 125.093 1068.91 126.074C1069.12 127.051 1069.18 127.78 1069.06 128.451C1068.84 129.66 1068.25 130.77 1067.36 131.622C1066.87 132.095 1066.23 132.456 1065.3 132.823C1064.37 133.191 1063.16 133.558 1061.53 134.053L996.38 153.826C994.75 154.321 993.541 154.688 992.561 154.9C991.584 155.111 990.855 155.164 990.184 155.044C988.975 154.829 987.865 154.235 987.013 153.35C986.54 152.859 986.179 152.223 985.812 151.293C985.443 150.361 985.077 149.152 984.582 147.522L964.808 82.3695Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M964.808 82.3695C964.314 80.739 963.947 79.5306 963.735 78.5504C963.523 77.5731 963.471 76.8445 963.59 76.1731C963.806 74.9637 964.399 73.8537 965.285 73.0022C965.776 72.5294 966.411 72.1683 967.341 71.801C968.274 71.4326 969.482 71.0656 971.113 70.5708L1036.27 50.7975C1037.9 50.3027 1039.1 49.9362 1040.08 49.724C1041.06 49.5125 1041.79 49.4598 1042.46 49.5796C1043.67 49.7954 1044.78 50.3885 1045.63 51.2739C1046.11 51.7655 1046.47 52.4006 1046.83 53.3305C1047.2 54.2632 1047.57 55.4715 1048.06 57.1021L1067.84 122.255C1068.33 123.885 1068.7 125.093 1068.91 126.074C1069.12 127.051 1069.18 127.78 1069.06 128.451C1068.84 129.66 1068.25 130.77 1067.36 131.622C1066.87 132.095 1066.23 132.456 1065.3 132.823C1064.37 133.191 1063.16 133.558 1061.53 134.053L996.38 153.826C994.75 154.321 993.541 154.688 992.561 154.9C991.584 155.111 990.855 155.164 990.184 155.044C988.975 154.829 987.865 154.235 987.013 153.35C986.54 152.859 986.179 152.223 985.812 151.293C985.443 150.361 985.077 149.152 984.582 147.522L964.808 82.3695Z" stroke="url(#paint1_linear_6392_11964)" stroke-opacity="0.4" stroke-width="0.505845"/>
+<path d="M735.265 43.6654C734.77 42.0349 734.403 40.8265 734.191 39.8463C733.98 38.869 733.927 38.1404 734.047 37.469C734.263 36.2596 734.856 35.1496 735.741 34.2981C736.233 33.8253 736.868 33.4642 737.798 33.0969C738.73 32.7284 739.939 32.3615 741.569 31.8667L806.722 12.0934C808.352 11.5986 809.56 11.2321 810.541 11.0199C811.518 10.8084 812.247 10.7557 812.918 10.8755C814.127 11.0913 815.237 11.6844 816.089 12.5698C816.562 13.0614 816.923 13.6964 817.29 14.6264C817.659 15.5591 818.025 16.7674 818.52 18.398L838.294 83.5503C838.788 85.1808 839.155 86.3892 839.367 87.3694C839.579 88.3467 839.631 89.0753 839.511 89.7467C839.296 90.9561 838.703 92.0661 837.817 92.9176C837.326 93.3904 836.691 93.7515 835.761 94.1188C834.828 94.4873 833.62 94.8542 831.989 95.349L766.837 115.122C765.206 115.617 763.998 115.984 763.018 116.196C762.04 116.407 761.312 116.46 760.64 116.34C759.431 116.125 758.321 115.531 757.469 114.646C756.997 114.154 756.635 113.519 756.268 112.589C755.9 111.657 755.533 110.448 755.038 108.818L735.265 43.6654Z" fill="url(#paint2_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M735.265 43.6654C734.77 42.0349 734.403 40.8265 734.191 39.8463C733.98 38.869 733.927 38.1404 734.047 37.469C734.263 36.2596 734.856 35.1496 735.741 34.2981C736.233 33.8253 736.868 33.4642 737.798 33.0969C738.73 32.7284 739.939 32.3615 741.569 31.8667L806.722 12.0934C808.352 11.5986 809.56 11.2321 810.541 11.0199C811.518 10.8084 812.247 10.7557 812.918 10.8755C814.127 11.0913 815.237 11.6844 816.089 12.5698C816.562 13.0614 816.923 13.6964 817.29 14.6264C817.659 15.5591 818.025 16.7674 818.52 18.398L838.294 83.5503C838.788 85.1808 839.155 86.3892 839.367 87.3694C839.579 88.3467 839.631 89.0753 839.511 89.7467C839.296 90.9561 838.703 92.0661 837.817 92.9176C837.326 93.3904 836.691 93.7515 835.761 94.1188C834.828 94.4873 833.62 94.8542 831.989 95.349L766.837 115.122C765.206 115.617 763.998 115.984 763.018 116.196C762.04 116.407 761.312 116.46 760.64 116.34C759.431 116.125 758.321 115.531 757.469 114.646C756.997 114.154 756.635 113.519 756.268 112.589C755.9 111.657 755.533 110.448 755.038 108.818L735.265 43.6654Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M735.265 43.6654C734.77 42.0349 734.403 40.8265 734.191 39.8463C733.98 38.869 733.927 38.1404 734.047 37.469C734.263 36.2596 734.856 35.1496 735.741 34.2981C736.233 33.8253 736.868 33.4642 737.798 33.0969C738.73 32.7284 739.939 32.3615 741.569 31.8667L806.722 12.0934C808.352 11.5986 809.56 11.2321 810.541 11.0199C811.518 10.8084 812.247 10.7557 812.918 10.8755C814.127 11.0913 815.237 11.6844 816.089 12.5698C816.562 13.0614 816.923 13.6964 817.29 14.6264C817.659 15.5591 818.025 16.7674 818.52 18.398L838.294 83.5503C838.788 85.1808 839.155 86.3892 839.367 87.3694C839.579 88.3467 839.631 89.0753 839.511 89.7467C839.296 90.9561 838.703 92.0661 837.817 92.9176C837.326 93.3904 836.691 93.7515 835.761 94.1188C834.828 94.4873 833.62 94.8542 831.989 95.349L766.837 115.122C765.206 115.617 763.998 115.984 763.018 116.196C762.04 116.407 761.312 116.46 760.64 116.34C759.431 116.125 758.321 115.531 757.469 114.646C756.997 114.154 756.635 113.519 756.268 112.589C755.9 111.657 755.533 110.448 755.038 108.818L735.265 43.6654Z" stroke="url(#paint3_linear_6392_11964)" stroke-width="0.505845"/>
+<g opacity="0.32">
+<path d="M790.424 62.7613C789.884 60.8757 787.908 59.7877 786.012 60.3315C784.116 60.8752 783.017 62.8448 783.557 64.7304C784.098 66.6162 786.074 67.7041 787.97 67.1604C789.866 66.6166 790.965 64.6471 790.424 62.7613Z" fill="#6C6C71"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M796.324 54.209C796.209 51.0711 795.563 45.3763 791.821 44.4555C788.098 43.5384 784.944 48.2461 783.351 50.9858C780.561 49.5255 775.28 47.2529 772.599 50.0214C769.93 52.7783 772.448 57.8389 774.035 60.5748C771.294 62.2721 766.703 65.5519 767.766 69.2583C768.825 72.9542 774.498 73.4635 777.703 73.455C777.81 76.633 778.383 82.1685 782.111 83.0868C785.863 84.0105 789.148 79.3714 790.754 76.6029C793.574 78.0906 798.682 80.3472 801.353 77.5889C804.032 74.8217 801.659 69.7008 800.067 66.9478C802.699 65.2806 807.263 61.8825 806.216 58.2328C805.164 54.562 799.5 54.2068 796.324 54.209ZM799.169 65.5045C798.243 64.1121 797.119 62.6714 795.833 61.2189C796.129 59.3558 796.299 57.5667 796.336 55.9089C798.665 55.9123 803.792 55.9766 804.574 58.7038C805.363 61.4565 801.244 64.1865 799.169 65.5045ZM800.124 76.4112C798.132 78.4692 793.644 76.1976 791.562 75.1032C792.308 73.6141 792.998 71.9336 793.618 70.1093C795.43 69.4123 797.109 68.6405 798.597 67.8178C799.72 69.7658 802.125 74.3439 800.124 76.4112ZM782.526 81.4363C779.746 80.7521 779.49 75.7393 779.411 73.3985C781.085 73.2933 782.9 73.0427 784.806 72.6586C786.297 73.8423 787.803 74.8911 789.27 75.7674C788.265 77.4996 785.318 82.1236 782.526 81.4363ZM769.408 68.7873C768.616 66.0242 772.904 63.2715 774.927 62.0217C775.855 63.44 776.952 64.8863 778.186 66.3134C777.893 68.2047 777.727 70.0413 777.693 71.7552C775.423 71.7596 770.201 71.5521 769.408 68.7873ZM773.828 51.1991C775.829 49.1325 780.51 51.4258 782.535 52.4817C781.76 53.9949 781.045 55.6694 780.415 57.4518C778.655 58.137 777 58.9011 775.512 59.716C774.233 57.5092 771.829 53.2635 773.828 51.1991ZM790.946 56.3537C792.217 56.1558 793.451 56.0236 794.626 55.9577C794.598 57.1088 794.501 58.3316 794.34 59.6031C793.253 58.4749 792.123 57.3883 790.946 56.3537ZM784.021 53.3188C785.013 53.9177 786.033 54.6116 787.063 55.3863C785.528 55.7493 784.012 56.1838 782.518 56.6884C782.984 55.4946 783.488 54.3651 784.021 53.3188ZM778.577 64.1216C777.775 63.1306 777.048 62.1387 776.407 61.1634C777.434 60.6046 778.547 60.0697 779.722 59.5687C779.269 61.0677 778.887 62.5874 778.577 64.1216ZM783.108 71.2462C781.809 71.4675 780.567 71.6187 779.402 71.6957C779.429 70.5083 779.523 69.2552 779.681 67.9628C780.77 69.1106 781.914 70.2065 783.108 71.2462ZM790.076 74.2641C789.058 73.6519 788.017 72.9506 786.973 72.1743C788.513 71.7971 790.039 71.3598 791.542 70.8557C791.083 72.0823 790.592 73.2244 790.076 74.2641ZM795.44 63.3804C796.288 64.3979 797.044 65.4007 797.696 66.3737C796.653 66.9464 795.508 67.4953 794.283 68.0102C794.732 66.4834 795.121 64.9391 795.44 63.3804ZM792.253 68.8067C789.971 69.64 787.627 70.3103 785.254 70.8281C783.379 69.2847 781.621 67.6002 780.001 65.7923C780.413 63.4068 781.004 61.0529 781.771 58.755C784.052 57.9111 786.398 57.2381 788.78 56.7462C790.637 58.2916 792.382 59.9699 794.014 61.7492C793.591 64.1369 792.994 66.4966 792.253 68.8067ZM791.407 46.1058C794.198 46.7934 794.531 51.9825 794.617 54.256C792.917 54.3474 791.106 54.5717 789.244 54.9225C787.758 53.7294 786.274 52.683 784.837 51.8206C786.005 49.8139 788.642 45.425 791.407 46.1058Z" fill="#6C6C71"/>
+</g>
+<path d="M765.383 142.894C764.888 141.263 764.521 140.055 764.309 139.075C764.098 138.098 764.045 137.369 764.165 136.698C764.381 135.488 764.974 134.378 765.859 133.527C766.351 133.054 766.986 132.693 767.916 132.325C768.848 131.957 770.057 131.59 771.687 131.095L836.84 111.322C838.47 110.827 839.679 110.461 840.659 110.249C841.636 110.037 842.365 109.984 843.036 110.104C844.245 110.32 845.355 110.913 846.207 111.798C846.68 112.29 847.041 112.925 847.408 113.855C847.777 114.788 848.143 115.996 848.638 117.627L868.412 182.779C868.906 184.409 869.273 185.618 869.485 186.598C869.697 187.575 869.749 188.304 869.63 188.975C869.414 190.185 868.821 191.295 867.935 192.146C867.444 192.619 866.809 192.98 865.879 193.347C864.946 193.716 863.738 194.083 862.107 194.578L796.955 214.351C795.324 214.846 794.116 215.212 793.136 215.424C792.158 215.636 791.43 215.689 790.758 215.569C789.549 215.353 788.439 214.76 787.587 213.874C787.115 213.383 786.754 212.748 786.386 211.818C786.018 210.885 785.651 209.677 785.156 208.046L765.383 142.894Z" fill="url(#paint4_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M765.383 142.894C764.888 141.263 764.521 140.055 764.309 139.075C764.098 138.098 764.045 137.369 764.165 136.698C764.381 135.488 764.974 134.378 765.859 133.527C766.351 133.054 766.986 132.693 767.916 132.325C768.848 131.957 770.057 131.59 771.687 131.095L836.84 111.322C838.47 110.827 839.679 110.461 840.659 110.249C841.636 110.037 842.365 109.984 843.036 110.104C844.245 110.32 845.355 110.913 846.207 111.798C846.68 112.29 847.041 112.925 847.408 113.855C847.777 114.788 848.143 115.996 848.638 117.627L868.412 182.779C868.906 184.409 869.273 185.618 869.485 186.598C869.697 187.575 869.749 188.304 869.63 188.975C869.414 190.185 868.821 191.295 867.935 192.146C867.444 192.619 866.809 192.98 865.879 193.347C864.946 193.716 863.738 194.083 862.107 194.578L796.955 214.351C795.324 214.846 794.116 215.212 793.136 215.424C792.158 215.636 791.43 215.689 790.758 215.569C789.549 215.353 788.439 214.76 787.587 213.874C787.115 213.383 786.754 212.748 786.386 211.818C786.018 210.885 785.651 209.677 785.156 208.046L765.383 142.894Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M765.383 142.894C764.888 141.263 764.521 140.055 764.309 139.075C764.098 138.098 764.045 137.369 764.165 136.698C764.381 135.488 764.974 134.378 765.859 133.527C766.351 133.054 766.986 132.693 767.916 132.325C768.848 131.957 770.057 131.59 771.687 131.095L836.84 111.322C838.47 110.827 839.679 110.461 840.659 110.249C841.636 110.037 842.365 109.984 843.036 110.104C844.245 110.32 845.355 110.913 846.207 111.798C846.68 112.29 847.041 112.925 847.408 113.855C847.777 114.788 848.143 115.996 848.638 117.627L868.412 182.779C868.906 184.409 869.273 185.618 869.485 186.598C869.697 187.575 869.749 188.304 869.63 188.975C869.414 190.185 868.821 191.295 867.935 192.146C867.444 192.619 866.809 192.98 865.879 193.347C864.946 193.716 863.738 194.083 862.107 194.578L796.955 214.351C795.324 214.846 794.116 215.212 793.136 215.424C792.158 215.636 791.43 215.689 790.758 215.569C789.549 215.353 788.439 214.76 787.587 213.874C787.115 213.383 786.754 212.748 786.386 211.818C786.018 210.885 785.651 209.677 785.156 208.046L765.383 142.894Z" stroke="url(#paint5_linear_6392_11964)" stroke-width="0.505845"/>
+<path d="M254.578 78.9115C254.083 77.281 253.717 76.0726 253.505 75.0924C253.293 74.1151 253.24 73.3865 253.36 72.7151C253.576 71.5057 254.169 70.3957 255.054 69.5442C255.546 69.0714 256.181 68.7103 257.111 68.343C258.044 67.9745 259.252 67.6076 260.883 67.1128L326.035 47.3395C327.665 46.8447 328.874 46.4781 329.854 46.266C330.831 46.0545 331.56 46.0018 332.231 46.1216C333.441 46.3374 334.551 46.9305 335.402 47.8159C335.875 48.3075 336.236 48.9425 336.603 49.8725C336.972 50.8052 337.339 52.0135 337.834 53.6441L357.607 118.796C358.102 120.427 358.468 121.635 358.68 122.616C358.892 123.593 358.945 124.322 358.825 124.993C358.609 126.202 358.016 127.312 357.13 128.164C356.639 128.637 356.004 128.998 355.074 129.365C354.141 129.733 352.933 130.1 351.302 130.595L286.15 150.368C284.52 150.863 283.311 151.23 282.331 151.442C281.354 151.653 280.625 151.706 279.954 151.586C278.744 151.371 277.634 150.777 276.783 149.892C276.31 149.401 275.949 148.765 275.582 147.835C275.213 146.903 274.846 145.694 274.351 144.064L254.578 78.9115Z" fill="url(#paint6_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M254.578 78.9115C254.083 77.281 253.717 76.0726 253.505 75.0924C253.293 74.1151 253.24 73.3865 253.36 72.7151C253.576 71.5057 254.169 70.3957 255.054 69.5442C255.546 69.0714 256.181 68.7103 257.111 68.343C258.044 67.9745 259.252 67.6076 260.883 67.1128L326.035 47.3395C327.665 46.8447 328.874 46.4781 329.854 46.266C330.831 46.0545 331.56 46.0018 332.231 46.1216C333.441 46.3374 334.551 46.9305 335.402 47.8159C335.875 48.3075 336.236 48.9425 336.603 49.8725C336.972 50.8052 337.339 52.0135 337.834 53.6441L357.607 118.796C358.102 120.427 358.468 121.635 358.68 122.616C358.892 123.593 358.945 124.322 358.825 124.993C358.609 126.202 358.016 127.312 357.13 128.164C356.639 128.637 356.004 128.998 355.074 129.365C354.141 129.733 352.933 130.1 351.302 130.595L286.15 150.368C284.52 150.863 283.311 151.23 282.331 151.442C281.354 151.653 280.625 151.706 279.954 151.586C278.744 151.371 277.634 150.777 276.783 149.892C276.31 149.401 275.949 148.765 275.582 147.835C275.213 146.903 274.846 145.694 274.351 144.064L254.578 78.9115Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M254.578 78.9115C254.083 77.281 253.717 76.0726 253.505 75.0924C253.293 74.1151 253.24 73.3865 253.36 72.7151C253.576 71.5057 254.169 70.3957 255.054 69.5442C255.546 69.0714 256.181 68.7103 257.111 68.343C258.044 67.9745 259.252 67.6076 260.883 67.1128L326.035 47.3395C327.665 46.8447 328.874 46.4781 329.854 46.266C330.831 46.0545 331.56 46.0018 332.231 46.1216C333.441 46.3374 334.551 46.9305 335.402 47.8159C335.875 48.3075 336.236 48.9425 336.603 49.8725C336.972 50.8052 337.339 52.0135 337.834 53.6441L357.607 118.796C358.102 120.427 358.468 121.635 358.68 122.616C358.892 123.593 358.945 124.322 358.825 124.993C358.609 126.202 358.016 127.312 357.13 128.164C356.639 128.637 356.004 128.998 355.074 129.365C354.141 129.733 352.933 130.1 351.302 130.595L286.15 150.368C284.52 150.863 283.311 151.23 282.331 151.442C281.354 151.653 280.625 151.706 279.954 151.586C278.744 151.371 277.634 150.777 276.783 149.892C276.31 149.401 275.949 148.765 275.582 147.835C275.213 146.903 274.846 145.694 274.351 144.064L254.578 78.9115Z" stroke="url(#paint7_linear_6392_11964)" stroke-width="0.505845"/>
+<path d="M154.797 109.195C154.302 107.564 153.935 106.356 153.723 105.376C153.512 104.398 153.459 103.67 153.579 102.998C153.795 101.789 154.388 100.679 155.273 99.8274C155.765 99.3546 156.4 98.9935 157.33 98.6262C158.263 98.2577 159.471 97.8908 161.101 97.396L226.254 77.6227C227.884 77.1279 229.093 76.7613 230.073 76.5492C231.05 76.3377 231.779 76.285 232.45 76.4048C233.659 76.6206 234.769 77.2137 235.621 78.0991C236.094 78.5907 236.455 79.2257 236.822 80.1557C237.191 81.0884 237.558 82.2967 238.052 83.9273L257.826 149.08C258.32 150.71 258.687 151.919 258.899 152.899C259.111 153.876 259.163 154.605 259.044 155.276C258.828 156.485 258.235 157.595 257.349 158.447C256.858 158.92 256.223 159.281 255.293 159.648C254.36 160.017 253.152 160.384 251.521 160.878L186.369 180.652C184.738 181.147 183.53 181.513 182.55 181.725C181.572 181.937 180.844 181.989 180.172 181.87C178.963 181.654 177.853 181.061 177.001 180.175C176.529 179.684 176.168 179.049 175.8 178.119C175.432 177.186 175.065 175.978 174.57 174.347L154.797 109.195Z" fill="url(#paint8_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M154.797 109.195C154.302 107.564 153.935 106.356 153.723 105.376C153.512 104.398 153.459 103.67 153.579 102.998C153.795 101.789 154.388 100.679 155.273 99.8274C155.765 99.3546 156.4 98.9935 157.33 98.6262C158.263 98.2577 159.471 97.8908 161.101 97.396L226.254 77.6227C227.884 77.1279 229.093 76.7613 230.073 76.5492C231.05 76.3377 231.779 76.285 232.45 76.4048C233.659 76.6206 234.769 77.2137 235.621 78.0991C236.094 78.5907 236.455 79.2257 236.822 80.1557C237.191 81.0884 237.558 82.2967 238.052 83.9273L257.826 149.08C258.32 150.71 258.687 151.919 258.899 152.899C259.111 153.876 259.163 154.605 259.044 155.276C258.828 156.485 258.235 157.595 257.349 158.447C256.858 158.92 256.223 159.281 255.293 159.648C254.36 160.017 253.152 160.384 251.521 160.878L186.369 180.652C184.738 181.147 183.53 181.513 182.55 181.725C181.572 181.937 180.844 181.989 180.172 181.87C178.963 181.654 177.853 181.061 177.001 180.175C176.529 179.684 176.168 179.049 175.8 178.119C175.432 177.186 175.065 175.978 174.57 174.347L154.797 109.195Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M154.797 109.195C154.302 107.564 153.935 106.356 153.723 105.376C153.512 104.398 153.459 103.67 153.579 102.998C153.795 101.789 154.388 100.679 155.273 99.8274C155.765 99.3546 156.4 98.9935 157.33 98.6262C158.263 98.2577 159.471 97.8908 161.101 97.396L226.254 77.6227C227.884 77.1279 229.093 76.7613 230.073 76.5492C231.05 76.3377 231.779 76.285 232.45 76.4048C233.659 76.6206 234.769 77.2137 235.621 78.0991C236.094 78.5907 236.455 79.2257 236.822 80.1557C237.191 81.0884 237.558 82.2967 238.052 83.9273L257.826 149.08C258.32 150.71 258.687 151.919 258.899 152.899C259.111 153.876 259.163 154.605 259.044 155.276C258.828 156.485 258.235 157.595 257.349 158.447C256.858 158.92 256.223 159.281 255.293 159.648C254.36 160.017 253.152 160.384 251.521 160.878L186.369 180.652C184.738 181.147 183.53 181.513 182.55 181.725C181.572 181.937 180.844 181.989 180.172 181.87C178.963 181.654 177.853 181.061 177.001 180.175C176.529 179.684 176.168 179.049 175.8 178.119C175.432 177.186 175.065 175.978 174.57 174.347L154.797 109.195Z" stroke="url(#paint9_linear_6392_11964)" stroke-width="0.505845"/>
+<g opacity="0.32">
+<mask id="mask1_6392_11964" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="991" y="78" width="50" height="50">
+<path d="M1028.9 78.1718L991.297 89.585L1002.71 127.191L1040.32 115.778L1028.9 78.1718Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_6392_11964)">
+<path d="M991.297 89.5851L1002.71 127.191L1040.32 115.778L1028.9 78.1719L991.297 89.5851ZM1020.68 112.7C1021.79 116.36 1020.15 118.676 1017.02 119.626C1014.19 120.485 1012.11 119.518 1010.74 118.008L1013.08 115.393C1013.94 116.209 1014.7 116.889 1015.91 116.52C1017.12 116.152 1017.67 115.491 1017.13 113.725L1013.48 101.709L1017.02 100.637L1020.68 112.7ZM1030.65 115.497C1027.36 116.494 1024.77 115.573 1023.11 113.838L1025.48 111.298C1026.61 112.305 1027.87 112.915 1029.61 112.386C1031.08 111.942 1031.79 110.926 1031.48 109.915C1031.12 108.703 1030.02 108.566 1028.2 108.35L1027.2 108.239C1024.32 107.926 1022.21 107.079 1021.34 104.202C1020.54 101.552 1021.94 98.9216 1025.1 97.9638C1027.35 97.2819 1029.2 97.5736 1030.98 99.2678L1028.77 101.87C1027.83 100.967 1027.05 100.738 1026.03 101.046C1025.02 101.354 1024.54 102.215 1024.8 103.073C1025.12 104.133 1025.91 104.363 1027.63 104.56L1028.62 104.67C1032.02 105.046 1034.11 105.844 1035.01 108.796C1035.97 111.977 1034 114.479 1030.65 115.497Z" fill="#6C6C71"/>
+</g>
+</g>
+<foreignObject x="21.245" y="74.956" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_1_6392_11964_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M55.152 140.436C54.6572 138.805 54.2906 137.597 54.0785 136.617C53.867 135.64 53.8143 134.911 53.9341 134.24C54.1499 133.03 54.743 131.92 55.6284 131.069C56.12 130.596 56.755 130.235 57.685 129.867C58.6177 129.499 59.826 129.132 61.4565 128.637L126.609 108.864C128.24 108.369 129.448 108.003 130.428 107.791C131.406 107.579 132.134 107.526 132.806 107.646C134.015 107.862 135.125 108.455 135.977 109.34C136.449 109.832 136.81 110.467 137.178 111.397C137.546 112.33 137.913 113.538 138.408 115.169L158.181 180.321C158.676 181.951 159.043 183.16 159.255 184.14C159.466 185.117 159.519 185.846 159.399 186.517C159.183 187.727 158.59 188.837 157.705 189.688C157.213 190.161 156.578 190.522 155.648 190.889C154.716 191.258 153.507 191.625 151.877 192.12L86.724 211.893C85.0934 212.388 83.885 212.754 82.9049 212.966C81.9276 213.178 81.199 213.231 80.5276 213.111C79.3182 212.895 78.2082 212.302 77.3566 211.416C76.8839 210.925 76.5228 210.29 76.1554 209.36C75.787 208.427 75.4201 207.219 74.9253 205.588L55.152 140.436Z" fill="url(#paint10_linear_6392_11964)" fill-opacity="0.16" stroke="url(#paint11_linear_6392_11964)" stroke-width="0.505845"/>
+<foreignObject x="602.616" y="8.15324" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_2_6392_11964_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M636.523 73.6332C636.029 72.0026 635.662 70.7942 635.45 69.8141C635.238 68.8368 635.186 68.1082 635.305 67.4368C635.521 66.2274 636.114 65.1174 637 64.2658C637.491 63.7931 638.126 63.432 639.056 63.0646C639.989 62.6962 641.197 62.3293 642.828 61.8345L707.98 42.0612C709.611 41.5664 710.819 41.1998 711.799 40.9877C712.777 40.7762 713.505 40.7235 714.177 40.8433C715.386 41.0591 716.496 41.6522 717.348 42.5376C717.82 43.0292 718.181 43.6642 718.549 44.5942C718.917 45.5269 719.284 46.7352 719.779 48.3657L739.552 113.518C740.047 115.149 740.414 116.357 740.626 117.337C740.837 118.315 740.89 119.043 740.77 119.715C740.554 120.924 739.961 122.034 739.076 122.886C738.584 123.358 737.949 123.719 737.019 124.087C736.087 124.455 734.878 124.822 733.248 125.317L668.095 145.09C666.465 145.585 665.256 145.952 664.276 146.164C663.299 146.375 662.57 146.428 661.899 146.308C660.69 146.092 659.58 145.499 658.728 144.614C658.255 144.122 657.894 143.487 657.527 142.557C657.158 141.624 656.791 140.416 656.297 138.786L636.523 73.6332Z" fill="url(#paint12_linear_6392_11964)" fill-opacity="0.16" stroke="url(#paint13_linear_6392_11964)" stroke-width="0.505845"/>
+<mask id="mask2_6392_11964" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="180" y="99" width="56" height="56">
+<path d="M222.474 99.0001L180 111.891L192.891 154.365L235.365 141.474L222.474 99.0001Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_6392_11964)">
+<g opacity="0.32">
+<path d="M201.156 109.345C201.082 109.375 200.847 109.472 200.635 109.556C195.745 111.535 191.859 115.676 190.142 120.75C189.184 123.572 188.92 126.523 189.364 129.43C189.517 130.445 189.587 130.737 189.987 132.056C190.387 133.374 190.491 133.655 190.928 134.584C193.907 140.938 200.331 145.086 207.374 145.208C208.635 145.23 209.922 145.115 211.346 144.849C211.9 144.745 214.218 144.041 214.736 143.82C217.034 142.836 218.869 141.636 220.547 140.02C220.804 139.772 220.851 139.713 220.799 139.691C220.765 139.678 218.939 138.332 216.744 136.701L212.753 133.737L207.614 129.566C204.787 127.273 202.466 125.401 202.452 125.405C202.437 125.406 203.131 127.742 203.988 130.591C205.491 135.579 205.548 135.781 205.521 135.917C205.483 136.114 205.435 136.204 205.312 136.324C205.219 136.413 205.125 136.453 204.602 136.612L204.004 136.793L203.814 136.741C203.69 136.707 203.588 136.644 203.506 136.559L203.386 136.425L201.288 129.487L199.192 122.544L199.258 122.377C199.292 122.288 199.381 122.158 199.45 122.088C199.571 121.976 199.624 121.952 200.223 121.771C200.929 121.556 201.055 121.548 201.299 121.693C201.368 121.733 204.166 124.042 207.52 126.829C210.875 129.615 215.46 133.418 217.712 135.285L221.803 138.679L221.916 138.543C222.925 137.345 223.9 135.78 224.585 134.25C226.043 131 226.535 127.428 226.005 123.939C225.852 122.924 225.782 122.631 225.382 121.313C224.982 119.995 224.878 119.713 224.441 118.784C221.462 112.431 215.038 108.283 207.995 108.161C206.752 108.137 205.472 108.25 204.076 108.508C203.734 108.574 201.435 109.23 201.156 109.345ZM211.65 117.849C211.841 117.882 212.024 118 212.123 118.151C212.178 118.233 212.769 120.154 214.077 124.491L215.955 130.714L214.348 129.366L212.737 128.019L211.365 123.497C210.478 120.574 209.993 118.926 209.989 118.841C209.986 118.63 210.061 118.441 210.2 118.301C210.319 118.185 210.369 118.162 210.912 117.997C211.425 117.842 211.517 117.822 211.65 117.849Z" fill="#6C6C71"/>
+</g>
+</g>
+<path d="M666.637 172.863C666.142 171.232 665.775 170.024 665.563 169.044C665.352 168.066 665.299 167.338 665.419 166.666C665.635 165.457 666.228 164.347 667.113 163.495C667.605 163.023 668.24 162.662 669.17 162.294C670.102 161.926 671.311 161.559 672.941 161.064L738.094 141.291C739.724 140.796 740.933 140.429 741.913 140.217C742.89 140.006 743.619 139.953 744.29 140.073C745.499 140.289 746.609 140.882 747.461 141.767C747.934 142.259 748.295 142.894 748.662 143.824C749.031 144.757 749.398 145.965 749.892 147.595L769.666 212.748C770.16 214.378 770.527 215.587 770.739 216.567C770.951 217.544 771.003 218.273 770.884 218.944C770.668 220.153 770.075 221.263 769.189 222.115C768.698 222.588 768.063 222.949 767.133 223.316C766.2 223.685 764.992 224.052 763.361 224.546L698.209 244.32C696.578 244.814 695.37 245.181 694.39 245.393C693.412 245.605 692.684 245.657 692.012 245.538C690.803 245.322 689.693 244.729 688.841 243.843C688.369 243.352 688.008 242.717 687.64 241.787C687.272 240.854 686.905 239.646 686.41 238.015L666.637 172.863Z" fill="url(#paint14_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M666.637 172.863C666.142 171.232 665.775 170.024 665.563 169.044C665.352 168.066 665.299 167.338 665.419 166.666C665.635 165.457 666.228 164.347 667.113 163.495C667.605 163.023 668.24 162.662 669.17 162.294C670.102 161.926 671.311 161.559 672.941 161.064L738.094 141.291C739.724 140.796 740.933 140.429 741.913 140.217C742.89 140.006 743.619 139.953 744.29 140.073C745.499 140.289 746.609 140.882 747.461 141.767C747.934 142.259 748.295 142.894 748.662 143.824C749.031 144.757 749.398 145.965 749.892 147.595L769.666 212.748C770.16 214.378 770.527 215.587 770.739 216.567C770.951 217.544 771.003 218.273 770.884 218.944C770.668 220.153 770.075 221.263 769.189 222.115C768.698 222.588 768.063 222.949 767.133 223.316C766.2 223.685 764.992 224.052 763.361 224.546L698.209 244.32C696.578 244.814 695.37 245.181 694.39 245.393C693.412 245.605 692.684 245.657 692.012 245.538C690.803 245.322 689.693 244.729 688.841 243.843C688.369 243.352 688.008 242.717 687.64 241.787C687.272 240.854 686.905 239.646 686.41 238.015L666.637 172.863Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M666.637 172.863C666.142 171.232 665.775 170.024 665.563 169.044C665.352 168.066 665.299 167.338 665.419 166.666C665.635 165.457 666.228 164.347 667.113 163.495C667.605 163.023 668.24 162.662 669.17 162.294C670.102 161.926 671.311 161.559 672.941 161.064L738.094 141.291C739.724 140.796 740.933 140.429 741.913 140.217C742.89 140.006 743.619 139.953 744.29 140.073C745.499 140.289 746.609 140.882 747.461 141.767C747.934 142.259 748.295 142.894 748.662 143.824C749.031 144.757 749.398 145.965 749.892 147.595L769.666 212.748C770.16 214.378 770.527 215.587 770.739 216.567C770.951 217.544 771.003 218.273 770.884 218.944C770.668 220.153 770.075 221.263 769.189 222.115C768.698 222.588 768.063 222.949 767.133 223.316C766.2 223.685 764.992 224.052 763.361 224.546L698.209 244.32C696.578 244.814 695.37 245.181 694.39 245.393C693.412 245.605 692.684 245.657 692.012 245.538C690.803 245.322 689.693 244.729 688.841 243.843C688.369 243.352 688.008 242.717 687.64 241.787C687.272 240.854 686.905 239.646 686.41 238.015L666.637 172.863Z" stroke="url(#paint15_linear_6392_11964)" stroke-width="0.505845"/>
+<path d="M22.5778 38.9115C22.0829 37.281 21.7164 36.0726 21.5043 35.0924C21.2928 34.1151 21.24 33.3865 21.3598 32.7151C21.5756 31.5057 22.1688 30.3957 23.0542 29.5442C23.5457 29.0714 24.1808 28.7103 25.1108 28.343C26.0435 27.9745 27.2518 27.6076 28.8823 27.1128L94.0347 7.33953C95.6652 6.84467 96.8736 6.47814 97.8538 6.26601C98.831 6.05451 99.5597 6.00177 100.231 6.12157C101.441 6.33737 102.551 6.93049 103.402 7.81593C103.875 8.30746 104.236 8.94253 104.604 9.8725C104.972 10.8052 105.339 12.0135 105.834 13.6441L125.607 78.7964C126.102 80.4269 126.468 81.6353 126.681 82.6155C126.892 83.5928 126.945 84.3214 126.825 84.9928C126.609 86.2022 126.016 87.3122 125.131 88.1637C124.639 88.6365 124.004 88.9976 123.074 89.3649C122.141 89.7333 120.933 90.1003 119.302 90.5951L54.1498 110.368C52.5192 110.863 51.3108 111.23 50.3307 111.442C49.3534 111.653 48.6247 111.706 47.9534 111.586C46.744 111.371 45.634 110.777 44.7824 109.892C44.3097 109.401 43.9486 108.765 43.5812 107.835C43.2128 106.903 42.8459 105.694 42.351 104.064L22.5778 38.9115Z" fill="url(#paint16_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M22.5778 38.9115C22.0829 37.281 21.7164 36.0726 21.5043 35.0924C21.2928 34.1151 21.24 33.3865 21.3598 32.7151C21.5756 31.5057 22.1688 30.3957 23.0542 29.5442C23.5457 29.0714 24.1808 28.7103 25.1108 28.343C26.0435 27.9745 27.2518 27.6076 28.8823 27.1128L94.0347 7.33953C95.6652 6.84467 96.8736 6.47814 97.8538 6.26601C98.831 6.05451 99.5597 6.00177 100.231 6.12157C101.441 6.33737 102.551 6.93049 103.402 7.81593C103.875 8.30746 104.236 8.94253 104.604 9.8725C104.972 10.8052 105.339 12.0135 105.834 13.6441L125.607 78.7964C126.102 80.4269 126.468 81.6353 126.681 82.6155C126.892 83.5928 126.945 84.3214 126.825 84.9928C126.609 86.2022 126.016 87.3122 125.131 88.1637C124.639 88.6365 124.004 88.9976 123.074 89.3649C122.141 89.7333 120.933 90.1003 119.302 90.5951L54.1498 110.368C52.5192 110.863 51.3108 111.23 50.3307 111.442C49.3534 111.653 48.6247 111.706 47.9534 111.586C46.744 111.371 45.634 110.777 44.7824 109.892C44.3097 109.401 43.9486 108.765 43.5812 107.835C43.2128 106.903 42.8459 105.694 42.351 104.064L22.5778 38.9115Z" stroke="#414146" stroke-width="0.505845"/>
+<path d="M22.5778 38.9115C22.0829 37.281 21.7164 36.0726 21.5043 35.0924C21.2928 34.1151 21.24 33.3865 21.3598 32.7151C21.5756 31.5057 22.1688 30.3957 23.0542 29.5442C23.5457 29.0714 24.1808 28.7103 25.1108 28.343C26.0435 27.9745 27.2518 27.6076 28.8823 27.1128L94.0347 7.33953C95.6652 6.84467 96.8736 6.47814 97.8538 6.26601C98.831 6.05451 99.5597 6.00177 100.231 6.12157C101.441 6.33737 102.551 6.93049 103.402 7.81593C103.875 8.30746 104.236 8.94253 104.604 9.8725C104.972 10.8052 105.339 12.0135 105.834 13.6441L125.607 78.7964C126.102 80.4269 126.468 81.6353 126.681 82.6155C126.892 83.5928 126.945 84.3214 126.825 84.9928C126.609 86.2022 126.016 87.3122 125.131 88.1637C124.639 88.6365 124.004 88.9976 123.074 89.3649C122.141 89.7333 120.933 90.1003 119.302 90.5951L54.1498 110.368C52.5192 110.863 51.3108 111.23 50.3307 111.442C49.3534 111.653 48.6247 111.706 47.9534 111.586C46.744 111.371 45.634 110.777 44.7824 109.892C44.3097 109.401 43.9486 108.765 43.5812 107.835C43.2128 106.903 42.8459 105.694 42.351 104.064L22.5778 38.9115Z" stroke="url(#paint17_linear_6392_11964)" stroke-opacity="0.8" stroke-width="0.505845"/>
+<path d="M-77.2035 69.1947C-77.6983 67.5642 -78.0649 66.3558 -78.277 65.3756C-78.4885 64.3983 -78.5412 63.6697 -78.4214 62.9983C-78.2056 61.7889 -77.6125 60.6789 -76.7271 59.8274C-76.2355 59.3546 -75.6005 58.9935 -74.6705 58.6262C-73.7378 58.2577 -72.5295 57.8908 -70.8989 57.396L-5.74661 37.6227C-4.11607 37.1279 -2.90767 36.7613 -1.92751 36.5492C-0.950252 36.3377 -0.221586 36.285 0.449783 36.4048C1.65915 36.6206 2.76917 37.2137 3.62073 38.0991C4.09346 38.5907 4.4546 39.2257 4.82193 40.1557C5.19035 41.0884 5.55726 42.2967 6.05212 43.9273L25.8253 109.08C26.3202 110.71 26.6867 111.919 26.8989 112.899C27.1104 113.876 27.1631 114.605 27.0433 115.276C26.8275 116.485 26.2344 117.595 25.3489 118.447C24.8574 118.92 24.2223 119.281 23.2924 119.648C22.3596 120.017 21.1514 120.384 19.5208 120.878L-45.6315 140.652C-47.262 141.147 -48.4704 141.513 -49.4506 141.725C-50.4279 141.937 -51.1565 141.989 -51.8279 141.87C-53.0373 141.654 -54.1473 141.061 -54.9988 140.175C-55.4716 139.684 -55.8327 139.049 -56.2 138.119C-56.5685 137.186 -56.9354 135.978 -57.4302 134.347L-77.2035 69.1947Z" fill="url(#paint18_linear_6392_11964)" fill-opacity="0.16"/>
+<path d="M-77.2035 69.1947C-77.6983 67.5642 -78.0649 66.3558 -78.277 65.3756C-78.4885 64.3983 -78.5412 63.6697 -78.4214 62.9983C-78.2056 61.7889 -77.6125 60.6789 -76.7271 59.8274C-76.2355 59.3546 -75.6005 58.9935 -74.6705 58.6262C-73.7378 58.2577 -72.5295 57.8908 -70.8989 57.396L-5.74661 37.6227C-4.11607 37.1279 -2.90767 36.7613 -1.92751 36.5492C-0.950252 36.3377 -0.221586 36.285 0.449783 36.4048C1.65915 36.6206 2.76917 37.2137 3.62073 38.0991C4.09346 38.5907 4.4546 39.2257 4.82193 40.1557C5.19035 41.0884 5.55726 42.2967 6.05212 43.9273L25.8253 109.08C26.3202 110.71 26.6867 111.919 26.8989 112.899C27.1104 113.876 27.1631 114.605 27.0433 115.276C26.8275 116.485 26.2344 117.595 25.3489 118.447C24.8574 118.92 24.2223 119.281 23.2924 119.648C22.3596 120.017 21.1514 120.384 19.5208 120.878L-45.6315 140.652C-47.262 141.147 -48.4704 141.513 -49.4506 141.725C-50.4279 141.937 -51.1565 141.989 -51.8279 141.87C-53.0373 141.654 -54.1473 141.061 -54.9988 140.175C-55.4716 139.684 -55.8327 139.049 -56.2 138.119C-56.5685 137.186 -56.9354 135.978 -57.4302 134.347L-77.2035 69.1947Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M-77.2035 69.1947C-77.6983 67.5642 -78.0649 66.3558 -78.277 65.3756C-78.4885 64.3983 -78.5412 63.6697 -78.4214 62.9983C-78.2056 61.7889 -77.6125 60.6789 -76.7271 59.8274C-76.2355 59.3546 -75.6005 58.9935 -74.6705 58.6262C-73.7378 58.2577 -72.5295 57.8908 -70.8989 57.396L-5.74661 37.6227C-4.11607 37.1279 -2.90767 36.7613 -1.92751 36.5492C-0.950252 36.3377 -0.221586 36.285 0.449783 36.4048C1.65915 36.6206 2.76917 37.2137 3.62073 38.0991C4.09346 38.5907 4.4546 39.2257 4.82193 40.1557C5.19035 41.0884 5.55726 42.2967 6.05212 43.9273L25.8253 109.08C26.3202 110.71 26.6867 111.919 26.8989 112.899C27.1104 113.876 27.1631 114.605 27.0433 115.276C26.8275 116.485 26.2344 117.595 25.3489 118.447C24.8574 118.92 24.2223 119.281 23.2924 119.648C22.3596 120.017 21.1514 120.384 19.5208 120.878L-45.6315 140.652C-47.262 141.147 -48.4704 141.513 -49.4506 141.725C-50.4279 141.937 -51.1565 141.989 -51.8279 141.87C-53.0373 141.654 -54.1473 141.061 -54.9988 140.175C-55.4716 139.684 -55.8327 139.049 -56.2 138.119C-56.5685 137.186 -56.9354 135.978 -57.4302 134.347L-77.2035 69.1947Z" stroke="url(#paint19_linear_6392_11964)" stroke-width="0.505845"/>
+<mask id="mask3_6392_11964" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="46" y="32" width="56" height="56">
+<path d="M88.4742 32.0001L46 44.8906L58.8906 87.3648L101.365 74.4743L88.4742 32.0001Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_6392_11964)">
+<g opacity="0.32">
+<path d="M83.2079 42.9274C78.5091 39.2104 71.5813 39.806 67.8031 44.1958L61.1565 51.9785C59.3347 54.0711 58.4759 56.8541 58.8179 59.6003C59.0925 61.9084 60.1053 64.0579 61.7468 65.689C61.3547 66.9874 61.2389 68.3329 61.4113 69.6564C61.7415 72.4717 63.209 75.0402 65.4333 76.7565C70.1621 80.4644 77.06 79.8779 80.8381 75.4881L87.4939 67.7354C89.3157 65.6428 90.1745 62.8598 89.8324 60.1136C89.5578 57.8055 88.5451 55.656 86.9035 54.0249C87.2957 52.7265 87.4115 51.381 87.2391 50.0575C86.9297 47.2031 85.4623 44.6346 83.2079 42.9274Z" fill="#6C6C71"/>
+<path d="M75.9777 74.0472C73.5174 75.5473 70.4092 75.3441 68.1666 73.5678C66.8062 72.5393 65.9456 70.9987 65.7239 69.297C65.702 69.0089 65.6892 68.7507 65.6672 68.4625L65.6716 67.9371L66.1825 68.1096C67.3909 68.5291 68.6346 68.7413 69.9137 68.7462L70.2409 68.7451L70.3019 69.0542C70.3993 69.4832 70.656 69.8968 71.0052 70.1839C71.6945 70.7281 72.6345 70.8032 73.3807 70.3474C73.5425 70.2328 73.7042 70.1182 73.8269 69.9827L80.4526 62.239C80.7907 61.8416 80.9423 61.3697 80.8866 60.8625C80.8309 60.3553 80.5562 59.8817 80.1679 59.5737C79.4786 59.0295 78.5477 58.9844 77.8015 59.4402C77.6397 59.5548 77.478 59.6694 77.3553 59.8049L74.8157 62.7705C74.4059 63.2552 73.9088 63.6682 73.3544 64.0002C70.8941 65.5003 67.7859 65.2971 65.5433 63.5208C64.2129 62.4832 63.3223 60.9518 63.1306 59.2409C62.9272 57.5992 63.4592 55.8981 64.5541 54.6486L71.2099 46.8958C71.6197 46.4111 72.1167 45.9982 72.662 45.6361C75.1222 44.136 78.2305 44.3392 80.4731 46.1155C81.8335 47.144 82.6941 48.6846 82.9157 50.3863C82.9376 50.6744 82.9506 50.9326 82.9425 51.2299L82.9381 51.7553L82.4272 51.5828C81.2189 51.1634 79.9751 50.9512 78.6961 50.9462L78.3688 50.9473L78.3078 50.6382C78.2103 50.2092 77.9538 49.7957 77.6046 49.5085C76.9152 48.9643 75.9843 48.9192 75.2382 49.375C75.0764 49.4896 74.9146 49.6042 74.792 49.7397L68.1662 57.4834C67.8282 57.8808 67.6766 58.3527 67.7322 58.8599C67.7879 59.3671 68.0626 59.8407 68.451 60.1487C69.1403 60.6929 70.0712 60.738 70.8174 60.2822C70.9791 60.1676 71.1409 60.053 71.2636 59.9175L73.8032 56.9519C74.213 56.4672 74.71 56.0542 75.2553 55.6922C77.7155 54.1921 80.8239 54.3953 83.0664 56.1716C84.4268 57.2001 85.2874 58.7407 85.509 60.4424C85.7124 62.0841 85.1804 63.7852 84.0855 65.0347L77.4298 72.7875C77.02 73.2722 76.523 73.6851 75.9777 74.0472Z" fill="#1E1E22"/>
+</g>
+</g>
+<g filter="url(#filter10_f_6392_11964)">
+<path d="M507.121 174.584C458.097 174.463 418.355 162.669 418.355 148.241C418.355 133.812 458.097 122.214 507.121 122.335C556.146 122.456 595.888 134.25 595.888 148.678C595.888 163.107 556.146 174.705 507.121 174.584Z" fill="url(#paint20_radial_6392_11964)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter11_f_6392_11964)">
+<path d="M556.492 198.63C469.184 198.415 398.408 168.04 398.408 130.787C398.408 93.5331 469.184 63.5075 556.492 63.7228C643.799 63.9381 714.576 94.3127 714.576 131.566C714.576 168.82 643.799 198.846 556.492 198.63Z" fill="url(#paint21_radial_6392_11964)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter12_f_6392_11964)">
+<path d="M410.871 123.137C411.719 139.28 475.926 149.349 471.644 154.497C467.362 159.644 407.121 172.097 398.069 159.826C389.016 147.555 395.358 85.1883 399.64 80.0406C403.922 74.8928 401.819 110.866 410.871 123.137Z" fill="url(#paint22_radial_6392_11964)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter13_f_6392_11964)">
+<path d="M409.423 176.88C386.15 165.335 384.731 134.771 406.253 108.613C427.775 82.4544 464.088 70.6074 487.361 82.1519C510.634 93.6963 512.053 124.26 490.531 150.419C469.009 176.577 432.696 188.424 409.423 176.88Z" fill="url(#paint23_radial_6392_11964)" fill-opacity="0.08"/>
+</g>
+<path d="M651 8H428C421.373 8 416 13.3726 416 20V150C416 156.627 421.373 162 428 162H651C657.627 162 663 156.627 663 150V20C663 13.3726 657.627 8 651 8Z" fill="#2D2D31" fill-opacity="0.24"/>
+<path d="M651 8.5H428C421.649 8.5 416.5 13.6487 416.5 20V150C416.5 156.351 421.649 161.5 428 161.5H651C657.351 161.5 662.5 156.351 662.5 150V20C662.5 13.6487 657.351 8.5 651 8.5Z" stroke="white" stroke-opacity="0.04"/>
+<g filter="url(#filter15_d_6392_11964)">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="#1D1D21"/>
+<mask id="mask4_6392_11964" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="423" y="15" width="233" height="140">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_6392_11964)">
+<path d="M430.999 15.8002H647.999V14.2002H430.999V15.8002ZM655.199 23.0002V147H656.799V23.0002H655.199ZM647.999 154.2H430.999V155.8H647.999V154.2ZM423.799 147V23.0002H422.199V147H423.799ZM430.999 154.2C427.023 154.2 423.799 150.976 423.799 147H422.199C422.199 151.86 426.139 155.8 430.999 155.8V154.2ZM655.199 147C655.199 150.976 651.975 154.2 647.999 154.2V155.8C652.859 155.8 656.799 151.86 656.799 147H655.199ZM647.999 15.8002C651.975 15.8002 655.199 19.0238 655.199 23.0002H656.799C656.799 18.1401 652.859 14.2002 647.999 14.2002V15.8002ZM430.999 14.2002C426.139 14.2002 422.199 18.1401 422.199 23.0002H423.799C423.799 19.0237 427.023 15.8002 430.999 15.8002V14.2002Z" fill="#2D2D31"/>
+</g>
+<mask id="mask5_6392_11964" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="423" y="15" width="233" height="140">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="white"/>
+</mask>
+<g mask="url(#mask5_6392_11964)">
+<path d="M430.999 15.8002H647.999V14.2002H430.999V15.8002ZM655.199 23.0002V147H656.799V23.0002H655.199ZM647.999 154.2H430.999V155.8H647.999V154.2ZM423.799 147V23.0002H422.199V147H423.799ZM430.999 154.2C427.023 154.2 423.799 150.976 423.799 147H422.199C422.199 151.86 426.139 155.8 430.999 155.8V154.2ZM655.199 147C655.199 150.976 651.975 154.2 647.999 154.2V155.8C652.859 155.8 656.799 151.86 656.799 147H655.199ZM647.999 15.8002C651.975 15.8002 655.199 19.0238 655.199 23.0002H656.799C656.799 18.1401 652.859 14.2002 647.999 14.2002V15.8002ZM430.999 14.2002C426.139 14.2002 422.199 18.1401 422.199 23.0002H423.799C423.799 19.0237 427.023 15.8002 430.999 15.8002V14.2002Z" fill="url(#paint24_linear_6392_11964)" fill-opacity="0.62"/>
+</g>
+</g>
+<path d="M433.5 28C434.881 28 436 26.8807 436 25.5C436 24.1193 434.881 23 433.5 23C432.119 23 431 24.1193 431 25.5C431 26.8807 432.119 28 433.5 28Z" fill="#2D2D31"/>
+<path d="M441.5 28C442.881 28 444 26.8807 444 25.5C444 24.1193 442.881 23 441.5 23C440.119 23 439 24.1193 439 25.5C439 26.8807 440.119 28 441.5 28Z" fill="#2D2D31"/>
+<path d="M449.5 28C450.881 28 452 26.8807 452 25.5C452 24.1193 450.881 23 449.5 23C448.119 23 447 24.1193 447 25.5C447 26.8807 448.119 28 449.5 28Z" fill="#2D2D31"/>
+<path opacity="0.5" d="M645.5 23H460.5C459.119 23 458 24.1193 458 25.5C458 26.8807 459.119 28 460.5 28H645.5C646.881 28 648 26.8807 648 25.5C648 24.1193 646.881 23 645.5 23Z" fill="#2D2D31"/>
+<path opacity="0.5" d="M576 52H503C500.791 52 499 53.7909 499 56V57C499 59.2091 500.791 61 503 61H576C578.209 61 580 59.2091 580 57V56C580 53.7909 578.209 52 576 52Z" fill="#2D2D31"/>
+<path opacity="0.5" d="M608 69H470C467.791 69 466 70.7909 466 73V74C466 76.2091 467.791 78 470 78H608C610.209 78 612 76.2091 612 74V73C612 70.7909 610.209 69 608 69Z" fill="#2D2D31"/>
+<path d="M550 91H528C525.239 91 523 93.2386 523 96C523 98.7614 525.239 101 528 101H550C552.761 101 555 98.7614 555 96C555 93.2386 552.761 91 550 91Z" fill="#2D2D31"/>
+</g>
+</g>
+<defs>
+<clipPath id="bgblur_1_6392_11964_clip_path" transform="translate(-21.245 -74.956)"><path d="M55.152 140.436C54.6572 138.805 54.2906 137.597 54.0785 136.617C53.867 135.64 53.8143 134.911 53.9341 134.24C54.1499 133.03 54.743 131.92 55.6284 131.069C56.12 130.596 56.755 130.235 57.685 129.867C58.6177 129.499 59.826 129.132 61.4565 128.637L126.609 108.864C128.24 108.369 129.448 108.003 130.428 107.791C131.406 107.579 132.134 107.526 132.806 107.646C134.015 107.862 135.125 108.455 135.977 109.34C136.449 109.832 136.81 110.467 137.178 111.397C137.546 112.33 137.913 113.538 138.408 115.169L158.181 180.321C158.676 181.951 159.043 183.16 159.255 184.14C159.466 185.117 159.519 185.846 159.399 186.517C159.183 187.727 158.59 188.837 157.705 189.688C157.213 190.161 156.578 190.522 155.648 190.889C154.716 191.258 153.507 191.625 151.877 192.12L86.724 211.893C85.0934 212.388 83.885 212.754 82.9049 212.966C81.9276 213.178 81.199 213.231 80.5276 213.111C79.3182 212.895 78.2082 212.302 77.3566 211.416C76.8839 210.925 76.5228 210.29 76.1554 209.36C75.787 208.427 75.4201 207.219 74.9253 205.588L55.152 140.436Z"/>
+</clipPath><clipPath id="bgblur_2_6392_11964_clip_path" transform="translate(-602.616 -8.15324)"><path d="M636.523 73.6332C636.029 72.0026 635.662 70.7942 635.45 69.8141C635.238 68.8368 635.186 68.1082 635.305 67.4368C635.521 66.2274 636.114 65.1174 637 64.2658C637.491 63.7931 638.126 63.432 639.056 63.0646C639.989 62.6962 641.197 62.3293 642.828 61.8345L707.98 42.0612C709.611 41.5664 710.819 41.1998 711.799 40.9877C712.777 40.7762 713.505 40.7235 714.177 40.8433C715.386 41.0591 716.496 41.6522 717.348 42.5376C717.82 43.0292 718.181 43.6642 718.549 44.5942C718.917 45.5269 719.284 46.7352 719.779 48.3657L739.552 113.518C740.047 115.149 740.414 116.357 740.626 117.337C740.837 118.315 740.89 119.043 740.77 119.715C740.554 120.924 739.961 122.034 739.076 122.886C738.584 123.358 737.949 123.719 737.019 124.087C736.087 124.455 734.878 124.822 733.248 125.317L668.095 145.09C666.465 145.585 665.256 145.952 664.276 146.164C663.299 146.375 662.57 146.428 661.899 146.308C660.69 146.092 659.58 145.499 658.728 144.614C658.255 144.122 657.894 143.487 657.527 142.557C657.158 141.624 656.791 140.416 656.297 138.786L636.523 73.6332Z"/>
+</clipPath><filter id="filter10_f_6392_11964" x="410.855" y="114.834" width="192.533" height="67.251" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_6392_11964"/>
+</filter>
+<filter id="filter11_f_6392_11964" x="390.908" y="56.2217" width="331.168" height="149.91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_6392_11964"/>
+</filter>
+<filter id="filter12_f_6392_11964" x="378.459" y="64.54" width="108.391" height="115.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_6392_11964"/>
+</filter>
+<filter id="filter13_f_6392_11964" x="350.996" y="37.7314" width="194.793" height="183.569" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_6392_11964"/>
+</filter>
+<filter id="filter15_d_6392_11964" x="418" y="15" width="243" height="150" 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="5"/>
+<feGaussianBlur stdDeviation="2.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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6392_11964"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6392_11964" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6392_11964" x1="1070.9" y1="131.475" x2="961.746" y2="73.1493" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C" stop-opacity="0"/>
+<stop offset="1" stop-color="#2D2D31" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6392_11964" x1="1003.62" y1="60.4421" x2="1029.03" y2="144.182" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6392_11964" x1="841.356" y1="92.7705" x2="732.202" y2="34.4452" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<linearGradient id="paint3_linear_6392_11964" x1="774.072" y1="21.738" x2="799.486" y2="105.478" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint4_linear_6392_11964" x1="871.474" y1="191.999" x2="762.32" y2="133.674" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint5_linear_6392_11964" x1="804.19" y1="120.967" x2="803.5" y2="163" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint6_linear_6392_11964" x1="360.669" y1="128.017" x2="251.516" y2="69.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint7_linear_6392_11964" x1="293.385" y1="56.9841" x2="318.8" y2="140.724" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint8_linear_6392_11964" x1="254" y1="162.5" x2="151.734" y2="99.9745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<linearGradient id="paint9_linear_6392_11964" x1="193.604" y1="87.2673" x2="216" y2="171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint10_linear_6392_11964" x1="161.244" y1="189.541" x2="52.0894" y2="131.216" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint11_linear_6392_11964" x1="89.3573" y1="113.583" x2="109.662" y2="216.612" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_6392_11964" x1="742.615" y1="122.738" x2="633.461" y2="64.4129" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint13_linear_6392_11964" x1="670.729" y1="46.78" x2="691.033" y2="149.809" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_6392_11964" x1="772.728" y1="221.968" x2="663.574" y2="163.643" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint15_linear_6392_11964" x1="735.5" y1="134" x2="733" y2="159" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint16_linear_6392_11964" x1="48.4996" y1="117.5" x2="97.4996" y2="43.4999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<linearGradient id="paint17_linear_6392_11964" x1="152" y1="76.4999" x2="35.9996" y2="70.4999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint18_linear_6392_11964" x1="28.8879" y1="118.3" x2="-80.266" y2="59.9745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint19_linear_6392_11964" x1="-42.5004" y1="88.9999" x2="28.9996" y2="125" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C" stop-opacity="0"/>
+<stop offset="1" stop-color="#414146"/>
+</linearGradient>
+<radialGradient id="paint20_radial_6392_11964" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(461.74 148.383) rotate(8.92235) scale(82.7867 24.1685)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint21_radial_6392_11964" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(556.492 131.176) rotate(-180) scale(131.493 56.107)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint22_radial_6392_11964" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419.781 152.662) rotate(-135.059) scale(30.2949 13.738)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint23_radial_6392_11964" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(426.796 118.893) rotate(64.3713) scale(32.8381 36.5701)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint24_linear_6392_11964" x1="433.241" y1="169.691" x2="518.59" y2="112.753" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054" stop-opacity="0.880574"/>
+<stop offset="0.159063" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#414146"/>
+</linearGradient>
+<clipPath id="clip0_6392_11964">
+<rect width="1080" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(images)/empty-sites-light.svg b/src/routes/(console)/project-[region]-[project]/sites/(images)/empty-sites-light.svg
new file mode 100644
index 000000000..a0314acfc
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(images)/empty-sites-light.svg
@@ -0,0 +1,321 @@
+<svg width="1080" height="184" viewBox="0 0 1080 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6392_12056)">
+<mask id="mask0_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1080" height="184">
+<path d="M1080 0H0V184H1080V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6392_12056)">
+<path d="M1080 0H0V184H1080V0Z" fill="white"/>
+<foreignObject x="900.765" y="-82.4161" width="170.846" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_1_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M934.672 -16.9362C934.177 -18.5667 933.81 -19.7751 933.598 -20.7553C933.387 -21.7325 933.334 -22.4612 933.454 -23.1325C933.67 -24.3419 934.263 -25.4519 935.148 -26.3035C935.64 -26.7762 936.275 -27.1374 937.205 -27.5047C938.137 -27.8731 939.346 -28.24 940.976 -28.7349L1006.13 -48.5081C1007.76 -49.003 1008.97 -49.3695 1009.95 -49.5816C1010.92 -49.7931 1011.65 -49.8459 1012.32 -49.7261C1013.53 -49.5103 1014.64 -48.9172 1015.5 -48.0317C1015.97 -47.5402 1016.33 -46.9051 1016.7 -45.9751C1017.07 -45.0424 1017.43 -43.8341 1017.93 -42.2036L1037.7 22.9487C1038.2 24.5793 1038.56 25.7877 1038.77 26.7678C1038.99 27.7451 1039.04 28.4738 1038.92 29.1451C1038.7 30.3545 1038.11 31.4645 1037.22 32.3161C1036.73 32.7888 1036.1 33.1499 1035.17 33.5173C1034.23 33.8857 1033.03 34.2526 1031.4 34.7475L966.244 54.5207C964.613 55.0156 963.405 55.3821 962.425 55.5942C961.447 55.8057 960.719 55.8585 960.047 55.7387C958.838 55.5229 957.728 54.9297 956.876 54.0443C956.404 53.5528 956.042 52.9177 955.675 51.9877C955.307 51.055 954.94 49.8467 954.445 48.2162L934.672 -16.9362Z" fill="url(#paint0_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint1_linear_6392_12056)" stroke-width="0.505845"/>
+<path d="M964.565 82.443C963.578 79.1899 963.084 77.5633 963.34 76.1287C963.566 74.8667 964.185 73.7085 965.109 72.8199C966.159 71.8097 967.785 71.316 971.038 70.3288L1036.19 50.5555C1039.44 49.5682 1041.07 49.0746 1042.51 49.3306C1043.77 49.5558 1044.93 50.1747 1045.81 51.0986C1046.83 52.149 1047.32 53.7755 1048.31 57.0286L1068.08 122.181C1069.07 125.434 1069.56 127.061 1069.3 128.495C1069.08 129.757 1068.46 130.916 1067.54 131.804C1066.49 132.814 1064.86 133.308 1061.61 134.295L996.453 154.068C993.2 155.056 991.573 155.549 990.139 155.293C988.877 155.068 987.718 154.449 986.83 153.525C985.82 152.475 985.326 150.848 984.339 147.595L964.565 82.443Z" fill="url(#paint2_linear_6392_12056)" fill-opacity="0.6"/>
+<path d="M964.808 82.3695C964.314 80.739 963.947 79.5306 963.735 78.5504C963.523 77.5731 963.471 76.8445 963.59 76.1731C963.806 74.9637 964.399 73.8537 965.285 73.0022C965.776 72.5294 966.411 72.1683 967.341 71.801C968.274 71.4326 969.482 71.0656 971.113 70.5708L1036.27 50.7975C1037.9 50.3027 1039.1 49.9362 1040.08 49.724C1041.06 49.5125 1041.79 49.4598 1042.46 49.5796C1043.67 49.7954 1044.78 50.3885 1045.63 51.2739C1046.11 51.7655 1046.47 52.4006 1046.83 53.3305C1047.2 54.2632 1047.57 55.4715 1048.06 57.1021L1067.84 122.255C1068.33 123.885 1068.7 125.093 1068.91 126.074C1069.12 127.051 1069.18 127.78 1069.06 128.451C1068.84 129.66 1068.25 130.77 1067.36 131.622C1066.87 132.095 1066.23 132.456 1065.3 132.823C1064.37 133.191 1063.16 133.558 1061.53 134.053L996.38 153.826C994.75 154.321 993.541 154.688 992.561 154.9C991.584 155.111 990.855 155.164 990.184 155.044C988.975 154.829 987.865 154.235 987.013 153.35C986.54 152.859 986.179 152.223 985.812 151.293C985.443 150.361 985.077 149.152 984.582 147.522L964.808 82.3695Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M964.808 82.3695C964.314 80.739 963.947 79.5306 963.735 78.5504C963.523 77.5731 963.471 76.8445 963.59 76.1731C963.806 74.9637 964.399 73.8537 965.285 73.0022C965.776 72.5294 966.411 72.1683 967.341 71.801C968.274 71.4326 969.482 71.0656 971.113 70.5708L1036.27 50.7975C1037.9 50.3027 1039.1 49.9362 1040.08 49.724C1041.06 49.5125 1041.79 49.4598 1042.46 49.5796C1043.67 49.7954 1044.78 50.3885 1045.63 51.2739C1046.11 51.7655 1046.47 52.4006 1046.83 53.3305C1047.2 54.2632 1047.57 55.4715 1048.06 57.1021L1067.84 122.255C1068.33 123.885 1068.7 125.093 1068.91 126.074C1069.12 127.051 1069.18 127.78 1069.06 128.451C1068.84 129.66 1068.25 130.77 1067.36 131.622C1066.87 132.095 1066.23 132.456 1065.3 132.823C1064.37 133.191 1063.16 133.558 1061.53 134.053L996.38 153.826C994.75 154.321 993.541 154.688 992.561 154.9C991.584 155.111 990.855 155.164 990.184 155.044C988.975 154.829 987.865 154.235 987.013 153.35C986.54 152.859 986.179 152.223 985.812 151.293C985.443 150.361 985.077 149.152 984.582 147.522L964.808 82.3695Z" stroke="url(#paint3_linear_6392_12056)" stroke-opacity="0.4" stroke-width="0.505845"/>
+<foreignObject x="801.054" y="-52.1466" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_2_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M834.961 13.3334C834.466 11.7028 834.1 10.4944 833.887 9.51423C833.676 8.53697 833.623 7.8083 833.743 7.13693C833.959 5.92756 834.552 4.81755 835.437 3.96599C835.929 3.49326 836.564 3.13213 837.494 2.7648C838.427 2.39638 839.635 2.02947 841.266 1.53461L906.418 -18.2386C908.048 -18.7334 909.257 -19.1 910.237 -19.3121C911.214 -19.5236 911.943 -19.5763 912.614 -19.4565C913.824 -19.2407 914.934 -18.6476 915.785 -17.7622C916.258 -17.2707 916.619 -16.6356 916.986 -15.7056C917.355 -14.7729 917.722 -13.5646 918.217 -11.9341L937.99 53.2183C938.485 54.8488 938.851 56.0572 939.063 57.0374C939.275 58.0146 939.328 58.7432 939.208 59.4146C938.992 60.624 938.399 61.734 937.513 62.5856C937.022 63.0583 936.387 63.4195 935.457 63.7868C934.524 64.1552 933.316 64.5221 931.685 65.017L866.533 84.7902C864.902 85.2851 863.694 85.6516 862.714 85.8637C861.737 86.0753 861.008 86.128 860.337 86.0082C859.127 85.7924 858.017 85.1993 857.166 84.3138C856.693 83.8223 856.332 83.1872 855.964 82.2573C855.596 81.3245 855.229 80.1162 854.734 78.4857L834.961 13.3334Z" fill="url(#paint4_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint5_linear_6392_12056)" stroke-width="0.505845"/>
+<path d="M735.265 43.6654C734.77 42.0349 734.403 40.8265 734.191 39.8463C733.98 38.869 733.927 38.1404 734.047 37.469C734.263 36.2596 734.856 35.1496 735.741 34.2981C736.233 33.8253 736.868 33.4642 737.798 33.0969C738.73 32.7284 739.939 32.3615 741.569 31.8667L806.722 12.0934C808.352 11.5986 809.56 11.2321 810.541 11.0199C811.518 10.8084 812.247 10.7557 812.918 10.8755C814.127 11.0913 815.237 11.6844 816.089 12.5698C816.562 13.0614 816.923 13.6964 817.29 14.6264C817.659 15.5591 818.025 16.7674 818.52 18.398L838.294 83.5503C838.788 85.1808 839.155 86.3892 839.367 87.3694C839.579 88.3467 839.631 89.0753 839.511 89.7467C839.296 90.9561 838.703 92.0661 837.817 92.9176C837.326 93.3904 836.691 93.7515 835.761 94.1188C834.828 94.4873 833.62 94.8542 831.989 95.349L766.837 115.122C765.206 115.617 763.998 115.984 763.018 116.196C762.04 116.407 761.312 116.46 760.64 116.34C759.431 116.125 758.321 115.531 757.469 114.646C756.997 114.154 756.635 113.519 756.268 112.589C755.9 111.657 755.533 110.448 755.038 108.818L735.265 43.6654Z" fill="url(#paint6_linear_6392_12056)"/>
+<path d="M735.265 43.6654C734.77 42.0349 734.403 40.8265 734.191 39.8463C733.98 38.869 733.927 38.1404 734.047 37.469C734.263 36.2596 734.856 35.1496 735.741 34.2981C736.233 33.8253 736.868 33.4642 737.798 33.0969C738.73 32.7284 739.939 32.3615 741.569 31.8667L806.722 12.0934C808.352 11.5986 809.56 11.2321 810.541 11.0199C811.518 10.8084 812.247 10.7557 812.918 10.8755C814.127 11.0913 815.237 11.6844 816.089 12.5698C816.562 13.0614 816.923 13.6964 817.29 14.6264C817.659 15.5591 818.025 16.7674 818.52 18.398L838.294 83.5503C838.788 85.1808 839.155 86.3892 839.367 87.3694C839.579 88.3467 839.631 89.0753 839.511 89.7467C839.296 90.9561 838.703 92.0661 837.817 92.9176C837.326 93.3904 836.691 93.7515 835.761 94.1188C834.828 94.4873 833.62 94.8542 831.989 95.349L766.837 115.122C765.206 115.617 763.998 115.984 763.018 116.196C762.04 116.407 761.312 116.46 760.64 116.34C759.431 116.125 758.321 115.531 757.469 114.646C756.997 114.154 756.635 113.519 756.268 112.589C755.9 111.657 755.533 110.448 755.038 108.818L735.265 43.6654Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M735.265 43.6654C734.77 42.0349 734.403 40.8265 734.191 39.8463C733.98 38.869 733.927 38.1404 734.047 37.469C734.263 36.2596 734.856 35.1496 735.741 34.2981C736.233 33.8253 736.868 33.4642 737.798 33.0969C738.73 32.7284 739.939 32.3615 741.569 31.8667L806.722 12.0934C808.352 11.5986 809.56 11.2321 810.541 11.0199C811.518 10.8084 812.247 10.7557 812.918 10.8755C814.127 11.0913 815.237 11.6844 816.089 12.5698C816.562 13.0614 816.923 13.6964 817.29 14.6264C817.659 15.5591 818.025 16.7674 818.52 18.398L838.294 83.5503C838.788 85.1808 839.155 86.3892 839.367 87.3694C839.579 88.3467 839.631 89.0753 839.511 89.7467C839.296 90.9561 838.703 92.0661 837.817 92.9176C837.326 93.3904 836.691 93.7515 835.761 94.1188C834.828 94.4873 833.62 94.8542 831.989 95.349L766.837 115.122C765.206 115.617 763.998 115.984 763.018 116.196C762.04 116.407 761.312 116.46 760.64 116.34C759.431 116.125 758.321 115.531 757.469 114.646C756.997 114.154 756.635 113.519 756.268 112.589C755.9 111.657 755.533 110.448 755.038 108.818L735.265 43.6654Z" stroke="url(#paint7_linear_6392_12056)" stroke-width="0.505845"/>
+<g opacity="0.32">
+<path d="M790.424 62.7613C789.884 60.8757 787.908 59.7877 786.012 60.3315C784.116 60.8752 783.017 62.8448 783.557 64.7304C784.098 66.6162 786.074 67.7041 787.97 67.1604C789.866 66.6166 790.965 64.6471 790.424 62.7613Z" fill="#D8D8DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M796.324 54.209C796.209 51.0711 795.563 45.3763 791.821 44.4555C788.098 43.5384 784.944 48.2461 783.351 50.9858C780.561 49.5255 775.28 47.2529 772.599 50.0214C769.93 52.7783 772.448 57.8389 774.035 60.5748C771.294 62.2721 766.703 65.5519 767.766 69.2583C768.825 72.9542 774.498 73.4635 777.703 73.455C777.81 76.633 778.383 82.1685 782.111 83.0868C785.863 84.0105 789.148 79.3714 790.754 76.6029C793.574 78.0906 798.682 80.3472 801.353 77.5889C804.032 74.8217 801.659 69.7008 800.067 66.9478C802.699 65.2806 807.263 61.8825 806.216 58.2328C805.164 54.562 799.5 54.2068 796.324 54.209ZM799.169 65.5045C798.243 64.1121 797.119 62.6714 795.833 61.2189C796.129 59.3558 796.299 57.5667 796.336 55.9089C798.665 55.9123 803.792 55.9766 804.574 58.7038C805.363 61.4565 801.244 64.1865 799.169 65.5045ZM800.124 76.4112C798.132 78.4692 793.644 76.1976 791.562 75.1032C792.308 73.6141 792.998 71.9336 793.618 70.1093C795.43 69.4123 797.109 68.6405 798.597 67.8178C799.72 69.7658 802.125 74.3439 800.124 76.4112ZM782.526 81.4363C779.746 80.7521 779.49 75.7393 779.411 73.3985C781.085 73.2933 782.9 73.0427 784.806 72.6586C786.297 73.8423 787.803 74.8911 789.27 75.7674C788.265 77.4996 785.318 82.1236 782.526 81.4363ZM769.408 68.7873C768.616 66.0242 772.904 63.2715 774.927 62.0217C775.855 63.44 776.952 64.8863 778.186 66.3134C777.893 68.2047 777.727 70.0413 777.693 71.7552C775.423 71.7596 770.201 71.5521 769.408 68.7873ZM773.828 51.1991C775.829 49.1325 780.51 51.4258 782.535 52.4817C781.76 53.9949 781.045 55.6694 780.415 57.4518C778.655 58.137 777 58.9011 775.512 59.716C774.233 57.5092 771.829 53.2635 773.828 51.1991ZM790.946 56.3537C792.217 56.1558 793.451 56.0236 794.626 55.9577C794.598 57.1088 794.501 58.3316 794.34 59.6031C793.253 58.4749 792.123 57.3883 790.946 56.3537ZM784.021 53.3188C785.013 53.9177 786.033 54.6116 787.063 55.3863C785.528 55.7493 784.012 56.1838 782.518 56.6884C782.984 55.4946 783.488 54.3651 784.021 53.3188ZM778.577 64.1216C777.775 63.1306 777.048 62.1387 776.407 61.1634C777.434 60.6046 778.547 60.0697 779.722 59.5687C779.269 61.0677 778.887 62.5874 778.577 64.1216ZM783.108 71.2462C781.809 71.4675 780.567 71.6187 779.402 71.6957C779.429 70.5083 779.523 69.2552 779.681 67.9628C780.77 69.1106 781.914 70.2065 783.108 71.2462ZM790.076 74.2641C789.058 73.6519 788.017 72.9506 786.973 72.1743C788.513 71.7971 790.039 71.3598 791.542 70.8557C791.083 72.0823 790.592 73.2244 790.076 74.2641ZM795.44 63.3804C796.288 64.3979 797.044 65.4007 797.696 66.3737C796.653 66.9464 795.508 67.4953 794.283 68.0102C794.732 66.4834 795.121 64.9391 795.44 63.3804ZM792.253 68.8067C789.971 69.64 787.627 70.3103 785.254 70.8281C783.379 69.2847 781.621 67.6002 780.001 65.7923C780.413 63.4068 781.004 61.0529 781.771 58.755C784.052 57.9111 786.398 57.2381 788.78 56.7462C790.637 58.2916 792.382 59.9699 794.014 61.7492C793.591 64.1369 792.994 66.4966 792.253 68.8067ZM791.407 46.1058C794.198 46.7934 794.531 51.9825 794.617 54.256C792.917 54.3474 791.106 54.5717 789.244 54.9225C787.758 53.7294 786.274 52.683 784.837 51.8206C786.005 49.8139 788.642 45.425 791.407 46.1058Z" fill="#D8D8DB"/>
+</g>
+<path d="M765.383 142.894C764.888 141.263 764.521 140.055 764.309 139.075C764.098 138.098 764.045 137.369 764.165 136.698C764.381 135.488 764.974 134.378 765.859 133.527C766.351 133.054 766.986 132.693 767.916 132.325C768.849 131.957 770.057 131.59 771.687 131.095L836.84 111.322C838.47 110.827 839.679 110.461 840.659 110.249C841.636 110.037 842.365 109.984 843.036 110.104C844.246 110.32 845.356 110.913 846.207 111.798C846.68 112.29 847.041 112.925 847.408 113.855C847.777 114.788 848.144 115.996 848.638 117.627L868.412 182.779C868.907 184.409 869.273 185.618 869.485 186.598C869.697 187.575 869.749 188.304 869.63 188.975C869.414 190.185 868.821 191.295 867.935 192.146C867.444 192.619 866.809 192.98 865.879 193.347C864.946 193.716 863.738 194.083 862.107 194.578L796.955 214.351C795.324 214.846 794.116 215.212 793.136 215.424C792.158 215.636 791.43 215.689 790.758 215.569C789.549 215.353 788.439 214.76 787.588 213.874C787.115 213.383 786.754 212.748 786.386 211.818C786.018 210.885 785.651 209.677 785.156 208.046L765.383 142.894Z" fill="url(#paint8_linear_6392_12056)" fill-opacity="0.16"/>
+<path d="M765.383 142.894C764.888 141.263 764.521 140.055 764.309 139.075C764.098 138.098 764.045 137.369 764.165 136.698C764.381 135.488 764.974 134.378 765.859 133.527C766.351 133.054 766.986 132.693 767.916 132.325C768.849 131.957 770.057 131.59 771.687 131.095L836.84 111.322C838.47 110.827 839.679 110.461 840.659 110.249C841.636 110.037 842.365 109.984 843.036 110.104C844.246 110.32 845.356 110.913 846.207 111.798C846.68 112.29 847.041 112.925 847.408 113.855C847.777 114.788 848.144 115.996 848.638 117.627L868.412 182.779C868.907 184.409 869.273 185.618 869.485 186.598C869.697 187.575 869.749 188.304 869.63 188.975C869.414 190.185 868.821 191.295 867.935 192.146C867.444 192.619 866.809 192.98 865.879 193.347C864.946 193.716 863.738 194.083 862.107 194.578L796.955 214.351C795.324 214.846 794.116 215.212 793.136 215.424C792.158 215.636 791.43 215.689 790.758 215.569C789.549 215.353 788.439 214.76 787.588 213.874C787.115 213.383 786.754 212.748 786.386 211.818C786.018 210.885 785.651 209.677 785.156 208.046L765.383 142.894Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M765.383 142.894C764.888 141.263 764.521 140.055 764.309 139.075C764.098 138.098 764.045 137.369 764.165 136.698C764.381 135.488 764.974 134.378 765.859 133.527C766.351 133.054 766.986 132.693 767.916 132.325C768.849 131.957 770.057 131.59 771.687 131.095L836.84 111.322C838.47 110.827 839.679 110.461 840.659 110.249C841.636 110.037 842.365 109.984 843.036 110.104C844.246 110.32 845.356 110.913 846.207 111.798C846.68 112.29 847.041 112.925 847.408 113.855C847.777 114.788 848.144 115.996 848.638 117.627L868.412 182.779C868.907 184.409 869.273 185.618 869.485 186.598C869.697 187.575 869.749 188.304 869.63 188.975C869.414 190.185 868.821 191.295 867.935 192.146C867.444 192.619 866.809 192.98 865.879 193.347C864.946 193.716 863.738 194.083 862.107 194.578L796.955 214.351C795.324 214.846 794.116 215.212 793.136 215.424C792.158 215.636 791.43 215.689 790.758 215.569C789.549 215.353 788.439 214.76 787.588 213.874C787.115 213.383 786.754 212.748 786.386 211.818C786.018 210.885 785.651 209.677 785.156 208.046L765.383 142.894Z" stroke="url(#paint9_linear_6392_12056)" stroke-width="0.505845"/>
+<path d="M254.578 78.9115C254.083 77.281 253.717 76.0726 253.505 75.0924C253.293 74.1151 253.24 73.3865 253.36 72.7151C253.576 71.5057 254.169 70.3957 255.055 69.5442C255.546 69.0714 256.181 68.7103 257.111 68.343C258.044 67.9745 259.252 67.6076 260.883 67.1128L326.035 47.3395C327.666 46.8447 328.874 46.4781 329.854 46.266C330.831 46.0545 331.56 46.0018 332.231 46.1216C333.441 46.3374 334.551 46.9305 335.402 47.8159C335.875 48.3075 336.236 48.9425 336.604 49.8725C336.972 50.8052 337.339 52.0135 337.834 53.6441L357.607 118.796C358.102 120.427 358.468 121.635 358.681 122.616C358.892 123.593 358.945 124.322 358.825 124.993C358.609 126.202 358.016 127.312 357.131 128.164C356.639 128.637 356.004 128.998 355.074 129.365C354.141 129.733 352.933 130.1 351.302 130.595L286.15 150.368C284.52 150.863 283.311 151.23 282.331 151.442C281.354 151.653 280.625 151.706 279.954 151.586C278.744 151.371 277.634 150.777 276.783 149.892C276.31 149.401 275.949 148.765 275.582 147.835C275.213 146.903 274.846 145.694 274.351 144.064L254.578 78.9115Z" fill="url(#paint10_linear_6392_12056)" fill-opacity="0.24"/>
+<path d="M254.578 78.9115C254.083 77.281 253.717 76.0726 253.505 75.0924C253.293 74.1151 253.24 73.3865 253.36 72.7151C253.576 71.5057 254.169 70.3957 255.055 69.5442C255.546 69.0714 256.181 68.7103 257.111 68.343C258.044 67.9745 259.252 67.6076 260.883 67.1128L326.035 47.3395C327.666 46.8447 328.874 46.4781 329.854 46.266C330.831 46.0545 331.56 46.0018 332.231 46.1216C333.441 46.3374 334.551 46.9305 335.402 47.8159C335.875 48.3075 336.236 48.9425 336.604 49.8725C336.972 50.8052 337.339 52.0135 337.834 53.6441L357.607 118.796C358.102 120.427 358.468 121.635 358.681 122.616C358.892 123.593 358.945 124.322 358.825 124.993C358.609 126.202 358.016 127.312 357.131 128.164C356.639 128.637 356.004 128.998 355.074 129.365C354.141 129.733 352.933 130.1 351.302 130.595L286.15 150.368C284.52 150.863 283.311 151.23 282.331 151.442C281.354 151.653 280.625 151.706 279.954 151.586C278.744 151.371 277.634 150.777 276.783 149.892C276.31 149.401 275.949 148.765 275.582 147.835C275.213 146.903 274.846 145.694 274.351 144.064L254.578 78.9115Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M254.578 78.9115C254.083 77.281 253.717 76.0726 253.505 75.0924C253.293 74.1151 253.24 73.3865 253.36 72.7151C253.576 71.5057 254.169 70.3957 255.055 69.5442C255.546 69.0714 256.181 68.7103 257.111 68.343C258.044 67.9745 259.252 67.6076 260.883 67.1128L326.035 47.3395C327.666 46.8447 328.874 46.4781 329.854 46.266C330.831 46.0545 331.56 46.0018 332.231 46.1216C333.441 46.3374 334.551 46.9305 335.402 47.8159C335.875 48.3075 336.236 48.9425 336.604 49.8725C336.972 50.8052 337.339 52.0135 337.834 53.6441L357.607 118.796C358.102 120.427 358.468 121.635 358.681 122.616C358.892 123.593 358.945 124.322 358.825 124.993C358.609 126.202 358.016 127.312 357.131 128.164C356.639 128.637 356.004 128.998 355.074 129.365C354.141 129.733 352.933 130.1 351.302 130.595L286.15 150.368C284.52 150.863 283.311 151.23 282.331 151.442C281.354 151.653 280.625 151.706 279.954 151.586C278.744 151.371 277.634 150.777 276.783 149.892C276.31 149.401 275.949 148.765 275.582 147.835C275.213 146.903 274.846 145.694 274.351 144.064L254.578 78.9115Z" stroke="url(#paint11_linear_6392_12056)" stroke-width="0.505845"/>
+<path d="M154.797 109.195C154.302 107.564 153.936 106.356 153.723 105.376C153.512 104.398 153.459 103.67 153.579 102.998C153.795 101.789 154.388 100.679 155.273 99.8274C155.765 99.3546 156.4 98.9935 157.33 98.6262C158.263 98.2577 159.471 97.8908 161.101 97.396L226.254 77.6227C227.884 77.1279 229.093 76.7613 230.073 76.5492C231.05 76.3377 231.779 76.285 232.45 76.4048C233.66 76.6206 234.77 77.2137 235.621 78.0991C236.094 78.5907 236.455 79.2257 236.822 80.1557C237.191 81.0884 237.558 82.2967 238.053 83.9273L257.826 149.08C258.321 150.71 258.687 151.919 258.899 152.899C259.111 153.876 259.164 154.605 259.044 155.276C258.828 156.485 258.235 157.595 257.349 158.447C256.858 158.92 256.223 159.281 255.293 159.648C254.36 160.017 253.152 160.384 251.521 160.878L186.369 180.652C184.738 181.147 183.53 181.513 182.55 181.725C181.573 181.937 180.844 181.989 180.173 181.87C178.963 181.654 177.853 181.061 177.002 180.175C176.529 179.684 176.168 179.049 175.8 178.119C175.432 177.186 175.065 175.978 174.57 174.347L154.797 109.195Z" fill="url(#paint12_linear_6392_12056)"/>
+<path d="M154.797 109.195C154.302 107.564 153.936 106.356 153.723 105.376C153.512 104.398 153.459 103.67 153.579 102.998C153.795 101.789 154.388 100.679 155.273 99.8274C155.765 99.3546 156.4 98.9935 157.33 98.6262C158.263 98.2577 159.471 97.8908 161.101 97.396L226.254 77.6227C227.884 77.1279 229.093 76.7613 230.073 76.5492C231.05 76.3377 231.779 76.285 232.45 76.4048C233.66 76.6206 234.77 77.2137 235.621 78.0991C236.094 78.5907 236.455 79.2257 236.822 80.1557C237.191 81.0884 237.558 82.2967 238.053 83.9273L257.826 149.08C258.321 150.71 258.687 151.919 258.899 152.899C259.111 153.876 259.164 154.605 259.044 155.276C258.828 156.485 258.235 157.595 257.349 158.447C256.858 158.92 256.223 159.281 255.293 159.648C254.36 160.017 253.152 160.384 251.521 160.878L186.369 180.652C184.738 181.147 183.53 181.513 182.55 181.725C181.573 181.937 180.844 181.989 180.173 181.87C178.963 181.654 177.853 181.061 177.002 180.175C176.529 179.684 176.168 179.049 175.8 178.119C175.432 177.186 175.065 175.978 174.57 174.347L154.797 109.195Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M154.797 109.195C154.302 107.564 153.936 106.356 153.723 105.376C153.512 104.398 153.459 103.67 153.579 102.998C153.795 101.789 154.388 100.679 155.273 99.8274C155.765 99.3546 156.4 98.9935 157.33 98.6262C158.263 98.2577 159.471 97.8908 161.101 97.396L226.254 77.6227C227.884 77.1279 229.093 76.7613 230.073 76.5492C231.05 76.3377 231.779 76.285 232.45 76.4048C233.66 76.6206 234.77 77.2137 235.621 78.0991C236.094 78.5907 236.455 79.2257 236.822 80.1557C237.191 81.0884 237.558 82.2967 238.053 83.9273L257.826 149.08C258.321 150.71 258.687 151.919 258.899 152.899C259.111 153.876 259.164 154.605 259.044 155.276C258.828 156.485 258.235 157.595 257.349 158.447C256.858 158.92 256.223 159.281 255.293 159.648C254.36 160.017 253.152 160.384 251.521 160.878L186.369 180.652C184.738 181.147 183.53 181.513 182.55 181.725C181.573 181.937 180.844 181.989 180.173 181.87C178.963 181.654 177.853 181.061 177.002 180.175C176.529 179.684 176.168 179.049 175.8 178.119C175.432 177.186 175.065 175.978 174.57 174.347L154.797 109.195Z" stroke="url(#paint13_linear_6392_12056)" stroke-width="0.505845"/>
+<g opacity="0.32">
+<mask id="mask1_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="991" y="78" width="50" height="50">
+<path d="M1028.9 78.1718L991.297 89.585L1002.71 127.191L1040.32 115.778L1028.9 78.1718Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_6392_12056)">
+<path d="M991.297 89.5851L1002.71 127.191L1040.32 115.778L1028.9 78.1719L991.297 89.5851ZM1020.68 112.7C1021.79 116.36 1020.15 118.676 1017.02 119.626C1014.19 120.485 1012.11 119.518 1010.74 118.008L1013.08 115.393C1013.94 116.209 1014.7 116.889 1015.91 116.52C1017.12 116.152 1017.67 115.491 1017.13 113.725L1013.48 101.709L1017.02 100.637L1020.68 112.7ZM1030.65 115.497C1027.36 116.494 1024.77 115.573 1023.11 113.838L1025.48 111.298C1026.61 112.305 1027.87 112.915 1029.61 112.386C1031.08 111.942 1031.79 110.926 1031.48 109.915C1031.12 108.703 1030.02 108.566 1028.2 108.35L1027.2 108.239C1024.32 107.926 1022.21 107.079 1021.34 104.202C1020.54 101.552 1021.94 98.9216 1025.1 97.9638C1027.35 97.2819 1029.2 97.5736 1030.98 99.2678L1028.77 101.87C1027.83 100.967 1027.05 100.738 1026.03 101.046C1025.02 101.354 1024.54 102.215 1024.8 103.073C1025.12 104.133 1025.91 104.363 1027.63 104.56L1028.62 104.67C1032.02 105.046 1034.11 105.844 1035.01 108.796C1035.97 111.977 1034 114.479 1030.65 115.497Z" fill="#D8D8DB"/>
+</g>
+</g>
+<foreignObject x="21.245" y="74.956" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_3_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M55.152 140.436C54.6572 138.805 54.2906 137.597 54.0785 136.617C53.867 135.64 53.8143 134.911 53.9341 134.24C54.1499 133.03 54.743 131.92 55.6284 131.069C56.12 130.596 56.755 130.235 57.685 129.867C58.6177 129.499 59.826 129.132 61.4565 128.637L126.609 108.864C128.24 108.369 129.448 108.003 130.428 107.791C131.406 107.579 132.134 107.526 132.806 107.646C134.015 107.862 135.125 108.455 135.977 109.34C136.449 109.832 136.81 110.467 137.178 111.397C137.546 112.33 137.913 113.538 138.408 115.169L158.181 180.321C158.676 181.951 159.043 183.16 159.255 184.14C159.466 185.117 159.519 185.846 159.399 186.517C159.183 187.727 158.59 188.837 157.705 189.688C157.213 190.161 156.578 190.522 155.648 190.889C154.716 191.258 153.507 191.625 151.877 192.12L86.724 211.893C85.0934 212.388 83.885 212.754 82.9049 212.966C81.9276 213.178 81.199 213.231 80.5276 213.111C79.3182 212.895 78.2082 212.302 77.3566 211.416C76.8839 210.925 76.5228 210.29 76.1554 209.36C75.787 208.427 75.4201 207.219 74.9253 205.588L55.152 140.436Z" fill="url(#paint14_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint15_linear_6392_12056)" stroke-width="0.505845"/>
+<foreignObject x="602.616" y="8.15324" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_4_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M636.523 73.6332C636.028 72.0026 635.661 70.7942 635.449 69.8141C635.237 68.8368 635.186 68.1082 635.306 67.4368C635.521 66.2274 636.113 65.1174 636.999 64.2658C637.49 63.7931 638.127 63.432 639.056 63.0646C639.989 62.6962 641.197 62.3293 642.827 61.8345L707.979 42.0612C709.61 41.5664 710.818 41.1998 711.798 40.9877C712.776 40.7762 713.504 40.7235 714.176 40.8433C715.385 41.0591 716.495 41.6522 717.347 42.5376C717.819 43.0292 718.181 43.6642 718.548 44.5942C718.916 45.5269 719.283 46.7352 719.778 48.3657L739.551 113.518C740.046 115.149 740.413 116.357 740.625 117.337C740.836 118.315 740.889 119.043 740.769 119.715C740.553 120.924 739.96 122.034 739.075 122.886C738.583 123.358 737.948 123.719 737.018 124.087C736.086 124.455 734.877 124.822 733.247 125.317L668.094 145.09C666.464 145.585 665.256 145.952 664.275 146.164C663.298 146.375 662.569 146.428 661.898 146.308C660.689 146.092 659.579 145.499 658.727 144.614C658.254 144.122 657.893 143.487 657.526 142.557C657.158 141.624 656.791 140.416 656.296 138.786L636.523 73.6332Z" fill="url(#paint16_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint17_linear_6392_12056)" stroke-width="0.505845"/>
+<mask id="mask2_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="180" y="99" width="56" height="56">
+<path d="M222.474 99.0001L180 111.891L192.891 154.365L235.365 141.474L222.474 99.0001Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_6392_12056)">
+<g opacity="0.32">
+<path d="M201.156 109.346C201.082 109.376 200.847 109.473 200.634 109.557C195.745 111.536 191.859 115.677 190.141 120.751C189.184 123.573 188.92 126.524 189.364 129.431C189.517 130.446 189.587 130.738 189.987 132.056C190.387 133.375 190.491 133.656 190.928 134.585C193.907 140.939 200.331 145.087 207.374 145.209C208.635 145.231 209.922 145.116 211.346 144.85C211.9 144.746 214.218 144.042 214.736 143.821C217.033 142.837 218.869 141.637 220.547 140.021C220.804 139.773 220.85 139.714 220.798 139.692C220.764 139.679 218.939 138.333 216.744 136.702L212.753 133.738L207.614 129.567C204.787 127.274 202.466 125.402 202.452 125.406C202.437 125.407 203.131 127.742 203.988 130.592C205.49 135.58 205.548 135.782 205.521 135.918C205.483 136.115 205.434 136.205 205.312 136.325C205.218 136.414 205.125 136.454 204.602 136.613L204.004 136.794L203.814 136.742C203.69 136.708 203.588 136.645 203.506 136.56L203.386 136.426L201.287 129.488L199.192 122.545L199.258 122.378C199.291 122.288 199.381 122.159 199.45 122.089C199.571 121.977 199.624 121.953 200.223 121.772C200.929 121.557 201.055 121.549 201.299 121.694C201.368 121.734 204.166 124.043 207.52 126.83C210.875 129.616 215.46 133.419 217.712 135.286L221.803 138.68L221.916 138.544C222.924 137.346 223.9 135.781 224.585 134.251C226.043 131.001 226.535 127.429 226.005 123.94C225.852 122.925 225.782 122.632 225.382 121.314C224.982 119.996 224.877 119.714 224.44 118.785C221.462 112.432 215.037 108.284 207.995 108.162C206.752 108.138 205.471 108.251 204.076 108.509C203.733 108.575 201.435 109.231 201.156 109.346ZM211.649 117.85C211.841 117.883 212.024 118.001 212.123 118.152C212.178 118.234 212.768 120.155 214.077 124.492L215.954 130.715L214.347 129.367L212.737 128.02L211.365 123.498C210.477 120.575 209.993 118.927 209.989 118.842C209.986 118.631 210.061 118.442 210.199 118.302C210.319 118.186 210.369 118.163 210.912 117.998C211.424 117.843 211.516 117.823 211.649 117.85Z" fill="#D8D8DB"/>
+</g>
+</g>
+<path d="M666.637 172.863C666.142 171.232 665.775 170.024 665.563 169.044C665.352 168.066 665.299 167.338 665.419 166.666C665.635 165.457 666.228 164.347 667.113 163.495C667.605 163.023 668.24 162.662 669.17 162.294C670.102 161.926 671.311 161.559 672.941 161.064L738.094 141.291C739.724 140.796 740.933 140.429 741.913 140.217C742.89 140.006 743.619 139.953 744.29 140.073C745.499 140.289 746.609 140.882 747.461 141.767C747.934 142.259 748.295 142.894 748.662 143.824C749.031 144.757 749.398 145.965 749.892 147.595L769.666 212.748C770.16 214.378 770.527 215.587 770.739 216.567C770.951 217.544 771.003 218.273 770.884 218.944C770.668 220.153 770.075 221.263 769.189 222.115C768.698 222.588 768.063 222.949 767.133 223.316C766.2 223.685 764.992 224.052 763.361 224.546L698.209 244.32C696.578 244.814 695.37 245.181 694.39 245.393C693.412 245.605 692.684 245.657 692.012 245.538C690.803 245.322 689.693 244.729 688.841 243.843C688.369 243.352 688.008 242.717 687.64 241.787C687.272 240.854 686.905 239.646 686.41 238.015L666.637 172.863Z" fill="url(#paint18_linear_6392_12056)" fill-opacity="0.16"/>
+<path d="M666.637 172.863C666.142 171.232 665.775 170.024 665.563 169.044C665.352 168.066 665.299 167.338 665.419 166.666C665.635 165.457 666.228 164.347 667.113 163.495C667.605 163.023 668.24 162.662 669.17 162.294C670.102 161.926 671.311 161.559 672.941 161.064L738.094 141.291C739.724 140.796 740.933 140.429 741.913 140.217C742.89 140.006 743.619 139.953 744.29 140.073C745.499 140.289 746.609 140.882 747.461 141.767C747.934 142.259 748.295 142.894 748.662 143.824C749.031 144.757 749.398 145.965 749.892 147.595L769.666 212.748C770.16 214.378 770.527 215.587 770.739 216.567C770.951 217.544 771.003 218.273 770.884 218.944C770.668 220.153 770.075 221.263 769.189 222.115C768.698 222.588 768.063 222.949 767.133 223.316C766.2 223.685 764.992 224.052 763.361 224.546L698.209 244.32C696.578 244.814 695.37 245.181 694.39 245.393C693.412 245.605 692.684 245.657 692.012 245.538C690.803 245.322 689.693 244.729 688.841 243.843C688.369 243.352 688.008 242.717 687.64 241.787C687.272 240.854 686.905 239.646 686.41 238.015L666.637 172.863Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M666.637 172.863C666.142 171.232 665.775 170.024 665.563 169.044C665.352 168.066 665.299 167.338 665.419 166.666C665.635 165.457 666.228 164.347 667.113 163.495C667.605 163.023 668.24 162.662 669.17 162.294C670.102 161.926 671.311 161.559 672.941 161.064L738.094 141.291C739.724 140.796 740.933 140.429 741.913 140.217C742.89 140.006 743.619 139.953 744.29 140.073C745.499 140.289 746.609 140.882 747.461 141.767C747.934 142.259 748.295 142.894 748.662 143.824C749.031 144.757 749.398 145.965 749.892 147.595L769.666 212.748C770.16 214.378 770.527 215.587 770.739 216.567C770.951 217.544 771.003 218.273 770.884 218.944C770.668 220.153 770.075 221.263 769.189 222.115C768.698 222.588 768.063 222.949 767.133 223.316C766.2 223.685 764.992 224.052 763.361 224.546L698.209 244.32C696.578 244.814 695.37 245.181 694.39 245.393C693.412 245.605 692.684 245.657 692.012 245.538C690.803 245.322 689.693 244.729 688.841 243.843C688.369 243.352 688.008 242.717 687.64 241.787C687.272 240.854 686.905 239.646 686.41 238.015L666.637 172.863Z" stroke="url(#paint19_linear_6392_12056)" stroke-width="0.505845"/>
+<path d="M22.3349 38.985C21.3476 35.7319 20.8539 34.1053 21.1099 32.6707C21.3351 31.4087 21.954 30.2505 22.878 29.3619C23.9283 28.3517 25.5549 27.858 28.808 26.8708L93.9603 7.09749C97.2134 6.1102 98.8399 5.61657 100.275 5.87257C101.537 6.09775 102.695 6.71665 103.584 7.64059C104.594 8.69096 105.088 10.3175 106.075 13.5706L125.848 78.7229C126.835 81.976 127.329 83.6026 127.073 85.0372C126.848 86.2992 126.229 87.4574 125.305 88.346C124.255 89.3562 122.628 89.8499 119.375 90.8371L54.2223 110.61C50.9692 111.598 49.3427 112.091 47.908 111.835C46.6461 111.61 45.4878 110.991 44.5992 110.067C43.589 109.017 43.0954 107.39 42.1081 104.137L22.3349 38.985Z" fill="url(#paint20_linear_6392_12056)"/>
+<path d="M22.5778 38.9115C22.0829 37.281 21.7164 36.0726 21.5043 35.0924C21.2928 34.1151 21.24 33.3865 21.3598 32.7151C21.5756 31.5057 22.1688 30.3957 23.0542 29.5442C23.5457 29.0714 24.1808 28.7103 25.1108 28.343C26.0435 27.9745 27.2518 27.6076 28.8823 27.1128L94.0347 7.33953C95.6652 6.84467 96.8736 6.47814 97.8538 6.26601C98.831 6.05451 99.5597 6.00177 100.231 6.12157C101.441 6.33737 102.551 6.93049 103.402 7.81593C103.875 8.30746 104.236 8.94253 104.604 9.8725C104.972 10.8052 105.339 12.0135 105.834 13.6441L125.607 78.7964C126.102 80.4269 126.468 81.6353 126.681 82.6155C126.892 83.5928 126.945 84.3214 126.825 84.9928C126.609 86.2022 126.016 87.3122 125.131 88.1637C124.639 88.6365 124.004 88.9976 123.074 89.3649C122.141 89.7333 120.933 90.1003 119.302 90.5951L54.1498 110.368C52.5192 110.863 51.3108 111.23 50.3307 111.442C49.3534 111.653 48.6247 111.706 47.9534 111.586C46.744 111.371 45.634 110.777 44.7824 109.892C44.3097 109.401 43.9486 108.765 43.5812 107.835C43.2128 106.903 42.8459 105.694 42.351 104.064L22.5778 38.9115Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M22.5778 38.9115C22.0829 37.281 21.7164 36.0726 21.5043 35.0924C21.2928 34.1151 21.24 33.3865 21.3598 32.7151C21.5756 31.5057 22.1688 30.3957 23.0542 29.5442C23.5457 29.0714 24.1808 28.7103 25.1108 28.343C26.0435 27.9745 27.2518 27.6076 28.8823 27.1128L94.0347 7.33953C95.6652 6.84467 96.8736 6.47814 97.8538 6.26601C98.831 6.05451 99.5597 6.00177 100.231 6.12157C101.441 6.33737 102.551 6.93049 103.402 7.81593C103.875 8.30746 104.236 8.94253 104.604 9.8725C104.972 10.8052 105.339 12.0135 105.834 13.6441L125.607 78.7964C126.102 80.4269 126.468 81.6353 126.681 82.6155C126.892 83.5928 126.945 84.3214 126.825 84.9928C126.609 86.2022 126.016 87.3122 125.131 88.1637C124.639 88.6365 124.004 88.9976 123.074 89.3649C122.141 89.7333 120.933 90.1003 119.302 90.5951L54.1498 110.368C52.5192 110.863 51.3108 111.23 50.3307 111.442C49.3534 111.653 48.6247 111.706 47.9534 111.586C46.744 111.371 45.634 110.777 44.7824 109.892C44.3097 109.401 43.9486 108.765 43.5812 107.835C43.2128 106.903 42.8459 105.694 42.351 104.064L22.5778 38.9115Z" stroke="url(#paint21_linear_6392_12056)" stroke-opacity="0.8" stroke-width="0.505845"/>
+<path d="M-77.2035 69.1947C-77.6983 67.5642 -78.0648 66.3558 -78.277 65.3756C-78.4885 64.3983 -78.5412 63.6697 -78.4214 62.9983C-78.2056 61.7889 -77.6125 60.6789 -76.7271 59.8274C-76.2355 59.3546 -75.6004 58.9935 -74.6705 58.6262C-73.7377 58.2577 -72.5295 57.8908 -70.8989 57.396L-5.74659 37.6227C-4.11605 37.1279 -2.90765 36.7613 -1.92749 36.5492C-0.950227 36.3377 -0.221563 36.285 0.449806 36.4048C1.65918 36.6206 2.76919 37.2137 3.62075 38.0991C4.09348 38.5907 4.45462 39.2257 4.82195 40.1557C5.19037 41.0884 5.55728 42.2967 6.05214 43.9273L25.8254 109.08C26.3202 110.71 26.6868 111.919 26.8989 112.899C27.1104 113.876 27.1631 114.605 27.0433 115.276C26.8275 116.485 26.2344 117.595 25.349 118.447C24.8574 118.92 24.2224 119.281 23.2924 119.648C22.3597 120.017 21.1514 120.384 19.5208 120.878L-45.6315 140.652C-47.262 141.147 -48.4704 141.513 -49.4506 141.725C-50.4278 141.937 -51.1565 141.989 -51.8279 141.87C-53.0373 141.654 -54.1473 141.061 -54.9988 140.175C-55.4716 139.684 -55.8327 139.049 -56.2 138.119C-56.5684 137.186 -56.9354 135.978 -57.4302 134.347L-77.2035 69.1947Z" fill="url(#paint22_linear_6392_12056)" fill-opacity="0.16"/>
+<path d="M-77.2035 69.1947C-77.6983 67.5642 -78.0648 66.3558 -78.277 65.3756C-78.4885 64.3983 -78.5412 63.6697 -78.4214 62.9983C-78.2056 61.7889 -77.6125 60.6789 -76.7271 59.8274C-76.2355 59.3546 -75.6004 58.9935 -74.6705 58.6262C-73.7377 58.2577 -72.5295 57.8908 -70.8989 57.396L-5.74659 37.6227C-4.11605 37.1279 -2.90765 36.7613 -1.92749 36.5492C-0.950227 36.3377 -0.221563 36.285 0.449806 36.4048C1.65918 36.6206 2.76919 37.2137 3.62075 38.0991C4.09348 38.5907 4.45462 39.2257 4.82195 40.1557C5.19037 41.0884 5.55728 42.2967 6.05214 43.9273L25.8254 109.08C26.3202 110.71 26.6868 111.919 26.8989 112.899C27.1104 113.876 27.1631 114.605 27.0433 115.276C26.8275 116.485 26.2344 117.595 25.349 118.447C24.8574 118.92 24.2224 119.281 23.2924 119.648C22.3597 120.017 21.1514 120.384 19.5208 120.878L-45.6315 140.652C-47.262 141.147 -48.4704 141.513 -49.4506 141.725C-50.4278 141.937 -51.1565 141.989 -51.8279 141.87C-53.0373 141.654 -54.1473 141.061 -54.9988 140.175C-55.4716 139.684 -55.8327 139.049 -56.2 138.119C-56.5684 137.186 -56.9354 135.978 -57.4302 134.347L-77.2035 69.1947Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M-77.2035 69.1947C-77.6983 67.5642 -78.0648 66.3558 -78.277 65.3756C-78.4885 64.3983 -78.5412 63.6697 -78.4214 62.9983C-78.2056 61.7889 -77.6125 60.6789 -76.7271 59.8274C-76.2355 59.3546 -75.6004 58.9935 -74.6705 58.6262C-73.7377 58.2577 -72.5295 57.8908 -70.8989 57.396L-5.74659 37.6227C-4.11605 37.1279 -2.90765 36.7613 -1.92749 36.5492C-0.950227 36.3377 -0.221563 36.285 0.449806 36.4048C1.65918 36.6206 2.76919 37.2137 3.62075 38.0991C4.09348 38.5907 4.45462 39.2257 4.82195 40.1557C5.19037 41.0884 5.55728 42.2967 6.05214 43.9273L25.8254 109.08C26.3202 110.71 26.6868 111.919 26.8989 112.899C27.1104 113.876 27.1631 114.605 27.0433 115.276C26.8275 116.485 26.2344 117.595 25.349 118.447C24.8574 118.92 24.2224 119.281 23.2924 119.648C22.3597 120.017 21.1514 120.384 19.5208 120.878L-45.6315 140.652C-47.262 141.147 -48.4704 141.513 -49.4506 141.725C-50.4278 141.937 -51.1565 141.989 -51.8279 141.87C-53.0373 141.654 -54.1473 141.061 -54.9988 140.175C-55.4716 139.684 -55.8327 139.049 -56.2 138.119C-56.5684 137.186 -56.9354 135.978 -57.4302 134.347L-77.2035 69.1947Z" stroke="url(#paint23_linear_6392_12056)" stroke-width="0.505845"/>
+<path d="M537.293 103.749C536.798 102.118 536.432 100.91 536.22 99.9293C536.008 98.9521 535.955 98.2234 536.075 97.552C536.291 96.3427 536.884 95.2326 537.769 94.3811C538.261 93.9083 538.896 93.5472 539.826 93.1799C540.759 92.8115 541.967 92.4445 543.598 91.9497L608.75 72.1765C610.38 71.6816 611.589 71.3151 612.569 71.1029C613.546 70.8914 614.275 70.8387 614.946 70.9585C616.156 71.1743 617.266 71.7674 618.117 72.6529C618.59 73.1444 618.951 73.7795 619.318 74.7094C619.687 75.6422 620.054 76.8504 620.549 78.481L640.322 143.633C640.817 145.264 641.183 146.472 641.395 147.453C641.607 148.43 641.66 149.158 641.54 149.83C641.324 151.039 640.731 152.149 639.845 153.001C639.354 153.473 638.719 153.835 637.789 154.202C636.856 154.57 635.648 154.937 634.017 155.432L568.865 175.205C567.234 175.7 566.026 176.067 565.046 176.279C564.069 176.49 563.34 176.543 562.669 176.423C561.459 176.208 560.349 175.614 559.498 174.729C559.025 174.237 558.664 173.602 558.296 172.672C557.928 171.74 557.561 170.531 557.066 168.901L537.293 103.749Z" fill="url(#paint24_linear_6392_12056)" fill-opacity="0.16"/>
+<path d="M537.293 103.749C536.798 102.118 536.432 100.91 536.22 99.9293C536.008 98.9521 535.955 98.2234 536.075 97.552C536.291 96.3427 536.884 95.2326 537.769 94.3811C538.261 93.9083 538.896 93.5472 539.826 93.1799C540.759 92.8115 541.967 92.4445 543.598 91.9497L608.75 72.1765C610.38 71.6816 611.589 71.3151 612.569 71.1029C613.546 70.8914 614.275 70.8387 614.946 70.9585C616.156 71.1743 617.266 71.7674 618.117 72.6529C618.59 73.1444 618.951 73.7795 619.318 74.7094C619.687 75.6422 620.054 76.8504 620.549 78.481L640.322 143.633C640.817 145.264 641.183 146.472 641.395 147.453C641.607 148.43 641.66 149.158 641.54 149.83C641.324 151.039 640.731 152.149 639.845 153.001C639.354 153.473 638.719 153.835 637.789 154.202C636.856 154.57 635.648 154.937 634.017 155.432L568.865 175.205C567.234 175.7 566.026 176.067 565.046 176.279C564.069 176.49 563.34 176.543 562.669 176.423C561.459 176.208 560.349 175.614 559.498 174.729C559.025 174.237 558.664 173.602 558.296 172.672C557.928 171.74 557.561 170.531 557.066 168.901L537.293 103.749Z" stroke="black" stroke-opacity="0.08" stroke-width="0.505845"/>
+<path d="M537.293 103.749C536.798 102.118 536.432 100.91 536.22 99.9293C536.008 98.9521 535.955 98.2234 536.075 97.552C536.291 96.3427 536.884 95.2326 537.769 94.3811C538.261 93.9083 538.896 93.5472 539.826 93.1799C540.759 92.8115 541.967 92.4445 543.598 91.9497L608.75 72.1765C610.38 71.6816 611.589 71.3151 612.569 71.1029C613.546 70.8914 614.275 70.8387 614.946 70.9585C616.156 71.1743 617.266 71.7674 618.117 72.6529C618.59 73.1444 618.951 73.7795 619.318 74.7094C619.687 75.6422 620.054 76.8504 620.549 78.481L640.322 143.633C640.817 145.264 641.183 146.472 641.395 147.453C641.607 148.43 641.66 149.158 641.54 149.83C641.324 151.039 640.731 152.149 639.845 153.001C639.354 153.473 638.719 153.835 637.789 154.202C636.856 154.57 635.648 154.937 634.017 155.432L568.865 175.205C567.234 175.7 566.026 176.067 565.046 176.279C564.069 176.49 563.34 176.543 562.669 176.423C561.459 176.208 560.349 175.614 559.498 174.729C559.025 174.237 558.664 173.602 558.296 172.672C557.928 171.74 557.561 170.531 557.066 168.901L537.293 103.749Z" stroke="url(#paint25_linear_6392_12056)" stroke-width="0.505845"/>
+<foreignObject x="533.503" y="137.498" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_5_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M567.41 202.978C566.915 201.347 566.549 200.139 566.337 199.159C566.125 198.182 566.072 197.453 566.192 196.782C566.408 195.572 567.001 194.462 567.887 193.611C568.378 193.138 569.013 192.777 569.943 192.409C570.876 192.041 572.084 191.674 573.715 191.179L638.867 171.406C640.498 170.911 641.706 170.545 642.686 170.333C643.663 170.121 644.392 170.068 645.063 170.188C646.273 170.404 647.383 170.997 648.234 171.882C648.707 172.374 649.068 173.009 649.436 173.939C649.804 174.872 650.171 176.08 650.666 177.711L670.439 242.863C670.934 244.493 671.3 245.702 671.513 246.682C671.724 247.659 671.777 248.388 671.657 249.059C671.441 250.269 670.848 251.379 669.963 252.23C669.471 252.703 668.836 253.064 667.906 253.431C666.973 253.8 665.765 254.167 664.135 254.662L598.982 274.435C597.352 274.93 596.143 275.296 595.163 275.508C594.186 275.72 593.457 275.773 592.786 275.653C591.576 275.437 590.466 274.844 589.615 273.958C589.142 273.467 588.781 272.832 588.414 271.902C588.045 270.969 587.678 269.761 587.183 268.13L567.41 202.978Z" fill="url(#paint26_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint27_linear_6392_12056)" stroke-width="0.505845"/>
+<foreignObject x="473.272" y="-60.96" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_6_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M507.179 4.51988C506.684 2.88934 506.317 1.68094 506.105 0.700781C505.894 -0.276483 505.842 -1.00515 505.962 -1.67651C506.178 -2.88589 506.771 -3.9959 507.656 -4.84746C508.148 -5.32019 508.783 -5.68133 509.713 -6.04866C510.645 -6.41708 511.854 -6.78399 513.484 -7.27884L578.637 -27.0521C580.267 -27.5469 581.475 -27.9135 582.455 -28.1256C583.432 -28.3371 584.162 -28.3898 584.833 -28.27C586.042 -28.0542 587.152 -27.4611 588.004 -26.5757C588.477 -26.0841 588.838 -25.4491 589.205 -24.5191C589.574 -23.5864 589.94 -22.3781 590.435 -20.7475L610.208 44.4048C610.702 46.0353 611.069 47.2437 611.281 48.2239C611.493 49.2012 611.546 49.9298 611.427 50.6012C611.211 51.8106 610.617 52.9206 609.731 53.7721C609.24 54.2449 608.606 54.606 607.676 54.9733C606.743 55.3417 605.534 55.7087 603.903 56.2035L538.752 75.9768C537.121 76.4716 535.912 76.8381 534.932 77.0503C533.954 77.2618 533.226 77.3145 532.554 77.1947C531.345 76.9789 530.235 76.3858 529.383 75.5004C528.911 75.0088 528.55 74.3738 528.182 73.4438C527.814 72.5111 527.448 71.3028 526.953 69.6722L507.179 4.51988Z" fill="url(#paint28_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint29_linear_6392_12056)" stroke-width="0.505845"/>
+<g opacity="0.32">
+<path d="M672.924 -33.7302L630.328 -20.8027L643.256 21.7932L685.852 8.86568L672.924 -33.7302Z" fill="url(#paint30_linear_6392_12056)" fill-opacity="0.16"/>
+<path d="M669.947 3.79567C666.835 7.0951 661.724 8.88816 655.843 8.25591C651.085 7.7571 646.64 5.70531 643.317 2.82831C644.664 3.39095 646.136 3.72155 647.671 3.93533C653.81 4.80222 659.137 2.99862 662.217 -0.472267C655.591 -2.93032 649.386 -6.88362 644.653 -10.2073C643.719 -10.7011 642.911 -11.4273 642.129 -12.0645C647.391 -9.58104 655.373 -6.85482 658.111 -6.22779C651.61 -9.89011 645.269 -14.9602 645.502 -14.837C655.685 -9.37802 664.305 -7.1361 664.305 -7.1361C664.586 -7.07469 664.806 -7.01903 664.986 -6.96435C665.022 -7.40885 665.035 -7.86267 665.022 -8.32508C664.901 -13.2434 661.9 -17.9678 657.463 -21.2842C666.054 -19.1313 672.846 -12.2547 673.13 -4.8595C673.139 -4.66053 673.144 -4.46272 673.143 -4.26689C678.082 -0.908 678.613 4.16375 677.894 3.41043C674.801 0.224284 671.546 2.47322 669.947 3.79567Z" fill="white"/>
+</g>
+<path d="M945.568 77.9764L861.828 103.391L887.242 187.13L970.982 161.716L945.568 77.9764Z" fill="url(#paint31_linear_6392_12056)" fill-opacity="0.16"/>
+<foreignObject x="830.983" y="47.1308" width="170.844" height="170.845"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(16.19px);clip-path:url(#bgblur_7_6392_12056_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="32.3741" d="M864.89 112.611C864.395 110.98 864.028 109.772 863.816 108.792C863.605 107.814 863.552 107.086 863.672 106.414C863.888 105.205 864.481 104.095 865.366 103.243C865.858 102.771 866.493 102.41 867.423 102.042C868.355 101.674 869.564 101.307 871.194 100.812L936.347 81.0388C937.977 80.5439 939.185 80.1774 940.166 79.9652C941.143 79.7537 941.872 79.701 942.543 79.8208C943.752 80.0366 944.862 80.6297 945.714 81.5152C946.187 82.0067 946.548 82.6418 946.915 83.5717C947.284 84.5045 947.65 85.7127 948.145 87.3433L967.919 152.496C968.413 154.126 968.78 155.335 968.992 156.315C969.204 157.292 969.256 158.021 969.136 158.692C968.921 159.901 968.328 161.011 967.442 161.863C966.951 162.336 966.316 162.697 965.386 163.064C964.453 163.433 963.245 163.8 961.614 164.294L896.462 184.068C894.831 184.563 893.623 184.929 892.643 185.141C891.665 185.353 890.937 185.405 890.265 185.286C889.056 185.07 887.946 184.477 887.094 183.591C886.622 183.1 886.26 182.465 885.893 181.535C885.525 180.602 885.158 179.394 884.663 177.763L864.89 112.611Z" fill="url(#paint32_linear_6392_12056)" fill-opacity="0.16" stroke="url(#paint33_linear_6392_12056)" stroke-width="0.505845"/>
+<g opacity="0.32">
+<mask id="mask3_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="892" y="106" width="50" height="53">
+<path d="M928.739 106.872L892.359 117.913L904.699 158.573L941.079 147.532L928.739 106.872Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_6392_12056)">
+<path d="M909.033 113.327C909.862 112.441 911.144 112.052 912.3 112.335L929.921 116.37C931.02 116.621 931.972 117.496 932.298 118.595L937.524 135.815C937.871 136.957 937.517 138.255 936.689 139.078L924.351 152.156C923.484 153.053 922.205 153.406 921.004 153.067L915.726 151.799C915.362 151.708 914.978 151.664 914.667 151.431C914.776 151.112 915.106 150.977 915.348 150.779C915.908 150.386 916.387 149.906 916.86 149.407C916.974 149.261 917.161 149.246 917.327 149.293L921.829 150.379C922.147 150.456 922.36 150.162 922.558 149.956L934.67 137.106C934.825 136.962 934.868 136.74 934.787 136.541L929.611 119.487C929.56 119.251 929.371 119.079 929.136 119.053L911.667 115.063C911.454 114.995 911.221 115.065 911.082 115.24L898.795 128.282C898.623 128.438 898.547 128.685 898.642 128.907L903.818 145.961C903.861 146.171 904.024 146.324 904.233 146.358L908.896 147.429C909.767 147.61 910.755 147.561 911.481 147.014C912.131 146.51 912.402 145.641 912.154 144.845L907.009 127.893C906.921 127.648 907.089 127.367 907.336 127.32L909.246 126.74C909.496 126.657 909.772 126.866 909.818 127.131L914.996 144.192C915.457 145.71 915.34 147.542 914.184 148.708C912.752 150.118 910.591 150.572 908.651 150.22L903.65 149.119C902.494 148.905 901.493 148.004 901.147 146.862L895.921 129.642C895.58 128.498 895.885 127.263 896.701 126.424L909.033 113.327ZM916.986 123.952C919.115 123.167 921.454 122.506 923.738 122.997C925.504 123.366 926.87 124.86 927.414 126.562C927.44 126.805 927.246 127.003 927.02 127.05C926.392 127.241 925.765 127.438 925.128 127.624C924.862 127.719 924.634 127.51 924.525 127.285C924.094 126.524 923.409 125.848 922.537 125.688C921.194 125.447 919.859 125.887 918.593 126.285C917.685 126.617 916.717 127.001 916.098 127.788C915.623 128.392 915.7 129.302 916.115 129.9C916.465 130.33 917.071 130.314 917.568 130.323C920.393 130.225 923.147 129.326 925.99 129.446C927.164 129.493 928.422 129.906 929.129 130.924C930.065 132.291 930.408 134.165 929.713 135.699C929.156 136.962 928.066 137.871 926.909 138.556C925.358 139.438 923.638 139.967 921.897 140.314C920.251 140.612 918.477 140.69 916.918 139.965C915.588 139.359 914.644 138.078 914.272 136.673C914.213 136.433 914.397 136.203 914.623 136.155L916.508 135.583C916.754 135.488 917.01 135.654 917.096 135.892C917.448 136.621 917.982 137.365 918.79 137.607C920.334 138.058 921.938 137.509 923.416 137.088C924.624 136.658 925.99 136.23 926.74 135.104C927.126 134.478 927.045 133.646 926.695 133.014C926.366 132.494 925.688 132.407 925.129 132.375C922.294 132.329 919.583 133.48 916.74 133.319C915.591 133.263 914.371 132.861 913.646 131.896C912.622 130.535 912.305 128.563 913.124 127.033C913.901 125.522 915.422 124.566 916.945 123.93L916.98 123.954L916.986 123.952Z" fill="white"/>
+</g>
+</g>
+<mask id="mask4_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="46" y="32" width="56" height="56">
+<path d="M88.4742 32.0001L46 44.8906L58.8906 87.3648L101.365 74.4743L88.4742 32.0001Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_6392_12056)">
+<g opacity="0.32">
+<path d="M83.2079 42.9274C78.5091 39.2104 71.5813 39.806 67.8031 44.1958L61.1565 51.9785C59.3347 54.0711 58.4759 56.8541 58.8179 59.6003C59.0925 61.9084 60.1053 64.0579 61.7468 65.689C61.3547 66.9874 61.2389 68.3329 61.4113 69.6564C61.7415 72.4717 63.209 75.0402 65.4333 76.7565C70.1621 80.4644 77.06 79.8779 80.8381 75.4881L87.4939 67.7354C89.3157 65.6428 90.1745 62.8598 89.8324 60.1136C89.5578 57.8055 88.5451 55.656 86.9035 54.0249C87.2957 52.7265 87.4115 51.381 87.2391 50.0575C86.9297 47.2031 85.4623 44.6346 83.2079 42.9274Z" fill="#D8D8DB"/>
+<path d="M75.9795 74.0472C73.5193 75.5473 70.411 75.3441 68.1685 73.5678C66.8081 72.5393 65.9474 70.9987 65.7258 69.297C65.7038 69.0089 65.691 68.7507 65.6691 68.4625L65.6734 67.9371L66.1844 68.1096C67.3927 68.5291 68.6364 68.7413 69.9155 68.7462L70.2428 68.7451L70.3038 69.0542C70.4013 69.4832 70.6578 69.8968 71.007 70.1839C71.6963 70.7281 72.6364 70.8032 73.3825 70.3474C73.5443 70.2328 73.7061 70.1182 73.8287 69.9827L80.4545 62.239C80.7925 61.8416 80.9441 61.3697 80.8885 60.8625C80.8328 60.3553 80.558 59.8817 80.1697 59.5737C79.4804 59.0295 78.5495 58.9844 77.8033 59.4402C77.6416 59.5548 77.4798 59.6694 77.3571 59.8049L74.8175 62.7705C74.4077 63.2552 73.9106 63.6682 73.3562 64.0002C70.896 65.5003 67.7877 65.2971 65.5452 63.5208C64.2147 62.4832 63.3241 60.9518 63.1325 59.2409C62.929 57.5992 63.461 55.8981 64.556 54.6486L71.2117 46.8958C71.6215 46.4111 72.1186 45.9982 72.6639 45.6361C75.1242 44.136 78.2324 44.3392 80.4749 46.1155C81.8354 47.144 82.696 48.6846 82.9176 50.3863C82.9396 50.6744 82.9524 50.9326 82.9444 51.2299L82.94 51.7553L82.4291 51.5828C81.2207 51.1634 79.977 50.9512 78.6979 50.9462L78.3706 50.9473L78.3096 50.6382C78.2121 50.2092 77.9556 49.7957 77.6064 49.5085C76.9171 48.9643 75.9862 48.9192 75.24 49.375C75.0782 49.4896 74.9165 49.6042 74.7938 49.7397L68.168 57.4834C67.83 57.8808 67.6784 58.3527 67.7341 58.8599C67.7898 59.3671 68.0645 59.8407 68.4528 60.1487C69.1421 60.6929 70.073 60.738 70.8192 60.2822C70.981 60.1676 71.1427 60.053 71.2654 59.9175L73.805 56.9519C74.2148 56.4672 74.7119 56.0542 75.2572 55.6922C77.7175 54.1921 80.8257 54.3953 83.0683 56.1716C84.4287 57.2001 85.2893 58.7407 85.511 60.4424C85.7144 62.0841 85.1824 63.7852 84.0875 65.0347L77.4317 72.7875C77.0219 73.2722 76.5248 73.6851 75.9795 74.0472Z" fill="white"/>
+</g>
+</g>
+<g filter="url(#filter16_f_6392_12056)">
+<path d="M507.121 174.584C458.097 174.463 418.355 162.669 418.355 148.241C418.355 133.812 458.097 122.214 507.121 122.335C556.146 122.456 595.888 134.25 595.888 148.678C595.888 163.107 556.146 174.705 507.121 174.584Z" fill="url(#paint34_radial_6392_12056)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter17_f_6392_12056)">
+<path d="M556.492 198.63C469.184 198.415 398.408 168.04 398.408 130.787C398.408 93.5331 469.184 63.5075 556.492 63.7228C643.799 63.9381 714.576 94.3127 714.576 131.566C714.576 168.82 643.799 198.846 556.492 198.63Z" fill="url(#paint35_radial_6392_12056)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter18_f_6392_12056)">
+<path d="M410.871 123.137C411.719 139.28 475.926 149.349 471.644 154.497C467.362 159.644 407.121 172.097 398.069 159.826C389.016 147.555 395.358 85.1883 399.64 80.0406C403.922 74.8928 401.819 110.866 410.871 123.137Z" fill="url(#paint36_radial_6392_12056)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter19_f_6392_12056)">
+<path d="M409.423 176.88C386.15 165.335 384.731 134.771 406.253 108.613C427.775 82.4544 464.088 70.6074 487.361 82.1519C510.633 93.6963 512.053 124.26 490.531 150.419C469.009 176.577 432.695 188.424 409.423 176.88Z" fill="url(#paint37_radial_6392_12056)" fill-opacity="0.08"/>
+</g>
+<path d="M651 8H428C421.373 8 416 13.3726 416 20V150C416 156.627 421.373 162 428 162H651C657.627 162 663 156.627 663 150V20C663 13.3726 657.627 8 651 8Z" fill="white" fill-opacity="0.32"/>
+<path d="M651 8.5H428C421.649 8.5 416.5 13.6487 416.5 20V150C416.5 156.351 421.649 161.5 428 161.5H651C657.351 161.5 662.5 156.351 662.5 150V20C662.5 13.6487 657.351 8.5 651 8.5Z" stroke="#19191C" stroke-opacity="0.04"/>
+<g filter="url(#filter21_d_6392_12056)">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="white"/>
+<mask id="mask5_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="423" y="15" width="233" height="140">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="white"/>
+</mask>
+<g mask="url(#mask5_6392_12056)">
+<path d="M430.999 15.8002H647.999V14.2002H430.999V15.8002ZM655.199 23.0002V147H656.799V23.0002H655.199ZM647.999 154.2H430.999V155.8H647.999V154.2ZM423.799 147V23.0002H422.199V147H423.799ZM430.999 154.2C427.023 154.2 423.799 150.976 423.799 147H422.199C422.199 151.86 426.139 155.8 430.999 155.8V154.2ZM655.199 147C655.199 150.976 651.975 154.2 647.999 154.2V155.8C652.859 155.8 656.799 151.86 656.799 147H655.199ZM647.999 15.8002C651.975 15.8002 655.199 19.0238 655.199 23.0002H656.799C656.799 18.1401 652.859 14.2002 647.999 14.2002V15.8002ZM430.999 14.2002C426.139 14.2002 422.199 18.1401 422.199 23.0002H423.799C423.799 19.0237 427.023 15.8002 430.999 15.8002V14.2002Z" fill="#EDEDF0"/>
+</g>
+<mask id="mask6_6392_12056" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="423" y="15" width="233" height="140">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="white"/>
+</mask>
+<g mask="url(#mask6_6392_12056)">
+<path d="M430.999 15.8002H647.999V14.2002H430.999V15.8002ZM655.199 23.0002V147H656.799V23.0002H655.199ZM647.999 154.2H430.999V155.8H647.999V154.2ZM423.799 147V23.0002H422.199V147H423.799ZM430.999 154.2C427.023 154.2 423.799 150.976 423.799 147H422.199C422.199 151.86 426.139 155.8 430.999 155.8V154.2ZM655.199 147C655.199 150.976 651.975 154.2 647.999 154.2V155.8C652.859 155.8 656.799 151.86 656.799 147H655.199ZM647.999 15.8002C651.975 15.8002 655.199 19.0238 655.199 23.0002H656.799C656.799 18.1401 652.859 14.2002 647.999 14.2002V15.8002ZM430.999 14.2002C426.139 14.2002 422.199 18.1401 422.199 23.0002H423.799C423.799 19.0237 427.023 15.8002 430.999 15.8002V14.2002Z" fill="url(#paint38_linear_6392_12056)" fill-opacity="0.4"/>
+</g>
+</g>
+<path d="M433.5 28C434.881 28 436 26.8807 436 25.5C436 24.1193 434.881 23 433.5 23C432.119 23 431 24.1193 431 25.5C431 26.8807 432.119 28 433.5 28Z" fill="#EDEDF0"/>
+<path d="M441.5 28C442.881 28 444 26.8807 444 25.5C444 24.1193 442.881 23 441.5 23C440.119 23 439 24.1193 439 25.5C439 26.8807 440.119 28 441.5 28Z" fill="#EDEDF0"/>
+<path d="M449.5 28C450.881 28 452 26.8807 452 25.5C452 24.1193 450.881 23 449.5 23C448.119 23 447 24.1193 447 25.5C447 26.8807 448.119 28 449.5 28Z" fill="#EDEDF0"/>
+<path opacity="0.5" d="M645.5 23H460.5C459.119 23 458 24.1193 458 25.5C458 26.8807 459.119 28 460.5 28H645.5C646.881 28 648 26.8807 648 25.5C648 24.1193 646.881 23 645.5 23Z" fill="#EDEDF0"/>
+<path opacity="0.5" d="M576 52H503C500.791 52 499 53.7909 499 56V57C499 59.2091 500.791 61 503 61H576C578.209 61 580 59.2091 580 57V56C580 53.7909 578.209 52 576 52Z" fill="#EDEDF0"/>
+<path opacity="0.5" d="M608 69H470C467.791 69 466 70.7909 466 73V74C466 76.2091 467.791 78 470 78H608C610.209 78 612 76.2091 612 74V73C612 70.7909 610.209 69 608 69Z" fill="#EDEDF0"/>
+<path d="M550 91H528C525.239 91 523 93.2386 523 96C523 98.7614 525.239 101 528 101H550C552.761 101 555 98.7614 555 96C555 93.2386 552.761 91 550 91Z" fill="#EDEDF0"/>
+</g>
+</g>
+<defs>
+<clipPath id="bgblur_1_6392_12056_clip_path" transform="translate(-900.765 82.4161)"><path d="M934.672 -16.9362C934.177 -18.5667 933.81 -19.7751 933.598 -20.7553C933.387 -21.7325 933.334 -22.4612 933.454 -23.1325C933.67 -24.3419 934.263 -25.4519 935.148 -26.3035C935.64 -26.7762 936.275 -27.1374 937.205 -27.5047C938.137 -27.8731 939.346 -28.24 940.976 -28.7349L1006.13 -48.5081C1007.76 -49.003 1008.97 -49.3695 1009.95 -49.5816C1010.92 -49.7931 1011.65 -49.8459 1012.32 -49.7261C1013.53 -49.5103 1014.64 -48.9172 1015.5 -48.0317C1015.97 -47.5402 1016.33 -46.9051 1016.7 -45.9751C1017.07 -45.0424 1017.43 -43.8341 1017.93 -42.2036L1037.7 22.9487C1038.2 24.5793 1038.56 25.7877 1038.77 26.7678C1038.99 27.7451 1039.04 28.4738 1038.92 29.1451C1038.7 30.3545 1038.11 31.4645 1037.22 32.3161C1036.73 32.7888 1036.1 33.1499 1035.17 33.5173C1034.23 33.8857 1033.03 34.2526 1031.4 34.7475L966.244 54.5207C964.613 55.0156 963.405 55.3821 962.425 55.5942C961.447 55.8057 960.719 55.8585 960.047 55.7387C958.838 55.5229 957.728 54.9297 956.876 54.0443C956.404 53.5528 956.042 52.9177 955.675 51.9877C955.307 51.055 954.94 49.8467 954.445 48.2162L934.672 -16.9362Z"/>
+</clipPath><clipPath id="bgblur_2_6392_12056_clip_path" transform="translate(-801.054 52.1466)"><path d="M834.961 13.3334C834.466 11.7028 834.1 10.4944 833.887 9.51423C833.676 8.53697 833.623 7.8083 833.743 7.13693C833.959 5.92756 834.552 4.81755 835.437 3.96599C835.929 3.49326 836.564 3.13213 837.494 2.7648C838.427 2.39638 839.635 2.02947 841.266 1.53461L906.418 -18.2386C908.048 -18.7334 909.257 -19.1 910.237 -19.3121C911.214 -19.5236 911.943 -19.5763 912.614 -19.4565C913.824 -19.2407 914.934 -18.6476 915.785 -17.7622C916.258 -17.2707 916.619 -16.6356 916.986 -15.7056C917.355 -14.7729 917.722 -13.5646 918.217 -11.9341L937.99 53.2183C938.485 54.8488 938.851 56.0572 939.063 57.0374C939.275 58.0146 939.328 58.7432 939.208 59.4146C938.992 60.624 938.399 61.734 937.513 62.5856C937.022 63.0583 936.387 63.4195 935.457 63.7868C934.524 64.1552 933.316 64.5221 931.685 65.017L866.533 84.7902C864.902 85.2851 863.694 85.6516 862.714 85.8637C861.737 86.0753 861.008 86.128 860.337 86.0082C859.127 85.7924 858.017 85.1993 857.166 84.3138C856.693 83.8223 856.332 83.1872 855.964 82.2573C855.596 81.3245 855.229 80.1162 854.734 78.4857L834.961 13.3334Z"/>
+</clipPath><clipPath id="bgblur_3_6392_12056_clip_path" transform="translate(-21.245 -74.956)"><path d="M55.152 140.436C54.6572 138.805 54.2906 137.597 54.0785 136.617C53.867 135.64 53.8143 134.911 53.9341 134.24C54.1499 133.03 54.743 131.92 55.6284 131.069C56.12 130.596 56.755 130.235 57.685 129.867C58.6177 129.499 59.826 129.132 61.4565 128.637L126.609 108.864C128.24 108.369 129.448 108.003 130.428 107.791C131.406 107.579 132.134 107.526 132.806 107.646C134.015 107.862 135.125 108.455 135.977 109.34C136.449 109.832 136.81 110.467 137.178 111.397C137.546 112.33 137.913 113.538 138.408 115.169L158.181 180.321C158.676 181.951 159.043 183.16 159.255 184.14C159.466 185.117 159.519 185.846 159.399 186.517C159.183 187.727 158.59 188.837 157.705 189.688C157.213 190.161 156.578 190.522 155.648 190.889C154.716 191.258 153.507 191.625 151.877 192.12L86.724 211.893C85.0934 212.388 83.885 212.754 82.9049 212.966C81.9276 213.178 81.199 213.231 80.5276 213.111C79.3182 212.895 78.2082 212.302 77.3566 211.416C76.8839 210.925 76.5228 210.29 76.1554 209.36C75.787 208.427 75.4201 207.219 74.9253 205.588L55.152 140.436Z"/>
+</clipPath><clipPath id="bgblur_4_6392_12056_clip_path" transform="translate(-602.616 -8.15324)"><path d="M636.523 73.6332C636.028 72.0026 635.661 70.7942 635.449 69.8141C635.237 68.8368 635.186 68.1082 635.306 67.4368C635.521 66.2274 636.113 65.1174 636.999 64.2658C637.49 63.7931 638.127 63.432 639.056 63.0646C639.989 62.6962 641.197 62.3293 642.827 61.8345L707.979 42.0612C709.61 41.5664 710.818 41.1998 711.798 40.9877C712.776 40.7762 713.504 40.7235 714.176 40.8433C715.385 41.0591 716.495 41.6522 717.347 42.5376C717.819 43.0292 718.181 43.6642 718.548 44.5942C718.916 45.5269 719.283 46.7352 719.778 48.3657L739.551 113.518C740.046 115.149 740.413 116.357 740.625 117.337C740.836 118.315 740.889 119.043 740.769 119.715C740.553 120.924 739.96 122.034 739.075 122.886C738.583 123.358 737.948 123.719 737.018 124.087C736.086 124.455 734.877 124.822 733.247 125.317L668.094 145.09C666.464 145.585 665.256 145.952 664.275 146.164C663.298 146.375 662.569 146.428 661.898 146.308C660.689 146.092 659.579 145.499 658.727 144.614C658.254 144.122 657.893 143.487 657.526 142.557C657.158 141.624 656.791 140.416 656.296 138.786L636.523 73.6332Z"/>
+</clipPath><clipPath id="bgblur_5_6392_12056_clip_path" transform="translate(-533.503 -137.498)"><path d="M567.41 202.978C566.915 201.347 566.549 200.139 566.337 199.159C566.125 198.182 566.072 197.453 566.192 196.782C566.408 195.572 567.001 194.462 567.887 193.611C568.378 193.138 569.013 192.777 569.943 192.409C570.876 192.041 572.084 191.674 573.715 191.179L638.867 171.406C640.498 170.911 641.706 170.545 642.686 170.333C643.663 170.121 644.392 170.068 645.063 170.188C646.273 170.404 647.383 170.997 648.234 171.882C648.707 172.374 649.068 173.009 649.436 173.939C649.804 174.872 650.171 176.08 650.666 177.711L670.439 242.863C670.934 244.493 671.3 245.702 671.513 246.682C671.724 247.659 671.777 248.388 671.657 249.059C671.441 250.269 670.848 251.379 669.963 252.23C669.471 252.703 668.836 253.064 667.906 253.431C666.973 253.8 665.765 254.167 664.135 254.662L598.982 274.435C597.352 274.93 596.143 275.296 595.163 275.508C594.186 275.72 593.457 275.773 592.786 275.653C591.576 275.437 590.466 274.844 589.615 273.958C589.142 273.467 588.781 272.832 588.414 271.902C588.045 270.969 587.678 269.761 587.183 268.13L567.41 202.978Z"/>
+</clipPath><clipPath id="bgblur_6_6392_12056_clip_path" transform="translate(-473.272 60.96)"><path d="M507.179 4.51988C506.684 2.88934 506.317 1.68094 506.105 0.700781C505.894 -0.276483 505.842 -1.00515 505.962 -1.67651C506.178 -2.88589 506.771 -3.9959 507.656 -4.84746C508.148 -5.32019 508.783 -5.68133 509.713 -6.04866C510.645 -6.41708 511.854 -6.78399 513.484 -7.27884L578.637 -27.0521C580.267 -27.5469 581.475 -27.9135 582.455 -28.1256C583.432 -28.3371 584.162 -28.3898 584.833 -28.27C586.042 -28.0542 587.152 -27.4611 588.004 -26.5757C588.477 -26.0841 588.838 -25.4491 589.205 -24.5191C589.574 -23.5864 589.94 -22.3781 590.435 -20.7475L610.208 44.4048C610.702 46.0353 611.069 47.2437 611.281 48.2239C611.493 49.2012 611.546 49.9298 611.427 50.6012C611.211 51.8106 610.617 52.9206 609.731 53.7721C609.24 54.2449 608.606 54.606 607.676 54.9733C606.743 55.3417 605.534 55.7087 603.903 56.2035L538.752 75.9768C537.121 76.4716 535.912 76.8381 534.932 77.0503C533.954 77.2618 533.226 77.3145 532.554 77.1947C531.345 76.9789 530.235 76.3858 529.383 75.5004C528.911 75.0088 528.55 74.3738 528.182 73.4438C527.814 72.5111 527.448 71.3028 526.953 69.6722L507.179 4.51988Z"/>
+</clipPath><clipPath id="bgblur_7_6392_12056_clip_path" transform="translate(-830.983 -47.1308)"><path d="M864.89 112.611C864.395 110.98 864.028 109.772 863.816 108.792C863.605 107.814 863.552 107.086 863.672 106.414C863.888 105.205 864.481 104.095 865.366 103.243C865.858 102.771 866.493 102.41 867.423 102.042C868.355 101.674 869.564 101.307 871.194 100.812L936.347 81.0388C937.977 80.5439 939.185 80.1774 940.166 79.9652C941.143 79.7537 941.872 79.701 942.543 79.8208C943.752 80.0366 944.862 80.6297 945.714 81.5152C946.187 82.0067 946.548 82.6418 946.915 83.5717C947.284 84.5045 947.65 85.7127 948.145 87.3433L967.919 152.496C968.413 154.126 968.78 155.335 968.992 156.315C969.204 157.292 969.256 158.021 969.136 158.692C968.921 159.901 968.328 161.011 967.442 161.863C966.951 162.336 966.316 162.697 965.386 163.064C964.453 163.433 963.245 163.8 961.614 164.294L896.462 184.068C894.831 184.563 893.623 184.929 892.643 185.141C891.665 185.353 890.937 185.405 890.265 185.286C889.056 185.07 887.946 184.477 887.094 183.591C886.622 183.1 886.26 182.465 885.893 181.535C885.525 180.602 885.158 179.394 884.663 177.763L864.89 112.611Z"/>
+</clipPath><filter id="filter16_f_6392_12056" x="410.855" y="114.834" width="192.533" height="67.251" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_6392_12056"/>
+</filter>
+<filter id="filter17_f_6392_12056" x="390.908" y="56.2217" width="331.168" height="149.91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_6392_12056"/>
+</filter>
+<filter id="filter18_f_6392_12056" x="378.459" y="64.54" width="108.391" height="115.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_6392_12056"/>
+</filter>
+<filter id="filter19_f_6392_12056" x="350.996" y="37.7314" width="194.793" height="183.569" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_6392_12056"/>
+</filter>
+<filter id="filter21_d_6392_12056" x="418" y="15" width="243" height="150" 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="5"/>
+<feGaussianBlur stdDeviation="2.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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6392_12056"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6392_12056" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6392_12056" x1="1040.76" y1="32.1689" x2="931.609" y2="-26.1565" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6392_12056" x1="968.877" y1="-43.7894" x2="989.181" y2="59.2399" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6392_12056" x1="1070.9" y1="131.475" x2="961.745" y2="73.1492" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint3_linear_6392_12056" x1="1003.62" y1="60.4421" x2="1029.03" y2="144.182" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint4_linear_6392_12056" x1="941.052" y1="62.4385" x2="831.898" y2="4.11313" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint5_linear_6392_12056" x1="869.166" y1="-13.5198" x2="889.47" y2="89.5095" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_6392_12056" x1="941.999" y1="2.99989" x2="732.202" y2="34.4452" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint7_linear_6392_12056" x1="774.072" y1="21.738" x2="799.486" y2="105.478" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint8_linear_6392_12056" x1="871.474" y1="191.999" x2="762.32" y2="133.674" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint9_linear_6392_12056" x1="804.19" y1="120.967" x2="803.5" y2="163" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint10_linear_6392_12056" x1="360.67" y1="128.017" x2="251.516" y2="69.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint11_linear_6392_12056" x1="293.385" y1="56.9841" x2="318.8" y2="140.724" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint12_linear_6392_12056" x1="206" y1="22.4999" x2="151.734" y2="99.9745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint13_linear_6392_12056" x1="193.604" y1="87.2673" x2="216" y2="171" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint14_linear_6392_12056" x1="161.244" y1="189.541" x2="52.0894" y2="131.216" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint15_linear_6392_12056" x1="89.3573" y1="113.583" x2="109.662" y2="216.612" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_6392_12056" x1="742.614" y1="122.738" x2="633.46" y2="64.413" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint17_linear_6392_12056" x1="670.728" y1="46.78" x2="691.032" y2="149.809" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_6392_12056" x1="772.728" y1="221.968" x2="663.574" y2="163.643" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint19_linear_6392_12056" x1="735.5" y1="134" x2="733" y2="159" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint20_linear_6392_12056" x1="99.4987" y1="-57.0001" x2="44.4987" y2="85.4999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint21_linear_6392_12056" x1="152" y1="76.4999" x2="19.9996" y2="69.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint22_linear_6392_12056" x1="28.8879" y1="118.3" x2="-80.266" y2="59.9745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint23_linear_6392_12056" x1="52.4996" y1="130" x2="-12.0004" y2="126.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint24_linear_6392_12056" x1="643.384" y1="152.854" x2="534.23" y2="94.5282" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint25_linear_6392_12056" x1="576.1" y1="81.821" x2="601.515" y2="165.561" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint26_linear_6392_12056" x1="673.502" y1="252.083" x2="564.348" y2="193.758" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint27_linear_6392_12056" x1="601.616" y1="176.125" x2="621.92" y2="279.154" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_6392_12056" x1="613.27" y1="53.625" x2="504.116" y2="-4.70031" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint29_linear_6392_12056" x1="541.385" y1="-22.3333" x2="561.689" y2="80.696" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_6392_12056" x1="685.852" y1="8.86568" x2="630.328" y2="-20.8027" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+<linearGradient id="paint31_linear_6392_12056" x1="970.982" y1="161.716" x2="861.828" y2="103.391" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+<linearGradient id="paint32_linear_6392_12056" x1="970.981" y1="161.716" x2="861.827" y2="103.391" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.02"/>
+</linearGradient>
+<linearGradient id="paint33_linear_6392_12056" x1="899.095" y1="85.7575" x2="919.399" y2="188.787" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.16"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint34_radial_6392_12056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(461.74 148.383) rotate(8.92235) scale(82.7867 24.1685)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint35_radial_6392_12056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(556.492 131.176) rotate(-180) scale(131.493 56.107)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint36_radial_6392_12056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419.781 152.662) rotate(-135.059) scale(30.2949 13.738)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint37_radial_6392_12056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(426.796 118.893) rotate(64.3713) scale(32.8381 36.5701)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint38_linear_6392_12056" x1="440.495" y1="171.42" x2="523.241" y2="118.063" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#EDEDF0"/>
+</linearGradient>
+<clipPath id="clip0_6392_12056">
+<rect width="1080" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(images)/repositoryDark.svg b/src/routes/(console)/project-[region]-[project]/sites/(images)/repositoryDark.svg
new file mode 100644
index 000000000..951222338
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(images)/repositoryDark.svg
@@ -0,0 +1,75 @@
+<svg width="248" height="148" viewBox="0 0 248 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H244C246.209 0 248 1.79086 248 4V144C248 146.209 246.209 148 244 148H4C1.79086 148 0 146.209 0 144V4Z" fill="#1D1D21"/>
+<g filter="url(#filter0_f_3519_12407)">
+<path d="M100.53 77.7829C77.0199 77.7171 57.9614 71.2986 57.9614 63.4468C57.9614 55.5949 77.0199 49.2831 100.53 49.3489C124.04 49.4147 143.098 55.8332 143.098 63.685C143.098 71.5368 124.04 77.8487 100.53 77.7829Z" fill="url(#paint0_radial_3519_12407)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_3519_12407)">
+<path d="M124.206 90.8688C82.3368 90.7517 48.3954 74.2219 48.3954 53.9485C48.3954 33.6751 82.3368 17.3352 124.206 17.4524C166.074 17.5696 200.016 34.0994 200.016 54.3728C200.016 74.6462 166.074 90.986 124.206 90.8688Z" fill="url(#paint1_radial_3519_12407)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter2_f_3519_12407)">
+<path d="M50.3719 45.3954C50.7789 54.1803 81.5696 59.6598 79.5161 62.4612C77.4627 65.2626 48.5736 72.0393 44.2326 65.3615C39.8915 58.6838 42.9326 24.7438 44.9861 21.9424C47.0395 19.141 46.0309 38.7176 50.3719 45.3954Z" fill="url(#paint2_radial_3519_12407)" fill-opacity="0.24"/>
+</g>
+<g filter="url(#filter3_f_3519_12407)">
+<path d="M53.6776 79.0323C42.517 72.7498 41.8364 56.1169 52.1573 41.8815C62.4783 27.6462 79.8926 21.1991 91.0532 27.4816C102.214 33.764 102.894 50.397 92.5734 64.6323C82.2525 78.8676 64.8382 85.3147 53.6776 79.0323Z" fill="url(#paint3_radial_3519_12407)" fill-opacity="0.12"/>
+</g>
+<path d="M124.55 68.4V92C124.55 98.6274 119.177 104 112.55 104H93.7499C86.2388 104 80.1499 110.089 80.1499 117.6V123.6" stroke="#414146"/>
+<path d="M169 123.6V117.6C169 110.089 162.911 104 155.4 104H136.6C129.973 104 124.6 98.6274 124.6 92V86.2" stroke="#414146"/>
+<mask id="path-8-outside-1_3519_12407" maskUnits="userSpaceOnUse" x="65" y="45.5" width="118" height="30" fill="black">
+<rect fill="white" x="65" y="45.5" width="118" height="30"/>
+<path d="M66 59.3C66 54.8196 66 52.5794 66.8719 50.8681C67.6389 49.3628 68.8628 48.1389 70.3681 47.3719C72.0794 46.5 74.3196 46.5 78.8 46.5H169.2C173.68 46.5 175.921 46.5 177.632 47.3719C179.137 48.1389 180.361 49.3628 181.128 50.8681C182 52.5794 182 54.8196 182 59.3V61.7C182 66.1804 182 68.4206 181.128 70.1319C180.361 71.6372 179.137 72.8611 177.632 73.6281C175.921 74.5 173.68 74.5 169.2 74.5H78.8C74.3196 74.5 72.0794 74.5 70.3681 73.6281C68.8628 72.8611 67.6389 71.6372 66.8719 70.1319C66 68.4206 66 66.1804 66 61.7V59.3Z"/>
+</mask>
+<path d="M66 59.3C66 54.8196 66 52.5794 66.8719 50.8681C67.6389 49.3628 68.8628 48.1389 70.3681 47.3719C72.0794 46.5 74.3196 46.5 78.8 46.5H169.2C173.68 46.5 175.921 46.5 177.632 47.3719C179.137 48.1389 180.361 49.3628 181.128 50.8681C182 52.5794 182 54.8196 182 59.3V61.7C182 66.1804 182 68.4206 181.128 70.1319C180.361 71.6372 179.137 72.8611 177.632 73.6281C175.921 74.5 173.68 74.5 169.2 74.5H78.8C74.3196 74.5 72.0794 74.5 70.3681 73.6281C68.8628 72.8611 67.6389 71.6372 66.8719 70.1319C66 68.4206 66 66.1804 66 61.7V59.3Z" fill="#2D2D31"/>
+<path d="M70.3681 73.6281L69.9141 74.5191L70.3681 73.6281ZM181.128 70.1319L180.237 69.6779L181.128 70.1319ZM177.632 73.6281L177.178 72.737L177.632 73.6281ZM177.632 47.3719L178.086 46.4809L177.632 47.3719ZM181.128 50.8681L182.019 50.4141L181.128 50.8681ZM70.3681 47.3719L69.9141 46.4809L70.3681 47.3719ZM66.8719 50.8681L65.9809 50.4141L66.8719 50.8681ZM78.8 47.5H169.2V45.5H78.8V47.5ZM181 59.3V61.7H183V59.3H181ZM169.2 73.5H78.8V75.5H169.2V73.5ZM67 61.7V59.3H65V61.7H67ZM78.8 73.5C76.5433 73.5 74.9109 73.4992 73.627 73.3943C72.3549 73.2904 71.5132 73.0892 70.8221 72.737L69.9141 74.5191C70.9342 75.0388 72.0683 75.2736 73.4642 75.3877C74.8484 75.5008 76.5763 75.5 78.8 75.5V73.5ZM65 61.7C65 63.9237 64.9992 65.6516 65.1123 67.0358C65.2264 68.4317 65.4612 69.5658 65.9809 70.5859L67.763 69.6779C67.4108 68.9868 67.2096 68.1451 67.1057 66.873C67.0008 65.5891 67 63.9567 67 61.7H65ZM70.8221 72.737C69.5049 72.0659 68.4341 70.9951 67.763 69.6779L65.9809 70.5859C66.8438 72.2794 68.2206 73.6562 69.9141 74.5191L70.8221 72.737ZM181 61.7C181 63.9567 180.999 65.5891 180.894 66.873C180.79 68.1451 180.589 68.9868 180.237 69.6779L182.019 70.5859C182.539 69.5658 182.774 68.4317 182.888 67.0358C183.001 65.6516 183 63.9237 183 61.7H181ZM169.2 75.5C171.424 75.5 173.152 75.5008 174.536 75.3877C175.932 75.2736 177.066 75.0388 178.086 74.5191L177.178 72.737C176.487 73.0892 175.645 73.2904 174.373 73.3943C173.089 73.4992 171.457 73.5 169.2 73.5V75.5ZM180.237 69.6779C179.566 70.9951 178.495 72.0659 177.178 72.737L178.086 74.5191C179.779 73.6562 181.156 72.2794 182.019 70.5859L180.237 69.6779ZM169.2 47.5C171.457 47.5 173.089 47.5008 174.373 47.6057C175.645 47.7096 176.487 47.9108 177.178 48.263L178.086 46.4809C177.066 45.9612 175.932 45.7264 174.536 45.6123C173.152 45.4992 171.424 45.5 169.2 45.5V47.5ZM183 59.3C183 57.0763 183.001 55.3484 182.888 53.9642C182.774 52.5683 182.539 51.4342 182.019 50.4141L180.237 51.3221C180.589 52.0132 180.79 52.8549 180.894 54.127C180.999 55.4109 181 57.0433 181 59.3H183ZM177.178 48.263C178.495 48.9341 179.566 50.0049 180.237 51.3221L182.019 50.4141C181.156 48.7206 179.779 47.3438 178.086 46.4809L177.178 48.263ZM78.8 45.5C76.5763 45.5 74.8484 45.4992 73.4642 45.6123C72.0683 45.7264 70.9342 45.9612 69.9141 46.4809L70.8221 48.263C71.5132 47.9108 72.3549 47.7096 73.627 47.6057C74.9109 47.5008 76.5433 47.5 78.8 47.5V45.5ZM67 59.3C67 57.0433 67.0008 55.4109 67.1057 54.127C67.2096 52.8549 67.4108 52.0132 67.763 51.3221L65.9809 50.4141C65.4612 51.4342 65.2264 52.5683 65.1123 53.9642C64.9992 55.3484 65 57.0763 65 59.3H67ZM69.9141 46.4809C68.2206 47.3438 66.8438 48.7206 65.9809 50.4141L67.763 51.3221C68.4341 50.0049 69.5049 48.9341 70.8221 48.263L69.9141 46.4809Z" fill="url(#paint4_linear_3519_12407)" mask="url(#path-8-outside-1_3519_12407)"/>
+<path d="M70.3681 73.6281L69.9141 74.5191L70.3681 73.6281ZM181.128 70.1319L180.237 69.6779L181.128 70.1319ZM177.632 73.6281L177.178 72.737L177.632 73.6281ZM177.632 47.3719L178.086 46.4809L177.632 47.3719ZM181.128 50.8681L182.019 50.4141L181.128 50.8681ZM70.3681 47.3719L69.9141 46.4809L70.3681 47.3719ZM66.8719 50.8681L65.9809 50.4141L66.8719 50.8681ZM78.8 47.5H169.2V45.5H78.8V47.5ZM181 59.3V61.7H183V59.3H181ZM169.2 73.5H78.8V75.5H169.2V73.5ZM67 61.7V59.3H65V61.7H67ZM78.8 73.5C76.5433 73.5 74.9109 73.4992 73.627 73.3943C72.3549 73.2904 71.5132 73.0892 70.8221 72.737L69.9141 74.5191C70.9342 75.0388 72.0683 75.2736 73.4642 75.3877C74.8484 75.5008 76.5763 75.5 78.8 75.5V73.5ZM65 61.7C65 63.9237 64.9992 65.6516 65.1123 67.0358C65.2264 68.4317 65.4612 69.5658 65.9809 70.5859L67.763 69.6779C67.4108 68.9868 67.2096 68.1451 67.1057 66.873C67.0008 65.5891 67 63.9567 67 61.7H65ZM70.8221 72.737C69.5049 72.0659 68.4341 70.9951 67.763 69.6779L65.9809 70.5859C66.8438 72.2794 68.2206 73.6562 69.9141 74.5191L70.8221 72.737ZM181 61.7C181 63.9567 180.999 65.5891 180.894 66.873C180.79 68.1451 180.589 68.9868 180.237 69.6779L182.019 70.5859C182.539 69.5658 182.774 68.4317 182.888 67.0358C183.001 65.6516 183 63.9237 183 61.7H181ZM169.2 75.5C171.424 75.5 173.152 75.5008 174.536 75.3877C175.932 75.2736 177.066 75.0388 178.086 74.5191L177.178 72.737C176.487 73.0892 175.645 73.2904 174.373 73.3943C173.089 73.4992 171.457 73.5 169.2 73.5V75.5ZM180.237 69.6779C179.566 70.9951 178.495 72.0659 177.178 72.737L178.086 74.5191C179.779 73.6562 181.156 72.2794 182.019 70.5859L180.237 69.6779ZM169.2 47.5C171.457 47.5 173.089 47.5008 174.373 47.6057C175.645 47.7096 176.487 47.9108 177.178 48.263L178.086 46.4809C177.066 45.9612 175.932 45.7264 174.536 45.6123C173.152 45.4992 171.424 45.5 169.2 45.5V47.5ZM183 59.3C183 57.0763 183.001 55.3484 182.888 53.9642C182.774 52.5683 182.539 51.4342 182.019 50.4141L180.237 51.3221C180.589 52.0132 180.79 52.8549 180.894 54.127C180.999 55.4109 181 57.0433 181 59.3H183ZM177.178 48.263C178.495 48.9341 179.566 50.0049 180.237 51.3221L182.019 50.4141C181.156 48.7206 179.779 47.3438 178.086 46.4809L177.178 48.263ZM78.8 45.5C76.5763 45.5 74.8484 45.4992 73.4642 45.6123C72.0683 45.7264 70.9342 45.9612 69.9141 46.4809L70.8221 48.263C71.5132 47.9108 72.3549 47.7096 73.627 47.6057C74.9109 47.5008 76.5433 47.5 78.8 47.5V45.5ZM67 59.3C67 57.0433 67.0008 55.4109 67.1057 54.127C67.2096 52.8549 67.4108 52.0132 67.763 51.3221L65.9809 50.4141C65.4612 51.4342 65.2264 52.5683 65.1123 53.9642C64.9992 55.3484 65 57.0763 65 59.3H67ZM69.9141 46.4809C68.2206 47.3438 66.8438 48.7206 65.9809 50.4141L67.763 51.3221C68.4341 50.0049 69.5049 48.9341 70.8221 48.263L69.9141 46.4809Z" fill="url(#paint5_linear_3519_12407)" fill-opacity="0.6" mask="url(#path-8-outside-1_3519_12407)"/>
+<path d="M82.2074 58.6108H80.8778C80.8267 58.3267 80.7315 58.0767 80.5923 57.8608C80.4531 57.6449 80.2827 57.4616 80.081 57.3111C79.8793 57.1605 79.6534 57.0469 79.4034 56.9702C79.1563 56.8935 78.8935 56.8551 78.6151 56.8551C78.1122 56.8551 77.6619 56.9815 77.2642 57.2344C76.8693 57.4872 76.5568 57.858 76.3267 58.3466C76.0994 58.8352 75.9858 59.4318 75.9858 60.1364C75.9858 60.8466 76.0994 61.446 76.3267 61.9347C76.5568 62.4233 76.8707 62.7926 77.2685 63.0426C77.6662 63.2926 78.1136 63.4176 78.6108 63.4176C78.8864 63.4176 79.1477 63.3807 79.3949 63.3068C79.6449 63.2301 79.8707 63.1179 80.0724 62.9702C80.2741 62.8224 80.4446 62.642 80.5838 62.429C80.7259 62.2131 80.8239 61.9659 80.8778 61.6875L82.2074 61.6918C82.1364 62.1207 81.9986 62.5156 81.794 62.8764C81.5923 63.2344 81.3324 63.544 81.0142 63.8054C80.6989 64.0639 80.3381 64.2642 79.9318 64.4062C79.5256 64.5483 79.0824 64.6193 78.6023 64.6193C77.8466 64.6193 77.1733 64.4403 76.5824 64.0824C75.9915 63.7216 75.5256 63.206 75.1847 62.5355C74.8466 61.8651 74.6776 61.0653 74.6776 60.1364C74.6776 59.2045 74.848 58.4048 75.1889 57.7372C75.5298 57.0668 75.9957 56.5526 76.5866 56.1946C77.1776 55.8338 77.8494 55.6534 78.6023 55.6534C79.0653 55.6534 79.4972 55.7202 79.8977 55.8537C80.3011 55.9844 80.6634 56.1776 80.9844 56.4332C81.3054 56.6861 81.571 56.9957 81.7812 57.3622C81.9915 57.7259 82.1335 58.142 82.2074 58.6108ZM86.3179 64.6321C85.7042 64.6321 85.1687 64.4915 84.7113 64.2102C84.2539 63.929 83.8988 63.5355 83.646 63.0298C83.3931 62.5241 83.2667 61.9332 83.2667 61.2571C83.2667 60.5781 83.3931 59.9844 83.646 59.4759C83.8988 58.9673 84.2539 58.5724 84.7113 58.2912C85.1687 58.0099 85.7042 57.8693 86.3179 57.8693C86.9315 57.8693 87.467 58.0099 87.9244 58.2912C88.3818 58.5724 88.7369 58.9673 88.9897 59.4759C89.2426 59.9844 89.369 60.5781 89.369 61.2571C89.369 61.9332 89.2426 62.5241 88.9897 63.0298C88.7369 63.5355 88.3818 63.929 87.9244 64.2102C87.467 64.4915 86.9315 64.6321 86.3179 64.6321ZM86.3221 63.5625C86.7198 63.5625 87.0494 63.4574 87.3108 63.2472C87.5721 63.0369 87.7653 62.7571 87.8903 62.4077C88.0181 62.0582 88.0821 61.6733 88.0821 61.2528C88.0821 60.8352 88.0181 60.4517 87.8903 60.1023C87.7653 59.75 87.5721 59.4673 87.3108 59.2543C87.0494 59.0412 86.7198 58.9347 86.3221 58.9347C85.9215 58.9347 85.5892 59.0412 85.325 59.2543C85.0636 59.4673 84.869 59.75 84.7412 60.1023C84.6162 60.4517 84.5537 60.8352 84.5537 61.2528C84.5537 61.6733 84.6162 62.0582 84.7412 62.4077C84.869 62.7571 85.0636 63.0369 85.325 63.2472C85.5892 63.4574 85.9215 63.5625 86.3221 63.5625ZM91.9454 60.6136V64.5H90.6712V57.9545H91.8942V59.0199H91.9752C92.1258 58.6733 92.3616 58.3949 92.6826 58.1847C93.0064 57.9744 93.4141 57.8693 93.9056 57.8693C94.3516 57.8693 94.7422 57.9631 95.0775 58.1506C95.4127 58.3352 95.6726 58.6108 95.8573 58.9773C96.042 59.3437 96.1343 59.7969 96.1343 60.3366V64.5H94.8601V60.4901C94.8601 60.0156 94.7366 59.6449 94.4894 59.3778C94.2422 59.108 93.9028 58.973 93.4709 58.973C93.1755 58.973 92.9127 59.0369 92.6826 59.1648C92.4553 59.2926 92.2749 59.4801 92.1414 59.7273C92.0107 59.9716 91.9454 60.267 91.9454 60.6136ZM98.9972 60.6136V64.5H97.7231V57.9545H98.9461V59.0199H99.0271C99.1776 58.6733 99.4134 58.3949 99.7345 58.1847C100.058 57.9744 100.466 57.8693 100.957 57.8693C101.403 57.8693 101.794 57.9631 102.129 58.1506C102.465 58.3352 102.725 58.6108 102.909 58.9773C103.094 59.3437 103.186 59.7969 103.186 60.3366V64.5H101.912V60.4901C101.912 60.0156 101.788 59.6449 101.541 59.3778C101.294 59.108 100.955 58.973 100.523 58.973C100.227 58.973 99.9646 59.0369 99.7345 59.1648C99.5072 59.2926 99.3268 59.4801 99.1933 59.7273C99.0626 59.9716 98.9972 60.267 98.9972 60.6136ZM107.596 64.6321C106.951 64.6321 106.396 64.4943 105.93 64.2188C105.467 63.9403 105.109 63.5497 104.856 63.0469C104.606 62.5412 104.481 61.9489 104.481 61.2699C104.481 60.5994 104.606 60.0085 104.856 59.4972C105.109 58.9858 105.461 58.5866 105.913 58.2997C106.367 58.0128 106.899 57.8693 107.507 57.8693C107.876 57.8693 108.234 57.9304 108.58 58.0526C108.927 58.1747 109.238 58.3665 109.514 58.6278C109.789 58.8892 110.007 59.2287 110.166 59.6463C110.325 60.0611 110.404 60.5653 110.404 61.1591V61.6108H105.201V60.6562H109.156C109.156 60.321 109.087 60.0241 108.951 59.7656C108.815 59.5043 108.623 59.2983 108.376 59.1477C108.132 58.9972 107.845 58.9219 107.515 58.9219C107.157 58.9219 106.845 59.0099 106.578 59.1861C106.313 59.3594 106.109 59.5866 105.964 59.8679C105.822 60.1463 105.751 60.4489 105.751 60.7756V61.5213C105.751 61.9588 105.828 62.331 105.981 62.6378C106.137 62.9446 106.355 63.179 106.633 63.3409C106.911 63.5 107.237 63.5795 107.609 63.5795C107.85 63.5795 108.07 63.5455 108.269 63.4773C108.468 63.4062 108.64 63.3011 108.785 63.1619C108.93 63.0227 109.041 62.8509 109.117 62.6463L110.323 62.8636C110.227 63.2187 110.053 63.5298 109.803 63.7969C109.556 64.0611 109.245 64.267 108.87 64.4148C108.498 64.5597 108.073 64.6321 107.596 64.6321ZM114.455 64.6321C113.822 64.6321 113.276 64.4886 112.819 64.2017C112.364 63.9119 112.015 63.5128 111.77 63.0043C111.526 62.4957 111.404 61.9134 111.404 61.2571C111.404 60.5923 111.529 60.0057 111.779 59.4972C112.029 58.9858 112.381 58.5866 112.836 58.2997C113.29 58.0128 113.826 57.8693 114.442 57.8693C114.939 57.8693 115.383 57.9616 115.772 58.1463C116.161 58.3281 116.475 58.5838 116.714 58.9134C116.955 59.2429 117.099 59.6278 117.144 60.0682H115.904C115.836 59.7614 115.679 59.4972 115.435 59.2756C115.194 59.054 114.87 58.9432 114.464 58.9432C114.108 58.9432 113.797 59.0369 113.53 59.2244C113.266 59.4091 113.06 59.6733 112.912 60.017C112.765 60.358 112.691 60.7614 112.691 61.2273C112.691 61.7045 112.763 62.1165 112.908 62.4631C113.053 62.8097 113.258 63.0781 113.522 63.2685C113.789 63.4588 114.103 63.554 114.464 63.554C114.705 63.554 114.924 63.5099 115.12 63.4219C115.319 63.331 115.485 63.2017 115.618 63.0341C115.755 62.8665 115.85 62.6648 115.904 62.429H117.144C117.099 62.8523 116.961 63.2301 116.731 63.5625C116.5 63.8949 116.192 64.1562 115.806 64.3466C115.422 64.5369 114.972 64.6321 114.455 64.6321ZM121.442 57.9545V58.9773H117.867V57.9545H121.442ZM118.825 56.3864H120.1V62.5781C120.1 62.8253 120.137 63.0114 120.21 63.1364C120.284 63.2585 120.379 63.3423 120.496 63.3878C120.615 63.4304 120.744 63.4517 120.884 63.4517C120.986 63.4517 121.075 63.4446 121.152 63.4304C121.229 63.4162 121.289 63.4048 121.331 63.3963L121.561 64.4489C121.487 64.4773 121.382 64.5057 121.246 64.5341C121.11 64.5653 120.939 64.5824 120.735 64.5852C120.399 64.5909 120.087 64.5312 119.797 64.4062C119.507 64.2812 119.273 64.0881 119.094 63.8267C118.915 63.5653 118.825 63.2372 118.825 62.8423V56.3864ZM128.843 57.9545V58.9773H125.267V57.9545H128.843ZM126.226 56.3864H127.5V62.5781C127.5 62.8253 127.537 63.0114 127.611 63.1364C127.685 63.2585 127.78 63.3423 127.897 63.3878C128.016 63.4304 128.145 63.4517 128.284 63.4517C128.387 63.4517 128.476 63.4446 128.553 63.4304C128.629 63.4162 128.689 63.4048 128.732 63.3963L128.962 64.4489C128.888 64.4773 128.783 64.5057 128.647 64.5341C128.51 64.5653 128.34 64.5824 128.135 64.5852C127.8 64.5909 127.487 64.5312 127.198 64.4062C126.908 64.2812 126.674 64.0881 126.495 63.8267C126.316 63.5653 126.226 63.2372 126.226 62.8423V56.3864ZM132.819 64.6321C132.205 64.6321 131.67 64.4915 131.212 64.2102C130.755 63.929 130.4 63.5355 130.147 63.0298C129.894 62.5241 129.768 61.9332 129.768 61.2571C129.768 60.5781 129.894 59.9844 130.147 59.4759C130.4 58.9673 130.755 58.5724 131.212 58.2912C131.67 58.0099 132.205 57.8693 132.819 57.8693C133.432 57.8693 133.968 58.0099 134.425 58.2912C134.883 58.5724 135.238 58.9673 135.491 59.4759C135.744 59.9844 135.87 60.5781 135.87 61.2571C135.87 61.9332 135.744 62.5241 135.491 63.0298C135.238 63.5355 134.883 63.929 134.425 64.2102C133.968 64.4915 133.432 64.6321 132.819 64.6321ZM132.823 63.5625C133.221 63.5625 133.55 63.4574 133.812 63.2472C134.073 63.0369 134.266 62.7571 134.391 62.4077C134.519 62.0582 134.583 61.6733 134.583 61.2528C134.583 60.8352 134.519 60.4517 134.391 60.1023C134.266 59.75 134.073 59.4673 133.812 59.2543C133.55 59.0412 133.221 58.9347 132.823 58.9347C132.422 58.9347 132.09 59.0412 131.826 59.2543C131.565 59.4673 131.37 59.75 131.242 60.1023C131.117 60.4517 131.055 60.8352 131.055 61.2528C131.055 61.6733 131.117 62.0582 131.242 62.4077C131.37 62.7571 131.565 63.0369 131.826 63.2472C132.09 63.4574 132.422 63.5625 132.823 63.5625ZM146.236 58.5298C146.154 58.2713 146.043 58.0398 145.904 57.8352C145.768 57.6278 145.604 57.4517 145.414 57.3068C145.224 57.1591 145.006 57.0469 144.762 56.9702C144.521 56.8935 144.255 56.8551 143.965 56.8551C143.474 56.8551 143.03 56.9815 142.636 57.2344C142.241 57.4872 141.928 57.858 141.698 58.3466C141.471 58.8324 141.357 59.4276 141.357 60.1321C141.357 60.8395 141.472 61.4375 141.702 61.9261C141.932 62.4148 142.248 62.7855 142.648 63.0384C143.049 63.2912 143.505 63.4176 144.016 63.4176C144.491 63.4176 144.904 63.321 145.256 63.1278C145.611 62.9347 145.886 62.6619 146.079 62.3097C146.275 61.9545 146.373 61.5369 146.373 61.0568L146.714 61.1207H144.217V60.0341H147.647V61.027C147.647 61.7599 147.491 62.3963 147.178 62.9361C146.869 63.473 146.44 63.8878 145.891 64.1804C145.346 64.473 144.721 64.6193 144.016 64.6193C143.227 64.6193 142.533 64.4375 141.937 64.0739C141.343 63.7102 140.88 63.1946 140.548 62.527C140.215 61.8565 140.049 61.0611 140.049 60.1406C140.049 59.4446 140.146 58.8196 140.339 58.2656C140.532 57.7116 140.803 57.2415 141.153 56.8551C141.505 56.4659 141.918 56.169 142.393 55.9645C142.87 55.7571 143.391 55.6534 143.957 55.6534C144.428 55.6534 144.867 55.723 145.273 55.8622C145.682 56.0014 146.046 56.1989 146.364 56.4545C146.685 56.7102 146.951 57.0142 147.161 57.3665C147.371 57.7159 147.513 58.1037 147.587 58.5298H146.236ZM149.506 64.5V57.9545H150.781V64.5H149.506ZM150.15 56.9446C149.928 56.9446 149.738 56.8707 149.579 56.723C149.423 56.5724 149.344 56.3935 149.344 56.1861C149.344 55.9759 149.423 55.7969 149.579 55.6491C149.738 55.4986 149.928 55.4233 150.15 55.4233C150.371 55.4233 150.56 55.4986 150.717 55.6491C150.876 55.7969 150.955 55.9759 150.955 56.1861C150.955 56.3935 150.876 56.5724 150.717 56.723C150.56 56.8707 150.371 56.9446 150.15 56.9446ZM155.43 57.9545V58.9773H151.855V57.9545H155.43ZM152.814 56.3864H154.088V62.5781C154.088 62.8253 154.125 63.0114 154.199 63.1364C154.272 63.2585 154.368 63.3423 154.484 63.3878C154.603 63.4304 154.733 63.4517 154.872 63.4517C154.974 63.4517 155.064 63.4446 155.14 63.4304C155.217 63.4162 155.277 63.4048 155.319 63.3963L155.549 64.4489C155.476 64.4773 155.37 64.5057 155.234 64.5341C155.098 64.5653 154.927 64.5824 154.723 64.5852C154.387 64.5909 154.075 64.5312 153.785 64.4062C153.495 64.2812 153.261 64.0881 153.082 63.8267C152.903 63.5653 152.814 63.2372 152.814 62.8423V56.3864Z" fill="#818186"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.251 59.8943C161.916 60.2288 161.916 60.7712 162.251 61.1056L167.394 66.2491C167.729 66.5836 168.271 66.5836 168.606 66.2491L173.749 61.1057C174.084 60.7712 174.084 60.2288 173.749 59.8943L168.606 54.7509C168.271 54.4164 167.729 54.4164 167.394 54.7509L162.251 59.8943ZM166 56.3868L166.557 55.8333L168.032 57.3C168.123 57.2719 168.22 57.2568 168.321 57.2568C168.858 57.2568 169.294 57.69 169.294 58.2244C169.294 58.3243 169.279 58.4206 169.251 58.5113L170.727 59.9787C170.821 59.9484 170.922 59.9321 171.027 59.9321C171.564 59.9321 172 60.3653 172 60.8997C172 61.4342 171.564 61.8674 171.027 61.8674C170.489 61.8674 170.053 61.4342 170.053 60.8997C170.053 60.7576 170.084 60.6227 170.139 60.5012L168.765 59.1348V62.6708C169.079 62.8313 169.294 63.1568 169.294 63.5323C169.294 64.0668 168.858 64.5 168.321 64.5C167.783 64.5 167.347 64.0668 167.347 63.5323C167.347 63.1181 167.609 62.7647 167.977 62.6267V59.1301C167.609 58.992 167.347 58.6386 167.347 58.2244C167.347 58.0785 167.38 57.9402 167.438 57.8161L166 56.3868Z" fill="#C3C3C6"/>
+<path d="M124.55 104V123.6" stroke="#414146"/>
+<path d="M124.5 16V40.5" stroke="#414146"/>
+<defs>
+<filter id="filter0_f_3519_12407" x="54.3614" y="45.7484" width="92.3367" height="35.6349" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.8" result="effect1_foregroundBlur_3519_12407"/>
+</filter>
+<filter id="filter1_f_3519_12407" x="44.7955" y="13.8518" width="158.82" height="80.6177" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.8" result="effect1_foregroundBlur_3519_12407"/>
+</filter>
+<filter id="filter2_f_3519_12407" x="34.822" y="14.47" width="51.9923" height="60.9421" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.6" result="effect1_foregroundBlur_3519_12407"/>
+</filter>
+<filter id="filter3_f_3519_12407" x="25.6408" y="5.87593" width="93.4493" height="94.7619" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="9.6" result="effect1_foregroundBlur_3519_12407"/>
+</filter>
+<radialGradient id="paint0_radial_3519_12407" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(78.7671 63.524) rotate(10.1017) scale(39.838 13.1072)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_3519_12407" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124.206 54.1606) rotate(-179.84) scale(75.8104 36.7081)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_3519_12407" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(54.6447 61.463) rotate(-131.445) scale(15.5361 6.99108)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_3519_12407" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62.0092 47.4759) rotate(67.3466) scale(24.8685 25.4468)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint4_linear_3519_12407" x1="124" y1="46.5" x2="124" y2="74.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D8D8DB" stop-opacity="0.24"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint5_linear_3519_12407" x1="182" y1="54" x2="162.633" y2="122.598" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146"/>
+<stop offset="0.885635" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FE5E56"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(images)/repositoryLight.svg b/src/routes/(console)/project-[region]-[project]/sites/(images)/repositoryLight.svg
new file mode 100644
index 000000000..41caa955f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(images)/repositoryLight.svg
@@ -0,0 +1,75 @@
+<svg width="248" height="148" viewBox="0 0 248 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4.00003C0 1.79089 1.79086 3.05176e-05 4 3.05176e-05H244C246.209 3.05176e-05 248 1.79089 248 4.00003V144C248 146.209 246.209 148 244 148H4C1.79086 148 0 146.209 0 144V4.00003Z" fill="white"/>
+<g filter="url(#filter0_f_2454_59346)">
+<path d="M100.53 77.783C77.0199 77.7172 57.9614 71.2987 57.9614 63.4469C57.9614 55.595 77.0199 49.2832 100.53 49.349C124.04 49.4148 143.098 55.8333 143.098 63.6851C143.098 71.5369 124.04 77.8487 100.53 77.783Z" fill="url(#paint0_radial_2454_59346)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_2454_59346)">
+<path d="M124.206 90.8689C82.3368 90.7517 48.3954 74.2219 48.3954 53.9485C48.3954 33.6751 82.3368 17.3353 124.206 17.4524C166.074 17.5696 200.016 34.0994 200.016 54.3728C200.016 74.6462 166.074 90.986 124.206 90.8689Z" fill="url(#paint1_radial_2454_59346)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_2454_59346)">
+<path d="M50.3719 45.3954C50.7789 54.1804 81.5696 59.6599 79.5161 62.4613C77.4627 65.2627 48.5736 72.0393 44.2326 65.3616C39.8915 58.6839 42.9326 24.7439 44.9861 21.9425C47.0395 19.1411 46.0309 38.7177 50.3719 45.3954Z" fill="url(#paint2_radial_2454_59346)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_2454_59346)">
+<path d="M53.6776 79.0324C42.517 72.7499 41.8364 56.117 52.1573 41.8816C62.4783 27.6463 79.8926 21.1992 91.0532 27.4816C102.214 33.7641 102.894 50.397 92.5734 64.6324C82.2525 78.8677 64.8382 85.3148 53.6776 79.0324Z" fill="url(#paint3_radial_2454_59346)" fill-opacity="0.08"/>
+</g>
+<path d="M124.55 68.4V92C124.55 98.6274 119.177 104 112.55 104H93.7499C86.2388 104 80.1499 110.089 80.1499 117.6V123.6" stroke="#EDEDF0"/>
+<path d="M169 123.6V117.6C169 110.089 162.911 104 155.4 104H136.6C129.973 104 124.6 98.6274 124.6 92V86.2" stroke="#EDEDF0"/>
+<mask id="path-8-outside-1_2454_59346" maskUnits="userSpaceOnUse" x="65" y="45.5" width="118" height="30" fill="black">
+<rect fill="white" x="65" y="45.5" width="118" height="30"/>
+<path d="M66 59.3C66 54.8196 66 52.5794 66.8719 50.8681C67.6389 49.3628 68.8628 48.139 70.3681 47.372C72.0794 46.5 74.3196 46.5 78.8 46.5H169.2C173.68 46.5 175.921 46.5 177.632 47.372C179.137 48.139 180.361 49.3628 181.128 50.8681C182 52.5794 182 54.8196 182 59.3V61.7C182 66.1805 182 68.4207 181.128 70.132C180.361 71.6373 179.137 72.8611 177.632 73.6281C175.921 74.5 173.68 74.5 169.2 74.5H78.8C74.3196 74.5 72.0794 74.5 70.3681 73.6281C68.8628 72.8611 67.6389 71.6373 66.8719 70.132C66 68.4207 66 66.1805 66 61.7V59.3Z"/>
+</mask>
+<path d="M66 59.3C66 54.8196 66 52.5794 66.8719 50.8681C67.6389 49.3628 68.8628 48.139 70.3681 47.372C72.0794 46.5 74.3196 46.5 78.8 46.5H169.2C173.68 46.5 175.921 46.5 177.632 47.372C179.137 48.139 180.361 49.3628 181.128 50.8681C182 52.5794 182 54.8196 182 59.3V61.7C182 66.1805 182 68.4207 181.128 70.132C180.361 71.6373 179.137 72.8611 177.632 73.6281C175.921 74.5 173.68 74.5 169.2 74.5H78.8C74.3196 74.5 72.0794 74.5 70.3681 73.6281C68.8628 72.8611 67.6389 71.6373 66.8719 70.132C66 68.4207 66 66.1805 66 61.7V59.3Z" fill="white"/>
+<path d="M70.3681 73.6281L69.9141 74.5191L70.3681 73.6281ZM181.128 70.132L180.237 69.678L181.128 70.132ZM177.632 73.6281L177.178 72.7371L177.632 73.6281ZM177.632 47.372L178.086 46.481L177.632 47.372ZM181.128 50.8681L182.019 50.4141L181.128 50.8681ZM70.3681 47.372L69.9141 46.481L70.3681 47.372ZM66.8719 50.8681L65.9809 50.4141L66.8719 50.8681ZM78.8 47.5H169.2V45.5H78.8V47.5ZM181 59.3V61.7H183V59.3H181ZM169.2 73.5H78.8V75.5H169.2V73.5ZM67 61.7V59.3H65V61.7H67ZM78.8 73.5C76.5433 73.5 74.9109 73.4993 73.627 73.3944C72.3549 73.2904 71.5132 73.0892 70.8221 72.7371L69.9141 74.5191C70.9342 75.0389 72.0683 75.2737 73.4642 75.3877C74.8484 75.5008 76.5763 75.5 78.8 75.5V73.5ZM65 61.7C65 63.9237 64.9992 65.6517 65.1123 67.0358C65.2264 68.4317 65.4612 69.5658 65.9809 70.5859L67.763 69.678C67.4108 68.9868 67.2096 68.1452 67.1057 66.873C67.0008 65.5891 67 63.9567 67 61.7H65ZM70.8221 72.7371C69.5049 72.066 68.4341 70.9951 67.763 69.678L65.9809 70.5859C66.8438 72.2794 68.2206 73.6562 69.9141 74.5191L70.8221 72.7371ZM181 61.7C181 63.9567 180.999 65.5891 180.894 66.873C180.79 68.1452 180.589 68.9868 180.237 69.678L182.019 70.5859C182.539 69.5658 182.774 68.4317 182.888 67.0358C183.001 65.6517 183 63.9237 183 61.7H181ZM169.2 75.5C171.424 75.5 173.152 75.5008 174.536 75.3877C175.932 75.2737 177.066 75.0389 178.086 74.5191L177.178 72.7371C176.487 73.0892 175.645 73.2904 174.373 73.3944C173.089 73.4993 171.457 73.5 169.2 73.5V75.5ZM180.237 69.678C179.566 70.9951 178.495 72.066 177.178 72.7371L178.086 74.5191C179.779 73.6562 181.156 72.2794 182.019 70.5859L180.237 69.678ZM169.2 47.5C171.457 47.5 173.089 47.5008 174.373 47.6057C175.645 47.7096 176.487 47.9108 177.178 48.263L178.086 46.481C177.066 45.9612 175.932 45.7264 174.536 45.6123C173.152 45.4993 171.424 45.5 169.2 45.5V47.5ZM183 59.3C183 57.0763 183.001 55.3484 182.888 53.9642C182.774 52.5684 182.539 51.4342 182.019 50.4141L180.237 51.3221C180.589 52.0133 180.79 52.8549 180.894 54.1271C180.999 55.4109 181 57.0433 181 59.3H183ZM177.178 48.263C178.495 48.9341 179.566 50.005 180.237 51.3221L182.019 50.4141C181.156 48.7207 179.779 47.3438 178.086 46.481L177.178 48.263ZM78.8 45.5C76.5763 45.5 74.8484 45.4993 73.4642 45.6123C72.0683 45.7264 70.9342 45.9612 69.9141 46.481L70.8221 48.263C71.5132 47.9108 72.3549 47.7096 73.627 47.6057C74.9109 47.5008 76.5433 47.5 78.8 47.5V45.5ZM67 59.3C67 57.0433 67.0008 55.4109 67.1057 54.1271C67.2096 52.8549 67.4108 52.0133 67.763 51.3221L65.9809 50.4141C65.4612 51.4342 65.2264 52.5684 65.1123 53.9642C64.9992 55.3484 65 57.0763 65 59.3H67ZM69.9141 46.481C68.2206 47.3438 66.8438 48.7207 65.9809 50.4141L67.763 51.3221C68.4341 50.005 69.5049 48.9341 70.8221 48.263L69.9141 46.481Z" fill="url(#paint4_linear_2454_59346)" mask="url(#path-8-outside-1_2454_59346)"/>
+<path d="M70.3681 73.6281L69.9141 74.5191L70.3681 73.6281ZM181.128 70.132L180.237 69.678L181.128 70.132ZM177.632 73.6281L177.178 72.7371L177.632 73.6281ZM177.632 47.372L178.086 46.481L177.632 47.372ZM181.128 50.8681L182.019 50.4141L181.128 50.8681ZM70.3681 47.372L69.9141 46.481L70.3681 47.372ZM66.8719 50.8681L65.9809 50.4141L66.8719 50.8681ZM78.8 47.5H169.2V45.5H78.8V47.5ZM181 59.3V61.7H183V59.3H181ZM169.2 73.5H78.8V75.5H169.2V73.5ZM67 61.7V59.3H65V61.7H67ZM78.8 73.5C76.5433 73.5 74.9109 73.4993 73.627 73.3944C72.3549 73.2904 71.5132 73.0892 70.8221 72.7371L69.9141 74.5191C70.9342 75.0389 72.0683 75.2737 73.4642 75.3877C74.8484 75.5008 76.5763 75.5 78.8 75.5V73.5ZM65 61.7C65 63.9237 64.9992 65.6517 65.1123 67.0358C65.2264 68.4317 65.4612 69.5658 65.9809 70.5859L67.763 69.678C67.4108 68.9868 67.2096 68.1452 67.1057 66.873C67.0008 65.5891 67 63.9567 67 61.7H65ZM70.8221 72.7371C69.5049 72.066 68.4341 70.9951 67.763 69.678L65.9809 70.5859C66.8438 72.2794 68.2206 73.6562 69.9141 74.5191L70.8221 72.7371ZM181 61.7C181 63.9567 180.999 65.5891 180.894 66.873C180.79 68.1452 180.589 68.9868 180.237 69.678L182.019 70.5859C182.539 69.5658 182.774 68.4317 182.888 67.0358C183.001 65.6517 183 63.9237 183 61.7H181ZM169.2 75.5C171.424 75.5 173.152 75.5008 174.536 75.3877C175.932 75.2737 177.066 75.0389 178.086 74.5191L177.178 72.7371C176.487 73.0892 175.645 73.2904 174.373 73.3944C173.089 73.4993 171.457 73.5 169.2 73.5V75.5ZM180.237 69.678C179.566 70.9951 178.495 72.066 177.178 72.7371L178.086 74.5191C179.779 73.6562 181.156 72.2794 182.019 70.5859L180.237 69.678ZM169.2 47.5C171.457 47.5 173.089 47.5008 174.373 47.6057C175.645 47.7096 176.487 47.9108 177.178 48.263L178.086 46.481C177.066 45.9612 175.932 45.7264 174.536 45.6123C173.152 45.4993 171.424 45.5 169.2 45.5V47.5ZM183 59.3C183 57.0763 183.001 55.3484 182.888 53.9642C182.774 52.5684 182.539 51.4342 182.019 50.4141L180.237 51.3221C180.589 52.0133 180.79 52.8549 180.894 54.1271C180.999 55.4109 181 57.0433 181 59.3H183ZM177.178 48.263C178.495 48.9341 179.566 50.005 180.237 51.3221L182.019 50.4141C181.156 48.7207 179.779 47.3438 178.086 46.481L177.178 48.263ZM78.8 45.5C76.5763 45.5 74.8484 45.4993 73.4642 45.6123C72.0683 45.7264 70.9342 45.9612 69.9141 46.481L70.8221 48.263C71.5132 47.9108 72.3549 47.7096 73.627 47.6057C74.9109 47.5008 76.5433 47.5 78.8 47.5V45.5ZM67 59.3C67 57.0433 67.0008 55.4109 67.1057 54.1271C67.2096 52.8549 67.4108 52.0133 67.763 51.3221L65.9809 50.4141C65.4612 51.4342 65.2264 52.5684 65.1123 53.9642C64.9992 55.3484 65 57.0763 65 59.3H67ZM69.9141 46.481C68.2206 47.3438 66.8438 48.7207 65.9809 50.4141L67.763 51.3221C68.4341 50.005 69.5049 48.9341 70.8221 48.263L69.9141 46.481Z" fill="url(#paint5_linear_2454_59346)" fill-opacity="0.6" mask="url(#path-8-outside-1_2454_59346)"/>
+<path d="M82.2074 58.6108H80.8778C80.8267 58.3267 80.7315 58.0767 80.5923 57.8608C80.4531 57.6449 80.2827 57.4617 80.081 57.3111C79.8793 57.1605 79.6534 57.0469 79.4034 56.9702C79.1563 56.8935 78.8935 56.8551 78.6151 56.8551C78.1122 56.8551 77.6619 56.9816 77.2642 57.2344C76.8693 57.4872 76.5568 57.858 76.3267 58.3466C76.0994 58.8353 75.9858 59.4318 75.9858 60.1364C75.9858 60.8466 76.0994 61.4461 76.3267 61.9347C76.5568 62.4233 76.8707 62.7926 77.2685 63.0426C77.6662 63.2926 78.1136 63.4176 78.6108 63.4176C78.8864 63.4176 79.1477 63.3807 79.3949 63.3068C79.6449 63.2301 79.8707 63.1179 80.0724 62.9702C80.2741 62.8225 80.4446 62.6421 80.5838 62.429C80.7259 62.2131 80.8239 61.9659 80.8778 61.6875L82.2074 61.6918C82.1364 62.1208 81.9986 62.5157 81.794 62.8765C81.5923 63.2344 81.3324 63.5441 81.0142 63.8054C80.6989 64.064 80.3381 64.2642 79.9318 64.4063C79.5256 64.5483 79.0824 64.6193 78.6023 64.6193C77.8466 64.6193 77.1733 64.4404 76.5824 64.0824C75.9915 63.7216 75.5256 63.206 75.1847 62.5355C74.8466 61.8651 74.6776 61.0654 74.6776 60.1364C74.6776 59.2046 74.848 58.4049 75.1889 57.7372C75.5298 57.0668 75.9957 56.5526 76.5866 56.1946C77.1776 55.8338 77.8494 55.6534 78.6023 55.6534C79.0653 55.6534 79.4972 55.7202 79.8977 55.8537C80.3011 55.9844 80.6634 56.1776 80.9844 56.4333C81.3054 56.6861 81.571 56.9958 81.7812 57.3622C81.9915 57.7259 82.1335 58.1421 82.2074 58.6108ZM86.3179 64.6321C85.7042 64.6321 85.1687 64.4915 84.7113 64.2103C84.2539 63.929 83.8988 63.5355 83.646 63.0299C83.3931 62.5242 83.2667 61.9333 83.2667 61.2571C83.2667 60.5782 83.3931 59.9844 83.646 59.4759C83.8988 58.9674 84.2539 58.5725 84.7113 58.2912C85.1687 58.01 85.7042 57.8693 86.3179 57.8693C86.9315 57.8693 87.467 58.01 87.9244 58.2912C88.3818 58.5725 88.7369 58.9674 88.9897 59.4759C89.2426 59.9844 89.369 60.5782 89.369 61.2571C89.369 61.9333 89.2426 62.5242 88.9897 63.0299C88.7369 63.5355 88.3818 63.929 87.9244 64.2103C87.467 64.4915 86.9315 64.6321 86.3179 64.6321ZM86.3221 63.5625C86.7198 63.5625 87.0494 63.4574 87.3108 63.2472C87.5721 63.037 87.7653 62.7571 87.8903 62.4077C88.0181 62.0583 88.0821 61.6733 88.0821 61.2529C88.0821 60.8353 88.0181 60.4517 87.8903 60.1023C87.7653 59.75 87.5721 59.4674 87.3108 59.2543C87.0494 59.0412 86.7198 58.9347 86.3221 58.9347C85.9215 58.9347 85.5892 59.0412 85.325 59.2543C85.0636 59.4674 84.869 59.75 84.7412 60.1023C84.6162 60.4517 84.5537 60.8353 84.5537 61.2529C84.5537 61.6733 84.6162 62.0583 84.7412 62.4077C84.869 62.7571 85.0636 63.037 85.325 63.2472C85.5892 63.4574 85.9215 63.5625 86.3221 63.5625ZM91.9454 60.6137V64.5H90.6712V57.9546H91.8942V59.0199H91.9752C92.1258 58.6733 92.3616 58.3949 92.6826 58.1847C93.0064 57.9745 93.4141 57.8693 93.9056 57.8693C94.3516 57.8693 94.7422 57.9631 95.0775 58.1506C95.4127 58.3353 95.6726 58.6108 95.8573 58.9773C96.042 59.3438 96.1343 59.7969 96.1343 60.3367V64.5H94.8601V60.4901C94.8601 60.0157 94.7366 59.6449 94.4894 59.3779C94.2422 59.108 93.9028 58.973 93.4709 58.973C93.1755 58.973 92.9127 59.037 92.6826 59.1648C92.4553 59.2926 92.2749 59.4801 92.1414 59.7273C92.0107 59.9716 91.9454 60.2671 91.9454 60.6137ZM98.9972 60.6137V64.5H97.7231V57.9546H98.9461V59.0199H99.0271C99.1776 58.6733 99.4134 58.3949 99.7345 58.1847C100.058 57.9745 100.466 57.8693 100.957 57.8693C101.403 57.8693 101.794 57.9631 102.129 58.1506C102.465 58.3353 102.725 58.6108 102.909 58.9773C103.094 59.3438 103.186 59.7969 103.186 60.3367V64.5H101.912V60.4901C101.912 60.0157 101.788 59.6449 101.541 59.3779C101.294 59.108 100.955 58.973 100.523 58.973C100.227 58.973 99.9646 59.037 99.7345 59.1648C99.5072 59.2926 99.3268 59.4801 99.1933 59.7273C99.0626 59.9716 98.9972 60.2671 98.9972 60.6137ZM107.596 64.6321C106.951 64.6321 106.396 64.4943 105.93 64.2188C105.467 63.9404 105.109 63.5497 104.856 63.0469C104.606 62.5412 104.481 61.9489 104.481 61.2699C104.481 60.5995 104.606 60.0086 104.856 59.4972C105.109 58.9858 105.461 58.5867 105.913 58.2997C106.367 58.0128 106.899 57.8693 107.507 57.8693C107.876 57.8693 108.234 57.9304 108.58 58.0526C108.927 58.1747 109.238 58.3665 109.514 58.6279C109.789 58.8892 110.007 59.2287 110.166 59.6463C110.325 60.0611 110.404 60.5654 110.404 61.1591V61.6108H105.201V60.6563H109.156C109.156 60.3211 109.087 60.0242 108.951 59.7657C108.815 59.5043 108.623 59.2983 108.376 59.1478C108.132 58.9972 107.845 58.9219 107.515 58.9219C107.157 58.9219 106.845 59.01 106.578 59.1861C106.313 59.3594 106.109 59.5867 105.964 59.8679C105.822 60.1463 105.751 60.4489 105.751 60.7756V61.5213C105.751 61.9588 105.828 62.331 105.981 62.6378C106.137 62.9446 106.355 63.179 106.633 63.3409C106.911 63.5 107.237 63.5796 107.609 63.5796C107.85 63.5796 108.07 63.5455 108.269 63.4773C108.468 63.4063 108.64 63.3012 108.785 63.162C108.93 63.0228 109.041 62.8509 109.117 62.6463L110.323 62.8637C110.227 63.2188 110.053 63.5299 109.803 63.7969C109.556 64.0611 109.245 64.2671 108.87 64.4148C108.498 64.5597 108.073 64.6321 107.596 64.6321ZM114.455 64.6321C113.822 64.6321 113.276 64.4887 112.819 64.2017C112.364 63.912 112.015 63.5128 111.77 63.0043C111.526 62.4958 111.404 61.9134 111.404 61.2571C111.404 60.5924 111.529 60.0057 111.779 59.4972C112.029 58.9858 112.381 58.5867 112.836 58.2997C113.29 58.0128 113.826 57.8693 114.442 57.8693C114.939 57.8693 115.383 57.9617 115.772 58.1463C116.161 58.3282 116.475 58.5838 116.714 58.9134C116.955 59.2429 117.099 59.6279 117.144 60.0682H115.904C115.836 59.7614 115.679 59.4972 115.435 59.2756C115.194 59.054 114.87 58.9432 114.464 58.9432C114.108 58.9432 113.797 59.037 113.53 59.2245C113.266 59.4091 113.06 59.6733 112.912 60.0171C112.765 60.358 112.691 60.7614 112.691 61.2273C112.691 61.7046 112.763 62.1165 112.908 62.4631C113.053 62.8097 113.258 63.0782 113.522 63.2685C113.789 63.4588 114.103 63.554 114.464 63.554C114.705 63.554 114.924 63.51 115.12 63.4219C115.319 63.331 115.485 63.2017 115.618 63.0341C115.755 62.8665 115.85 62.6648 115.904 62.429H117.144C117.099 62.8523 116.961 63.2301 116.731 63.5625C116.5 63.8949 116.192 64.1563 115.806 64.3466C115.422 64.537 114.972 64.6321 114.455 64.6321ZM121.442 57.9546V58.9773H117.867V57.9546H121.442ZM118.825 56.3864H120.1V62.5782C120.1 62.8253 120.137 63.0114 120.21 63.1364C120.284 63.2586 120.379 63.3424 120.496 63.3878C120.615 63.4304 120.744 63.4517 120.884 63.4517C120.986 63.4517 121.075 63.4446 121.152 63.4304C121.229 63.4162 121.289 63.4049 121.331 63.3963L121.561 64.4489C121.487 64.4773 121.382 64.5057 121.246 64.5341C121.11 64.5654 120.939 64.5824 120.735 64.5853C120.399 64.5909 120.087 64.5313 119.797 64.4063C119.507 64.2813 119.273 64.0881 119.094 63.8267C118.915 63.5654 118.825 63.2372 118.825 62.8424V56.3864ZM128.843 57.9546V58.9773H125.267V57.9546H128.843ZM126.226 56.3864H127.5V62.5782C127.5 62.8253 127.537 63.0114 127.611 63.1364C127.685 63.2586 127.78 63.3424 127.897 63.3878C128.016 63.4304 128.145 63.4517 128.284 63.4517C128.387 63.4517 128.476 63.4446 128.553 63.4304C128.629 63.4162 128.689 63.4049 128.732 63.3963L128.962 64.4489C128.888 64.4773 128.783 64.5057 128.647 64.5341C128.51 64.5654 128.34 64.5824 128.135 64.5853C127.8 64.5909 127.487 64.5313 127.198 64.4063C126.908 64.2813 126.674 64.0881 126.495 63.8267C126.316 63.5654 126.226 63.2372 126.226 62.8424V56.3864ZM132.819 64.6321C132.205 64.6321 131.67 64.4915 131.212 64.2103C130.755 63.929 130.4 63.5355 130.147 63.0299C129.894 62.5242 129.768 61.9333 129.768 61.2571C129.768 60.5782 129.894 59.9844 130.147 59.4759C130.4 58.9674 130.755 58.5725 131.212 58.2912C131.67 58.01 132.205 57.8693 132.819 57.8693C133.432 57.8693 133.968 58.01 134.425 58.2912C134.883 58.5725 135.238 58.9674 135.491 59.4759C135.744 59.9844 135.87 60.5782 135.87 61.2571C135.87 61.9333 135.744 62.5242 135.491 63.0299C135.238 63.5355 134.883 63.929 134.425 64.2103C133.968 64.4915 133.432 64.6321 132.819 64.6321ZM132.823 63.5625C133.221 63.5625 133.55 63.4574 133.812 63.2472C134.073 63.037 134.266 62.7571 134.391 62.4077C134.519 62.0583 134.583 61.6733 134.583 61.2529C134.583 60.8353 134.519 60.4517 134.391 60.1023C134.266 59.75 134.073 59.4674 133.812 59.2543C133.55 59.0412 133.221 58.9347 132.823 58.9347C132.422 58.9347 132.09 59.0412 131.826 59.2543C131.565 59.4674 131.37 59.75 131.242 60.1023C131.117 60.4517 131.055 60.8353 131.055 61.2529C131.055 61.6733 131.117 62.0583 131.242 62.4077C131.37 62.7571 131.565 63.037 131.826 63.2472C132.09 63.4574 132.422 63.5625 132.823 63.5625ZM146.236 58.5299C146.154 58.2713 146.043 58.0398 145.904 57.8353C145.768 57.6279 145.604 57.4517 145.414 57.3068C145.224 57.1591 145.006 57.0469 144.762 56.9702C144.521 56.8935 144.255 56.8551 143.965 56.8551C143.474 56.8551 143.03 56.9816 142.636 57.2344C142.241 57.4872 141.928 57.858 141.698 58.3466C141.471 58.8324 141.357 59.4276 141.357 60.1321C141.357 60.8395 141.472 61.4375 141.702 61.9262C141.932 62.4148 142.248 62.7855 142.648 63.0384C143.049 63.2912 143.505 63.4176 144.016 63.4176C144.491 63.4176 144.904 63.3211 145.256 63.1279C145.611 62.9347 145.886 62.662 146.079 62.3097C146.275 61.9546 146.373 61.537 146.373 61.0568L146.714 61.1208H144.217V60.0341H147.647V61.027C147.647 61.76 147.491 62.3963 147.178 62.9361C146.869 63.473 146.44 63.8878 145.891 64.1804C145.346 64.473 144.721 64.6193 144.016 64.6193C143.227 64.6193 142.533 64.4375 141.937 64.0739C141.343 63.7103 140.88 63.1946 140.548 62.527C140.215 61.8566 140.049 61.0611 140.049 60.1407C140.049 59.4446 140.146 58.8196 140.339 58.2657C140.532 57.7117 140.803 57.2415 141.153 56.8551C141.505 56.4659 141.918 56.1691 142.393 55.9645C142.87 55.7571 143.391 55.6534 143.957 55.6534C144.428 55.6534 144.867 55.723 145.273 55.8622C145.682 56.0015 146.046 56.1989 146.364 56.4546C146.685 56.7103 146.951 57.0142 147.161 57.3665C147.371 57.7159 147.513 58.1037 147.587 58.5299H146.236ZM149.506 64.5V57.9546H150.781V64.5H149.506ZM150.15 56.9446C149.928 56.9446 149.738 56.8708 149.579 56.723C149.423 56.5725 149.344 56.3935 149.344 56.1861C149.344 55.9759 149.423 55.7969 149.579 55.6492C149.738 55.4986 149.928 55.4233 150.15 55.4233C150.371 55.4233 150.56 55.4986 150.717 55.6492C150.876 55.7969 150.955 55.9759 150.955 56.1861C150.955 56.3935 150.876 56.5725 150.717 56.723C150.56 56.8708 150.371 56.9446 150.15 56.9446ZM155.43 57.9546V58.9773H151.855V57.9546H155.43ZM152.814 56.3864H154.088V62.5782C154.088 62.8253 154.125 63.0114 154.199 63.1364C154.272 63.2586 154.368 63.3424 154.484 63.3878C154.603 63.4304 154.733 63.4517 154.872 63.4517C154.974 63.4517 155.064 63.4446 155.14 63.4304C155.217 63.4162 155.277 63.4049 155.319 63.3963L155.549 64.4489C155.476 64.4773 155.37 64.5057 155.234 64.5341C155.098 64.5654 154.927 64.5824 154.723 64.5853C154.387 64.5909 154.075 64.5313 153.785 64.4063C153.495 64.2813 153.261 64.0881 153.082 63.8267C152.903 63.5654 152.814 63.2372 152.814 62.8424V56.3864Z" fill="#97979B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.251 59.8944C161.916 60.2289 161.916 60.7712 162.251 61.1057L167.394 66.2492C167.729 66.5837 168.271 66.5837 168.606 66.2492L173.749 61.1057C174.084 60.7712 174.084 60.2289 173.749 59.8944L168.606 54.7509C168.271 54.4164 167.729 54.4164 167.394 54.7509L162.251 59.8944ZM166 56.3868L166.557 55.8334L168.032 57.3C168.123 57.2719 168.22 57.2568 168.321 57.2568C168.858 57.2568 169.294 57.69 169.294 58.2245C169.294 58.3243 169.279 58.4207 169.251 58.5113L170.727 59.9787C170.821 59.9485 170.922 59.9321 171.027 59.9321C171.564 59.9321 172 60.3653 172 60.8998C172 61.4342 171.564 61.8674 171.027 61.8674C170.489 61.8674 170.053 61.4342 170.053 60.8998C170.053 60.7577 170.084 60.6228 170.139 60.5012L168.765 59.1349V62.6709C169.079 62.8313 169.294 63.1568 169.294 63.5324C169.294 64.0668 168.858 64.5 168.321 64.5C167.783 64.5 167.347 64.0668 167.347 63.5324C167.347 63.1182 167.609 62.7647 167.977 62.6267V59.1301C167.609 58.9921 167.347 58.6387 167.347 58.2245C167.347 58.0786 167.38 57.9402 167.438 57.8162L166 56.3868Z" fill="#56565C"/>
+<path d="M124.55 104V123.6" stroke="#EDEDF0"/>
+<path d="M124.5 16V40.5" stroke="#EDEDF0"/>
+<defs>
+<filter id="filter0_f_2454_59346" x="54.3614" y="45.7485" width="92.3367" height="35.635" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.8" result="effect1_foregroundBlur_2454_59346"/>
+</filter>
+<filter id="filter1_f_2454_59346" x="44.7955" y="13.8518" width="158.82" height="80.6177" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.8" result="effect1_foregroundBlur_2454_59346"/>
+</filter>
+<filter id="filter2_f_2454_59346" x="34.822" y="14.4701" width="51.9923" height="60.9422" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.6" result="effect1_foregroundBlur_2454_59346"/>
+</filter>
+<filter id="filter3_f_2454_59346" x="25.6408" y="5.87604" width="93.4493" height="94.7619" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="9.6" result="effect1_foregroundBlur_2454_59346"/>
+</filter>
+<radialGradient id="paint0_radial_2454_59346" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(78.7671 63.5241) rotate(10.1017) scale(39.838 13.1072)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_2454_59346" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124.206 54.1607) rotate(-179.84) scale(75.8104 36.7081)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_2454_59346" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(54.6447 61.4631) rotate(-131.445) scale(15.5361 6.99108)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_2454_59346" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62.0092 47.476) rotate(67.3466) scale(24.8685 25.4468)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint4_linear_2454_59346" x1="124" y1="46.5" x2="124" y2="74.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D8D8DB" stop-opacity="0.24"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2454_59346" x1="203.497" y1="65.5" x2="183.586" y2="163.084" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="0.715" stop-color="#FF453A"/>
+<stop offset="1" stop-color="#FD366E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(images)/templateDark.svg b/src/routes/(console)/project-[region]-[project]/sites/(images)/templateDark.svg
new file mode 100644
index 000000000..31cab8780
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(images)/templateDark.svg
@@ -0,0 +1,132 @@
+<svg width="248" height="148" viewBox="0 0 248 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1370_22452)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H244C246.209 0 248 1.79086 248 4V144C248 146.209 246.209 148 244 148H4C1.79086 148 0 146.209 0 144V4Z" fill="#1D1D21"/>
+<g filter="url(#filter0_f_1370_22452)">
+<path d="M143.477 145.611C114.09 145.517 90.2665 136.38 90.2665 125.202C90.2665 114.024 114.09 105.038 143.477 105.132C172.864 105.226 196.688 114.363 196.688 125.541C196.688 136.719 172.864 145.705 143.477 145.611Z" fill="url(#paint0_radial_1370_22452)" fill-opacity="0.24"/>
+</g>
+<g filter="url(#filter1_f_1370_22452)">
+<path d="M173.071 144.24C120.735 144.073 78.3088 120.541 78.3088 91.68C78.3088 62.8185 120.735 39.557 173.071 39.7237C225.407 39.8905 267.834 63.4226 267.834 92.284C267.834 121.145 225.407 144.407 173.071 144.24Z" fill="url(#paint1_radial_1370_22452)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter2_f_1370_22452)">
+<path d="M85.7792 85.7537C86.288 98.26 124.776 106.061 122.21 110.049C119.643 114.037 83.5313 123.684 78.105 114.178C72.6787 104.671 76.4801 56.3539 79.0469 52.3658C81.6138 48.3777 80.3529 76.2472 85.7792 85.7537Z" fill="url(#paint2_radial_1370_22452)" fill-opacity="0.24"/>
+</g>
+<g filter="url(#filter3_f_1370_22452)">
+<path d="M84.9116 127.39C70.9608 118.446 70.11 94.767 83.0113 74.5014C95.9125 54.2358 117.68 45.0577 131.631 54.0014C145.582 62.9452 146.433 86.6241 133.531 106.89C120.63 127.155 98.8623 136.333 84.9116 127.39Z" fill="url(#paint3_radial_1370_22452)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter4_bd_1370_22452)">
+<rect x="20.2505" y="14.515" width="156.816" height="98.208" rx="8.448" fill="white" fill-opacity="0.02" shape-rendering="crispEdges"/>
+<rect x="20.7505" y="15.015" width="155.816" height="97.208" rx="7.948" stroke="white" stroke-opacity="0.04" shape-rendering="crispEdges"/>
+</g>
+<path d="M27.0864 25.0749C27.0864 23.0182 28.7537 21.351 30.8104 21.351H166.506C168.563 21.351 170.23 23.0182 170.23 25.075V102.163C170.23 104.22 168.563 105.887 166.506 105.887H30.8104C28.7537 105.887 27.0864 104.22 27.0864 102.163V25.0749Z" fill="#1D1D21"/>
+<path d="M27.0864 25.0749C27.0864 23.0182 28.7537 21.351 30.8104 21.351H166.506C168.563 21.351 170.23 23.0182 170.23 25.075V102.163C170.23 104.22 168.563 105.887 166.506 105.887H30.8104C28.7537 105.887 27.0864 104.22 27.0864 102.163V25.0749Z" stroke="#2D2D31"/>
+<path d="M35.1069 53.0995V45.4195H37.8444C38.4419 45.4195 38.9369 45.5282 39.3294 45.7457C39.7219 45.9632 40.0157 46.2607 40.2107 46.6382C40.4057 47.0132 40.5032 47.4357 40.5032 47.9057C40.5032 48.3782 40.4044 48.8032 40.2069 49.1807C40.0119 49.5557 39.7169 49.8532 39.3219 50.0732C38.9294 50.2907 38.4357 50.3995 37.8407 50.3995H35.9582V49.417H37.7357C38.1132 49.417 38.4194 49.352 38.6544 49.222C38.8894 49.0895 39.0619 48.9095 39.1719 48.682C39.2819 48.4545 39.3369 48.1957 39.3369 47.9057C39.3369 47.6157 39.2819 47.3582 39.1719 47.1332C39.0619 46.9082 38.8882 46.732 38.6507 46.6045C38.4157 46.477 38.1057 46.4132 37.7207 46.4132H36.2657V53.0995H35.1069ZM44.0201 53.2157C43.4801 53.2157 43.0088 53.092 42.6063 52.8445C42.2038 52.597 41.8913 52.2507 41.6688 51.8057C41.4463 51.3607 41.3351 50.8407 41.3351 50.2457C41.3351 49.6482 41.4463 49.1257 41.6688 48.6782C41.8913 48.2307 42.2038 47.8832 42.6063 47.6357C43.0088 47.3882 43.4801 47.2645 44.0201 47.2645C44.5601 47.2645 45.0313 47.3882 45.4338 47.6357C45.8363 47.8832 46.1488 48.2307 46.3713 48.6782C46.5938 49.1257 46.7051 49.6482 46.7051 50.2457C46.7051 50.8407 46.5938 51.3607 46.3713 51.8057C46.1488 52.2507 45.8363 52.597 45.4338 52.8445C45.0313 53.092 44.5601 53.2157 44.0201 53.2157ZM44.0238 52.2745C44.3738 52.2745 44.6638 52.182 44.8938 51.997C45.1238 51.812 45.2938 51.5657 45.4038 51.2582C45.5163 50.9507 45.5726 50.612 45.5726 50.242C45.5726 49.8745 45.5163 49.537 45.4038 49.2295C45.2938 48.9195 45.1238 48.6707 44.8938 48.4832C44.6638 48.2957 44.3738 48.202 44.0238 48.202C43.6713 48.202 43.3788 48.2957 43.1463 48.4832C42.9163 48.6707 42.7451 48.9195 42.6326 49.2295C42.5226 49.537 42.4676 49.8745 42.4676 50.242C42.4676 50.612 42.5226 50.9507 42.6326 51.2582C42.7451 51.5657 42.9163 51.812 43.1463 51.997C43.3788 52.182 43.6713 52.2745 44.0238 52.2745ZM47.851 53.0995V47.3395H48.9348V48.2545H48.9948C49.0998 47.9445 49.2848 47.7007 49.5498 47.5232C49.8173 47.3432 50.1198 47.2532 50.4573 47.2532C50.5273 47.2532 50.6098 47.2557 50.7048 47.2607C50.8023 47.2657 50.8785 47.272 50.9335 47.2795V48.352C50.8885 48.3395 50.8085 48.3257 50.6935 48.3107C50.5785 48.2932 50.4635 48.2845 50.3485 48.2845C50.0835 48.2845 49.8473 48.3407 49.6398 48.4532C49.4348 48.5632 49.2723 48.717 49.1523 48.9145C49.0323 49.1095 48.9723 49.332 48.9723 49.582V53.0995H47.851ZM54.8273 47.3395V48.2395H51.6811V47.3395H54.8273ZM52.5248 45.9595H53.6461V51.4082C53.6461 51.6257 53.6786 51.7895 53.7436 51.8995C53.8086 52.007 53.8923 52.0807 53.9948 52.1207C54.0998 52.1582 54.2136 52.177 54.3361 52.177C54.4261 52.177 54.5048 52.1707 54.5723 52.1582C54.6398 52.1457 54.6923 52.1357 54.7298 52.1282L54.9323 53.0545C54.8673 53.0795 54.7748 53.1045 54.6548 53.1295C54.5348 53.157 54.3848 53.172 54.2048 53.1745C53.9098 53.1795 53.6348 53.127 53.3798 53.017C53.1248 52.907 52.9186 52.737 52.7611 52.507C52.6036 52.277 52.5248 51.9882 52.5248 51.6407V45.9595ZM58.7033 47.3395V48.2395H55.4483V47.3395H58.7033ZM56.3408 53.0995V46.672C56.3408 46.312 56.4195 46.0132 56.577 45.7757C56.7345 45.5357 56.9433 45.357 57.2033 45.2395C57.4633 45.1195 57.7458 45.0595 58.0508 45.0595C58.2758 45.0595 58.4683 45.0782 58.6283 45.1157C58.7883 45.1507 58.907 45.1832 58.9845 45.2132L58.722 46.1207C58.6695 46.1057 58.602 46.0882 58.5195 46.0682C58.437 46.0457 58.337 46.0345 58.2195 46.0345C57.947 46.0345 57.752 46.102 57.6345 46.237C57.5195 46.372 57.462 46.567 57.462 46.822V53.0995H56.3408ZM61.9539 53.2157C61.4139 53.2157 60.9427 53.092 60.5402 52.8445C60.1377 52.597 59.8252 52.2507 59.6027 51.8057C59.3802 51.3607 59.2689 50.8407 59.2689 50.2457C59.2689 49.6482 59.3802 49.1257 59.6027 48.6782C59.8252 48.2307 60.1377 47.8832 60.5402 47.6357C60.9427 47.3882 61.4139 47.2645 61.9539 47.2645C62.4939 47.2645 62.9652 47.3882 63.3677 47.6357C63.7702 47.8832 64.0827 48.2307 64.3052 48.6782C64.5277 49.1257 64.6389 49.6482 64.6389 50.2457C64.6389 50.8407 64.5277 51.3607 64.3052 51.8057C64.0827 52.2507 63.7702 52.597 63.3677 52.8445C62.9652 53.092 62.4939 53.2157 61.9539 53.2157ZM61.9577 52.2745C62.3077 52.2745 62.5977 52.182 62.8277 51.997C63.0577 51.812 63.2277 51.5657 63.3377 51.2582C63.4502 50.9507 63.5064 50.612 63.5064 50.242C63.5064 49.8745 63.4502 49.537 63.3377 49.2295C63.2277 48.9195 63.0577 48.6707 62.8277 48.4832C62.5977 48.2957 62.3077 48.202 61.9577 48.202C61.6052 48.202 61.3127 48.2957 61.0802 48.4832C60.8502 48.6707 60.6789 48.9195 60.5664 49.2295C60.4564 49.537 60.4014 49.8745 60.4014 50.242C60.4014 50.612 60.4564 50.9507 60.5664 51.2582C60.6789 51.5657 60.8502 51.812 61.0802 51.997C61.3127 52.182 61.6052 52.2745 61.9577 52.2745ZM66.9061 45.4195V53.0995H65.7849V45.4195H66.9061ZM68.309 53.0995V47.3395H69.4302V53.0995H68.309ZM68.8752 46.4507C68.6802 46.4507 68.5127 46.3857 68.3727 46.2557C68.2352 46.1232 68.1665 45.9657 68.1665 45.7832C68.1665 45.5982 68.2352 45.4407 68.3727 45.3107C68.5127 45.1782 68.6802 45.112 68.8752 45.112C69.0702 45.112 69.2365 45.1782 69.374 45.3107C69.514 45.4407 69.584 45.5982 69.584 45.7832C69.584 45.9657 69.514 46.1232 69.374 46.2557C69.2365 46.3857 69.0702 46.4507 68.8752 46.4507ZM73.2593 53.2157C72.7193 53.2157 72.2481 53.092 71.8456 52.8445C71.4431 52.597 71.1306 52.2507 70.9081 51.8057C70.6856 51.3607 70.5743 50.8407 70.5743 50.2457C70.5743 49.6482 70.6856 49.1257 70.9081 48.6782C71.1306 48.2307 71.4431 47.8832 71.8456 47.6357C72.2481 47.3882 72.7193 47.2645 73.2593 47.2645C73.7993 47.2645 74.2706 47.3882 74.6731 47.6357C75.0756 47.8832 75.3881 48.2307 75.6106 48.6782C75.8331 49.1257 75.9443 49.6482 75.9443 50.2457C75.9443 50.8407 75.8331 51.3607 75.6106 51.8057C75.3881 52.2507 75.0756 52.597 74.6731 52.8445C74.2706 53.092 73.7993 53.2157 73.2593 53.2157ZM73.2631 52.2745C73.6131 52.2745 73.9031 52.182 74.1331 51.997C74.3631 51.812 74.5331 51.5657 74.6431 51.2582C74.7556 50.9507 74.8118 50.612 74.8118 50.242C74.8118 49.8745 74.7556 49.537 74.6431 49.2295C74.5331 48.9195 74.3631 48.6707 74.1331 48.4832C73.9031 48.2957 73.6131 48.202 73.2631 48.202C72.9106 48.202 72.6181 48.2957 72.3856 48.4832C72.1556 48.6707 71.9843 48.9195 71.8718 49.2295C71.7618 49.537 71.7068 49.8745 71.7068 50.242C71.7068 50.612 71.7618 50.9507 71.8718 51.2582C71.9843 51.5657 72.1556 51.812 72.3856 51.997C72.6181 52.182 72.9106 52.2745 73.2631 52.2745Z" fill="#818186"/>
+<path d="M33.3828 66.7395C33.3828 64.7954 34.9588 63.2195 36.9028 63.2195H93.2228C95.1669 63.2195 96.7428 64.7954 96.7428 66.7395V105.459H33.3828V66.7395Z" fill="#2D2D31"/>
+<g filter="url(#filter5_f_1370_22452)">
+<path d="M57.5017 104.871C52.2539 93.1877 72.4672 75.9453 102.649 66.3585C132.831 56.7717 161.553 58.4708 166.801 70.1537C172.049 81.8365 151.835 99.079 121.653 108.666C91.471 118.253 62.7494 116.553 57.5017 104.871Z" fill="url(#paint4_radial_1370_22452)" fill-opacity="0.08"/>
+</g>
+<path d="M101.143 66.7395C101.143 64.7954 102.719 63.2195 104.663 63.2195H160.983C162.927 63.2195 164.503 64.7954 164.503 66.7395V105.459H101.143V66.7395Z" fill="#2D2D31"/>
+<circle cx="34.5064" cy="28.771" r="1.584" fill="#818186"/>
+<circle cx="40.8423" cy="28.771" r="1.584" fill="#818186"/>
+<circle cx="47.1782" cy="28.771" r="1.584" fill="#818186"/>
+<rect opacity="0.5" x="55.0981" y="27.187" width="109.296" height="3.168" rx="1.584" fill="#2D2D31"/>
+<g filter="url(#filter6_b_1370_22452)">
+<rect x="75.9971" y="79.9396" width="156.816" height="98.208" rx="8.448" fill="white" fill-opacity="0.02"/>
+<rect x="76.4971" y="80.4396" width="155.816" height="97.208" rx="7.948" stroke="white" stroke-opacity="0.04"/>
+</g>
+<g filter="url(#filter7_d_1370_22452)">
+<path d="M82.333 90.4995C82.333 88.1667 84.2242 86.2755 86.557 86.2755H222.253C224.586 86.2755 226.477 88.1667 226.477 90.4995V167.588C226.477 169.92 224.586 171.812 222.253 171.812H86.557C84.2242 171.812 82.333 169.92 82.333 167.588V90.4995Z" fill="#1D1D21"/>
+<path d="M82.333 90.4995C82.333 88.1667 84.2242 86.2755 86.557 86.2755H222.253C224.586 86.2755 226.477 88.1667 226.477 90.4995V167.588C226.477 169.92 224.586 171.812 222.253 171.812H86.557C84.2242 171.812 82.333 169.92 82.333 167.588V90.4995Z" stroke="#2D2D31"/>
+<path d="M82.333 90.4995C82.333 88.1667 84.2242 86.2755 86.557 86.2755H222.253C224.586 86.2755 226.477 88.1667 226.477 90.4995V167.588C226.477 169.92 224.586 171.812 222.253 171.812H86.557C84.2242 171.812 82.333 169.92 82.333 167.588V90.4995Z" stroke="url(#paint5_linear_1370_22452)" stroke-opacity="0.4"/>
+</g>
+<rect opacity="0.5" x="91.4629" y="128.34" width="48.048" height="5.808" rx="2.112" fill="#2D2D31"/>
+<rect opacity="0.5" x="91.4629" y="138.372" width="86.592" height="5.808" rx="2.112" fill="#2D2D31"/>
+<path d="M90.8535 118.524V110.844H93.666C94.211 110.844 94.6623 110.934 95.0198 111.114C95.3773 111.292 95.6448 111.533 95.8223 111.838C95.9998 112.14 96.0885 112.482 96.0885 112.862C96.0885 113.182 96.0298 113.452 95.9123 113.672C95.7948 113.889 95.6373 114.064 95.4398 114.197C95.2448 114.327 95.0298 114.422 94.7948 114.482V114.557C95.0498 114.569 95.2985 114.652 95.541 114.804C95.786 114.954 95.9885 115.168 96.1485 115.445C96.3085 115.723 96.3885 116.06 96.3885 116.458C96.3885 116.85 96.296 117.203 96.111 117.515C95.9285 117.825 95.646 118.072 95.2635 118.254C94.881 118.434 94.3923 118.524 93.7973 118.524H90.8535ZM92.0123 117.53H93.6848C94.2398 117.53 94.6373 117.423 94.8773 117.208C95.1173 116.993 95.2373 116.724 95.2373 116.402C95.2373 116.159 95.176 115.937 95.0535 115.734C94.931 115.532 94.756 115.37 94.5285 115.25C94.3035 115.13 94.036 115.07 93.726 115.07H92.0123V117.53ZM92.0123 114.167H93.5648C93.8248 114.167 94.0585 114.117 94.266 114.017C94.476 113.917 94.6423 113.777 94.7648 113.597C94.8898 113.414 94.9523 113.199 94.9523 112.952C94.9523 112.634 94.841 112.368 94.6185 112.153C94.396 111.938 94.0548 111.83 93.5948 111.83H92.0123V114.167ZM98.6885 110.844V118.524H97.5673V110.844H98.6885ZM102.518 118.64C101.978 118.64 101.506 118.517 101.104 118.269C100.701 118.022 100.389 117.675 100.166 117.23C99.9439 116.785 99.8326 116.265 99.8326 115.67C99.8326 115.073 99.9439 114.55 100.166 114.103C100.389 113.655 100.701 113.308 101.104 113.06C101.506 112.813 101.978 112.689 102.518 112.689C103.058 112.689 103.529 112.813 103.931 113.06C104.334 113.308 104.646 113.655 104.869 114.103C105.091 114.55 105.203 115.073 105.203 115.67C105.203 116.265 105.091 116.785 104.869 117.23C104.646 117.675 104.334 118.022 103.931 118.269C103.529 118.517 103.058 118.64 102.518 118.64ZM102.521 117.699C102.871 117.699 103.161 117.607 103.391 117.422C103.621 117.237 103.791 116.99 103.901 116.683C104.014 116.375 104.07 116.037 104.07 115.667C104.07 115.299 104.014 114.962 103.901 114.654C103.791 114.344 103.621 114.095 103.391 113.908C103.161 113.72 102.871 113.627 102.521 113.627C102.169 113.627 101.876 113.72 101.644 113.908C101.414 114.095 101.243 114.344 101.13 114.654C101.02 114.962 100.965 115.299 100.965 115.667C100.965 116.037 101.02 116.375 101.13 116.683C101.243 116.99 101.414 117.237 101.644 117.422C101.876 117.607 102.169 117.699 102.521 117.699ZM108.764 120.804C108.306 120.804 107.912 120.744 107.582 120.624C107.255 120.504 106.987 120.345 106.78 120.148C106.572 119.95 106.417 119.734 106.315 119.499L107.279 119.102C107.346 119.212 107.436 119.328 107.549 119.45C107.664 119.575 107.819 119.682 108.014 119.769C108.211 119.857 108.465 119.9 108.775 119.9C109.2 119.9 109.551 119.797 109.829 119.589C110.106 119.384 110.245 119.057 110.245 118.607V117.474H110.174C110.106 117.597 110.009 117.733 109.881 117.883C109.756 118.033 109.584 118.163 109.364 118.273C109.144 118.383 108.857 118.438 108.505 118.438C108.05 118.438 107.64 118.332 107.275 118.119C106.912 117.904 106.625 117.588 106.412 117.17C106.202 116.75 106.097 116.234 106.097 115.622C106.097 115.009 106.201 114.484 106.409 114.047C106.619 113.609 106.906 113.274 107.271 113.042C107.636 112.807 108.05 112.689 108.512 112.689C108.87 112.689 109.159 112.749 109.379 112.869C109.599 112.987 109.77 113.124 109.892 113.282C110.017 113.439 110.114 113.578 110.181 113.698H110.264V112.764H111.362V118.652C111.362 119.147 111.247 119.553 111.017 119.87C110.787 120.188 110.476 120.423 110.084 120.575C109.694 120.728 109.254 120.804 108.764 120.804ZM108.752 117.508C109.075 117.508 109.347 117.433 109.57 117.283C109.795 117.13 109.965 116.913 110.08 116.63C110.197 116.345 110.256 116.004 110.256 115.607C110.256 115.219 110.199 114.878 110.084 114.583C109.969 114.288 109.8 114.058 109.577 113.893C109.355 113.725 109.08 113.642 108.752 113.642C108.415 113.642 108.134 113.729 107.909 113.904C107.684 114.077 107.514 114.312 107.399 114.609C107.286 114.907 107.23 115.239 107.23 115.607C107.23 115.984 107.287 116.315 107.402 116.6C107.517 116.885 107.687 117.108 107.912 117.268C108.14 117.428 108.42 117.508 108.752 117.508Z" fill="#818186"/>
+<circle cx="90.2529" cy="94.1956" r="1.584" fill="#818186"/>
+<circle cx="96.5889" cy="94.1956" r="1.584" fill="#818186"/>
+<circle cx="102.925" cy="94.1956" r="1.584" fill="#818186"/>
+<rect opacity="0.5" x="110.845" y="92.6116" width="109.296" height="3.168" rx="1.584" fill="#2D2D31"/>
+</g>
+<defs>
+<filter id="filter0_f_1370_22452" x="85.7666" y="100.631" width="115.421" height="49.4803" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.25" result="effect1_foregroundBlur_1370_22452"/>
+</filter>
+<filter id="filter1_f_1370_22452" x="73.8086" y="35.2229" width="198.525" height="113.518" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.25" result="effect1_foregroundBlur_1370_22452"/>
+</filter>
+<filter id="filter2_f_1370_22452" x="66.3418" y="42.978" width="64.9907" height="84.2579" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_1370_22452"/>
+</filter>
+<filter id="filter3_f_1370_22452" x="49.8657" y="26.5768" width="116.812" height="128.237" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_1370_22452"/>
+</filter>
+<filter id="filter4_bd_1370_22452" x="15.3084" y="10.515" width="166.7" height="112.092" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1370_22452"/>
+<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.94208"/>
+<feGaussianBlur stdDeviation="2.47104"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1370_22452" result="effect2_dropShadow_1370_22452"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1370_22452" result="shape"/>
+</filter>
+<filter id="filter5_f_1370_22452" x="37.4729" y="40.9472" width="149.357" height="93.1299" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="9.6" result="effect1_foregroundBlur_1370_22452"/>
+</filter>
+<filter id="filter6_b_1370_22452" x="71.9971" y="75.9396" width="164.816" height="106.208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1370_22452"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1370_22452" result="shape"/>
+</filter>
+<filter id="filter7_d_1370_22452" x="79.721" y="85.7755" width="149.368" height="90.76" 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="2.112"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1370_22452"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1370_22452" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_1370_22452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(116.274 125.312) rotate(11.4697) scale(50.0245 18.5748)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_1370_22452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(173.071 91.982) rotate(-179.817) scale(94.7631 52.258)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_1370_22452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(91.1202 108.628) rotate(-127.788) scale(20.9784 9.21331)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_1370_22452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(95.3261 82.4656) rotate(69.8743) scale(34.7964 32.363)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_1370_22452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.22 76.7208) rotate(122.378) scale(33.0211 34.5156)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint5_linear_1370_22452" x1="-16.2698" y1="128.914" x2="42.1452" y2="201.011" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<clipPath id="clip0_1370_22452">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H244C246.209 0 248 1.79086 248 4V144C248 146.209 246.209 148 244 148H4C1.79086 148 0 146.209 0 144V4Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/(images)/templateLight.svg b/src/routes/(console)/project-[region]-[project]/sites/(images)/templateLight.svg
new file mode 100644
index 000000000..e8f7a8eba
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/(images)/templateLight.svg
@@ -0,0 +1,132 @@
+<svg width="248" height="148" viewBox="0 0 248 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1321_46934)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H244C246.209 0 248 1.79086 248 4V144C248 146.209 246.209 148 244 148H4C1.79086 148 0 146.209 0 144V4Z" fill="white"/>
+<g filter="url(#filter0_f_1321_46934)">
+<path d="M143.477 125.611C114.09 125.517 90.2665 116.38 90.2665 105.202C90.2665 94.024 114.09 85.0384 143.477 85.1321C172.864 85.2257 196.688 94.3632 196.688 105.541C196.688 116.719 172.864 125.705 143.477 125.611Z" fill="url(#paint0_radial_1321_46934)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_1321_46934)">
+<path d="M173.071 144.24C120.735 144.073 78.3088 120.541 78.3088 91.68C78.3088 62.8186 120.735 39.557 173.071 39.7238C225.407 39.8906 267.834 63.4226 267.834 92.284C267.834 121.145 225.407 144.407 173.071 144.24Z" fill="url(#paint1_radial_1321_46934)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_1321_46934)">
+<path d="M85.7792 85.7538C86.288 98.26 124.776 106.061 122.21 110.049C119.643 114.037 83.5313 123.684 78.105 114.178C72.6787 104.671 76.4801 56.3539 79.0469 52.3659C81.6138 48.3778 80.3529 76.2473 85.7792 85.7538Z" fill="url(#paint2_radial_1321_46934)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_1321_46934)">
+<path d="M84.9116 127.39C70.9608 118.446 70.11 94.767 83.0113 74.5015C95.9125 54.2359 117.68 45.0577 131.631 54.0015C145.582 62.9452 146.433 86.6241 133.531 106.89C120.63 127.155 98.8623 136.333 84.9116 127.39Z" fill="url(#paint3_radial_1321_46934)" fill-opacity="0.08"/>
+</g>
+<g filter="url(#filter4_bd_1321_46934)">
+<rect x="20.2505" y="14.515" width="156.816" height="98.208" rx="8.448" fill="white" fill-opacity="0.32" shape-rendering="crispEdges"/>
+<rect x="20.7505" y="15.015" width="155.816" height="97.208" rx="7.948" stroke="#19191C" stroke-opacity="0.03" shape-rendering="crispEdges"/>
+</g>
+<path d="M27.0864 25.075C27.0864 23.0183 28.7537 21.351 30.8104 21.351H166.506C168.563 21.351 170.23 23.0183 170.23 25.075V102.163C170.23 104.22 168.563 105.887 166.506 105.887H30.8104C28.7537 105.887 27.0864 104.22 27.0864 102.163V25.075Z" fill="white"/>
+<path d="M27.0864 25.075C27.0864 23.0183 28.7537 21.351 30.8104 21.351H166.506C168.563 21.351 170.23 23.0183 170.23 25.075V102.163C170.23 104.22 168.563 105.887 166.506 105.887H30.8104C28.7537 105.887 27.0864 104.22 27.0864 102.163V25.075Z" stroke="#EDEDF0"/>
+<path d="M35.1069 53.0995V45.4195H37.8444C38.4419 45.4195 38.9369 45.5283 39.3294 45.7458C39.7219 45.9632 40.0157 46.2608 40.2107 46.6383C40.4057 47.0133 40.5032 47.4358 40.5032 47.9058C40.5032 48.3783 40.4044 48.8033 40.2069 49.1808C40.0119 49.5558 39.7169 49.8533 39.3219 50.0733C38.9294 50.2908 38.4357 50.3995 37.8407 50.3995H35.9582V49.417H37.7357C38.1132 49.417 38.4194 49.352 38.6544 49.222C38.8894 49.0895 39.0619 48.9095 39.1719 48.682C39.2819 48.4545 39.3369 48.1958 39.3369 47.9058C39.3369 47.6158 39.2819 47.3583 39.1719 47.1333C39.0619 46.9083 38.8882 46.732 38.6507 46.6045C38.4157 46.477 38.1057 46.4133 37.7207 46.4133H36.2657V53.0995H35.1069ZM44.0201 53.2158C43.4801 53.2158 43.0088 53.092 42.6063 52.8445C42.2038 52.597 41.8913 52.2508 41.6688 51.8058C41.4463 51.3608 41.3351 50.8408 41.3351 50.2458C41.3351 49.6483 41.4463 49.1258 41.6688 48.6783C41.8913 48.2308 42.2038 47.8833 42.6063 47.6358C43.0088 47.3883 43.4801 47.2645 44.0201 47.2645C44.5601 47.2645 45.0313 47.3883 45.4338 47.6358C45.8363 47.8833 46.1488 48.2308 46.3713 48.6783C46.5938 49.1258 46.7051 49.6483 46.7051 50.2458C46.7051 50.8408 46.5938 51.3608 46.3713 51.8058C46.1488 52.2508 45.8363 52.597 45.4338 52.8445C45.0313 53.092 44.5601 53.2158 44.0201 53.2158ZM44.0238 52.2745C44.3738 52.2745 44.6638 52.182 44.8938 51.997C45.1238 51.812 45.2938 51.5658 45.4038 51.2583C45.5163 50.9508 45.5726 50.612 45.5726 50.242C45.5726 49.8745 45.5163 49.537 45.4038 49.2295C45.2938 48.9195 45.1238 48.6708 44.8938 48.4833C44.6638 48.2958 44.3738 48.202 44.0238 48.202C43.6713 48.202 43.3788 48.2958 43.1463 48.4833C42.9163 48.6708 42.7451 48.9195 42.6326 49.2295C42.5226 49.537 42.4676 49.8745 42.4676 50.242C42.4676 50.612 42.5226 50.9508 42.6326 51.2583C42.7451 51.5658 42.9163 51.812 43.1463 51.997C43.3788 52.182 43.6713 52.2745 44.0238 52.2745ZM47.851 53.0995V47.3395H48.9348V48.2545H48.9948C49.0998 47.9445 49.2848 47.7008 49.5498 47.5233C49.8173 47.3433 50.1198 47.2533 50.4573 47.2533C50.5273 47.2533 50.6098 47.2558 50.7048 47.2608C50.8023 47.2658 50.8785 47.272 50.9335 47.2795V48.352C50.8885 48.3395 50.8085 48.3258 50.6935 48.3108C50.5785 48.2933 50.4635 48.2845 50.3485 48.2845C50.0835 48.2845 49.8473 48.3408 49.6398 48.4533C49.4348 48.5633 49.2723 48.717 49.1523 48.9145C49.0323 49.1095 48.9723 49.332 48.9723 49.582V53.0995H47.851ZM54.8273 47.3395V48.2395H51.6811V47.3395H54.8273ZM52.5248 45.9595H53.6461V51.4083C53.6461 51.6258 53.6786 51.7895 53.7436 51.8995C53.8086 52.007 53.8923 52.0808 53.9948 52.1208C54.0998 52.1583 54.2136 52.177 54.3361 52.177C54.4261 52.177 54.5048 52.1708 54.5723 52.1583C54.6398 52.1458 54.6923 52.1358 54.7298 52.1283L54.9323 53.0545C54.8673 53.0795 54.7748 53.1045 54.6548 53.1295C54.5348 53.157 54.3848 53.172 54.2048 53.1745C53.9098 53.1795 53.6348 53.127 53.3798 53.017C53.1248 52.907 52.9186 52.737 52.7611 52.507C52.6036 52.277 52.5248 51.9883 52.5248 51.6408V45.9595ZM58.7033 47.3395V48.2395H55.4483V47.3395H58.7033ZM56.3408 53.0995V46.672C56.3408 46.312 56.4195 46.0133 56.577 45.7758C56.7345 45.5358 56.9433 45.357 57.2033 45.2395C57.4633 45.1195 57.7458 45.0595 58.0508 45.0595C58.2758 45.0595 58.4683 45.0782 58.6283 45.1158C58.7883 45.1508 58.907 45.1833 58.9845 45.2133L58.722 46.1208C58.6695 46.1058 58.602 46.0883 58.5195 46.0683C58.437 46.0458 58.337 46.0345 58.2195 46.0345C57.947 46.0345 57.752 46.102 57.6345 46.237C57.5195 46.372 57.462 46.567 57.462 46.822V53.0995H56.3408ZM61.9539 53.2158C61.4139 53.2158 60.9427 53.092 60.5402 52.8445C60.1377 52.597 59.8252 52.2508 59.6027 51.8058C59.3802 51.3608 59.2689 50.8408 59.2689 50.2458C59.2689 49.6483 59.3802 49.1258 59.6027 48.6783C59.8252 48.2308 60.1377 47.8833 60.5402 47.6358C60.9427 47.3883 61.4139 47.2645 61.9539 47.2645C62.4939 47.2645 62.9652 47.3883 63.3677 47.6358C63.7702 47.8833 64.0827 48.2308 64.3052 48.6783C64.5277 49.1258 64.6389 49.6483 64.6389 50.2458C64.6389 50.8408 64.5277 51.3608 64.3052 51.8058C64.0827 52.2508 63.7702 52.597 63.3677 52.8445C62.9652 53.092 62.4939 53.2158 61.9539 53.2158ZM61.9577 52.2745C62.3077 52.2745 62.5977 52.182 62.8277 51.997C63.0577 51.812 63.2277 51.5658 63.3377 51.2583C63.4502 50.9508 63.5064 50.612 63.5064 50.242C63.5064 49.8745 63.4502 49.537 63.3377 49.2295C63.2277 48.9195 63.0577 48.6708 62.8277 48.4833C62.5977 48.2958 62.3077 48.202 61.9577 48.202C61.6052 48.202 61.3127 48.2958 61.0802 48.4833C60.8502 48.6708 60.6789 48.9195 60.5664 49.2295C60.4564 49.537 60.4014 49.8745 60.4014 50.242C60.4014 50.612 60.4564 50.9508 60.5664 51.2583C60.6789 51.5658 60.8502 51.812 61.0802 51.997C61.3127 52.182 61.6052 52.2745 61.9577 52.2745ZM66.9061 45.4195V53.0995H65.7849V45.4195H66.9061ZM68.309 53.0995V47.3395H69.4302V53.0995H68.309ZM68.8752 46.4508C68.6802 46.4508 68.5127 46.3858 68.3727 46.2557C68.2352 46.1233 68.1665 45.9658 68.1665 45.7832C68.1665 45.5983 68.2352 45.4408 68.3727 45.3107C68.5127 45.1783 68.6802 45.112 68.8752 45.112C69.0702 45.112 69.2365 45.1783 69.374 45.3107C69.514 45.4408 69.584 45.5983 69.584 45.7832C69.584 45.9658 69.514 46.1233 69.374 46.2557C69.2365 46.3858 69.0702 46.4508 68.8752 46.4508ZM73.2593 53.2158C72.7193 53.2158 72.2481 53.092 71.8456 52.8445C71.4431 52.597 71.1306 52.2508 70.9081 51.8058C70.6856 51.3608 70.5743 50.8408 70.5743 50.2458C70.5743 49.6483 70.6856 49.1258 70.9081 48.6783C71.1306 48.2308 71.4431 47.8833 71.8456 47.6358C72.2481 47.3883 72.7193 47.2645 73.2593 47.2645C73.7993 47.2645 74.2706 47.3883 74.6731 47.6358C75.0756 47.8833 75.3881 48.2308 75.6106 48.6783C75.8331 49.1258 75.9443 49.6483 75.9443 50.2458C75.9443 50.8408 75.8331 51.3608 75.6106 51.8058C75.3881 52.2508 75.0756 52.597 74.6731 52.8445C74.2706 53.092 73.7993 53.2158 73.2593 53.2158ZM73.2631 52.2745C73.6131 52.2745 73.9031 52.182 74.1331 51.997C74.3631 51.812 74.5331 51.5658 74.6431 51.2583C74.7556 50.9508 74.8118 50.612 74.8118 50.242C74.8118 49.8745 74.7556 49.537 74.6431 49.2295C74.5331 48.9195 74.3631 48.6708 74.1331 48.4833C73.9031 48.2958 73.6131 48.202 73.2631 48.202C72.9106 48.202 72.6181 48.2958 72.3856 48.4833C72.1556 48.6708 71.9843 48.9195 71.8718 49.2295C71.7618 49.537 71.7068 49.8745 71.7068 50.242C71.7068 50.612 71.7618 50.9508 71.8718 51.2583C71.9843 51.5658 72.1556 51.812 72.3856 51.997C72.6181 52.182 72.9106 52.2745 73.2631 52.2745Z" fill="#97979B"/>
+<path d="M33.3828 66.7395C33.3828 64.7955 34.9588 63.2195 36.9028 63.2195H93.2228C95.1669 63.2195 96.7428 64.7955 96.7428 66.7395V105.46H33.3828V66.7395Z" fill="#F4F4F7"/>
+<g filter="url(#filter5_f_1321_46934)">
+<path d="M57.5017 104.871C52.2539 93.1877 72.4672 75.9453 102.649 66.3584C132.831 56.7716 161.553 58.4708 166.801 70.1537C172.049 81.8365 151.835 99.079 121.653 108.666C91.471 118.253 62.7494 116.553 57.5017 104.871Z" fill="url(#paint4_radial_1321_46934)" fill-opacity="0.08"/>
+</g>
+<path d="M101.143 66.7395C101.143 64.7955 102.719 63.2195 104.663 63.2195H160.983C162.927 63.2195 164.503 64.7955 164.503 66.7395V105.46H101.143V66.7395Z" fill="#F4F4F7"/>
+<circle cx="34.5064" cy="28.771" r="1.584" fill="#E4E4E7"/>
+<circle cx="40.8423" cy="28.771" r="1.584" fill="#E4E4E7"/>
+<circle cx="47.1782" cy="28.771" r="1.584" fill="#E4E4E7"/>
+<rect opacity="0.5" x="55.0981" y="27.187" width="109.296" height="3.168" rx="1.584" fill="#EDEDF0"/>
+<g filter="url(#filter6_b_1321_46934)">
+<rect x="75.9971" y="79.9396" width="156.816" height="98.208" rx="8.448" fill="white" fill-opacity="0.32"/>
+<rect x="76.4971" y="80.4396" width="155.816" height="97.208" rx="7.948" stroke="#19191C" stroke-opacity="0.03"/>
+</g>
+<g filter="url(#filter7_d_1321_46934)">
+<path d="M82.333 90.4996C82.333 88.1667 84.2242 86.2756 86.557 86.2756H222.253C224.586 86.2756 226.477 88.1667 226.477 90.4996V167.588C226.477 169.92 224.586 171.812 222.253 171.812H86.557C84.2242 171.812 82.333 169.92 82.333 167.588V90.4996Z" fill="white"/>
+<path d="M82.333 90.4996C82.333 88.1667 84.2242 86.2756 86.557 86.2756H222.253C224.586 86.2756 226.477 88.1667 226.477 90.4996V167.588C226.477 169.92 224.586 171.812 222.253 171.812H86.557C84.2242 171.812 82.333 169.92 82.333 167.588V90.4996Z" stroke="#EDEDF0"/>
+<path d="M82.333 90.4996C82.333 88.1667 84.2242 86.2756 86.557 86.2756H222.253C224.586 86.2756 226.477 88.1667 226.477 90.4996V167.588C226.477 169.92 224.586 171.812 222.253 171.812H86.557C84.2242 171.812 82.333 169.92 82.333 167.588V90.4996Z" stroke="url(#paint5_linear_1321_46934)" stroke-opacity="0.4"/>
+</g>
+<rect opacity="0.5" x="91.4629" y="128.34" width="48.048" height="5.808" rx="2.112" fill="#EDEDF0"/>
+<rect opacity="0.5" x="91.4629" y="138.372" width="86.592" height="5.808" rx="2.112" fill="#EDEDF0"/>
+<path d="M90.8535 118.524V110.844H93.666C94.211 110.844 94.6623 110.934 95.0198 111.114C95.3773 111.292 95.6448 111.533 95.8223 111.838C95.9998 112.14 96.0885 112.482 96.0885 112.862C96.0885 113.182 96.0298 113.452 95.9123 113.672C95.7948 113.889 95.6373 114.064 95.4398 114.197C95.2448 114.327 95.0298 114.422 94.7948 114.482V114.557C95.0498 114.569 95.2985 114.652 95.541 114.804C95.786 114.954 95.9885 115.168 96.1485 115.445C96.3085 115.723 96.3885 116.06 96.3885 116.458C96.3885 116.85 96.296 117.203 96.111 117.515C95.9285 117.825 95.646 118.072 95.2635 118.254C94.881 118.434 94.3923 118.524 93.7973 118.524H90.8535ZM92.0123 117.53H93.6848C94.2398 117.53 94.6373 117.423 94.8773 117.208C95.1173 116.993 95.2373 116.724 95.2373 116.402C95.2373 116.159 95.176 115.937 95.0535 115.734C94.931 115.532 94.756 115.37 94.5285 115.25C94.3035 115.13 94.036 115.07 93.726 115.07H92.0123V117.53ZM92.0123 114.167H93.5648C93.8248 114.167 94.0585 114.117 94.266 114.017C94.476 113.917 94.6423 113.777 94.7648 113.597C94.8898 113.414 94.9523 113.199 94.9523 112.952C94.9523 112.634 94.841 112.368 94.6185 112.153C94.396 111.938 94.0548 111.83 93.5948 111.83H92.0123V114.167ZM98.6885 110.844V118.524H97.5673V110.844H98.6885ZM102.518 118.64C101.978 118.64 101.506 118.517 101.104 118.269C100.701 118.022 100.389 117.675 100.166 117.23C99.9439 116.785 99.8326 116.265 99.8326 115.67C99.8326 115.073 99.9439 114.55 100.166 114.103C100.389 113.655 100.701 113.308 101.104 113.06C101.506 112.813 101.978 112.689 102.518 112.689C103.058 112.689 103.529 112.813 103.931 113.06C104.334 113.308 104.646 113.655 104.869 114.103C105.091 114.55 105.203 115.073 105.203 115.67C105.203 116.265 105.091 116.785 104.869 117.23C104.646 117.675 104.334 118.022 103.931 118.269C103.529 118.517 103.058 118.64 102.518 118.64ZM102.521 117.699C102.871 117.699 103.161 117.607 103.391 117.422C103.621 117.237 103.791 116.99 103.901 116.683C104.014 116.375 104.07 116.037 104.07 115.667C104.07 115.299 104.014 114.962 103.901 114.654C103.791 114.344 103.621 114.095 103.391 113.908C103.161 113.72 102.871 113.627 102.521 113.627C102.169 113.627 101.876 113.72 101.644 113.908C101.414 114.095 101.243 114.344 101.13 114.654C101.02 114.962 100.965 115.299 100.965 115.667C100.965 116.037 101.02 116.375 101.13 116.683C101.243 116.99 101.414 117.237 101.644 117.422C101.876 117.607 102.169 117.699 102.521 117.699ZM108.764 120.804C108.306 120.804 107.912 120.744 107.582 120.624C107.255 120.504 106.987 120.345 106.78 120.148C106.572 119.95 106.417 119.734 106.315 119.499L107.279 119.102C107.346 119.212 107.436 119.328 107.549 119.45C107.664 119.575 107.819 119.682 108.014 119.769C108.211 119.857 108.465 119.9 108.775 119.9C109.2 119.9 109.551 119.797 109.829 119.589C110.106 119.384 110.245 119.057 110.245 118.607V117.474H110.174C110.106 117.597 110.009 117.733 109.881 117.883C109.756 118.033 109.584 118.163 109.364 118.273C109.144 118.383 108.857 118.438 108.505 118.438C108.05 118.438 107.64 118.332 107.275 118.119C106.912 117.904 106.625 117.588 106.412 117.17C106.202 116.75 106.097 116.234 106.097 115.622C106.097 115.009 106.201 114.484 106.409 114.047C106.619 113.609 106.906 113.274 107.271 113.042C107.636 112.807 108.05 112.689 108.512 112.689C108.87 112.689 109.159 112.749 109.379 112.869C109.599 112.987 109.77 113.124 109.892 113.282C110.017 113.439 110.114 113.578 110.181 113.698H110.264V112.764H111.362V118.652C111.362 119.147 111.247 119.553 111.017 119.87C110.787 120.188 110.476 120.423 110.084 120.575C109.694 120.728 109.254 120.804 108.764 120.804ZM108.752 117.508C109.075 117.508 109.347 117.433 109.57 117.283C109.795 117.13 109.965 116.913 110.08 116.63C110.197 116.345 110.256 116.004 110.256 115.607C110.256 115.219 110.199 114.878 110.084 114.583C109.969 114.288 109.8 114.058 109.577 113.893C109.355 113.725 109.08 113.642 108.752 113.642C108.415 113.642 108.134 113.729 107.909 113.904C107.684 114.077 107.514 114.312 107.399 114.609C107.286 114.907 107.23 115.239 107.23 115.607C107.23 115.984 107.287 116.315 107.402 116.6C107.517 116.885 107.687 117.108 107.912 117.268C108.14 117.428 108.42 117.508 108.752 117.508Z" fill="#97979B"/>
+<circle cx="90.2529" cy="94.1955" r="1.584" fill="#E4E4E7"/>
+<circle cx="96.5889" cy="94.1955" r="1.584" fill="#E4E4E7"/>
+<circle cx="102.925" cy="94.1955" r="1.584" fill="#E4E4E7"/>
+<rect opacity="0.5" x="110.845" y="92.6115" width="109.296" height="3.168" rx="1.584" fill="#EDEDF0"/>
+</g>
+<defs>
+<filter id="filter0_f_1321_46934" x="85.7666" y="80.6313" width="115.421" height="49.4804" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.25" result="effect1_foregroundBlur_1321_46934"/>
+</filter>
+<filter id="filter1_f_1321_46934" x="73.8086" y="35.2229" width="198.525" height="113.518" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.25" result="effect1_foregroundBlur_1321_46934"/>
+</filter>
+<filter id="filter2_f_1321_46934" x="66.3418" y="42.9781" width="64.9907" height="84.2579" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_1321_46934"/>
+</filter>
+<filter id="filter3_f_1321_46934" x="49.8657" y="26.5768" width="116.812" height="128.237" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_1321_46934"/>
+</filter>
+<filter id="filter4_bd_1321_46934" x="15.3084" y="12.403" width="166.7" height="110.204" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.056"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1321_46934"/>
+<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.94208"/>
+<feGaussianBlur stdDeviation="2.47104"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1321_46934" result="effect2_dropShadow_1321_46934"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1321_46934" result="shape"/>
+</filter>
+<filter id="filter5_f_1321_46934" x="37.4729" y="40.9472" width="149.357" height="93.1298" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="9.6" result="effect1_foregroundBlur_1321_46934"/>
+</filter>
+<filter id="filter6_b_1321_46934" x="73.8851" y="77.8276" width="161.04" height="102.432" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.056"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1321_46934"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1321_46934" result="shape"/>
+</filter>
+<filter id="filter7_d_1321_46934" x="79.721" y="85.7756" width="149.368" height="90.76" 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="2.112"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1321_46934"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1321_46934" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_1321_46934" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(116.274 105.312) rotate(11.4697) scale(50.0245 18.5748)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_1321_46934" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(173.071 91.982) rotate(-179.817) scale(94.7631 52.258)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_1321_46934" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(91.1202 108.628) rotate(-127.788) scale(20.9784 9.21331)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_1321_46934" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(95.3261 82.4656) rotate(69.8743) scale(34.7964 32.363)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_1321_46934" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.22 76.7208) rotate(122.378) scale(33.0211 34.5156)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint5_linear_1321_46934" x1="-16.2698" y1="128.914" x2="42.1452" y2="201.011" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#EDEDF0"/>
+</linearGradient>
+<clipPath id="clip0_1321_46934">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H244C246.209 0 248 1.79086 248 4V144C248 146.209 246.209 148 244 148H4C1.79086 148 0 146.209 0 144V4Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+layout.svelte b/src/routes/(console)/project-[region]-[project]/sites/+layout.svelte
new file mode 100644
index 000000000..abdad2881
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Sites - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+layout.ts b/src/routes/(console)/project-[region]-[project]/sites/+layout.ts
new file mode 100644
index 000000000..d3a0db12f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/+layout.ts
@@ -0,0 +1,12 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { Dependencies } from '$lib/constants';
+
+export const load = async ({ depends }) => {
+    depends(Dependencies.SITES);
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
new file mode 100644
index 000000000..855274fa4
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
+    import {
+        Empty,
+        EmptySearch,
+        PaginationWithLimit,
+        SearchQuery,
+        ViewSelector
+    } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { isServiceLimited } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+    import { canWriteSites } from '$lib/stores/roles.js';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
+    import { app } from '$lib/stores/app';
+    import CreateSiteModal from './createSiteModal.svelte';
+    import EmptyLight from './(images)/empty-sites-light.svg';
+    import EmptyDark from './(images)/empty-sites-dark.svg';
+    import Grid from './grid.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { columns } from './store';
+    import { View } from '$lib/helpers/load';
+    import Table from './table.svelte';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { sdk } from '$lib/stores/sdk';
+    export let data;
+    let show = false;
+
+    $: $registerCommands([
+        {
+            label: 'Create site',
+            callback: () => {
+                show = true;
+            },
+            keys: ['c'],
+            disabled:
+                isServiceLimited('sites', $organization?.billingPlan, data.siteList?.total) ||
+                !$canWriteSites,
+            icon: IconPlus,
+            group: 'sites'
+        }
+    ]);
+
+    $updateCommandGroupRanks({ sites: 1000 });
+
+    onMount(() => {
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`sites.*`)) {
+                invalidate(Dependencies.SITES);
+            }
+        });
+    });
+</script>
+
+<Container>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />
+            {#if $canWriteSites}
+                <Button on:mousedown={() => (show = true)} event="create_site" size="s">
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create site
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+    {#if data.siteList.total}
+        {#if data.view === View.Grid}
+            <Grid siteList={data.siteList} />
+        {:else}
+            <Table siteList={data.siteList} />
+        {/if}
+        <PaginationWithLimit
+            name="Sites"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.siteList.total} />
+    {:else if data.search}
+        <EmptySearch target="sites" />
+    {:else}
+        <Empty
+            single
+            allowCreate={$canWriteSites}
+            href="https://appwrite.io/docs/products/sites"
+            description="Deploy and manage your web your web applications with Sites. "
+            target="site"
+            src={$app.themeInUse === 'dark' ? EmptyDark : EmptyLight}
+            on:click={() => (show = true)}>
+        </Empty>
+    {/if}
+</Container>
+
+<CreateSiteModal bind:show />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/+page.ts
new file mode 100644
index 000000000..62eeb026a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.ts
@@ -0,0 +1,29 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
+
+export const load = async ({ url, depends, route, params }) => {
+    depends(Dependencies.SITES);
+
+    const page = getPage(url);
+    const search = getSearch(url);
+    const limit = getLimit(url, route, CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const view = getView(url, route, View.Grid, View.Grid);
+
+    const siteList = await sdk
+        .forProject(params.region, params.project)
+        .sites.list(
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+            search || undefined
+        );
+
+    return {
+        offset,
+        limit,
+        search,
+        siteList,
+        view
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/activateDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/activateDeploymentModal.svelte
new file mode 100644
index 000000000..fbf321e46
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/activateDeploymentModal.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Confirm } from '$lib/components';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { page } from '$app/state';
+
+    export let show = false;
+    export let selectedDeploymentId: string;
+    export let siteId: string;
+    let error: string;
+
+    async function activate() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.updateSiteDeployment(siteId, selectedDeploymentId);
+            addNotification({
+                type: 'success',
+                message: `Deployment has been activated`
+            });
+            trackEvent(Submit.SiteActivateDeployment);
+
+            invalidate(Dependencies.SITE);
+            invalidate(Dependencies.DEPLOYMENTS);
+            show = false;
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SiteActivateDeployment);
+        }
+    }
+</script>
+
+<Confirm title="Activate deployment" bind:open={show} bind:error onSubmit={activate}>
+    <p class="text">
+        This deployment is ready but not yet live. Activate it to make it publicly accessible.
+    </p>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Activate</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte
new file mode 100644
index 000000000..e9afbf4ff
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites`,
+            title: 'Sites'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/+layout.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/+layout.ts
new file mode 100644
index 000000000..1529ecc44
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/+layout.ts
@@ -0,0 +1,12 @@
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ params }) => {
+    const [installations, frameworks] = await Promise.all([
+        sdk.forProject(params.region, params.project).vcs.listInstallations(),
+        sdk.forProject(params.region, params.project).sites.listFrameworks()
+    ]);
+    return {
+        installations,
+        frameworks
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/aside.svelte
new file mode 100644
index 000000000..3e3d32978
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/aside.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { Card, SvgIcon, Trim } from '$lib/components';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
+    import { consoleVariables } from '$routes/(console)/store';
+    import type { Models } from '@appwrite.io/console';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+
+    export let framework: Partial<Models.Framework>;
+    export let repositoryName: string;
+    export let branch: string;
+    export let rootDir: string;
+    export let domain: string = '';
+    export let showAfter = true;
+</script>
+
+<Card padding="s" radius="s">
+    <Layout.Stack gap="xl">
+        <slot />
+        <Layout.Stack gap="l">
+            {#if repositoryName && showAfter}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Git repository</Typography.Caption>
+                    <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                        <Icon size="s" icon={IconGithub} color="--fgcolor-neutral-primary" />
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                            {repositoryName}
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+            {/if}
+            {#if branch && showAfter}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Branch</Typography.Caption>
+                    <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                        <Icon size="s" icon={IconGitBranch} color="--fgcolor-neutral-primary" />
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                            {branch}
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+            {/if}
+
+            {#if rootDir && showAfter}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Root directory</Typography.Caption>
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                        {rootDir}
+                    </Typography.Text>
+                </Layout.Stack>
+            {/if}
+            {#if framework?.name}
+                {@const frameworkIcon = getFrameworkIcon(framework.key)}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Framework</Typography.Caption>
+                    <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                        {#if frameworkIcon}
+                            <SvgIcon iconSize="small" size={16} name={frameworkIcon} />
+                        {/if}
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                            {framework.name}
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+            {/if}
+
+            {#if domain && showAfter}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Caption variant="400">Domain</Typography.Caption>
+
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                        {#key domain}
+                            <Trim alternativeTrim>
+                                {$consoleVariables._APP_OPTIONS_FORCE_HTTPS
+                                    ? 'https://'
+                                    : 'http://'}{domain}
+                            </Trim>
+                        {/key}
+                    </Typography.Text>
+                </Layout.Stack>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Card>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte
new file mode 100644
index 000000000..cc3e4cf16
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte
@@ -0,0 +1,331 @@
+<script lang="ts">
+    import { Empty, Paginator } from '$lib/components';
+    import { Button, InputSelect, InputText } from '$lib/elements/forms';
+    import {
+        Fieldset,
+        Layout,
+        Popover,
+        Icon,
+        Table,
+        Badge,
+        InteractiveText,
+        ActionMenu,
+        Accordion,
+        Tooltip,
+        Button as PinkButton
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconCode,
+        IconUpload,
+        IconPlus,
+        IconTrash,
+        IconEyeOff,
+        IconPencil
+    } from '@appwrite.io/pink-icons-svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { iconPath } from '$lib/stores/app';
+    import VariableEditorModal from './variableEditorModal.svelte';
+    import SecretVariableModal from './secretVariableModal.svelte';
+    import ImportSiteVariablesModal from './importSiteVariablesModal.svelte';
+    import CreateVariableModal from './createVariableModal.svelte';
+    import DeleteVariableModal from './deleteVariableModal.svelte';
+    import UpdateVariableModal from './updateVariableModal.svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+
+    export let frameworks: Models.Framework[];
+    export let selectedFramework: Models.Framework;
+    $: frameworkData = frameworks.find((framework) => framework.key === selectedFramework?.key);
+    $: ssr = frameworkData?.adapters.find((adapter) => adapter.key === 'ssr');
+
+    export let variables: Partial<Models.Variable>[] = [];
+    export let installCommand = '';
+    export let buildCommand = '';
+    export let outputDirectory = '';
+
+    let showEditorModal = false;
+    let showImportModal = false;
+    let showSecretModal = false;
+    let showCreate = false;
+    let showUpdate = false;
+    let showDelete = false;
+
+    let currentVariable: Partial<Models.Variable>;
+    let frameworkId = selectedFramework.key;
+
+    $: if (!installCommand || !buildCommand || !outputDirectory) {
+        installCommand ||= ssr?.installCommand;
+        buildCommand ||= ssr?.buildCommand;
+        outputDirectory ||= ssr?.outputDirectory;
+    }
+
+    $: if (frameworkData) {
+        installCommand = ssr?.installCommand;
+        buildCommand = ssr?.buildCommand;
+        outputDirectory = ssr?.outputDirectory;
+    }
+</script>
+
+<Fieldset legend="Settings">
+    <Layout.Stack gap="l">
+        <InputSelect
+            id="framework"
+            label="Framework"
+            placeholder="Select framework"
+            bind:value={frameworkId}
+            options={frameworks.map((framework) => ({
+                value: framework.key,
+                label: framework.name,
+                leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
+            }))}
+            on:change={() => {
+                selectedFramework = frameworks.find((framework) => framework.key === frameworkId);
+            }} />
+
+        <Layout.Stack>
+            <Accordion title="Build settings" badge="Optional">
+                <Layout.Stack gap="xl">
+                    Set up how your project is built and where the output files are stored.
+                    <Layout.Stack>
+                        <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                            <InputText
+                                id="installCommand"
+                                label="Install command"
+                                bind:value={installCommand}
+                                placeholder={ssr?.installCommand} />
+                            <Button
+                                secondary
+                                size="s"
+                                disabled={ssr?.installCommand === installCommand}
+                                on:click={() => (installCommand = ssr?.installCommand)}>
+                                Reset
+                            </Button>
+                        </Layout.Stack>
+                        <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                            <InputText
+                                id="buildCommand"
+                                label="Build command"
+                                bind:value={buildCommand}
+                                placeholder={ssr?.buildCommand} />
+                            <Button
+                                secondary
+                                size="s"
+                                disabled={ssr?.buildCommand === buildCommand}
+                                on:click={() => (buildCommand = ssr?.buildCommand)}>
+                                Reset
+                            </Button>
+                        </Layout.Stack>
+                        <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                            <InputText
+                                id="outputDirectory"
+                                label="Output directory"
+                                bind:value={outputDirectory}
+                                placeholder={ssr?.outputDirectory} />
+                            <Button
+                                secondary
+                                size="s"
+                                disabled={ssr?.outputDirectory === outputDirectory}
+                                on:click={() => (outputDirectory = ssr?.outputDirectory)}>
+                                Reset
+                            </Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Accordion>
+
+            <Accordion title="Environment variables" badge="Optional" hideDivider>
+                <Layout.Stack gap="xl">
+                    Set up environment variables to securely manage keys and settings for your
+                    project.
+                    <Layout.Stack gap="l">
+                        <Layout.Stack direction="row">
+                            <Layout.Stack direction="row" gap="s">
+                                <Button
+                                    secondary
+                                    size="s"
+                                    on:mousedown={() => {
+                                        showEditorModal = true;
+                                        trackEvent(Click.VariablesUpdateClick, {
+                                            source: 'site_configuration'
+                                        });
+                                    }}>
+                                    <Icon slot="start" icon={IconCode} /> Editor
+                                </Button>
+                                <Button
+                                    secondary
+                                    size="s"
+                                    on:mousedown={() => {
+                                        showImportModal = true;
+                                        trackEvent(Click.VariablesImportClick, {
+                                            source: 'site_configuration'
+                                        });
+                                    }}>
+                                    <Icon slot="start" icon={IconUpload} /> Import .env
+                                </Button>
+                            </Layout.Stack>
+                            {#if variables?.length}
+                                <Button
+                                    secondary
+                                    size="s"
+                                    on:mousedown={() => {
+                                        showCreate = true;
+                                        trackEvent(Click.VariablesCreateClick, {
+                                            source: 'site_settings'
+                                        });
+                                    }}>
+                                    <Icon slot="start" icon={IconPlus} /> Create variable
+                                </Button>
+                            {/if}
+                        </Layout.Stack>
+
+                        {#if variables?.length}
+                            <Paginator
+                                items={variables}
+                                limit={6}
+                                hideFooter={variables.length <= 6}>
+                                {#snippet children(paginatedItems: typeof variables)}
+                                    <Table.Root
+                                        let:root
+                                        columns={[
+                                            { id: 'key', width: 200 },
+                                            { id: 'value' },
+                                            { id: 'actions', width: 40 }
+                                        ]}>
+                                        <svelte:fragment slot="header" let:root>
+                                            <Table.Header.Cell column="key" {root}
+                                                >Key</Table.Header.Cell>
+                                            <Table.Header.Cell column="value" {root}
+                                                >Value</Table.Header.Cell>
+                                            <Table.Header.Cell column="actions" {root}
+                                            ></Table.Header.Cell>
+                                        </svelte:fragment>
+                                        {#each paginatedItems as variable}
+                                            <Table.Row.Base {root}>
+                                                <Table.Cell column="key" {root}
+                                                    >{variable.key}</Table.Cell>
+                                                <Table.Cell column="value" {root}>
+                                                    <!-- TODO: fix max width -->
+                                                    <div style="max-width: 20rem">
+                                                        {#if variable.secret}
+                                                            <Tooltip maxWidth="26rem">
+                                                                <Badge
+                                                                    content="Secret"
+                                                                    variant="secondary"
+                                                                    size="s" />
+                                                                <svelte:fragment slot="tooltip">
+                                                                    This value is secret, you cannot
+                                                                    see its value.
+                                                                </svelte:fragment>
+                                                            </Tooltip>
+                                                        {:else}
+                                                            <InteractiveText
+                                                                variant="secret"
+                                                                isVisible={false}
+                                                                text={variable.value} />
+                                                        {/if}
+                                                    </div>
+                                                </Table.Cell>
+                                                <Table.Cell column="actions" {root}>
+                                                    <div style="margin-inline-start: auto">
+                                                        <Popover
+                                                            padding="none"
+                                                            placement="bottom-end"
+                                                            let:toggle>
+                                                            <PinkButton.Button
+                                                                icon
+                                                                variant="text"
+                                                                size="s"
+                                                                aria-label="More options"
+                                                                on:click={(e) => {
+                                                                    e.preventDefault();
+                                                                    toggle(e);
+                                                                }}>
+                                                                <Icon
+                                                                    icon={IconDotsHorizontal}
+                                                                    size="s" />
+                                                            </PinkButton.Button>
+
+                                                            <svelte:fragment
+                                                                slot="tooltip"
+                                                                let:toggle>
+                                                                <ActionMenu.Root>
+                                                                    {#if !variable?.secret}
+                                                                        <ActionMenu.Item.Button
+                                                                            leadingIcon={IconPencil}
+                                                                            on:click={(e) => {
+                                                                                toggle(e);
+                                                                                currentVariable =
+                                                                                    variable;
+                                                                                showUpdate = true;
+                                                                            }}>
+                                                                            Update
+                                                                        </ActionMenu.Item.Button>
+                                                                    {/if}
+                                                                    {#if !variable?.secret}
+                                                                        <ActionMenu.Item.Button
+                                                                            leadingIcon={IconEyeOff}
+                                                                            on:click={(e) => {
+                                                                                toggle(e);
+
+                                                                                currentVariable =
+                                                                                    variable;
+                                                                                showSecretModal = true;
+                                                                            }}>
+                                                                            Secret
+                                                                        </ActionMenu.Item.Button>
+                                                                    {/if}
+                                                                    <ActionMenu.Item.Button
+                                                                        status="danger"
+                                                                        leadingIcon={IconTrash}
+                                                                        on:click={(e) => {
+                                                                            toggle(e);
+                                                                            currentVariable =
+                                                                                variable;
+                                                                            showDelete = true;
+                                                                        }}>
+                                                                        Delete
+                                                                    </ActionMenu.Item.Button>
+                                                                </ActionMenu.Root>
+                                                            </svelte:fragment>
+                                                        </Popover>
+                                                    </div>
+                                                </Table.Cell>
+                                            </Table.Row.Base>
+                                        {/each}
+                                    </Table.Root>
+                                {/snippet}
+                            </Paginator>
+                        {:else}
+                            <Empty on:click={() => (showCreate = true)}
+                                >Create variables to get started</Empty>
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Accordion>
+        </Layout.Stack>
+    </Layout.Stack>
+</Fieldset>
+
+{#if showEditorModal}
+    <VariableEditorModal bind:variables bind:showEditor={showEditorModal} />
+{/if}
+
+{#if showSecretModal}
+    <SecretVariableModal bind:show={showSecretModal} bind:currentVariable bind:variables />
+{/if}
+
+{#if showImportModal}
+    <ImportSiteVariablesModal bind:show={showImportModal} bind:variables />
+{/if}
+
+{#if showCreate}
+    <CreateVariableModal bind:show={showCreate} bind:variables />
+{/if}
+{#if showUpdate}
+    <UpdateVariableModal bind:show={showUpdate} bind:variables bind:selectedVar={currentVariable} />
+{/if}
+
+{#if showDelete}
+    <DeleteVariableModal bind:show={showDelete} bind:variables bind:currentVariable />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
new file mode 100644
index 000000000..8dc28a966
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+    import { Button, InputPassword } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputText } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { Icon, Layout, Selector, Button as PinkButton } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { page } from '$app/state';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+
+    export let show = false;
+    export let variables: Partial<Models.Variable>[];
+
+    let newVariables: Partial<Models.Variable>[] = [{ key: '', value: '' }];
+    let secret = false;
+    let error = '';
+
+    function handleVariable() {
+        try {
+            if (secret) {
+                newVariables = newVariables.map((variable) => ({ ...variable, secret: true }));
+            }
+
+            newVariables.forEach((variable) => {
+                if (('' + variable.value).length > 8192) {
+                    throw new Error(
+                        `Variable ${variable.key} is longer than 8192 allowed characters`
+                    );
+                }
+            });
+            const updatedVariables = [...variables];
+            newVariables.forEach((newVar) => {
+                if (!newVar.key) {
+                    return;
+                }
+                const existingIndex = updatedVariables.findIndex((v) => v.key === newVar.key);
+                if (existingIndex !== -1) {
+                    updatedVariables[existingIndex] = {
+                        ...updatedVariables[existingIndex],
+                        ...newVar
+                    };
+                } else {
+                    updatedVariables.push(newVar);
+                }
+            });
+
+            variables = updatedVariables;
+            show = false;
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    function removeVariable(index: number) {
+        if (newVariables.length === 1) {
+            newVariables[0].key = '';
+            newVariables[0].value = '';
+        } else {
+            newVariables.splice(index, 1);
+            newVariables = [...newVariables];
+        }
+    }
+</script>
+
+<Modal bind:show onSubmit={handleVariable} title="Create variables" bind:error>
+    <span slot="description">
+        Set the environment variables or secret that will be passed to your site. Global variables
+        can be set in <Link
+            variant="muted"
+            href={`${base}/project-${page.params.region}-${page.params.project}/settings`}
+            >project settings</Link
+        >.
+    </span>
+    <Layout.Stack gap="xxl">
+        <Layout.Stack gap="xs">
+            {#each newVariables as pair, i}
+                <Layout.Stack direction="row" gap="s" alignItems="flex-end" inline>
+                    <InputText
+                        id="key"
+                        label={`${i === 0 ? 'Key' : ''}`}
+                        placeholder="ENTER_KEY"
+                        bind:value={pair.key}
+                        autocomplete={false}
+                        autofocus />
+                    <InputPassword
+                        id="value"
+                        label={`${i === 0 ? 'Value' : ''}`}
+                        placeholder="Enter value"
+                        bind:value={pair.value}
+                        minlength={0} />
+                    <PinkButton.Button
+                        icon
+                        variant="secondary"
+                        type="button"
+                        size="s"
+                        disabled={newVariables.length === 1 && !pair.key && !pair.value}
+                        on:click={() => removeVariable(i)}>
+                        <Icon icon={IconX} />
+                    </PinkButton.Button>
+                </Layout.Stack>
+            {/each}
+            <div>
+                <Button
+                    text
+                    compact
+                    disabled={newVariables.some((pair) => !pair.key)}
+                    on:click={() => (newVariables = [...newVariables, { key: '', value: '' }])}>
+                    <Icon slot="start" icon={IconPlus} />Add variable</Button>
+            </div>
+        </Layout.Stack>
+        <Selector.Checkbox
+            size="s"
+            id="secret"
+            label="Secret"
+            bind:checked={secret}
+            description="If selected, you and your team won't be able to read the values after creation." />
+    </Layout.Stack>
+    <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)/project-[region]-[project]/sites/create-site/deleteVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/deleteVariableModal.svelte
new file mode 100644
index 000000000..dfbef69a6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/deleteVariableModal.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { Dialog, Layout } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+
+    export let currentVariable: Partial<Models.Variable> = null;
+    export let variables: Partial<Models.Variable>[] = [];
+
+    function deleteVariable() {
+        console.log(variables, currentVariable);
+        variables = variables.filter((v) => v.key !== currentVariable.key);
+        variables = [...variables];
+        currentVariable = null;
+        show = false;
+    }
+
+    $: if (!show) {
+        currentVariable = null;
+    }
+</script>
+
+<Dialog title="Delete variable" bind:open={show}>
+    <p>Are you sure you want to delete this variable? This action is irreversible.</p>
+    <svelte:fragment slot="footer">
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button on:click={deleteVariable}>Delete</Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Dialog>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte
new file mode 100644
index 000000000..baa0e4e30
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Fieldset, Card, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Aside from '../aside.svelte';
+    import Logs from '../../(components)/logs.svelte';
+    import { Copy, SvgIcon } from '$lib/components';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+    import type { Models, RealtimeResponseEvent } from '@appwrite.io/console';
+
+    let { data } = $props();
+
+    let deployment = $state(data.deployment);
+
+    onMount(async () => {
+        sdk.forConsole.client.subscribe(
+            'console',
+            async (response: RealtimeResponseEvent<Models.Deployment>) => {
+                if (
+                    response.events.includes(
+                        `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
+                    )
+                ) {
+                    deployment = response.payload;
+                    if (response.payload.status === 'ready') {
+                        goto(
+                            `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/finish?site=${data.site.$id}`
+                        );
+                    }
+                }
+            }
+        );
+    });
+</script>
+
+<Wizard
+    title="Create site"
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+    <Layout.Stack gap="xl">
+        <Card.Base padding="s" radius="s">
+            <Layout.Stack direction="row">
+                <Layout.Stack direction="row" alignItems="center" gap="s">
+                    <SvgIcon
+                        iconSize="small"
+                        size={16}
+                        name={getFrameworkIcon(data.site.framework)} />
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                        {data.site.name}
+                    </Typography.Text>
+                    <Copy value={data.site.$id}>
+                        <Tag variant="code" size="xs">{data.site.$id}</Tag>
+                    </Copy>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card.Base>
+        <Fieldset legend="Deploy">
+            <Logs
+                bind:deployment
+                hideScrollButtons
+                height="calc(100dvh - 430px)"
+                emptyCopy="No logs available yet..." />
+        </Fieldset>
+    </Layout.Stack>
+    <svelte:fragment slot="aside">
+        <Aside
+            framework={data.frameworks.frameworks.find((f) => f.key === data.site.framework)}
+            repositoryName={data?.repository?.name}
+            branch={data.repository?.id ? data.site.providerBranch : ''}
+            rootDir={data.repository?.id ? data.site.providerRootDirectory : ''} />
+    </svelte:fragment>
+    <svelte:fragment slot="footer">
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            {#if ['processing', 'building'].includes(data.deployment.status)}
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                    Deployment will continue in the background
+                </Typography.Text>
+            {/if}
+            <Button
+                size="s"
+                fullWidthMobile
+                secondary
+                href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+                Go to dashboard
+            </Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.ts
new file mode 100644
index 000000000..239290177
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.ts
@@ -0,0 +1,38 @@
+import { DeploymentResourceType, RuleTrigger, RuleType, sdk } from '$lib/stores/sdk';
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+import { Query } from '@appwrite.io/console';
+import { Dependencies } from '$lib/constants';
+
+export const load: PageLoad = async ({ url, depends, params }) => {
+    depends(Dependencies.DEPLOYMENT);
+    depends(Dependencies.SITE);
+    if (!url.searchParams.has('site')) error(404, 'Site is not optional');
+    if (!url.searchParams.has('deployment')) error(404, 'Deployment is not optional');
+    const siteId = url.searchParams.get('site');
+    const deploymentId = url.searchParams.get('deployment');
+    const [site, deployment, proxyRuleList] = await Promise.all([
+        sdk.forProject(params.region, params.project).sites.get(siteId),
+        sdk.forProject(params.region, params.project).sites.getDeployment(siteId, deploymentId),
+        sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.DEPLOYMENT),
+                Query.equal('deploymentResourceType', DeploymentResourceType.SITE),
+                Query.equal('deploymentResourceId', siteId),
+                Query.equal('deploymentId', deploymentId),
+                Query.equal('trigger', RuleTrigger.MANUAL)
+            ])
+    ]);
+
+    return {
+        site,
+        deployment,
+        proxyRuleList,
+        repository: site?.installationId
+            ? await sdk
+                  .forProject(params.region, params.project)
+                  .vcs.getRepository(site.installationId, site.providerRepositoryId)
+            : undefined
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/details.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/details.svelte
new file mode 100644
index 000000000..52c2ed3ba
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/details.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { CustomId } from '$lib/components';
+    import { InputSelect, InputText } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Fieldset, Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import type { ComponentType } from 'svelte';
+
+    export let name: string;
+    export let id: string;
+    export let showFramework = false;
+    export let framework: Models.TemplateFramework | undefined = undefined;
+    export let options: {
+        value: string;
+        label: string;
+        leadingIcon?: ComponentType;
+    }[] = [];
+
+    let showCustomId = false;
+</script>
+
+<Fieldset legend="Details">
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="s">
+            <InputText
+                label="Name"
+                id="name"
+                name="name"
+                bind:value={name}
+                required
+                placeholder="Enter name" />
+            {#if showCustomId}
+                <CustomId bind:id bind:show={showCustomId} name="Site" />
+            {:else}
+                <div>
+                    <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                        <Icon icon={IconPencil} size="s" />
+                        Site ID
+                    </Tag>
+                </div>
+            {/if}
+        </Layout.Stack>
+        {#if showFramework}
+            <InputSelect
+                id="framework"
+                label="Framework"
+                placeholder="Select framework"
+                bind:value={framework.name}
+                {options} />
+        {/if}
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/domain.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/domain.svelte
new file mode 100644
index 000000000..397fdeeb1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/domain.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { InputText } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { debounce } from '$lib/helpers/debounce';
+    import { sdk } from '$lib/stores/sdk';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { ConsoleResourceType } from '@appwrite.io/console';
+    import { Fieldset, Layout, Status, Typography } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+
+    export let domain: string;
+    export let domainIsValid = true;
+    const originalDomain = domain;
+    let newDomain = domain;
+
+    let domainStatus: 'complete' | 'failed' | 'pending' = 'complete';
+
+    onMount(async () => {});
+
+    function setDomainLabel(status: typeof domainStatus) {
+        switch (status) {
+            case 'complete':
+                return 'Domain is available';
+            case 'failed':
+                return 'Domain is not available';
+            case 'pending':
+                return 'Checking domain availability';
+        }
+    }
+
+    const checkDomain = debounce(async (value: string) => {
+        if (!value) {
+            domainStatus = 'failed';
+            return;
+        }
+        try {
+            await sdk.forConsole.console.getResource(
+                `${value}.${$consoleVariables._APP_DOMAIN_SITES}`,
+                ConsoleResourceType.Rules
+            );
+            domainStatus = 'complete';
+            domainIsValid = true;
+        } catch {
+            domainStatus = 'failed';
+            domainIsValid = false;
+        } finally {
+            domain = newDomain;
+        }
+    }, 500);
+
+    $: if (domain !== newDomain) {
+        domainStatus = 'pending';
+        checkDomain(newDomain);
+    }
+</script>
+
+<Fieldset legend="Domains">
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <InputText id="domain" placeholder="my-domain" bind:value={newDomain}>
+                <svelte:fragment slot="end">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        .{$consoleVariables._APP_DOMAIN_SITES}
+                    </Typography.Text>
+                </svelte:fragment>
+            </InputText>
+            <Button
+                secondary
+                disabled={originalDomain === newDomain}
+                on:click={() => (newDomain = originalDomain)}>Reset</Button>
+        </Layout.Stack>
+        <Status status={domainStatus} label={setDomainLabel(domainStatus)}></Status>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/(components)/check.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/(components)/check.svelte
new file mode 100644
index 000000000..437f76cab
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/(components)/check.svelte
@@ -0,0 +1,72 @@
+<script>
+    import { cubicInOut } from 'svelte/easing';
+    import { draw, fade } from 'svelte/transition';
+</script>
+
+<div style:width="40px" style:height="40px">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+        <g
+            filter="url(#a)"
+            style:animation-name="rotate"
+            style:animation-duration="1.5s"
+            style:animation-iteration-count="infinite"
+            style:transform-origin="center">
+            <circle
+                cx="10"
+                cy="10"
+                r="8"
+                fill="var(--bgcolor-accent)"
+                fill-opacity=".08"
+                in:fade={{ duration: 250, delay: 1000 }} />
+            <circle
+                in:draw={{ duration: 1250, easing: cubicInOut }}
+                style:rotate="-90deg"
+                style:transform-origin="center"
+                cx="10"
+                cy="10"
+                r="8"
+                stroke="var(--bgcolor-accent)"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-opacity=".32"
+                stroke-width="1.2" />
+        </g>
+        <path
+            in:draw={{ duration: 1000 }}
+            stroke="var(--fgcolor-accent)"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+            d="m6.25 11.5 2.5 2 5-6.5" />
+
+        <defs>
+            <filter
+                id="a"
+                width="25.199"
+                height="25.203"
+                x="-2.6"
+                y="-2.602"
+                color-interpolation-filters="sRGB"
+                filterUnits="userSpaceOnUse">
+                <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
+                <feComposite
+                    in2="SourceAlpha"
+                    operator="in"
+                    result="effect1_backgroundBlur_1449_7567" />
+                <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_1449_7567" result="shape" />
+            </filter>
+        </defs>
+    </svg>
+</div>
+
+<style>
+    @keyframes rotate {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte
new file mode 100644
index 000000000..39040a6f7
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { Layout, Typography, Icon, Lights, Step, Card } from '@appwrite.io/pink-svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
+    import Check from './(components)/check.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import OpenOnMobileModal from '../../(components)/openOnMobileModal.svelte';
+    import SiteCard from '../../(components)/siteCard.svelte';
+    import { onMount } from 'svelte';
+    import AddCollaboratorModal from '../../(components)/addCollaboratorModal.svelte';
+    import { protocol } from '$routes/(console)/store';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { invalidate } from '$app/navigation';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Adapter, BuildRuntime, Framework } from '@appwrite.io/console';
+    import { Dependencies } from '$lib/constants';
+    import { ConnectRepoModal } from '$lib/components/git';
+
+    export let data;
+
+    let showConnectRepositry = false;
+    let showOpenOnMobile = false;
+    let showInviteCollaborator = false;
+
+    const siteURL = data.proxyRuleList.rules[0].domain;
+
+    onMount(() => {
+        if (
+            page.url.searchParams.has('connectRepo') &&
+            page.url.searchParams.get('connectRepo') === 'true'
+        ) {
+            showConnectRepositry = true;
+        }
+    });
+
+    async function connect(selectedInstallationId: string, selectedRepository: string) {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    data.site.$id,
+                    data.site.name,
+                    data.site.framework as Framework,
+                    data.site.enabled,
+                    data.site.logging || undefined,
+                    data.site.timeout,
+                    data.site.installCommand,
+                    data.site.buildCommand,
+                    data.site.outputDirectory,
+                    data.site.buildRuntime as BuildRuntime,
+                    data.site.adapter as Adapter,
+                    data.site.fallbackFile,
+                    selectedInstallationId,
+                    selectedRepository,
+                    'main',
+                    undefined,
+                    undefined,
+                    undefined
+                );
+            invalidate(Dependencies.SITE);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+<Wizard
+    column
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+    <!-- Creating a new stack -->
+    <Layout.Stack gap="xxxl">
+        <div style:position="relative" style="z-index: 6;">
+            <Layout.Stack gap="xxxl">
+                <Layout.Stack gap="l" direction="column" alignItems="center">
+                    <Check />
+                    <Layout.Stack gap="xs" direction="column" alignItems="center">
+                        <Typography.Title size="l">Congratulations!</Typography.Title>
+                        <Typography.Text variant="l-400">
+                            You deployed your Site successfully
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+                <Lights style="top: -100px; height:200px; width: 50%" />
+                <SiteCard
+                    variant="secondary"
+                    deployment={data.deployment}
+                    proxyRuleList={data.proxyRuleList}
+                    hideQRCode>
+                    <svelte:fragment slot="footer">
+                        <Button href={`${$protocol}${siteURL}`} external>Visit site</Button>
+                    </svelte:fragment>
+                </SiteCard>
+            </Layout.Stack>
+        </div>
+
+        <!-- To add spacing -->
+        <div></div>
+
+        <Step.List>
+            <Step.Item state="current" shortLine={true} badgeText="Next steps">
+                <Layout.Stack>
+                    <Layout.Grid columns={!data.site.providerRepositoryId ? 4 : 3} columnsS={1}>
+                        {#if !data.site.providerRepositoryId}
+                            <Card.Button
+                                radius="s"
+                                padding="s"
+                                on:click={() => (showConnectRepositry = true)}>
+                                <Layout.Stack gap="s" style="height: 100%">
+                                    <Layout.Stack
+                                        direction="row"
+                                        justifyContent="space-between"
+                                        alignItems="center">
+                                        <Typography.Title size="s">Add repository</Typography.Title>
+                                        <Icon
+                                            icon={IconArrowSmRight}
+                                            size="l"
+                                            color="--fgcolor-neutral-weak" />
+                                    </Layout.Stack>
+                                    <Typography.Text variant="m-400">
+                                        Connect to a new repository or an existing one.
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Card.Button>
+                        {/if}
+                        <Card.Link
+                            radius="s"
+                            padding="s"
+                            on:click={() => {
+                                trackEvent(Click.DomainCreateClick, {
+                                    source: 'sites_create_finish'
+                                });
+                            }}
+                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}/domains`}>
+                            <Layout.Stack gap="s" style="height: 100%">
+                                <Layout.Stack
+                                    direction="row"
+                                    justifyContent="space-between"
+                                    alignItems="center">
+                                    <Typography.Title size="s">Add domain</Typography.Title>
+                                    <Icon
+                                        icon={IconArrowSmRight}
+                                        size="l"
+                                        color="--fgcolor-neutral-weak" />
+                                </Layout.Stack>
+                                <Typography.Text variant="m-400">
+                                    Connect to an existing domain or add a new one.
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Card.Link>
+                        <Card.Button
+                            radius="s"
+                            padding="s"
+                            on:click={() => (showInviteCollaborator = true)}>
+                            <Layout.Stack gap="s" style="height: 100%">
+                                <Layout.Stack
+                                    direction="row"
+                                    justifyContent="space-between"
+                                    alignItems="center">
+                                    <Typography.Title size="s">Share site</Typography.Title>
+                                    <Icon
+                                        icon={IconArrowSmRight}
+                                        size="l"
+                                        color="--fgcolor-neutral-weak" />
+                                </Layout.Stack>
+                                <Typography.Text variant="m-400">
+                                    Share your progress and start collaborating with your team.
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Card.Button>
+                        <Card.Button
+                            radius="s"
+                            padding="s"
+                            on:click={() => (showOpenOnMobile = true)}>
+                            <Layout.Stack gap="s" style="height: 100%">
+                                <Layout.Stack
+                                    direction="row"
+                                    justifyContent="space-between"
+                                    alignItems="center">
+                                    <Typography.Title size="s">Open on mobile</Typography.Title>
+                                    <Icon
+                                        icon={IconArrowSmRight}
+                                        size="l"
+                                        color="--fgcolor-neutral-weak" />
+                                </Layout.Stack>
+                                <Typography.Text variant="m-400">
+                                    Open the preview of your site on any mobile or tablet device.
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Card.Button>
+                    </Layout.Grid>
+                </Layout.Stack>
+            </Step.Item>
+        </Step.List>
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button
+            size="s"
+            fullWidthMobile
+            secondary
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+            Go to dashboard
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+{#if showConnectRepositry}
+    <ConnectRepoModal
+        bind:show={showConnectRepositry}
+        {connect}
+        product="sites"
+        callbackState={{ connectRepo: 'true' }} />
+{/if}
+
+{#if showOpenOnMobile}
+    <OpenOnMobileModal bind:show={showOpenOnMobile} proxyRuleList={data.proxyRuleList} />
+{/if}
+
+{#if showInviteCollaborator}
+    <AddCollaboratorModal bind:show={showInviteCollaborator} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.ts
new file mode 100644
index 000000000..cbd0c2d61
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.ts
@@ -0,0 +1,27 @@
+import { RuleType, sdk } from '$lib/stores/sdk';
+import { error } from '@sveltejs/kit';
+import { Query } from '@appwrite.io/console';
+import { Dependencies } from '$lib/constants';
+import { DeploymentResourceType } from '$lib/stores/sdk';
+
+export const load = async ({ url, depends, params }) => {
+    depends(Dependencies.SITE);
+    if (!url.searchParams.has('site')) error(404, 'Deployment is not optional');
+    const siteId = url.searchParams.get('site');
+    const site = await sdk.forProject(params.region, params.project).sites.get(siteId);
+    const proxyRuleList = await sdk
+        .forProject(params.region, params.project)
+        .proxy.listRules([
+            Query.equal('type', RuleType.DEPLOYMENT),
+            Query.equal('deploymentResourceType', DeploymentResourceType.SITE),
+            Query.equal('deploymentResourceId', siteId),
+            Query.equal('deploymentId', site.deploymentId)
+        ]);
+    return {
+        site,
+        deployment: await sdk
+            .forProject(params.region, params.project)
+            .sites.getDeployment(siteId, site.deploymentId),
+        proxyRuleList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
new file mode 100644
index 000000000..16237068a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import Alert from '$lib/components/alert.svelte';
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Selector, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { parse } from '$lib/helpers/envfile';
+
+    export let show = false;
+    export let variables: Partial<Models.Variable>[];
+
+    let files: FileList;
+    let error: string;
+    let secret = false;
+
+    async function handleSubmit() {
+        try {
+            if (!files?.length) {
+                throw new Error('No file selected');
+            }
+
+            const uploaded = parse(await files[0].text());
+
+            if (!Object.keys(uploaded).length) {
+                throw new Error('No variables found');
+            }
+            const entries = Object.entries(uploaded);
+
+            for (const [key, value] of entries) {
+                if (value.length > 8192) {
+                    throw new Error(`Variable ${key} is longer than 8192 allowed characters`);
+                }
+            }
+
+            entries
+                .filter(([, value]) => !!value)
+                .forEach(([key, value]) => {
+                    variables.push({ key, value, secret });
+                });
+
+            show = false;
+        } catch (e) {
+            error = e.message;
+        }
+    }
+</script>
+
+<Modal title="Import variables" bind:show onSubmit={handleSubmit} bind:error>
+    <span slot="description"> Import new environment variables from .env file. </span>
+    <Layout.Stack gap="xxl">
+        <Layout.Stack>
+            <Upload.Dropzone bind:files>
+                <Layout.Stack alignItems="center" gap="s">
+                    <Layout.Stack
+                        alignItems="center"
+                        justifyContent="center"
+                        direction="row"
+                        gap="s">
+                        <Typography.Text variant="l-500">
+                            Drag and drop files here or click to upload
+                        </Typography.Text>
+                        <Tooltip>
+                            <Layout.Stack alignItems="center" justifyContent="center" inline>
+                                <Icon icon={IconInfo} size="s" />
+                            </Layout.Stack>
+                            <svelte:fragment slot="tooltip">
+                                Only .env files allowed
+                            </svelte:fragment>
+                        </Tooltip>
+                    </Layout.Stack>
+                    <Typography.Caption variant="400">
+                        Up to 100 variables allowed
+                    </Typography.Caption>
+                </Layout.Stack>
+            </Upload.Dropzone>
+            {#if variables?.length > 0}
+                <Alert type="info" dismissible>
+                    This action can create and update variables but can not delete them.
+                </Alert>
+            {/if}
+        </Layout.Stack>
+        <Selector.Checkbox
+            size="s"
+            id="secret"
+            label="Secret"
+            bind:checked={secret}
+            description="If selected, you and your team won't be able to read the values after creation." />
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit disabled={!files?.length}>Import</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte
new file mode 100644
index 000000000..cee455f1f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte
@@ -0,0 +1,207 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Button, Form } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { writable } from 'svelte/store';
+    import Details from '../details.svelte';
+    import Aside from './aside.svelte';
+    import { BuildRuntime, Framework, ID } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
+    import Configuration from '../configuration.svelte';
+    import { buildVerboseDomain } from '../store';
+    import { project } from '$routes/(console)/project-[region]-[project]/store';
+    import { organization } from '$lib/stores/organization';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { removeFile } from '$lib/helpers/files';
+
+    export let data;
+    let showExitModal = false;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = 'My website';
+    let id = ID.unique();
+    let domain = id;
+    let framework: Models.Framework =
+        data.frameworks.frameworks?.find((f) => f.key === 'other') ??
+        data.frameworks.frameworks?.[0];
+    let adapter = framework?.adapters[0];
+    let installCommand = adapter?.installCommand;
+    let buildCommand = adapter?.buildCommand;
+    let outputDirectory = adapter?.outputDirectory;
+    let variables: Partial<Models.Variable>[] = [];
+    let files: FileList;
+
+    async function create() {
+        try {
+            domain = await buildVerboseDomain(name, $organization.name, $project.name, id);
+
+            const fr = Object.values(Framework).find((f) => f === framework.key);
+            const buildRuntime = Object.values(BuildRuntime).find(
+                (f) => f === framework.buildRuntime
+            );
+            let site = await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.create(
+                    id || ID.unique(),
+                    name,
+                    fr,
+                    buildRuntime,
+                    undefined,
+                    undefined,
+                    undefined,
+                    installCommand || undefined,
+                    buildCommand || undefined,
+                    outputDirectory || undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined
+                );
+
+            // Add domain
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.createSiteRule(`${domain}.${$consoleVariables._APP_DOMAIN_SITES}`, site.$id);
+
+            //Add variables
+            const promises = variables.map((variable) =>
+                sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.createVariable(
+                        site.$id,
+                        variable.key,
+                        variable.value,
+                        variable?.secret ?? false
+                    )
+            );
+            await Promise.all(promises);
+
+            const deployment = await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.createDeployment(
+                    site.$id,
+                    files[0],
+                    true,
+                    installCommand || undefined,
+                    buildCommand || undefined,
+                    outputDirectory || undefined
+                );
+
+            trackEvent(Submit.SiteCreate, {
+                source: 'manual',
+                framework: framework.key
+            });
+
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+            );
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+            trackError(e, Submit.SiteCreate);
+        }
+    }
+
+    $: filesList = files?.length
+        ? Array.from(files).map((f) => {
+              return {
+                  ...f,
+                  extension: f.type,
+                  removable: true
+              };
+          })
+        : [];
+
+    $: console.log(files);
+</script>
+
+<svelte:head>
+    <title>Create site - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    title="Create site"
+    bind:showExitModal
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="s">
+                <Typography.Text color="--fgcolor-neutral-primary">
+                    Upload a tar.gz containing your site source code
+                </Typography.Text>
+                <Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
+                    <Layout.Stack alignItems="center" gap="s">
+                        <Layout.Stack alignItems="center" gap="s">
+                            <Layout.Stack
+                                alignItems="center"
+                                justifyContent="center"
+                                direction="row"
+                                gap="s">
+                                <Typography.Text variant="l-500">
+                                    Drag and drop file here or click to upload
+                                </Typography.Text>
+                                <Tooltip>
+                                    <Layout.Stack
+                                        alignItems="center"
+                                        justifyContent="center"
+                                        inline>
+                                        <Icon icon={IconInfo} size="s" />
+                                    </Layout.Stack>
+                                    <svelte:fragment slot="tooltip"
+                                        >Only .tar.gz files allowed</svelte:fragment>
+                                </Tooltip>
+                            </Layout.Stack>
+                            <Typography.Caption variant="400"
+                                >Max file size 10MB</Typography.Caption>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Upload.Dropzone>
+                {#if files?.length}
+                    <Upload.List
+                        bind:files={filesList}
+                        on:remove={(e) => (files = removeFile(e.detail, files))} />
+                {/if}
+            </Layout.Stack>
+            <Details bind:name bind:id />
+
+            <Configuration
+                bind:installCommand
+                bind:buildCommand
+                bind:outputDirectory
+                bind:selectedFramework={framework}
+                bind:variables
+                frameworks={data.frameworks.frameworks} />
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside template={data.template} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button size="s" fullWidthMobile secondary on:click={() => (showExitModal = true)}>
+            Cancel
+        </Button>
+        <Button
+            size="s"
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Deploy
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.ts
new file mode 100644
index 000000000..0d16bd7bb
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.ts
@@ -0,0 +1,12 @@
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ parent, params }) => {
+    const { frameworks } = await parent();
+
+    return {
+        frameworks,
+        template: await sdk
+            .forProject(params.region, params.project)
+            .sites.getTemplate('starter-for-js')
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte
new file mode 100644
index 000000000..a3e99a5bc
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Card } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { app } from '$lib/stores/app';
+    import type { Models } from '@appwrite.io/console';
+    import { Image, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let template: Models.TemplateSite;
+</script>
+
+<Card padding="xs">
+    <Layout.Stack gap="xxs">
+        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+            Don't have a site yet?
+        </Typography.Text>
+        <Typography.Text variant="m-400">
+            Deploy the JavaScript starter template in seconds.
+        </Typography.Text>
+    </Layout.Stack>
+
+    <Layout.Stack>
+        <Image
+            ratio="16/9"
+            src={$app.themeInUse === 'dark' ? template.screenshotDark : template.screenshotLight}
+            alt="preview" />
+
+        <Button
+            fullWidth
+            secondary
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates/template-${template.key}`}>
+            Use template
+        </Button>
+    </Layout.Stack>
+</Card>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte
new file mode 100644
index 000000000..776ec0c39
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Click, trackEvent } from '$lib/actions/analytics.js';
+    import Card from '$lib/components/card.svelte';
+    import { Repositories } from '$lib/components/git/index.js';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { Wizard } from '$lib/layout';
+    import { installation, repository } from '$lib/stores/vcs.js';
+    import type { Models } from '@appwrite.io/console';
+    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    let { data } = $props();
+
+    let selectedRepository: string = $state(null);
+
+    function onConnect(e: Models.ProviderRepository) {
+        trackEvent(Click.ConnectRepositoryClick, {
+            from: 'cover'
+        });
+        repository.set(e);
+        const target = `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories/repository-${e.id}?installation=${$installation.$id}`;
+        goto(target);
+    }
+</script>
+
+<Wizard
+    title="Create site"
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
+    hideFooter>
+    {#if !!data?.installations?.total}
+        <Fieldset legend="Git repository">
+            <Repositories
+                bind:selectedRepository
+                product="sites"
+                action="button"
+                connect={onConnect} />
+        </Fieldset>
+    {:else}
+        <Repositories bind:selectedRepository product="sites" action="button" connect={onConnect} />
+    {/if}
+
+    <svelte:fragment slot="aside">
+        <Card radius="s" padding="s">
+            <Layout.Stack gap="l">
+                {#if !data?.installations?.total}
+                    <Layout.Stack gap="xxs">
+                        <Typography.Text variation="m-400">
+                            Don't have a repository set up yet? Explore our templates, available in
+                            all your favorite frameworks, and deploy in seconds.
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Button
+                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}
+                        secondary>View templates</Button>
+                {:else}
+                    <Layout.Stack gap="s">
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
+                            Missing a repository?
+                        </Typography.Text>
+                        <Typography.Text variation="m-400">
+                            Make sure Appwrite has access to your GitHub repositories. If you chose
+                            specific repos, you may need to update your permissions to include the
+                            missing one.
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Layout.Stack gap="s" direction="row">
+                        <Button href="#" secondary>Docs</Button>
+                        <Button
+                            href={`https://github.com/${data.installations.installations[0].organization}`}
+                            text>Go to GitHub</Button>
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.ts
new file mode 100644
index 000000000..712dfc5d2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.ts
@@ -0,0 +1,7 @@
+export const load = async ({ parent }) => {
+    const { installations } = await parent();
+
+    return {
+        installations
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
new file mode 100644
index 000000000..1def9713b
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Card } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { Layout, Icon, Typography } from '@appwrite.io/pink-svelte';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { writable } from 'svelte/store';
+    import Details from '../../details.svelte';
+    import ProductionBranch from '$lib/components/git/productionBranchFieldset.svelte';
+    import Aside from '../../aside.svelte';
+    import {
+        BuildRuntime,
+        Framework,
+        ID,
+        VCSDeploymentType,
+        VCSDetectionType
+    } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import Configuration from '../../configuration.svelte';
+    import { consoleVariables } from '$routes/(console)/store';
+    import Domain from '../../domain.svelte';
+
+    export let data;
+    let showExitModal = false;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = '';
+    let id = ID.unique();
+    let framework: Models.Framework = data.frameworks.frameworks.find((f) => f.key === 'other');
+    let adapter = framework?.adapters[0];
+    let branch: string;
+    let rootDir = './';
+    let installCommand = adapter?.installCommand;
+    let buildCommand = adapter?.buildCommand;
+    let outputDirectory = adapter?.outputDirectory;
+    let variables: Partial<Models.Variable>[] = [];
+    let silentMode = false;
+    let domain = data.domain;
+    let domainIsValid = true;
+
+    onMount(async () => {
+        installation.set(data.installation);
+        repository.set(data.repository);
+        name = data.repository.name;
+
+        await detectFramework();
+    });
+
+    async function detectFramework() {
+        try {
+            const response = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.createRepositoryDetection(
+                    $installation.$id,
+                    data.repository.id,
+                    VCSDetectionType.Framework,
+                    rootDir
+                );
+            framework = data.frameworks.frameworks.find((f) => f.key === response.framework);
+            adapter = framework?.adapters[0];
+            installCommand = adapter?.installCommand;
+            buildCommand = adapter?.buildCommand;
+            outputDirectory = adapter?.outputDirectory;
+            trackEvent(Submit.FrameworkDetect, {
+                source: 'repository',
+                framework: framework.key
+            });
+        } catch (error) {
+            framework = data.frameworks.frameworks.find((f) => f.key === 'other');
+            trackError(error, Submit.FrameworkDetect);
+        }
+    }
+
+    async function create() {
+        if (!domainIsValid) {
+            addNotification({
+                type: 'error',
+                message: 'Domain is not valid'
+            });
+            return;
+        }
+        try {
+            const fr = Object.values(Framework).find((f) => f === framework.key);
+            const buildRuntime = Object.values(BuildRuntime).find(
+                (f) => f === framework.buildRuntime
+            );
+            let site = await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.create(
+                    id || ID.unique(),
+                    name,
+                    fr,
+                    buildRuntime,
+                    undefined,
+                    undefined,
+                    undefined,
+                    installCommand,
+                    buildCommand,
+                    outputDirectory,
+                    undefined,
+                    data.installation.$id,
+                    undefined,
+                    data.repository.id,
+                    branch,
+                    silentMode,
+                    rootDir
+                );
+
+            // Add domain
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.createSiteRule(`${domain}.${$consoleVariables._APP_DOMAIN_SITES}`, site.$id);
+
+            //Add variables
+            const promises = variables.map((variable) =>
+                sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.createVariable(
+                        site.$id,
+                        variable.key,
+                        variable.value,
+                        variable?.secret ?? false
+                    )
+            );
+            await Promise.all(promises);
+
+            const deployment = await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.createVcsDeployment(site.$id, VCSDeploymentType.Branch, branch, true);
+
+            trackEvent(Submit.SiteCreate, {
+                source: 'repository',
+                framework: framework.key
+            });
+
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+            );
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+            trackError(e, Submit.SiteCreate);
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Create site - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    title="Create site"
+    bind:showExitModal
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            <Card radius="s" padding="s">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="xs">
+                        <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
+                            {data.repository?.organization}/{data.repository?.name}
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Button
+                        secondary
+                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories`}>
+                        Change
+                    </Button>
+                </Layout.Stack>
+            </Card>
+            <Details bind:name bind:id />
+
+            <ProductionBranch
+                bind:branch
+                bind:rootDir
+                bind:silentMode
+                product="sites"
+                installationId={data.installation.$id}
+                repositoryId={data.repository.id} />
+
+            {#key framework.key}
+                <Configuration
+                    bind:installCommand
+                    bind:buildCommand
+                    bind:outputDirectory
+                    bind:selectedFramework={framework}
+                    bind:variables
+                    frameworks={data.frameworks.frameworks} />
+            {/key}
+
+            <Domain bind:domain bind:domainIsValid />
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside {framework} repositoryName={data.repository.name} {branch} {rootDir} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Deploy
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts
new file mode 100644
index 000000000..4287ee29f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts
@@ -0,0 +1,30 @@
+import { sdk } from '$lib/stores/sdk';
+import { ID } from '@appwrite.io/console';
+import { buildVerboseDomain } from '../../store';
+
+export const load = async ({ parent, params, url }) => {
+    const { installations, frameworks, project, organization, consoleVariables } = await parent();
+    const [repository] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .vcs.getRepository(url.searchParams.get('installation'), params.repository)
+    ]);
+
+    const domain = await buildVerboseDomain(
+        consoleVariables._APP_DOMAIN_SITES,
+        repository.name,
+        organization.name,
+        project.name,
+        ID.unique()
+    );
+
+    return {
+        installations,
+        installation: installations.installations.find(
+            (installation) => installation.$id === url.searchParams.get('installation')
+        ),
+        repository,
+        frameworks,
+        domain
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/secretVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/secretVariableModal.svelte
new file mode 100644
index 000000000..740248d5a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/secretVariableModal.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { Dialog, Layout } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+
+    export let currentVariable: Partial<Models.Variable>;
+    export let variables: Partial<Models.Variable>[];
+
+    function markAsSecret() {
+        let variable = variables.find((v) => v.key === currentVariable.key);
+        if (variable) {
+            variable.secret = true;
+        }
+        variables = [...variables];
+        currentVariable = null;
+        show = false;
+    }
+
+    $: if (!show) {
+        currentVariable = null;
+    }
+</script>
+
+<Dialog title="Secret variable" bind:open={show}>
+    <Layout.Stack gap="l">
+        <p>
+            Secret variables are hidden from both the UI and API. Once a variable is marked as
+            secret, this action cannot be reversed.
+        </p>
+        <p>Are you sure you want to make this variable secret?</p>
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button on:click={markAsSecret}>Mark as secret</Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Dialog>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/store.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/store.ts
new file mode 100644
index 000000000..35557ba75
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/store.ts
@@ -0,0 +1,48 @@
+import { sdk } from '$lib/stores/sdk';
+import { ConsoleResourceType, ID } from '@appwrite.io/console';
+
+function toURLSafe(s: string) {
+    return s.replace(/[^a-zA-Z0-9-]/g, '-');
+}
+
+export async function checkDomain(domain: string, apex: string) {
+    try {
+        await sdk.forConsole.console.getResource(`${domain}.${apex}`, ConsoleResourceType.Rules);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export async function buildVerboseDomain(
+    apex: string,
+    name: string,
+    specifier: string,
+    secondarySpecifier?: string,
+    unique?: string
+) {
+    const safeName = toURLSafe(name).toLowerCase();
+    const safeSpecifier = toURLSafe(specifier).toLowerCase();
+    const safeSecondarySpecifier = secondarySpecifier
+        ? toURLSafe(secondarySpecifier).toLowerCase()
+        : '';
+    const safeUnique = unique ? toURLSafe(unique).toLowerCase() : ID.unique();
+    let domain = `${safeName}`;
+    if (await checkDomain(domain, apex)) {
+        return domain;
+    }
+    domain += '-' + safeSpecifier;
+    if (await checkDomain(domain, apex)) {
+        return domain;
+    }
+    if (secondarySpecifier) {
+        domain += '-' + safeSecondarySpecifier;
+        if (await checkDomain(domain, apex)) {
+            return domain;
+        }
+    }
+    domain += '-' + safeUnique;
+    if (await checkDomain(domain, apex)) {
+        return domain;
+    }
+}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte
new file mode 100644
index 000000000..6f9c0359c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { EmptySearch, Paginator, SvgIcon } from '$lib/components';
+    import { Button, InputSearch } from '$lib/elements/forms';
+    import { page } from '$app/state';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { goto } from '$app/navigation';
+    import { debounce } from '$lib/helpers/debounce.js';
+    import { Card, Layout, Accordion, Selector, Tooltip } from '@appwrite.io/pink-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { app } from '$lib/stores/app.js';
+    import { getFrameworkIcon } from '$lib/stores/sites.js';
+
+    export let data;
+
+    let offset = 0;
+
+    function applyFilter(filter: string, value: string, event: CustomEvent) {
+        const target = new URL(page.url);
+        if (event?.detail) {
+            if (
+                !target.searchParams
+                    .getAll(filter)
+                    .some((n) => n.toLowerCase() === value.toLowerCase())
+            ) {
+                target.searchParams.append(filter, value);
+            }
+        } else {
+            const previous = target.searchParams
+                .getAll(filter)
+                .filter((n) => n.toLowerCase() !== value.toLowerCase());
+            target.searchParams.delete(filter);
+            previous.forEach((n) => target.searchParams.append(filter, n));
+        }
+        target.searchParams.delete('page');
+        offset = 0;
+        goto(target.toString());
+    }
+
+    let searchText = page.url.searchParams.get('search') ?? '';
+
+    const debouncedApplySearch = debounce((value: string) => {
+        const trimmed = value.trim();
+        const url = new URL(page.url);
+
+        if (trimmed.length > 0) {
+            url.searchParams.set('search', trimmed);
+        } else {
+            url.searchParams.delete('search');
+        }
+
+        url.searchParams.delete('page');
+        offset = 0;
+
+        goto(url.toString(), { keepFocus: true });
+    }, 250);
+
+    function applySearch(event: CustomEvent<string>) {
+        searchText = event.detail;
+        debouncedApplySearch(event.detail);
+    }
+
+    function clearSearch() {
+        searchText = '';
+        const target = new URL(page.url);
+        target.search = '';
+        goto(target.toString());
+    }
+
+    const isChecked = (useCase: string) => {
+        return page.url.searchParams
+            .getAll('useCase')
+            .some((param) => param.toLowerCase() === useCase.toLowerCase());
+    };
+</script>
+
+<svelte:head>
+    <title>Create site - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
+    title="Create site"
+    invertColumns
+    stickySide
+    hideFooter>
+    <svelte:fragment slot="aside">
+        <Layout.Stack gap="xl">
+            <InputSearch
+                placeholder="Search templates"
+                value={searchText}
+                on:clear={clearSearch}
+                on:change={applySearch} />
+
+            <Layout.Stack>
+                <Accordion title="Use case">
+                    <Layout.Stack>
+                        {#each [...data.useCases] as useCase}
+                            <Layout.Stack direction="row" gap="s">
+                                <Selector.Checkbox
+                                    id={useCase}
+                                    size="s"
+                                    label={capitalize(useCase)}
+                                    checked={isChecked(useCase)}
+                                    on:change={(e) => {
+                                        applyFilter('useCase', useCase, e);
+                                    }} />
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion title="Framework" open>
+                    <Layout.Stack>
+                        {#each [...data.frameworks] as framework}
+                            <Layout.Stack direction="row" gap="s">
+                                <Selector.Checkbox
+                                    id={framework}
+                                    size="s"
+                                    label={framework?.split('-')?.join(' ')}
+                                    checked={page.url.searchParams
+                                        .getAll('framework')
+                                        .includes(framework)}
+                                    on:change={(e) => applyFilter('framework', framework, e)} />
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+            </Layout.Stack>
+        </Layout.Stack>
+    </svelte:fragment>
+    <Layout.Stack gap="l">
+        {#if data.templates?.length > 0}
+            <Paginator
+                items={data.templates}
+                limit={12}
+                hidePages={false}
+                hasLimit
+                gap="m"
+                bind:offset>
+                {#snippet children(paginatedItems: typeof data.templates)}
+                    <Layout.Grid columns={3} columnsXS={2} columnsXXS={1}>
+                        {#each paginatedItems as template (template.name)}
+                            {@const templateFrameworks = template.frameworks.map((t) => t.name)}
+
+                            <Card.Link
+                                variant="secondary"
+                                href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates/template-${template.key}`}
+                                padding="xxs">
+                                <Card.Media
+                                    title={template.name}
+                                    src={$app.themeInUse === 'dark'
+                                        ? template?.screenshotDark ||
+                                          `${base}/images/sites/screenshot-placeholder-dark.svg`
+                                        : template?.screenshotLight ||
+                                          `${base}/images/sites/screenshot-placeholder-light.svg`}
+                                    alt={template.name}
+                                    avatar>
+                                    <svelte:fragment slot="avatar">
+                                        <Tooltip>
+                                            <SvgIcon
+                                                name={getFrameworkIcon(templateFrameworks[0])}
+                                                iconSize="small" />
+                                            <svelte:fragment slot="tooltip">
+                                                {capitalize(templateFrameworks[0])}
+                                            </svelte:fragment>
+                                        </Tooltip>
+                                    </svelte:fragment>
+                                </Card.Media>
+                            </Card.Link>
+                        {/each}
+                    </Layout.Grid>
+                {/snippet}
+            </Paginator>
+        {:else}
+            <EmptySearch
+                hidePagination
+                target="templates"
+                search={page.url.searchParams.get('search')}>
+                <Button
+                    secondary
+                    href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}
+                    >Clear search</Button>
+            </EmptySearch>
+        {/if}
+    </Layout.Stack>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.ts
new file mode 100644
index 000000000..61239bca1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.ts
@@ -0,0 +1,86 @@
+import { sdk } from '$lib/stores/sdk';
+import { getSearch } from '$lib/helpers/load';
+
+export const load = async ({ url, params }) => {
+    const search = getSearch(url);
+    const filter = {
+        useCases: url.searchParams.getAll('useCase'),
+        frameworks: url.searchParams.getAll('framework')
+    };
+
+    const siteTemplatesList = await sdk
+        .forProject(params.region, params.project)
+        .sites.listTemplates(undefined, undefined, 100);
+
+    const [frameworksSet, useCasesSet] = siteTemplatesList.templates.reduce(
+        ([fr, uc], next) => {
+            next.useCases.forEach((useCase) => uc.add(useCase));
+            next.frameworks.forEach((framework) => fr.add(framework.name));
+            return [fr, uc];
+        },
+        [new Set<string>(), new Set<string>()]
+    );
+
+    const frameworkOrder = [
+        'Next.js',
+        'Nuxt',
+        'SvelteKit',
+        'Astro',
+        'Remix',
+        'Flutter',
+        'React',
+        'Vue.js',
+        'Svelte',
+        'Lynx',
+        'Angular',
+        'Analog',
+        'Vite',
+        'Other'
+    ];
+    const frameworks = Array.from(frameworksSet)
+        .sort((a, b) => a.localeCompare(b))
+        .sort((a, b) => {
+            const aIndex = frameworkOrder.indexOf(a);
+            const bIndex = frameworkOrder.indexOf(b);
+            if (aIndex === -1 && bIndex === -1) {
+                return a.localeCompare(b);
+            } else if (aIndex === -1) {
+                return 1;
+            } else if (bIndex === -1) {
+                return -1;
+            }
+            return aIndex - bIndex;
+        });
+
+    const useCases = Array.from(useCasesSet).sort((a, b) => a.localeCompare(b));
+
+    const templates = siteTemplatesList.templates.filter((template) => {
+        if (
+            filter.frameworks.length > 0 &&
+            !template.frameworks.some((n) => filter.frameworks.includes(n.name))
+        ) {
+            return false;
+        }
+
+        const filterLowerCases = filter.useCases.map((n) => n.toLowerCase());
+        if (
+            filter.useCases.length > 0 &&
+            !template.useCases.some((n) => filterLowerCases.includes(n.toLowerCase()))
+        ) {
+            return false;
+        }
+
+        if (search) {
+            return template.name.toLowerCase().includes(search.toLowerCase());
+        } else {
+            return true;
+        }
+    });
+
+    return {
+        filter,
+        frameworks,
+        useCases,
+        templates
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte
new file mode 100644
index 000000000..7568aa58d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -0,0 +1,370 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Card } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository } from '$lib/stores/vcs';
+    import {
+        Fieldset,
+        Layout,
+        Icon,
+        Divider,
+        Empty,
+        Typography,
+        Image
+    } from '@appwrite.io/pink-svelte';
+    import { IconExternalLink, IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+    import Details from '../../details.svelte';
+    import Configuration from './configuration.svelte';
+    import Aside from '../../aside.svelte';
+    import { Adapter, BuildRuntime, Framework, ID, type Models } from '@appwrite.io/console';
+    import {
+        ConnectBehaviour,
+        NewRepository,
+        ProductionBranchFieldset,
+        Repositories,
+        RepositoryBehaviour
+    } from '$lib/components/git';
+    import { app, iconPath } from '$lib/stores/app';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { connectGitHub } from '$lib/stores/git';
+    import Domain from '../../domain.svelte';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+
+    export let data;
+
+    let showExitModal = false;
+    let isCreatingRepository = false;
+    let hasInstallations = !!data?.installations?.total;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = data.template.name;
+    let id = ID.unique();
+    let domain = data.domain;
+    let domainIsValid = true;
+    let framework = data?.template?.frameworks[0];
+    let branch = 'main';
+    let rootDir = './';
+    let connectBehaviour: 'now' | 'later' = 'now';
+    let repositoryBehaviour: 'new' | 'existing' = 'new';
+    let repositoryName: string = undefined;
+    let repositoryPrivate = true;
+    let selectedInstallationId = '';
+    let selectedRepository = '';
+    let showSiteConfig = false;
+    let variables: Partial<Models.TemplateVariable>[] = [];
+    let silentMode = false;
+
+    onMount(async () => {
+        if (!$installation?.$id) {
+            $installation = data.installations.installations[0];
+        }
+        selectedInstallationId = $installation?.$id;
+    });
+
+    async function createRepository() {
+        try {
+            isCreatingRepository = true;
+            const repo = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.createRepository($installation.$id, repositoryName, repositoryPrivate);
+            repository.set(repo);
+            selectedRepository = repo.id;
+            showSiteConfig = true;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingRepository = false;
+        }
+    }
+
+    async function create() {
+        if (connectBehaviour === 'now' && !selectedRepository) {
+            addNotification({
+                type: 'error',
+                message: 'Please select a repository'
+            });
+            return;
+        } else if (!domainIsValid) {
+            addNotification({
+                type: 'error',
+                message: 'Domain is not valid'
+            });
+            return;
+        } else {
+            try {
+                const fr = Object.values(Framework).find((f) => f === framework.key);
+                const buildRuntime = Object.values(BuildRuntime).find(
+                    (f) => f === framework.buildRuntime
+                );
+                let site = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.create(
+                        id || ID.unique(),
+                        name,
+                        fr,
+                        buildRuntime,
+                        undefined,
+                        undefined,
+                        undefined,
+                        framework.installCommand,
+                        framework.buildCommand,
+                        framework.outputDirectory,
+                        framework.adapter as unknown as Adapter,
+                        connectBehaviour === 'later'
+                            ? undefined
+                            : selectedInstallationId || undefined,
+                        framework?.fallbackFile || undefined,
+                        selectedRepository || undefined,
+                        branch || undefined,
+                        selectedRepository ? silentMode : undefined,
+                        rootDir || undefined
+                    );
+
+                // Add domain
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createSiteRule(
+                        `${domain}.${$consoleVariables._APP_DOMAIN_SITES}`,
+                        site.$id
+                    );
+
+                //Add variables
+                const promises = variables.map((variable) =>
+                    sdk
+                        .forProject(page.params.region, page.params.project)
+                        .sites.createVariable(
+                            site.$id,
+                            variable.name,
+                            variable.value,
+                            variable?.secret ?? false
+                        )
+                );
+                await Promise.all(promises);
+
+                const deployment = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.createTemplateDeployment(
+                        site.$id,
+                        data.template.providerRepositoryId || undefined,
+                        data.template.providerOwner || undefined,
+                        framework.providerRootDirectory || undefined,
+                        data.template.providerVersion || undefined,
+                        true
+                    );
+
+                trackEvent(Submit.SiteCreate, {
+                    source: 'template',
+                    framework: framework.key,
+                    template: data.template.name
+                });
+
+                await goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                );
+            } catch (e) {
+                console.log(e);
+                addNotification({
+                    type: 'error',
+                    message: e.message
+                });
+                trackError(e, Submit.SiteCreate);
+            }
+        }
+    }
+
+    $: if (repositoryBehaviour === 'new') {
+        selectedInstallationId = $installation?.$id;
+        repositoryName ??= name.split(' ').join('-').toLowerCase();
+    }
+
+    $: if (connectBehaviour === 'later') {
+        selectedRepository = null;
+    }
+</script>
+
+<svelte:head>
+    <title>Create site - Appwrite</title>
+</svelte:head>
+
+<Wizard
+    title="Create site"
+    bind:showExitModal
+    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xl">
+            {#if selectedRepository && showSiteConfig}
+                <Layout.Stack gap="xxl">
+                    <Card padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="s" icon={IconGithub} />
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                    {$repository.organization}/{$repository.name}
+                                </Typography.Text>
+                            </Layout.Stack>
+                            <Button
+                                size="s"
+                                secondary
+                                on:click={() => {
+                                    showSiteConfig = false;
+                                }}>
+                                Update
+                            </Button>
+                        </Layout.Stack>
+                    </Card>
+                    <ProductionBranchFieldset
+                        bind:branch
+                        bind:rootDir
+                        bind:silentMode
+                        product="sites"
+                        installationId={selectedInstallationId}
+                        repositoryId={selectedRepository} />
+                    {#if data.template.variables?.length}
+                        <Configuration bind:variables templateVariables={data.template.variables} />
+                    {/if}
+                </Layout.Stack>
+            {:else}
+                {@const options = data.template.frameworks.map((framework) => {
+                    return {
+                        value: framework.name,
+                        label: framework.name,
+                        leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
+                    };
+                })}
+                <Layout.Stack gap="xxl">
+                    <Details
+                        bind:name
+                        bind:id
+                        bind:framework
+                        {options}
+                        showFramework={options?.length > 1} />
+                    <ConnectBehaviour bind:connectBehaviour />
+                </Layout.Stack>
+                {#if connectBehaviour === 'now'}
+                    {#if hasInstallations}
+                        <Fieldset legend="Git repository">
+                            <Layout.Stack gap="xl">
+                                <RepositoryBehaviour bind:repositoryBehaviour />
+                                {#if repositoryBehaviour === 'new'}
+                                    <NewRepository
+                                        bind:selectedInstallationId
+                                        disableFields={isCreatingRepository}
+                                        installations={data.installations}
+                                        bind:repositoryName
+                                        bind:repositoryPrivate />
+                                    <Layout.Stack gap="xl" alignItems="flex-end">
+                                        <Divider />
+
+                                        <Button
+                                            size="s"
+                                            on:click={createRepository}
+                                            forceShowLoader
+                                            submissionLoader={isCreatingRepository}
+                                            disabled={!repositoryName ||
+                                                !$installation?.$id ||
+                                                isCreatingRepository}>
+                                            Create
+                                        </Button>
+                                    </Layout.Stack>
+                                {:else}
+                                    <Repositories
+                                        bind:hasInstallations
+                                        bind:selectedRepository
+                                        product="sites"
+                                        action="button"
+                                        connect={(e) => {
+                                            trackEvent(Click.ConnectRepositoryClick, {
+                                                from: 'template-wizard'
+                                            });
+                                            repository.set(e);
+                                            repositoryName = e.name;
+                                            selectedRepository = e.id;
+                                            showSiteConfig = true;
+                                        }} />
+                                {/if}
+                            </Layout.Stack>
+                        </Fieldset>
+                    {:else}
+                        <Card isDashed padding="none">
+                            <Empty
+                                type="secondary"
+                                title="Connect Git repository"
+                                description="Create and deploy a Site with a connected git repository.">
+                                <svelte:fragment slot="actions">
+                                    <Button secondary href={connectGitHub().toString()} size="s">
+                                        <Icon icon={IconGithub} slot="start" />
+                                        Connect to GitHub
+                                    </Button>
+                                </svelte:fragment>
+                            </Empty>
+                        </Card>
+                    {/if}
+                {:else if data.template.variables?.length}
+                    <Configuration bind:variables templateVariables={data.template.variables} />
+                {/if}
+            {/if}
+            {#if connectBehaviour === 'later' || selectedRepository}
+                <Domain bind:domain bind:domainIsValid />
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Aside {framework} {repositoryName} {branch} {rootDir} showAfter={showSiteConfig}>
+            <Layout.Stack>
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Typography.Text variant="m-500" truncate color="--fgcolor-neutral-primary">
+                        {name || data.template.name}
+                    </Typography.Text>
+                    {#if data?.template?.demoUrl}
+                        <Button secondary size="s" external href={data.template.demoUrl}>
+                            View demo
+                            <Icon icon={IconExternalLink} slot="end" size="s" />
+                        </Button>
+                    {/if}
+                </Layout.Stack>
+
+                <Image
+                    objectPosition="top"
+                    border
+                    src={$app.themeInUse === 'dark'
+                        ? data?.template?.screenshotDark ||
+                          `${base}/images/sites/screenshot-placeholder-dark.svg`
+                        : data?.template?.screenshotLight ||
+                          `${base}/images/sites/screenshot-placeholder-light.svg`}
+                    alt={data.template.name}
+                    ratio="16/9" />
+            </Layout.Stack>
+        </Aside>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile size="s" secondary on:click={() => (showExitModal = true)}>
+            Cancel
+        </Button>
+        <Button
+            fullWidthMobile
+            size="s"
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting || (connectBehaviour === 'now' && !selectedRepository)}>
+            Deploy
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.ts
new file mode 100644
index 000000000..2f22a6337
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.ts
@@ -0,0 +1,24 @@
+import { sdk } from '$lib/stores/sdk';
+import { buildVerboseDomain } from '../../store.js';
+import { ID } from '@appwrite.io/console';
+
+export const load = async ({ parent, params }) => {
+    const { installations, frameworks, project, organization, consoleVariables } = await parent();
+    const template = await sdk
+        .forProject(params.region, params.project)
+        .sites.getTemplate(params.template);
+    const domain = await buildVerboseDomain(
+        consoleVariables._APP_DOMAIN_SITES,
+        template.name,
+        organization.name,
+        project.name,
+        ID.unique()
+    );
+
+    return {
+        installations,
+        frameworks,
+        template,
+        domain
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/configuration.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/configuration.svelte
new file mode 100644
index 000000000..188476e97
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/configuration.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+    import {
+        Button,
+        InputEmail,
+        InputNumber,
+        InputPassword,
+        InputPhone,
+        InputText,
+        InputURL
+    } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Fieldset,
+        Layout,
+        Popover,
+        Icon,
+        Accordion,
+        ActionMenu
+    } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { type Component } from 'svelte';
+    import { getApiEndpoint } from '$lib/stores/sdk';
+    import { page } from '$app/state';
+    import { project } from '$routes/(console)/project-[region]-[project]/store';
+
+    export let variables: Partial<Models.TemplateVariable>[] = [];
+    export let templateVariables: Models.TemplateVariable[] = [];
+
+    variables = [...templateVariables];
+    let { requiredVariables, optionalVariables } = variables.reduce(
+        (acc, variable) => {
+            if (variable.required) {
+                acc.requiredVariables.push(variable);
+            } else {
+                acc.optionalVariables.push(variable);
+            }
+            return acc;
+        },
+        { requiredVariables: [], optionalVariables: [] }
+    );
+
+    variables.map((variable) => {
+        if (variable.value === '{apiEndpoint}') {
+            variable.value = getApiEndpoint();
+            variable.placeholder = getApiEndpoint();
+        } else if (variable.value === '{projectId}') {
+            variable.value = page.params.project;
+            variable.placeholder = page.params.project;
+        } else if (variable.value === '{projectName}') {
+            variable.value = $project.name;
+            variable.placeholder = $project.name;
+        } else return variable;
+    });
+    variables = [...variables];
+
+    function selectComponent(variableType: string): Component {
+        switch (variableType) {
+            case 'password':
+                return InputPassword;
+            case 'text':
+                return InputText;
+            case 'url':
+                return InputURL;
+            case 'phone':
+                return InputPhone;
+            case 'email':
+                return InputEmail;
+            case 'number':
+                return InputNumber;
+            default:
+                return InputPassword;
+        }
+    }
+</script>
+
+<Fieldset legend="Environment variables">
+    <Layout.Stack gap="l">
+        <Layout.Stack>
+            {#if requiredVariables?.length}
+                <Accordion title="Required variables" open hideDivider={!optionalVariables?.length}>
+                    <Layout.Stack>
+                        {#each requiredVariables as variable, i}
+                            <Layout.Stack gap="s" direction="row">
+                                <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle>
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon icon={IconInfo} /></Button>
+                                        <ActionMenu.Root slot="tooltip">
+                                            <p>{variable.description}</p>
+                                        </ActionMenu.Root>
+                                    </Popover>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+            {/if}
+            {#if optionalVariables?.length}
+                <Accordion title="Optional variables" hideDivider>
+                    <Layout.Stack>
+                        {#each optionalVariables as variable, i}
+                            <Layout.Stack gap="s" direction="row">
+                                <Layout.Stack gap="s" direction="row">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle>
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon icon={IconInfo} /></Button>
+                                        <ActionMenu.Root slot="tooltip">
+                                            <p>{variable.description}</p>
+                                        </ActionMenu.Root>
+                                    </Popover>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/each}
+                    </Layout.Stack>
+                </Accordion>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
new file mode 100644
index 000000000..c678007f9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputText } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { Layout, Selector } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { page } from '$app/state';
+
+    export let show = false;
+    export let selectedVar: Partial<Models.Variable>;
+    export let variables: Partial<Models.Variable>[];
+
+    let pair = {
+        $id: selectedVar?.$id,
+        key: selectedVar?.key,
+        value: selectedVar?.value,
+        secret: selectedVar?.secret
+    };
+
+    function handleVariable() {
+        if (selectedVar) {
+            variables = variables.map((variable) => {
+                if (variable.$id === selectedVar.$id) {
+                    return pair;
+                }
+                return variable;
+            });
+        } else {
+            variables = [...variables, pair];
+        }
+        show = false;
+    }
+
+    $: if (!show) {
+        selectedVar = null;
+    }
+</script>
+
+<Modal bind:show onSubmit={handleVariable} title="Update variable">
+    <span slot="description">
+        Update the environment variable for your site. Global variables can be set in <Link
+            variant="muted"
+            href={`${base}/project-${page.params.region}-${page.params.project}/settings`}
+            >project settings</Link
+        >.
+    </span>
+    <Layout.Stack gap="xxl">
+        <Layout.Stack direction="row">
+            <InputText
+                id="key"
+                label="Key"
+                placeholder="ENTER_KEY"
+                bind:value={pair.key}
+                required
+                autofocus
+                autocomplete={false} />
+            <InputText id="value" label="Value" placeholder="Enter value" bind:value={pair.value} />
+        </Layout.Stack>
+        <Selector.Checkbox
+            size="s"
+            id="secret"
+            label="Secret"
+            bind:checked={pair.secret}
+            description="If selected, you and your team won't be able to read the values after creation." />
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>{selectedVar ? 'Update' : 'Create'}</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/variableEditorModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/variableEditorModal.svelte
new file mode 100644
index 000000000..9d95f8665
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/variableEditorModal.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import Copy from '$lib/components/copy.svelte';
+    import Modal from '$lib/components/modal.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { parse } from '$lib/helpers/envfile';
+    import { Alert, Icon, Layout, Tabs } from '@appwrite.io/pink-svelte';
+    import { IconDownload, IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { InputTextarea } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { Link } from '$lib/elements';
+
+    export let showEditor = false;
+    export let variables: Partial<Models.Variable>[];
+
+    const editableVariables = variables.filter((variable) => !variable.secret);
+    const secretVariables = variables.filter((variable) => variable.secret);
+
+    let error = '';
+    let envCode = editableVariables
+        .map((variable) => `${variable.key}=${variable.value}`)
+        .join('\n');
+    let jsonCode = JSON.stringify(
+        JSON.parse(
+            `{${editableVariables
+                .map((variable) => `"${variable.key}":"${variable.value.split('"').join('\\"')}"`)
+                .join(',')}}`
+        ),
+        null,
+        2
+    );
+    let baseEnvCode = envCode;
+    let baseJsonCode = jsonCode;
+
+    if (jsonCode === '{}') {
+        jsonCode = '';
+        baseJsonCode = '';
+    }
+
+    let tab: 'env' | 'json' = 'env';
+
+    async function handleSubmit() {
+        try {
+            const vars = tab === 'env' ? parse(envCode) : JSON.parse(jsonCode ? jsonCode : '{}');
+            const entries = Object.entries(vars);
+
+            for (const [key, value] of entries) {
+                if (('' + value).length > 8192) {
+                    throw new Error(`Variable ${key} is longer than 8192 allowed characters`);
+                }
+            }
+
+            // Update or remove editable variables
+            editableVariables.map((variable) => {
+                const newValue = vars[variable.key] ?? null;
+
+                if (newValue === null) {
+                    variables = variables.filter((v) => v.key !== variable.key);
+                } else if (newValue !== variable.value) {
+                    variable.value = newValue;
+                }
+                delete vars[variable.key];
+            });
+
+            // Add new variables, skipping keys that exist in secret variables
+            Object.keys(vars).map(async (key) => {
+                if (!secretVariables.some((v) => v.key === key)) {
+                    const value = vars[key];
+                    variables.push({ key, value });
+                }
+            });
+
+            // Ensure secret variables are preserved
+            variables = [...secretVariables, ...variables.filter((v) => !v.secret)];
+
+            showEditor = false;
+
+            addNotification({
+                type: 'success',
+                message: `Variables have been updated.`
+            });
+
+            trackEvent(Submit.VariableEditor);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.VariableEditor);
+        }
+    }
+
+    function downloadVariables() {
+        const content = tab === 'json' ? jsonCode : envCode;
+        const fileName = tab === 'json' ? 'vars.json' : '.env';
+        const type = tab === 'json' ? 'application/json' : 'application/x-envoy';
+
+        const file = new File([content], fileName, {
+            type
+        });
+
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(file);
+
+        link.href = url;
+        link.download = file.name;
+        document.body.appendChild(link);
+        link.click();
+
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+
+    $: isButtonDisabled =
+        (tab === 'env' && baseEnvCode === envCode) || (tab === 'json' && baseJsonCode === jsonCode);
+
+    // TODO: merge this component with the rawVariableEditor?
+</script>
+
+<Modal title="Editor" bind:show={showEditor} onSubmit={handleSubmit} bind:error>
+    <p slot="description">Add, edit, or delete environment variables using a raw editor.</p>
+
+    <Layout.Stack gap="l">
+        {#if secretVariables?.length > 0}
+            <Alert.Inline status="info">
+                {secretVariables.length} secret variables are hidden from the editor. Their values will
+                remain unchanged. <Link
+                    href="https://appwrite.io/docs/products/sites/develop#accessing-environment-variables"
+                    external
+                    variant="muted">Learn more</Link
+                >.
+            </Alert.Inline>
+        {/if}
+        <Layout.Stack gap="s">
+            <Tabs.Root stretch let:root>
+                <Tabs.Item.Button {root} on:click={() => (tab = 'env')} active={tab === 'env'}>
+                    ENV
+                </Tabs.Item.Button>
+                <Tabs.Item.Button {root} on:click={() => (tab = 'json')} active={tab === 'json'}>
+                    JSON
+                </Tabs.Item.Button>
+            </Tabs.Root>
+
+            <Layout.Stack gap="xxs">
+                {#if tab === 'env'}
+                    <InputTextarea
+                        id="variables"
+                        bind:value={envCode}
+                        rows={10}
+                        placeholder={`SECRET_KEY=dQw4w9WgXcQ...`} />
+                {:else if tab === 'json'}
+                    <InputTextarea
+                        id="variables"
+                        bind:value={jsonCode}
+                        rows={10}
+                        placeholder={`{\n  "SECRET_KEY": "dQw4w9WgXcQ..."\n}`} />
+                {/if}
+                <Layout.Stack direction="row">
+                    <Button size="xs" on:click={() => downloadVariables()} compact>
+                        <Icon slot="start" icon={IconDownload} />
+                        Download
+                    </Button>
+
+                    <Copy value={tab == 'json' ? jsonCode : envCode}>
+                        <Button size="xs" compact>
+                            <Icon slot="start" icon={IconDuplicate} />
+                            Copy
+                        </Button>
+                    </Copy>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showEditor = false)}>Cancel</Button>
+        <Button submit disabled={isButtonDisabled}>Save</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte
new file mode 100644
index 000000000..635d712ec
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { Card, Modal } from '$lib/components';
+    import { Image, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import RepoDark from './(images)/repositoryDark.svg';
+    import RepoLight from './(images)/repositoryLight.svg';
+    import TemplateDark from './(images)/templateDark.svg';
+    import TemplateLight from './(images)/templateLight.svg';
+    import { app } from '$lib/stores/app';
+    import { Link } from '$lib/elements';
+
+    export let show = false;
+</script>
+
+<Modal title="Create site" bind:show hideFooter>
+    <Layout.Stack direction="row" gap="m" wrap="wrap">
+        <div style="flex-grow: 1; min-width: 245px">
+            <Card
+                variant="secondary"
+                padding="xs"
+                radius="s"
+                href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}>
+                <Image
+                    alt="repositories"
+                    radius="xxs"
+                    ratio="16/9"
+                    src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight} />
+                <Layout.Stack gap="s">
+                    <Typography.Text variant="m-600">Clone a template</Typography.Text>
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        Clone a pre-built template to quickly set up your site
+                    </Typography.Text>
+                </Layout.Stack>
+            </Card>
+        </div>
+        <div style="flex-grow: 1; min-width: 245px">
+            <Card
+                variant="secondary"
+                padding="xs"
+                radius="s"
+                href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories`}>
+                <Image
+                    alt="repositories"
+                    radius="xxs"
+                    ratio="16/9"
+                    src={$app?.themeInUse === 'dark' ? RepoDark : RepoLight} />
+
+                <Layout.Stack gap="s">
+                    <Typography.Text variant="m-600">Connect a repository</Typography.Text>
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        Connect to one of your existing Git repositories
+                    </Typography.Text>
+                </Layout.Stack>
+            </Card>
+        </div>
+    </Layout.Stack>
+    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+        Or simply drag and drop your files to create a site <Link
+            variant="muted"
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/manual`}>
+            manually</Link
+        >.
+    </Typography.Text>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/grid.svelte b/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
new file mode 100644
index 000000000..59effbc6d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { timeFromNow } from '$lib/helpers/date';
+    import type { Models } from '@appwrite.io/console';
+    import { Card, Icon, Layout, Popover, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { generateSiteDeploymentDesc } from './store';
+    import { SvgIcon } from '$lib/components';
+    import { app } from '$lib/stores/app';
+    import { getApiEndpoint } from '$lib/stores/sdk';
+    import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
+    import SitesActionMenu from './sitesActionMenu.svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
+    import { Link } from '$lib/elements';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+
+    export let siteList: Models.SiteList;
+
+    let showAddCollaborator = false;
+    let selectedSite: Models.Site = null;
+
+    function getScreenshot(theme: string, site: Models.Site) {
+        if (theme === 'dark') {
+            return site?.deploymentScreenshotDark
+                ? getFilePreview(site?.deploymentScreenshotDark)
+                : `${base}/images/sites/screenshot-placeholder-dark.svg`;
+        }
+
+        return site?.deploymentScreenshotLight
+            ? getFilePreview(site?.deploymentScreenshotLight)
+            : `${base}/images/sites/screenshot-placeholder-light.svg`;
+    }
+
+    function getFilePreview(fileId: string) {
+        // TODO: @Meldiron use sdk.forConsole.storage.getFilePreview
+        const endpoint = getApiEndpoint();
+        return endpoint + `/storage/buckets/screenshots/files/${fileId}/view?project=console`;
+    }
+</script>
+
+<Layout.Grid columns={3} columnsXS={1} columnsXXS={1}>
+    {#each siteList.sites as site (site.$id)}
+        <Card.Link
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}`}
+            padding="xxs">
+            <Card.Media
+                title={site.name}
+                description={generateSiteDeploymentDesc(site)}
+                src={getScreenshot($app.themeInUse, site)}
+                alt={site.name}
+                avatar>
+                <svelte:fragment slot="avatar">
+                    <Tooltip>
+                        <SvgIcon name={getFrameworkIcon(site.framework)} iconSize="small" />
+                        <svelte:fragment slot="tooltip">
+                            {capitalize(site.framework)}
+                        </svelte:fragment>
+                    </Tooltip>
+                </svelte:fragment>
+                <SitesActionMenu {site} bind:showAddCollaborator bind:selectedSite />
+
+                <svelte:fragment slot="description-end">
+                    {#if site?.latestDeploymentStatus === 'failed'}
+                        <Popover let:toggle portal>
+                            <button on:mouseenter={(e) => toggle(e)}>
+                                <Layout.Stack alignItems="center">
+                                    <Icon
+                                        icon={IconExclamation}
+                                        size="s"
+                                        color="--bgcolor-warning" />
+                                </Layout.Stack>
+                            </button>
+                            <svelte:fragment slot="tooltip">
+                                <Typography.Text variant="m-400">
+                                    Last deployment failed {timeFromNow(
+                                        site?.latestDeploymentCreatedAt
+                                    )}. <Link
+                                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`}>
+                                        View logs
+                                    </Link>
+                                </Typography.Text>
+                            </svelte:fragment>
+                        </Popover>
+                    {/if}
+                </svelte:fragment>
+            </Card.Media>
+        </Card.Link>
+    {/each}
+</Layout.Grid>
+
+{#if selectedSite?.$id && showAddCollaborator}
+    <AddCollaboratorModal bind:show={showAddCollaborator} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/header.svelte b/src/routes/(console)/project-[region]-[project]/sites/header.svelte
new file mode 100644
index 000000000..511fcc0d3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/header.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Tab, Tabs } from '$lib/components';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
+
+    $: path = `${base}/project-${page.params.region}-${page.params.project}/sites`;
+    $: tabs = [
+        {
+            href: path,
+            title: 'Sites',
+            event: 'sites',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
+    </svelte:fragment>
+
+    <Tabs variant="primary" let:root>
+        {#each tabs as tab}
+            <Tab
+                {root}
+                href={tab.href}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte
new file mode 100644
index 000000000..38cc53400
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Confirm } from '$lib/components';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+
+    export let show = false;
+    export let selectedDeploymentId: string;
+    export let site: Models.Site;
+    export let redirect = false;
+    let error: string;
+
+    async function redeploy() {
+        try {
+            const deployment = await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.createDuplicateDeployment(site.$id, selectedDeploymentId);
+
+            trackEvent(Submit.SiteRedeploy);
+            await invalidate(Dependencies.SITE);
+            await invalidate(Dependencies.DEPLOYMENTS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Redeploying ${site.name}`
+            });
+            if (redirect) {
+                await goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/deployments/deployment-${deployment.$id}`
+                );
+            }
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SiteRedeploy);
+        }
+    }
+</script>
+
+<Confirm title="Redeploy site" bind:open={show} bind:error onSubmit={redeploy}>
+    <p class="text">
+        Are you sure you want to redeploy <b>{site.name}</b>? It may affect your production code.
+    </p>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Redeploy</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+layout.svelte
new file mode 100644
index 000000000..30e2b5f7c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<svelte:head>
+    <title>Site - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+layout.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+layout.ts
new file mode 100644
index 000000000..491697969
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+layout.ts
@@ -0,0 +1,22 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import { error } from '@sveltejs/kit';
+
+export const load = async ({ depends, params }) => {
+    depends(Dependencies.SITE);
+    try {
+        const [site] = await Promise.all([
+            sdk.forProject(params.region, params.project).sites.get(params.site)
+        ]);
+
+        return {
+            site,
+            header: Header,
+            breadcrumbs: Breadcrumbs
+        };
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte
new file mode 100644
index 000000000..db9f66152
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { Card, Divider, Empty, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import SiteCard from '../(components)/siteCard.svelte';
+    import DomainsOverview from './domainsOverview.svelte';
+    import DeploymentsOverview from './deploymentsOverview.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { protocol } from '$routes/(console)/store';
+    import InstantRollbackDomain from './instantRollbackModal.svelte';
+    import { app } from '$lib/stores/app';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
+
+    export let data;
+    let showRollback = false;
+
+    onMount(() => {
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`sites.${page.params.site}.deployments.*`)) {
+                invalidate(Dependencies.SITE);
+            }
+        });
+    });
+
+    // $: console.log(data.site);
+    $: console.log(data.deployment);
+    $: console.log(data.deploymentList);
+    // $: console.log(data.proxyRuleList);
+</script>
+
+<Container>
+    <Layout.Stack gap="xxxl">
+        {#if data?.deployment && data.deployment.status === 'ready'}
+            <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList}>
+                <svelte:fragment slot="footer">
+                    {#if data.proxyRuleList.total}
+                        <Button
+                            external
+                            href={`${$protocol}${data.proxyRuleList.rules[0]?.domain}`}>
+                            Visit
+                        </Button>
+                    {/if}
+                    <Tooltip disabled={data.hasProdReadyDeployments}>
+                        <div>
+                            <Button
+                                secondary
+                                on:click={() => (showRollback = true)}
+                                disabled={!data.hasProdReadyDeployments}>
+                                Instant rollback
+                            </Button>
+                        </div>
+                        <span slot="tooltip">
+                            Rollback is possible only if there is a deployment that is ready and was
+                            active.
+                        </span>
+                    </Tooltip>
+                </svelte:fragment>
+            </SiteCard>
+        {:else if data.deployment?.status === 'building'}
+            <Card.Base padding="none">
+                <Empty
+                    title="Deployment is still building"
+                    src={$app.themeInUse === 'dark'
+                        ? `${base}/images/empty-deployment-dark.svg`
+                        : `${base}/images/empty-deployment-light.svg`}>
+                    <span slot="description">
+                        Your build is running. When it completes, this page will automatically
+                        update with the latest deployment.
+                    </span>
+                </Empty>
+            </Card.Base>
+        {:else}
+            <Card.Base padding="none">
+                <Empty
+                    title="There is no active deployment"
+                    src={$app.themeInUse === 'dark'
+                        ? `${base}/images/empty-deployment-dark.svg`
+                        : `${base}/images/empty-deployment-light.svg`}>
+                    <span slot="description">
+                        Deploy your site to get started. Once deployed, you'll see your latest build
+                        details here.
+                    </span>
+                </Empty>
+            </Card.Base>
+        {/if}
+
+        <Divider />
+
+        <Layout.GridFraction gap="xxl" start={1} end={2} breakpoint="m">
+            <DomainsOverview proxyRuleList={data.proxyRuleList} />
+            <DeploymentsOverview
+                site={data.site}
+                activeDeployment={data.deployment}
+                deploymentList={data.deploymentList} />
+        </Layout.GridFraction>
+    </Layout.Stack>
+</Container>
+
+{#if showRollback}
+    <InstantRollbackDomain
+        bind:show={showRollback}
+        deployment={data.deployment}
+        proxyRuleList={data.proxyRuleList}
+        prodReadyDeployments={data.prodReadyDeployments} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.ts
new file mode 100644
index 000000000..82fd60f63
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.ts
@@ -0,0 +1,48 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import { Query } from '@appwrite.io/console';
+import { RuleType } from '$lib/stores/sdk';
+import { DeploymentResourceType } from '$lib/stores/sdk';
+
+export const load = async ({ params, depends, parent }) => {
+    depends(Dependencies.SITE);
+    depends(Dependencies.SITES_DOMAINS);
+    const { site } = await parent();
+
+    const [deploymentList, prodReadyDeployments, proxyRuleList] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .sites.listDeployments(params.site, [Query.limit(4), Query.orderDesc('')]),
+        sdk
+            .forProject(params.region, params.project)
+            .sites.listDeployments(params.site, [
+                Query.equal('status', 'ready'),
+                Query.equal('activate', true),
+                Query.orderDesc('')
+            ]),
+        sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.DEPLOYMENT),
+                Query.equal('deploymentResourceType', DeploymentResourceType.SITE),
+                Query.equal('deploymentResourceId', site.$id),
+                Query.equal('deploymentId', site.deploymentId),
+                Query.orderDesc('')
+            ])
+    ]);
+
+    const deployment = deploymentList?.total
+        ? await sdk
+              .forProject(params.region, params.project)
+              .sites.getDeployment(params.site, site.deploymentId)
+        : null;
+    return {
+        site,
+        deploymentList,
+        deployment,
+        proxyRuleList,
+        prodReadyDeployments,
+        hasProdReadyDeployments:
+            prodReadyDeployments?.deployments?.filter((d) => d?.$id !== deployment?.$id).length > 0
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte
new file mode 100644
index 000000000..28d1faace
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites`,
+            title: 'Sites'
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}`,
+            title: page.params.site
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte
new file mode 100644
index 000000000..9c248525f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate, goto } from '$app/navigation';
+    import { registerCommands } from '$lib/commandCenter';
+    import { project } from '../../../store';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { canWriteSites } from '$lib/stores/roles';
+    import { IconList, IconPlus, IconSearch } from '@appwrite.io/pink-icons-svelte';
+
+    onMount(() => {
+        let previousStatus: string = null;
+        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
+            if (previousStatus === message.payload.status) {
+                return;
+            }
+            previousStatus = message.payload.status;
+            if (message.events.includes('sites.*.deployments.*.create')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+            if (message.events.includes('sites.*.deployments.*.update')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                invalidate(Dependencies.SITE);
+                console.log(message);
+                return;
+            }
+            if (message.events.includes('sites.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+        });
+    });
+
+    $: $registerCommands([
+        {
+            label: 'Create deployment',
+            async callback() {
+                if (!page.url.pathname.endsWith(page.params.site)) {
+                    await goto(
+                        `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}`
+                    );
+                }
+            },
+            keys: page.url.pathname.endsWith(page.params.site) ? ['c'] : ['c', 'd'],
+            group: 'sites',
+            icon: IconPlus,
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Permissions',
+            async callback() {
+                await goto(
+                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/settings#permissions`
+                );
+                scrollBy({ top: -100 });
+            },
+            icon: IconSearch,
+            group: 'sites',
+            disabled: !$canWriteSites
+        },
+
+        {
+            label: 'Variables',
+            async callback() {
+                await goto(
+                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/settings#variables`
+                );
+            },
+            icon: IconList,
+            group: 'sites',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Go to deployments',
+            callback() {
+                goto(
+                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/deployments`
+                );
+            },
+            keys: ['g', 'd'],
+            group: 'navigation',
+            rank: 10,
+            disabled: page.url.pathname.endsWith('deployments')
+        },
+        {
+            label: 'Go to usage',
+            callback() {
+                goto(
+                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/usage`
+                );
+            },
+            keys: ['g', 'u'],
+            group: 'navigation',
+            rank: 10,
+            disabled: page.url.pathname.endsWith('usage')
+        },
+        {
+            label: 'Go to logs',
+            callback() {
+                goto(
+                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/logs`
+                );
+            },
+            keys: ['g', 'e'],
+            group: 'navigation',
+            rank: 10,
+            disabled: page.url.pathname.endsWith('logs')
+        },
+        {
+            label: 'Go to settings',
+            callback() {
+                goto(
+                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/settings`
+                );
+            },
+            keys: ['g', 's'],
+            group: 'navigation',
+            rank: 10,
+            disabled: page.url.pathname.endsWith('settings') || !$canWriteSites
+        }
+    ]);
+</script>
+
+<slot />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte
new file mode 100644
index 000000000..7d2f8b9b1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+    import { PaginationWithLimit, EmptyFilter, Empty } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { View } from '$lib/helpers/load';
+    import { ActionMenu, Alert, Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
+    import Table from './table.svelte';
+    import RedeployModal from '../../redeployModal.svelte';
+    import CreateGitDeploymentModal from './createGitDeploymentModal.svelte';
+    import { columns } from './store';
+    import CreateManualDeploymentModal from './createManualDeploymentModal.svelte';
+    import DeploymentMetrics from './deploymentMetrics.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import CreateCliModal from './createCliModal.svelte';
+    import { page } from '$app/state';
+    import { ConnectRepoModal } from '$lib/components/git';
+
+    export let data;
+
+    let showRedeploy = false;
+    let showCreateDeployment = false;
+    let showConnectRepo = false;
+    let selectedDeployment: Models.Deployment = null;
+    let hasInstallation = !!data.installations?.total;
+    let showConnectCLI = false;
+    let showConnectManual = false;
+    let showAlert = true;
+
+    onMount(() => {
+        if (page.url.searchParams.has('createDeployment')) {
+            showConnectRepo = true;
+        }
+
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes('sites.*.deployments.*')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+            }
+        });
+    });
+
+    async function connect(selectedInstallationId: string, selectedRepository: string) {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    data.site.$id,
+                    data.site.name,
+                    data.site.framework as Framework,
+                    data.site.enabled,
+                    data.site.logging || undefined,
+                    data.site.timeout,
+                    data.site.installCommand,
+                    data.site.buildCommand,
+                    data.site.outputDirectory,
+                    data.site.buildRuntime as BuildRuntime,
+                    data.site.adapter as Adapter,
+                    data.site.fallbackFile,
+                    selectedInstallationId,
+                    selectedRepository,
+                    'main',
+                    undefined,
+                    undefined,
+                    undefined
+                );
+            invalidate(Dependencies.SITE);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+<Container>
+    <Layout.Stack gap="xxxl">
+        {#if data?.activeDeployment && !data.site.live && showAlert}
+            <Alert.Inline status="warning" dismissible on:dismiss={() => (showAlert = false)}>
+                Some configuration options are not live yet. Redeploy your function to apply latest
+                changes.
+            </Alert.Inline>
+        {/if}
+
+        <DeploymentMetrics />
+
+        <Layout.Stack gap="l">
+            <ResponsiveContainerHeader
+                view={View.Table}
+                {columns}
+                hasFilters
+                analyticsSource="site_deployments"
+                hideView>
+                <Popover padding="none" let:toggle placement="bottom-end">
+                    <Button size="s" on:click={toggle}>
+                        <Icon size="s" icon={IconPlus} />
+                        Create deployment
+                    </Button>
+                    <svelte:fragment slot="tooltip" let:toggle>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button
+                                badge="Recommended"
+                                on:click={(e) => {
+                                    toggle(e);
+                                    if (!hasInstallation) {
+                                        showConnectRepo = true;
+                                    } else {
+                                        showCreateDeployment = true;
+                                    }
+                                }}>
+                                Git
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                on:click={(e) => {
+                                    toggle(e);
+                                    showConnectCLI = true;
+                                }}>
+                                CLI
+                            </ActionMenu.Item.Button>
+                            <ActionMenu.Item.Button
+                                on:click={(e) => {
+                                    toggle(e);
+                                    showConnectManual = true;
+                                }}>
+                                Manual
+                            </ActionMenu.Item.Button>
+                        </ActionMenu.Root>
+                    </svelte:fragment>
+                </Popover>
+            </ResponsiveContainerHeader>
+
+            {#if data.deploymentList.total}
+                <Table {data} />
+
+                <PaginationWithLimit
+                    name="Deployments"
+                    limit={data.limit}
+                    offset={data.offset}
+                    total={data.deploymentList?.total} />
+            {:else if data?.query}
+                <EmptyFilter resource="deployments" />
+            {:else}
+                <Empty
+                    single
+                    target="deployment"
+                    on:click={() => {
+                        if (!hasInstallation) {
+                            showConnectRepo = true;
+                        } else {
+                            showCreateDeployment = true;
+                        }
+                    }} />
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Container>
+{#if selectedDeployment}
+    <RedeployModal
+        selectedDeploymentId={selectedDeployment.$id}
+        bind:show={showRedeploy}
+        site={data.site} />
+{/if}
+
+{#if showConnectRepo}
+    <ConnectRepoModal
+        bind:show={showConnectRepo}
+        {connect}
+        product="sites"
+        callbackState={{ connectRepo: 'true' }} />
+{/if}
+
+{#if showCreateDeployment}
+    <CreateGitDeploymentModal
+        bind:show={showCreateDeployment}
+        site={data.site}
+        installations={data.installations} />
+{/if}
+{#if showConnectManual}
+    <CreateManualDeploymentModal bind:show={showConnectManual} site={data.site} />
+{/if}
+{#if showConnectCLI}
+    <CreateCliModal bind:show={showConnectCLI} site={data.site} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.ts
new file mode 100644
index 000000000..097387117
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.ts
@@ -0,0 +1,43 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { queries, queryParamToMap } from '$lib/components/filters';
+
+export const load = async ({ params, depends, url, route, parent }) => {
+    const { site } = await parent();
+    depends(Dependencies.DEPLOYMENTS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    const [deploymentList, installations] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .sites.listDeployments(params.site, [
+                Query.limit(limit),
+                Query.offset(offset),
+                Query.orderDesc(''),
+                ...parsedQueries.values()
+            ]),
+        sdk.forProject(params.region, params.project).vcs.listInstallations()
+    ]);
+
+    return {
+        offset,
+        limit,
+        query,
+        deploymentList,
+        activeDeployment:
+            site.deploymentId && deploymentList?.total
+                ? await sdk
+                      .forProject(params.region, params.project)
+                      .sites.getDeployment(params.site, site.deploymentId)
+                : null,
+        installations
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte
new file mode 100644
index 000000000..b29155bc5
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Confirm } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+
+    export let showCancel = false;
+    export let selectedDeployment: Models.Deployment;
+    let error = '';
+
+    async function handleSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.updateDeploymentStatus(
+                    selectedDeployment.resourceId,
+                    selectedDeployment.$id
+                );
+            await invalidate(Dependencies.SITE);
+            showCancel = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been cancelled`
+            });
+            trackEvent(Submit.DeploymentCancel);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentCancel);
+        }
+    }
+</script>
+
+<Confirm title="Cancel deployment" bind:open={showCancel} onSubmit={handleSubmit} bind:error>
+    <p data-private>Are you sure you want to cancel this deployment?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showCancel = false)}>Cancel</Button>
+        <Button submit>Confirm</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createCliModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createCliModal.svelte
new file mode 100644
index 000000000..d6a72f24c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createCliModal.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { Link } from '$lib/elements';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { Alert, Code, Layout, Tabs } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+    export let site: Models.Site;
+
+    let codeSnippets = {};
+    let os = 'unknown';
+    let category = 'Unix';
+
+    const siteId = page.params.site;
+    codeSnippets = getCodeSnippets();
+
+    onMount(() => {
+        codeSnippets = getCodeSnippets();
+        os = navigator['userAgentData']?.platform || navigator?.platform || 'unknown';
+
+        if (os.includes('Win')) {
+            category = 'CMD';
+        } else if (os.includes('Mac') || os.includes('Linux')) {
+            category = 'Unix';
+        } else {
+            category = 'Unix';
+        }
+    });
+
+    function getCodeSnippets() {
+        const projectId = page.params.project;
+        const codePath = `./sites/${site.framework}`;
+        const { buildCommand, installCommand, outputDirectory } = site;
+
+        return {
+            Unix: {
+                code: `appwrite client --projectId="${projectId}" && \\
+appwrite sites create-deployment \\
+    --site-id="${siteId}" \\
+    --code="${codePath}" \\
+    --activate \\
+    --build-command="${buildCommand}" \\
+    --install-command="${installCommand}" \\
+    --output-directory="${outputDirectory}"`,
+                language: 'bash'
+            },
+
+            CMD: {
+                code: `appwrite client --projectId="${projectId}" && ^
+appwrite sites createDeployment ^
+    --siteId=${siteId} ^
+    --code="${codePath}" ^
+    --activate ^
+    --build-command="${buildCommand}" ^
+    --install-command="${installCommand}" ^
+    --output-directory="${outputDirectory}"`,
+                language: 'CMD'
+            },
+
+            PowerShell: {
+                code: `appwrite client --projectId="${projectId}" ;
+appwrite sites createDeployment ,
+    --siteId=${siteId} ,
+    --code="${codePath}" ,
+    --activate ,
+    --build-command="${buildCommand}" ,
+    --install-command="${installCommand}" ,
+    --output-directory="${outputDirectory}"`,
+                language: 'PowerShell'
+            }
+        };
+    }
+</script>
+
+<Modal title="Create CLI deployment" bind:show hideFooter>
+    <span slot="description">
+        Deploy your site using the Appwrite CLI by running the following command inside your sites's
+        folder.
+    </span>
+
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="s">
+            <Tabs.Root let:root stretch>
+                {#each ['Unix', 'CMD', 'PowerShell'] as cat}
+                    <Tabs.Item.Button
+                        {root}
+                        on:click={() => (category = cat)}
+                        active={category === cat}>
+                        {cat}
+                    </Tabs.Item.Button>
+                {/each}
+            </Tabs.Root>
+
+            <Code hideHeader lang="sh" code={codeSnippets[category].code} />
+        </Layout.Stack>
+
+        <Alert.Inline status="info">
+            If it's your first time using CLI, remember to <Link
+                href="https://appwrite.io/docs/tooling/command-line/installation#install-with-npm"
+                external>install CLI</Link> and <Link
+                href="https://appwrite.io/docs/tooling/command-line/installation#login"
+                external>login to your account</Link> before running deployment command.
+        </Alert.Inline>
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
new file mode 100644
index 000000000..1d56d3d8f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
@@ -0,0 +1,235 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { Modal, Card } from '$lib/components';
+    import { Repositories } from '$lib/components/git';
+    import { Dependencies } from '$lib/constants';
+    import { Link } from '$lib/elements';
+    import { Button, InputCheckbox, InputSelect } from '$lib/elements/forms';
+    import { timeFromNow } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository, sortBranches } from '$lib/stores/vcs';
+    import {
+        Adapter,
+        BuildRuntime,
+        Framework,
+        VCSDeploymentType,
+        type Models
+    } from '@appwrite.io/console';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+    export let site: Models.Site;
+
+    export let installations: Models.InstallationList;
+    let hasRepository = !!site?.providerRepositoryId;
+    let selectedRepository: string = site.providerRepositoryId;
+    let branch: string = null;
+    let commit: string = null;
+    let activate = true;
+    let error = '';
+
+    async function loadInstallations() {
+        if (!site?.installationId && installations?.total > 0) {
+            installation.set(installations.installations[0]);
+        }
+        $installation = installations.installations.find(
+            (installation) => installation.$id === site.installationId
+        );
+        if (!$installation?.$id) {
+            $installation = installations.installations[0];
+        }
+    }
+
+    async function load() {
+        try {
+            await loadInstallations();
+            if (!$repository?.id && hasRepository) {
+                $repository = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.getRepository($installation.$id, site.providerRepositoryId);
+            }
+            selectedRepository = $repository?.id;
+            const branchList = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.listRepositoryBranches($installation.$id, selectedRepository);
+
+            const sorted = sortBranches(branchList.branches);
+            branch = sorted[0]?.name ?? null;
+
+            if (!branch) {
+                branch = 'main';
+            }
+
+            return sorted;
+        } catch (error) {
+            console.log(installations);
+            console.log(error);
+        }
+    }
+
+    async function createDeployment() {
+        try {
+            if (!site?.providerRepositoryId) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.update(
+                        site.$id,
+                        site.name,
+                        site.framework as Framework,
+                        site.enabled || undefined,
+                        site.logging || undefined,
+                        site.timeout || undefined,
+                        site.installCommand || undefined,
+                        site.buildCommand || undefined,
+                        site.outputDirectory || undefined,
+                        (site?.buildRuntime as BuildRuntime) || undefined,
+                        (site.adapter as Adapter) || undefined,
+                        site.fallbackFile || undefined,
+                        $installation.$id || undefined,
+                        selectedRepository || undefined,
+                        branch || undefined,
+                        site.providerSilentMode || undefined,
+                        site.providerRootDirectory || undefined
+                    );
+            }
+            if (commit) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.createVcsDeployment(
+                        site.$id,
+                        VCSDeploymentType.Commit,
+                        commit,
+                        activate
+                    );
+            } else if (branch) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.createVcsDeployment(
+                        site.$id,
+                        VCSDeploymentType.Branch,
+                        branch,
+                        activate
+                    );
+            }
+            show = false;
+            invalidate(Dependencies.DEPLOYMENTS);
+            addNotification({
+                message: activate
+                    ? 'Deployment is in progress. It will be automatically activated after build step completes.'
+                    : 'Deployment is in progress. You can activate it after build step completes.',
+                type: 'success'
+            });
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    $: console.log($repository);
+</script>
+
+<Modal title="Create Git deployment" bind:show onSubmit={createDeployment} bind:error>
+    <span slot="description">
+        Enter a valid commit reference to create a new deployment. <Link
+            href="https://appwrite.io/docs/products/sites/deployments#create-deployment"
+            external>Learn more</Link>
+    </span>
+    {#if hasRepository}
+        {#await load()}
+            <Card padding="xs" radius="s" variant="secondary">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="s">
+                        <Icon size="s" icon={IconGithub} />
+                        <Skeleton variant="line" width={100} height={19.6} />
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Card>
+            <Layout.Stack gap="s">
+                <Skeleton variant="line" width={100} height={19.6} />
+                <Skeleton variant="line" width={350} height={31} />
+            </Layout.Stack>
+        {:then branches}
+            {@const options =
+                branches
+                    ?.map((branch) => {
+                        return {
+                            value: branch.name,
+                            label: branch.name
+                        };
+                    })
+                    ?.sort((a, b) => {
+                        return a.label > b.label ? 1 : -1;
+                    }) ?? []}
+            <Card padding="xs" radius="s" variant="secondary">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                        <Icon icon={IconGithub} />
+                        <Link
+                            external
+                            href={`https://github.com/${$repository?.organization}/${$repository?.name}`}>
+                            <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                                {$repository?.organization}/{$repository?.name}
+                            </Layout.Stack>
+                        </Link>
+                    </Layout.Stack>
+                    <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
+                        Last updated {timeFromNow($repository?.pushedAt)}
+                    </Typography.Caption>
+                </Layout.Stack>
+            </Card>
+            <InputSelect
+                required={true}
+                id="branch"
+                label="Production branch"
+                placeholder="Select branch"
+                bind:value={branch}
+                isSearchable
+                on:select={(event) => {
+                    branch = event.detail.value;
+                }}
+                {options} />
+            <!-- <InputText
+                id="commit"
+                label="Commit hash"
+                placeholder="Select commit"
+                bind:value={commit} /> -->
+            {#if branch}
+                <InputCheckbox
+                    label="Activate deployment after build"
+                    id="activate"
+                    description="This deployment will automatically activate after the build completes. If
+                unchecked, it will remain inactive, and you can activate it manually later."
+                    bind:checked={activate} />
+            {/if}
+        {/await}
+    {:else}
+        <Repositories
+            bind:selectedRepository
+            installationList={installations}
+            product="sites"
+            action="button"
+            callbackState={{
+                createDeployment: 'true'
+            }}
+            connect={(e) => {
+                repository.set(e);
+                hasRepository = true;
+            }} />
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
+        <Button submit size="s" disabled={!$installation?.$id || !selectedRepository || !branch}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte
new file mode 100644
index 000000000..559a252d4
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { removeFile } from '$lib/helpers/files';
+    import { addNotification } from '$lib/stores/notifications';
+    import { uploader } from '$lib/stores/uploader';
+    import type { Models } from '@appwrite.io/console';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+    export let site: Models.Site;
+
+    let files: FileList;
+    let error: string = '';
+
+    async function createDeployment() {
+        try {
+            uploader.uploadSiteDeployment(site.$id, files[0]);
+            show = false;
+            invalidate(Dependencies.DEPLOYMENTS);
+            addNotification({
+                message: 'Deployment upload started',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    $: filesList = files?.length
+        ? Array.from(files).map((f) => {
+              return {
+                  ...f,
+                  extension: f.type,
+                  removable: true
+              };
+          })
+        : [];
+</script>
+
+<Modal title="Create manual deployment" bind:show onSubmit={createDeployment} {error}>
+    <span slot="description"> Manually deploy a site by uploading any file(s) or folder. </span>
+    <Layout.Stack gap="s">
+        <Typography.Text color="--fgcolor-neutral-primary">
+            Upload a tar.gz file containing your site source code
+        </Typography.Text>
+        <Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
+            <Layout.Stack alignItems="center" gap="s">
+                <Layout.Stack alignItems="center" gap="s">
+                    <Layout.Stack
+                        alignItems="center"
+                        justifyContent="center"
+                        direction="row"
+                        gap="s">
+                        <Typography.Text variant="l-500">
+                            Drag and drop file here or click to upload
+                        </Typography.Text>
+                        <Tooltip>
+                            <Layout.Stack alignItems="center" justifyContent="center" inline>
+                                <Icon icon={IconInfo} size="s" />
+                            </Layout.Stack>
+                            <svelte:fragment slot="tooltip"
+                                >Only .tar.gz files allowed</svelte:fragment>
+                        </Tooltip>
+                    </Layout.Stack>
+                    <Typography.Caption variant="400">Max file size 10MB</Typography.Caption>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Upload.Dropzone>
+        {#if files?.length}
+            <Upload.List
+                bind:files={filesList}
+                on:remove={(e) => (files = removeFile(e.detail, files))} />
+        {/if}
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
+        <Button size="s" disabled={!(files ?? [])[0]} submit submissionLoader>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
new file mode 100644
index 000000000..2d92f64d9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
+
+    export let showDelete = false;
+    export let selectedDeployment: Models.Deployment = null;
+    export let activeDeployment: string;
+
+    let error: string;
+
+    async function handleSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.deleteDeployment(selectedDeployment.resourceId, selectedDeployment.$id);
+            await invalidate(Dependencies.SITE);
+            if (page.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
+                await goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`
+                );
+            }
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been deleted`
+            });
+            trackEvent(Submit.DeploymentDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DeploymentDelete);
+        }
+    }
+</script>
+
+<Confirm
+    onSubmit={handleSubmit}
+    title="Delete deployment"
+    bind:open={showDelete}
+    bind:error
+    confirmDeletion={activeDeployment === selectedDeployment.$id}>
+    <Typography.Text>Are you sure you want to delete this deployment?</Typography.Text>
+    {#if activeDeployment === selectedDeployment.$id}
+        <Typography.Text>
+            Your site will no longer be available until you redeploy. This action is irreversible.
+        </Typography.Text>
+    {/if}
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+layout.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+layout.ts
new file mode 100644
index 000000000..282ea4dc1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+layout.ts
@@ -0,0 +1,16 @@
+import { Dependencies } from '$lib/constants';
+import { error } from '@sveltejs/kit';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+
+export const load = async ({ depends }) => {
+    depends(Dependencies.SITE);
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs
+        };
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
new file mode 100644
index 000000000..dc50e9d1f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import type { Models, RealtimeResponseEvent } from '@appwrite.io/console';
+    import SiteCard from '../../../(components)/siteCard.svelte';
+    import Logs, { badgeTypeDeployment } from '../../../(components)/logs.svelte';
+    import Card from '$lib/components/card.svelte';
+    import { Button } from '$lib/elements/forms';
+    import DeploymentActionMenu from '../../../(components)/deploymentActionMenu.svelte';
+    import DeleteDeploymentModal from '../deleteDeploymentModal.svelte';
+    import CancelDeploymentModal from '../cancelDeploymentModal.svelte';
+    import RedeployModal from '../../../redeployModal.svelte';
+    import ActivateDeploymentModal from '../../../activateDeploymentModal.svelte';
+    import { protocol } from '$routes/(console)/store';
+    import { Accordion } from '@appwrite.io/pink-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import LogsTimer from '../../../(components)/logsTimer.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { page } from '$app/state';
+
+    let { data } = $props();
+
+    let deployment = $derived(data.deployment);
+
+    let showRedeploy = $state(false);
+    let showActivate = $state(false);
+    let showDelete = $state(false);
+    let showCancel = $state(false);
+
+    onMount(async () => {
+        sdk.forConsole.client.subscribe(
+            'console',
+            async (response: RealtimeResponseEvent<Models.Deployment>) => {
+                if (
+                    response.events.includes(
+                        `sites.${page.params.site}.deployments.${page.params.deployment}.update`
+                    )
+                ) {
+                    invalidate(Dependencies.DEPLOYMENTS);
+                }
+            }
+        );
+    });
+</script>
+
+<Container>
+    <SiteCard {deployment} proxyRuleList={data.proxyRuleList}>
+        <svelte:fragment slot="footer">
+            {#if deployment?.status === 'ready' && data.proxyRuleList?.total}
+                <Button href={`${$protocol}${data.proxyRuleList.rules[0]?.domain}`} external>
+                    Visit
+                </Button>
+            {/if}
+
+            <Button secondary on:click={() => (showRedeploy = true)}>Redeploy</Button>
+            <DeploymentActionMenu
+                inCard
+                {deployment}
+                selectedDeployment={deployment}
+                bind:showRedeploy
+                bind:showActivate
+                bind:showDelete
+                bind:showCancel
+                activeDeployment={data.site.deploymentId} />
+        </svelte:fragment>
+    </SiteCard>
+    <Card padding="s">
+        <Accordion
+            title="Deployment logs"
+            badge={capitalize(deployment.status)}
+            open
+            badgeType={badgeTypeDeployment(deployment.status)}
+            hideDivider>
+            <Logs {deployment} hideTitle hideScrollButtons fullHeight />
+            <svelte:fragment slot="end">
+                <LogsTimer status={deployment.status} {deployment} />
+            </svelte:fragment>
+        </Accordion>
+    </Card>
+</Container>
+
+{#if showDelete}
+    <DeleteDeploymentModal
+        selectedDeployment={deployment}
+        bind:showDelete
+        activeDeployment={data.site?.deploymentId} />
+{/if}
+
+<CancelDeploymentModal selectedDeployment={deployment} bind:showCancel />
+<RedeployModal
+    selectedDeploymentId={deployment.$id}
+    bind:show={showRedeploy}
+    redirect
+    site={data.site} />
+{#if showActivate}
+    <ActivateDeploymentModal
+        siteId={data.site.$id}
+        selectedDeploymentId={deployment.$id}
+        bind:show={showActivate} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts
new file mode 100644
index 000000000..44d1e0a2c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts
@@ -0,0 +1,32 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+import { Query } from '@appwrite.io/console';
+import { RuleType } from '$lib/stores/sdk';
+import { DeploymentResourceType } from '$lib/stores/sdk';
+
+export const load: PageLoad = async ({ params, depends, parent }) => {
+    depends(Dependencies.DEPLOYMENT);
+
+    const { site } = await parent();
+
+    const [deployment, proxyRuleList] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .sites.getDeployment(params.site, params.deployment),
+        sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.DEPLOYMENT),
+                Query.equal('deploymentId', params.deployment),
+                Query.equal('deploymentResourceType', DeploymentResourceType.SITE),
+                Query.equal('deploymentResourceId', params.site)
+            ])
+    ]);
+
+    return {
+        deployment,
+        site,
+        proxyRuleList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte
new file mode 100644
index 000000000..801ab7f80
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../../store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites`,
+            title: 'Sites'
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}`,
+            title: page.params.site
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`,
+            title: 'Deployments'
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments/deployment-${page.params.deployment}`,
+            title: page.params.deployment
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte
new file mode 100644
index 000000000..3210838fa
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Id } from '$lib/components';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { deployment } from './store';
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`}>
+            Deployment
+        </CoverTitle>
+        <Id value={$deployment.$id}>{$deployment.$id}</Id>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts
new file mode 100644
index 000000000..337a6b456
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts
@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import type { Models } from '@appwrite.io/console';
+import { derived } from 'svelte/store';
+
+export const deployment = derived(page, ($page) => $page.data.deployment as Models.Deployment);
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
new file mode 100644
index 000000000..32f018523
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { InputSelect } from '$lib/elements/forms';
+    import { toLocaleDate } from '$lib/helpers/date';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { SiteUsageRange } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { UsageCard } from '$lib/components';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+
+    const now = new Date();
+    const rangeOptions = [
+        { value: SiteUsageRange.TwentyFourHours, label: 'Last 24 hours' },
+        { value: SiteUsageRange.ThirtyDays, label: 'Last 30 days' },
+        { value: SiteUsageRange.NinetyDays, label: 'Last 90 days' }
+    ];
+
+    let range = SiteUsageRange.ThirtyDays;
+    let metrics: { id: string; value: string | null; description: string }[] = [
+        {
+            id: 'buildsTotal',
+            value: null,
+            description: 'Total builds count'
+        },
+        {
+            id: 'buildsStorageTotal',
+            value: null,
+            description: 'Total builds size'
+        },
+        {
+            id: 'buildsTimeTotal',
+            value: null,
+            description: 'Total builds time'
+        },
+        {
+            id: 'buildsTimeAverage',
+            value: null,
+            description: 'Avg. builds time'
+        },
+        {
+            id: 'buildsSuccessTotal',
+            value: null,
+            description: 'Successful'
+        },
+        {
+            id: 'buildsFailedTotal',
+            value: null,
+            description: 'Failed '
+        }
+    ];
+    onMount(async () => {
+        await fetchUsage();
+    });
+
+    async function fetchUsage() {
+        // Add timeout to make it look nicer
+        setTimeout(async () => {
+            metrics.forEach((metric) => {
+                metric.value = null;
+            });
+            metrics = metrics;
+
+            try {
+                const usage = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .sites.getUsage(page.params.site, range);
+                metrics = metrics.map((metric) => {
+                    if (metric.id === 'buildsStorageTotal') {
+                        const size = humanFileSize(usage[metric.id]);
+
+                        metric.value = parseInt(size?.value) > 0 ? size.value + size.unit : '-';
+                    } else if (
+                        metric.id === 'buildsTimeTotal' ||
+                        metric.id === 'buildsTimeAverage'
+                    ) {
+                        const seconds = usage[metric.id] > 0 ? usage[metric.id] / 1000 : 0;
+                        const time = formatTimeDetailed(seconds);
+
+                        metric.value = time !== '0s' ? time : '-';
+                    } else {
+                        metric.value = usage[metric.id] ?? '-';
+                    }
+                    return metric;
+                });
+                metrics = metrics;
+                console.log(usage);
+            } catch (error) {
+                console.log(error);
+            }
+        }, 800);
+    }
+</script>
+
+<Layout.Stack gap="xl">
+    <Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-end" wrap="wrap">
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+            Metrics for {range !== SiteUsageRange.TwentyFourHours
+                ? `${toLocaleDate(
+                      new Date(
+                          now.getTime() - parseInt(range.split('d')[0]) * 24 * 60 * 60 * 1000
+                      ).toString()
+                  )} to`
+                : ''}
+            {toLocaleDate(now.toString())}
+        </Typography.Text>
+        <div>
+            <InputSelect
+                id="range"
+                bind:value={range}
+                options={rangeOptions}
+                on:change={fetchUsage} />
+        </div>
+    </Layout.Stack>
+    <Layout.Grid gap="m" columnsL={2} columns={1}>
+        <Layout.Stack direction="row" gap="m">
+            {#each metrics.slice(0, 3) as metric}
+                <UsageCard description={metric.description} bind:value={metric.value} />
+            {/each}
+        </Layout.Stack>
+        <Layout.Stack direction="row" gap="m">
+            {#each metrics.slice(3) as metric}
+                <UsageCard description={metric.description} bind:value={metric.value} />
+            {/each}
+        </Layout.Stack>
+    </Layout.Grid>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/store.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/store.ts
new file mode 100644
index 000000000..853decfdf
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/store.ts
@@ -0,0 +1,110 @@
+import { writable, type Writable } from 'svelte/store';
+import type { Column } from '$lib/helpers/types';
+
+export const showCreateDeployment: Writable<boolean> = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Deployment ID', type: 'string', width: { min: 200, max: 250 } },
+    {
+        id: 'status',
+        title: 'Status',
+        type: 'enum',
+        width: { min: 90, max: 130 },
+        array: true,
+        format: 'enum',
+        elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed']
+    },
+
+    {
+        id: 'buildDuration',
+        title: 'Build duration',
+        type: 'integer',
+        width: { min: 110, max: 190 },
+
+        elements: [
+            {
+                value: 15,
+                label: 'more than 15 seconds'
+            },
+            {
+                value: 60,
+                label: 'more than 1 minute'
+            },
+            {
+                value: 5 * 60,
+                label: 'more than 5 minutes'
+            }
+        ],
+        filter: false
+    },
+    {
+        id: 'totalSize',
+        title: 'Total size',
+        type: 'integer',
+        width: { min: 110, max: 190 },
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'sourceSize',
+        title: 'Source size',
+        type: 'integer',
+        hide: true,
+        width: { min: 110, max: 190 },
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'buildSize',
+        title: 'Build size',
+        type: 'integer',
+        hide: true,
+        filter: false,
+        width: { min: 90, max: 190 }
+    },
+    {
+        id: 'type',
+        title: 'Source',
+        type: 'string',
+        width: { min: 90, max: 160 },
+        array: true,
+        format: 'enum',
+        elements: [
+            { value: 'manual', label: 'Manual' },
+            { value: 'cli', label: 'CLI' },
+            { value: 'vcs', label: 'Git' }
+        ]
+    },
+    {
+        id: '$updatedAt',
+        title: 'Updated',
+        type: 'datetime',
+        width: { min: 150, max: 180 },
+
+        format: 'datetime'
+    }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte
new file mode 100644
index 000000000..3d0ac2bf5
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+    import { Id } from '$lib/components';
+    import type { PageData } from './$types';
+    import { type Models } from '@appwrite.io/console';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
+    import { timer } from '$lib/actions/timer';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { page } from '$app/state';
+    import Delete from './deleteDeploymentModal.svelte';
+    import RedeployModal from '../../redeployModal.svelte';
+    import Cancel from './cancelDeploymentModal.svelte';
+    import { base } from '$app/paths';
+    import { Layout, Status, Table } from '@appwrite.io/pink-svelte';
+    import { columns } from './store';
+    import ActivateDeploymentModal from '../../activateDeploymentModal.svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import DeploymentActionMenu from '../../(components)/deploymentActionMenu.svelte';
+    import { deploymentStatusConverter } from '$lib/stores/git';
+
+    export let data: PageData;
+
+    let showDelete = false;
+    let showActivate = false;
+    let showRedeploy = false;
+    let showCancel = false;
+
+    let selectedDeployment: Models.Deployment = null;
+</script>
+
+<Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>
+                {title}
+            </Table.Header.Cell>
+        {/each}
+        <Table.Header.Cell column="actions" {root} />
+    </svelte:fragment>
+    {#each data.deploymentList.deployments as deployment}
+        <Table.Row.Link
+            {root}
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments/deployment-${deployment.$id}`}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Id value={deployment.$id}>{deployment.$id}</Id>
+                        {/key}
+                    {:else if column.id === 'status'}
+                        {@const status = deployment.status}
+                        {#if data?.activeDeployment?.$id === deployment?.$id}
+                            <Status status="complete" label="Active" />
+                        {:else}
+                            <Status
+                                status={deploymentStatusConverter(status)}
+                                label={capitalize(status)} />
+                        {/if}
+                    {:else if column.id === 'type'}
+                        <DeploymentSource {deployment} />
+                    {:else if column.id === '$updatedAt'}
+                        <DeploymentCreatedBy {deployment} />
+                    {:else if column.id === 'buildDuration'}
+                        {#if ['waiting'].includes(deployment.status)}
+                            -
+                        {:else if ['processing', 'building'].includes(deployment.status)}
+                            <span use:timer={{ start: deployment.$createdAt }}></span>
+                        {:else}
+                            {formatTimeDetailed(deployment.buildDuration)}
+                        {/if}
+                    {:else if column.id === 'totalSize'}
+                        {calculateSize(deployment?.totalSize ?? 0)}
+                    {:else if column.id === 'sourceSize'}
+                        {calculateSize(deployment.sourceSize)}
+                    {:else if column.id === 'buildSize'}
+                        {calculateSize(deployment.buildSize)}
+                    {/if}
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="actions" {root}>
+                <Layout.Stack alignItems="flex-end">
+                    <DeploymentActionMenu
+                        {deployment}
+                        bind:selectedDeployment
+                        bind:showRedeploy
+                        bind:showActivate
+                        bind:showDelete
+                        bind:showCancel
+                        activeDeployment={data.site.deploymentId} />
+                </Layout.Stack>
+            </Table.Cell>
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
+
+{#if selectedDeployment}
+    <Delete {selectedDeployment} activeDeployment={data.site.deploymentId} bind:showDelete />
+
+    <Cancel {selectedDeployment} bind:showCancel />
+    <RedeployModal
+        selectedDeploymentId={selectedDeployment.$id}
+        bind:show={showRedeploy}
+        site={data.site} />
+{/if}
+{#if selectedDeployment && showActivate}
+    <ActivateDeploymentModal
+        siteId={data.site.$id}
+        selectedDeploymentId={selectedDeployment.$id}
+        bind:show={showActivate} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte
new file mode 100644
index 000000000..68f9fc9d9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+    import { Badge, Empty, Layout, Status, Table, Typography } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { type Models } from '@appwrite.io/console';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
+    import Id from '$lib/components/id.svelte';
+    import RedeployModal from '../redeployModal.svelte';
+    import { Card } from '$lib/components';
+    import ActivateDeploymentModal from '../activateDeploymentModal.svelte';
+    import CancelDeploymentModal from './deployments/cancelDeploymentModal.svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import DeleteDeploymentModal from './deployments/deleteDeploymentModal.svelte';
+    import DeploymentActionMenu from '../(components)/deploymentActionMenu.svelte';
+    import { deploymentStatusConverter } from '$lib/stores/git';
+
+    export let site: Models.Site;
+    export let activeDeployment: Models.Deployment;
+    export let deploymentList: Models.DeploymentList = undefined;
+
+    let showActivate = false;
+    let showRedeploy = false;
+    let showCancel = false;
+    let showDelete = false;
+    let selectedDeployment: Models.Deployment = null;
+</script>
+
+<Layout.Stack style="overflow-x: auto;">
+    <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Layout.Stack gap="xs" direction="row" alignItems="center" inline>
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+                Deployments
+            </Typography.Text><Badge
+                variant="secondary"
+                content={deploymentList?.total.toString()}
+                size="s" />
+        </Layout.Stack>
+        <Button
+            secondary
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`}>
+            View all
+        </Button>
+    </Layout.Stack>
+    {#if deploymentList?.total}
+        <Table.Root
+            columns={[
+                { id: '$id', width: 200 },
+                { id: 'status', width: { min: 120 } },
+                { id: 'source', width: { min: 120 } },
+                { id: '$updatedAt', width: { min: 120 } },
+                { id: 'actions', width: 50 }
+            ]}
+            let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell {root}>Deployment ID</Table.Header.Cell>
+                <Table.Header.Cell {root}>Status</Table.Header.Cell>
+                <Table.Header.Cell {root}>Source</Table.Header.Cell>
+                <Table.Header.Cell {root}>Updated</Table.Header.Cell>
+                <Table.Header.Cell {root} />
+            </svelte:fragment>
+            {#each deploymentList?.deployments as deployment (deployment.$id)}
+                <Table.Row.Link
+                    {root}
+                    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments/deployment-${deployment.$id}`}>
+                    <Table.Cell {root}>
+                        <Id value={deployment.$id}>{deployment.$id}</Id>
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        {@const status = deployment.status}
+                        {#if activeDeployment?.$id === deployment?.$id}
+                            <Status status="complete" label="Active" />
+                        {:else}
+                            <Status
+                                status={deploymentStatusConverter(status)}
+                                label={capitalize(status)} />
+                        {/if}
+                    </Table.Cell>
+
+                    <Table.Cell {root}>
+                        <DeploymentSource {deployment} />
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        <DeploymentCreatedBy {deployment} />
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        <Layout.Stack alignItems="flex-end">
+                            <DeploymentActionMenu
+                                {deployment}
+                                bind:selectedDeployment
+                                bind:showRedeploy
+                                bind:showActivate
+                                bind:showDelete
+                                bind:showCancel
+                                activeDeployment={site.deploymentId} />
+                        </Layout.Stack>
+                    </Table.Cell>
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
+    {:else}
+        <Card padding="l" radius="s">
+            <Empty title="No deployments exist" type="secondary">
+                <span slot="description">
+                    Deployments are created when you deploy your site. You can deploy your site
+                    using the CLI, Git, or manually.
+                </span>
+            </Empty>
+        </Card>
+    {/if}
+</Layout.Stack>
+
+{#if selectedDeployment && showRedeploy}
+    <RedeployModal {site} selectedDeploymentId={selectedDeployment.$id} bind:show={showRedeploy} />
+{/if}
+
+{#if selectedDeployment && showActivate}
+    <ActivateDeploymentModal
+        siteId={site.$id}
+        selectedDeploymentId={selectedDeployment.$id}
+        bind:show={showActivate} />
+{/if}
+
+{#if selectedDeployment && showCancel}
+    <CancelDeploymentModal {selectedDeployment} bind:showCancel />
+{/if}
+{#if selectedDeployment && showDelete}
+    <DeleteDeploymentModal
+        {selectedDeployment}
+        bind:showDelete
+        activeDeployment={site?.deploymentId} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte
new file mode 100644
index 000000000..23537ff99
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js';
+    import { Button } from '$lib/elements/forms';
+    import Container from '$lib/layout/container.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import SearchQuery from '$lib/components/searchQuery.svelte';
+    import { app } from '$lib/stores/app';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import Table from './table.svelte';
+
+    export let data;
+</script>
+
+<Container>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery placeholder="Search domain" />
+        <Button
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}
+            on:click={() => {
+                trackEvent(Click.DomainCreateClick, {
+                    source: 'sites_domain_overview'
+                });
+            }}>
+            <Icon icon={IconPlus} size="s" />
+            Add domain
+        </Button>
+    </Layout.Stack>
+
+    {#if data.domains.total}
+        <Table domains={data.domains} />
+
+        <PaginationWithLimit
+            name="Domains"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.domains.total} />
+    {:else if data?.search}
+        <EmptySearch hidePages bind:search={data.search} target="domains" hidePagination>
+            <Button
+                secondary
+                on:click={() => {
+                    data.search = '';
+                }}>Clear search</Button>
+        </EmptySearch>
+    {:else}
+        <Card.Base padding="none">
+            <Empty
+                src={$app.themeInUse === 'dark'
+                    ? `${base}/images/domains/empty-domain-dark.svg`
+                    : `${base}/images/domains/empty-domain-light.svg`}
+                title="Use a custom domain for your site"
+                description="Give your site a unique identity and make it easier to find by by assigning it a custom domain.">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        href="https://appwrite.io/docs/products/sites/domains#add-a-custom-domain"
+                        text
+                        event="empty_documentation"
+                        size="s"
+                        ariaLabel="add domain">Documentation</Button>
+
+                    <Button
+                        secondary
+                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}
+                        size="s">
+                        Add domain
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
+    {/if}
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.ts
new file mode 100644
index 000000000..74deea89d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.ts
@@ -0,0 +1,44 @@
+import { Query } from '@appwrite.io/console';
+import { RuleTrigger, sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { queries, queryParamToMap } from '$lib/components/filters';
+import { RuleType } from '$lib/stores/sdk';
+import { DeploymentResourceType } from '$lib/stores/sdk';
+
+export const load = async ({ params, depends, url, route }) => {
+    depends(Dependencies.SITES_DOMAINS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+    const search = getSearch(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    return {
+        offset,
+        limit,
+        query,
+        search,
+        domains: await sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules(
+                [
+                    Query.or([
+                        Query.equal('type', RuleType.DEPLOYMENT),
+                        Query.equal('type', RuleType.REDIRECT)
+                    ]),
+                    Query.equal('deploymentResourceType', DeploymentResourceType.SITE),
+                    Query.equal('deploymentResourceId', params.site),
+                    Query.equal('trigger', RuleTrigger.MANUAL),
+                    Query.limit(limit),
+                    Query.offset(offset),
+                    Query.orderDesc(''),
+                    ...parsedQueries.values()
+                ],
+                search || undefined
+            )
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
new file mode 100644
index 000000000..6de6e216f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Button, Form, InputDomain, InputSelect, InputURL } from '$lib/elements/forms';
+    import { Wizard } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Fieldset, Layout, Tooltip, Icon, Input, Alert } from '@appwrite.io/pink-svelte';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { sortBranches } from '$lib/stores/vcs';
+    import { protocol } from '$routes/(console)/store';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { LabelCard } from '$lib/components';
+    import {
+        Adapter,
+        BuildRuntime,
+        Framework,
+        StatusCode,
+        type Models
+    } from '@appwrite.io/console';
+    import { statusCodeOptions } from '$lib/stores/domains';
+    import { writable } from 'svelte/store';
+    import { onMount } from 'svelte';
+    import { ConnectRepoModal } from '$lib/components/git/index.js';
+
+    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`;
+
+    let { data } = $props();
+
+    let formComponent: Form;
+    let isSubmitting = $state(writable(false));
+    let showConnectRepo = $state(false);
+    let behaviour: 'REDIRECT' | 'BRANCH' | 'ACTIVE' = $state('ACTIVE');
+    let domainName = $state('');
+    let redirect: string = $state(null);
+    let statusCode = $state(307);
+    let branch: string = $state(null);
+
+    onMount(() => {
+        if (
+            page.url.searchParams.has('connectRepo') &&
+            page.url.searchParams.get('connectRepo') === 'true'
+        ) {
+            showConnectRepo = true;
+        }
+        if (page.url.searchParams.has('domain')) {
+            domainName = page.url.searchParams.get('domain');
+        }
+    });
+
+    async function addDomain() {
+        try {
+            let rule: Models.ProxyRule;
+            if (behaviour === 'BRANCH') {
+                rule = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createSiteRule(domainName, page.params.site, branch);
+            } else if (behaviour === 'REDIRECT') {
+                const sc = Object.values(StatusCode).find((code) => parseInt(code) === statusCode);
+                rule = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createRedirectRule(domainName, $protocol + redirect, sc);
+            } else if (behaviour === 'ACTIVE') {
+                rule = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.createSiteRule(domainName, page.params.site);
+            }
+            if (rule?.status === 'verified') {
+                await goto(routeBase);
+                await invalidate(Dependencies.SITES_DOMAINS);
+            } else {
+                await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
+                await invalidate(Dependencies.SITES_DOMAINS);
+            }
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function connect(selectedInstallationId: string, selectedRepository: string) {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    data.site.$id,
+                    data.site.name,
+                    data.site.framework as Framework,
+                    data.site.enabled,
+                    data.site.logging || undefined,
+                    data.site.timeout,
+                    data.site.installCommand,
+                    data.site.buildCommand,
+                    data.site.outputDirectory,
+                    data.site.buildRuntime as BuildRuntime,
+                    data.site.adapter as Adapter,
+                    data.site.fallbackFile,
+                    selectedInstallationId,
+                    selectedRepository,
+                    'main',
+                    undefined,
+                    undefined,
+                    undefined
+                );
+            invalidate(Dependencies.SITE);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+<Wizard title="Add domain" href={routeBase} column columnSize="s" confirmExit>
+    <Form bind:this={formComponent} onSubmit={addDomain} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Domain">
+                <!-- <Input.ComboBox
+                    label="Domain"
+                    id="domain"
+                    name="domain"
+                    bind:value={domain}
+                    options={data.domains.rules.map((domain) => ({
+                        label: domain.domain,
+                        value: domain.domain
+                    }))}
+                    required
+                    placeholder="appwrite.example.com" /> -->
+                <InputDomain
+                    label="Domain"
+                    id="domain"
+                    bind:value={domainName}
+                    required
+                    placeholder="appwrite.example.com" />
+            </Fieldset>
+
+            <Layout.Grid columns={3} columnsXS={1}>
+                <LabelCard value="ACTIVE" bind:group={behaviour} title="Active deployment">
+                    Point this domain to the latest deployed version.
+                </LabelCard>
+                <LabelCard value="BRANCH" bind:group={behaviour} title="Git branch">
+                    Point this domain to a specific branch in your repository.
+                </LabelCard>
+                <LabelCard value="REDIRECT" bind:group={behaviour} title="Redirect">
+                    Forward all traffic from this domain to another URL.
+                </LabelCard>
+            </Layout.Grid>
+
+            {#if behaviour === 'BRANCH'}
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="xl">
+                        {#if data.site?.providerRepositoryId}
+                            {@const sortedBranches = sortBranches(data.branches.branches)}
+                            {@const options = sortedBranches.map((branch) => ({
+                                label: branch.name,
+                                value: branch.name
+                            }))}
+                            <Layout.Stack gap="s">
+                                <InputSelect
+                                    {options}
+                                    label="Production branch"
+                                    id="branch"
+                                    required
+                                    bind:value={branch}
+                                    placeholder="Select branch" />
+                                {#if !data.branches?.total}
+                                    <Input.Helper state="default">
+                                        No branches found in the selected repository. Create a
+                                        branch to see it here.
+                                    </Input.Helper>
+                                {/if}
+                            </Layout.Stack>
+                        {:else}
+                            <InputSelect
+                                disabled
+                                options={[{ label: 'main', value: 'main' }]}
+                                label="Production branch"
+                                id="branch"
+                                required
+                                value="main"
+                                placeholder="Select branch" />
+                            <Alert.Inline title=" There is no repository connected to your site">
+                                <Layout.Stack>
+                                    <p>
+                                        The domain will be connected to your active deployment.
+                                        Connect your Git repository to link a production branch.
+                                    </p>
+                                    <div>
+                                        <Button compact on:click={() => (showConnectRepo = true)}>
+                                            Connect repository
+                                        </Button>
+                                    </div>
+                                </Layout.Stack>
+                            </Alert.Inline>
+                        {/if}
+                    </Layout.Stack>
+                </Fieldset>
+            {:else if behaviour === 'REDIRECT'}
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="xl">
+                        <InputURL
+                            label="Redirect to"
+                            id="redirect"
+                            placeholder="https://appwrite.io/docs"
+                            bind:value={redirect}
+                            required>
+                            <Tooltip slot="info">
+                                <Icon icon={IconInfo} size="s" />
+                                <span slot="tooltip"> Redirect your domain to this URL.</span>
+                            </Tooltip>
+                        </InputURL>
+                        <InputSelect
+                            options={statusCodeOptions}
+                            label="Status code"
+                            id="code"
+                            required
+                            bind:value={statusCode}
+                            placeholder="Select status code" />
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button secondary href={routeBase}>Cancel</Button>
+        <Button on:click={() => formComponent.triggerSubmit()} bind:disabled={$isSubmitting}>
+            Add
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+{#if showConnectRepo}
+    <ConnectRepoModal
+        bind:show={showConnectRepo}
+        {connect}
+        product="sites"
+        onlyExisting
+        callbackState={{ connectRepo: 'true' }} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts
new file mode 100644
index 000000000..86f69c2f4
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts
@@ -0,0 +1,31 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { RuleTrigger, RuleType } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants.js';
+
+export const load = async ({ parent, depends, params }) => {
+    const { site } = await parent();
+    depends(Dependencies.DOMAINS, Dependencies.SITES_DOMAINS);
+
+    const [rules, installations] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .proxy.listRules([
+                Query.equal('type', RuleType.DEPLOYMENT),
+                Query.equal('trigger', RuleTrigger.MANUAL)
+            ]),
+        sdk.forProject(params.region, params.project).vcs.listInstallations()
+    ]);
+
+    return {
+        site,
+        rules,
+        installations,
+        branches:
+            site?.installationId && site?.providerRepositoryId
+                ? await sdk
+                      .forProject(params.region, params.project)
+                      .vcs.listRepositoryBranches(site.installationId, site.providerRepositoryId)
+                : undefined
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte
new file mode 100644
index 000000000..d19eb28f2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+    import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Card,
+        Divider,
+        Fieldset,
+        Icon,
+        Layout,
+        Tabs,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { organization } from '$lib/stores/organization';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { isCloud } from '$lib/system';
+    import { page } from '$app/state';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { base } from '$app/paths';
+    import { writable } from 'svelte/store';
+    import { consoleVariables } from '$routes/(console)/store';
+    import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
+    import RecordTable from '$lib/components/domains/recordTable.svelte';
+
+    let { data } = $props();
+
+    const ruleId = page.url.searchParams.get('rule');
+    let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3);
+
+    let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
+    $effect(() => {
+        if ($consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
+            selectedTab = 'cname';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_A) {
+            selectedTab = 'a';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_AAAA) {
+            selectedTab = 'aaaa';
+        }
+    });
+
+    let verified = $state(false);
+
+    let routeBase = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`;
+    let isSubmitting = $state(writable(false));
+
+    async function verify() {
+        const isNewDomain =
+            data.domainsList.domains.findIndex((rule) => rule.domain === page.params.domain) === -1;
+        try {
+            if (selectedTab !== 'nameserver') {
+                const ruleData = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .proxy.updateRuleVerification(ruleId);
+                verified = ruleData.status === 'verified';
+            } else if (isNewDomain && isCloud) {
+                const domainData = await sdk.forConsole.domains.create(
+                    $organization.$id,
+                    page.params.domain
+                );
+                verified = domainData.nameservers.toLocaleLowerCase() === 'appwrite';
+            }
+
+            addNotification({
+                type: 'success',
+                message: 'Domain added successfully'
+            });
+            await goto(routeBase);
+            await invalidate(Dependencies.DOMAINS);
+            await invalidate(Dependencies.SITES_DOMAINS);
+        } catch (error) {
+            verified = false;
+            isSubmitting.set(false);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function back() {
+        if (ruleId) {
+            await sdk.forProject(page.params.region, page.params.project).proxy.deleteRule(ruleId);
+        }
+        await goto(`${routeBase}/add-domain?domain=${page.params.domain}`);
+    }
+</script>
+
+<Wizard title="Add domain" href={routeBase} column columnSize="s">
+    <Form onSubmit={verify} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Card.Base radius="s" padding="s">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack direction="row" alignItems="center" gap="xs">
+                        <Icon icon={IconGlobeAlt} color="--fgcolor-neutral-primary" />
+
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
+                            {page.params.domain}
+                        </Typography.Text>
+                    </Layout.Stack>
+                    <Button secondary on:click={back}>Change</Button>
+                </Layout.Stack>
+            </Card.Base>
+
+            <Fieldset legend="Verification">
+                <Layout.Stack gap="xl">
+                    <div>
+                        <Tabs.Root variant="secondary" let:root>
+                            {#if isSubDomain && !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && $consoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'cname')}
+                                    active={selectedTab === 'cname'}>
+                                    CNAME
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if isCloud}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'nameserver')}
+                                    active={selectedTab === 'nameserver'}>
+                                    Nameservers
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'a')}
+                                    active={selectedTab === 'a'}>
+                                    A
+                                </Tabs.Item.Button>
+                            {/if}
+                            {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'}
+                                <Tabs.Item.Button
+                                    {root}
+                                    on:click={() => (selectedTab = 'aaaa')}
+                                    active={selectedTab === 'aaaa'}>
+                                    AAAA
+                                </Tabs.Item.Button>
+                            {/if}
+                        </Tabs.Root>
+                        <Divider />
+                    </div>
+                    {#if selectedTab === 'nameserver'}
+                        <NameserverTable domain={page.params.domain} {verified} />
+                    {:else}
+                        <RecordTable domain={page.params.domain} {verified} variant={selectedTab} />
+                    {/if}
+                    <Divider />
+                    <Layout.Stack direction="row" justifyContent="flex-end">
+                        <div>
+                            <Button submit disabled={$isSubmitting}>Verify</Button>
+                        </div>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.ts
new file mode 100644
index 000000000..db8caef3a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.ts
@@ -0,0 +1,24 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants.js';
+import { isCloud } from '$lib/system';
+import type { Domain, DomainsList } from '$lib/sdk/domains.js';
+
+export const load = async ({ parent, depends, params }) => {
+    const { site } = await parent();
+    depends(Dependencies.DOMAINS);
+
+    let domain: Domain;
+    let domainsList: DomainsList;
+    if (isCloud) {
+        [domain, domainsList] = await Promise.all([
+            sdk.forConsole.domains.get(params.domain),
+            sdk.forConsole.domains.list()
+        ]);
+    }
+
+    return {
+        site,
+        domain,
+        domainsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
new file mode 100644
index 000000000..3cfc0d6ad
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputText } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { page } from '$app/state';
+    import { Layout, Status, Typography } from '@appwrite.io/pink-svelte';
+    import { ConsoleResourceType, ID } from '@appwrite.io/console';
+    import { debounce } from '$lib/helpers/debounce';
+
+    export let show = false;
+
+    let baseDomain = ID.unique();
+    let domain = baseDomain;
+    let domainStatus: 'complete' | 'failed' | 'pending' = 'complete';
+
+    let error: string = null;
+    async function onSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.createSiteRule(
+                    `${domain}.${$consoleVariables._APP_DOMAIN_SITES}`,
+                    page.params.site
+                );
+
+            await invalidate(Dependencies.SITES_DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Preview domain has been added'
+            });
+            trackEvent(Submit.DomainCreate);
+        } catch (e) {
+            error = e;
+            trackError(e, Submit.DomainCreate);
+        }
+    }
+
+    function setDomainLabel(status: typeof domainStatus) {
+        switch (status) {
+            case 'complete':
+                return 'Domain is available';
+            case 'failed':
+                return 'Domain is not available';
+            case 'pending':
+                return 'Checking domain availability';
+        }
+    }
+
+    const checkDomain = debounce(async (value: string) => {
+        if (!value) {
+            domainStatus = 'failed';
+            return;
+        }
+        try {
+            await sdk.forConsole.console.getResource(
+                `${value}.${$consoleVariables._APP_DOMAIN_SITES}`,
+                ConsoleResourceType.Rules
+            );
+            domainStatus = 'complete';
+            baseDomain = domain;
+        } catch {
+            domainStatus = 'failed';
+        } finally {
+            baseDomain = domain;
+        }
+    }, 500);
+
+    $: if (domain !== baseDomain) {
+        domainStatus = 'pending';
+        checkDomain(domain);
+    }
+
+    $: if (!show) {
+        error = null;
+    }
+</script>
+
+<Modal title="Add preview domain" bind:show {onSubmit} bind:error>
+    <span slot="description">
+        Get an auto-generated domain to quickly access your project. You can customize its prefix.
+    </span>
+
+    <Layout.Stack>
+        <Layout.Stack gap="s">
+            <InputText id="domain" placeholder="my-domain" bind:value={domain}>
+                <svelte:fragment slot="end">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        .{$consoleVariables._APP_DOMAIN_SITES}
+                    </Typography.Text>
+                </svelte:fragment>
+            </InputText>
+            <Status status={domainStatus} label={setDomainLabel(domainStatus)}></Status>
+        </Layout.Stack>
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Add</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/deleteDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
new file mode 100644
index 000000000..4e6dba7c6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import type { Models } from '@appwrite.io/console';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { Confirm } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
+
+    let {
+        show = $bindable(),
+        selectedDomain
+    }: {
+        show: boolean;
+        selectedDomain: Models.ProxyRule;
+    } = $props();
+
+    let error: string = $state(null);
+
+    async function deleteDomain() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.deleteRule(selectedDomain.$id);
+            await invalidate(Dependencies.SITES_DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Domain has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+</script>
+
+<Confirm title="Delete domain" bind:open={show} onSubmit={deleteDomain} bind:error confirmDeletion>
+    {#if selectedDomain}
+        <Typography.Text variant="m-400">
+            Are you sure you want to delete this domain? You will no longer be able to view your
+            site by visiting:
+        </Typography.Text>
+        <Typography.Text variant="m-500">
+            {selectedDomain.domain}
+        </Typography.Text>
+    {/if}
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/retryDomainModal.svelte
new file mode 100644
index 000000000..36e75c465
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/retryDomainModal.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@appwrite.io/console';
+    import { Divider, Tabs } from '@appwrite.io/pink-svelte';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { isCloud } from '$lib/system';
+    import { page } from '$app/state';
+    import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
+    import RecordTable from '$lib/components/domains/recordTable.svelte';
+
+    let {
+        show = $bindable(false),
+        selectedDomain
+    }: {
+        show: boolean;
+        selectedDomain: Models.ProxyRule;
+    } = $props();
+
+    let isSubDomain = $derived.by(() =>
+        selectedDomain?.domain?.length ? selectedDomain?.domain?.split('.')?.length >= 3 : false
+    );
+
+    let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
+    $effect(() => {
+        if ($consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
+            selectedTab = 'cname';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_A) {
+            selectedTab = 'a';
+        } else if ($consoleVariables._APP_DOMAIN_TARGET_AAAA) {
+            selectedTab = 'aaaa';
+        }
+    });
+
+    let verified = $state(false);
+
+    let error = $state(null);
+    async function retryDomain() {
+        try {
+            const domain = await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.updateRuleVerification(selectedDomain.$id);
+            await invalidate(Dependencies.SITES_DOMAINS);
+            verified = domain.status === 'verified';
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `${selectedDomain.domain} has been deleted`
+            });
+            trackEvent(Submit.DomainDelete);
+        } catch (e) {
+            error = e;
+            trackError(e, Submit.DomainDelete);
+        }
+    }
+
+    $effect(() => {
+        if (!show) {
+            error = null;
+        }
+    });
+</script>
+
+<Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
+    <div>
+        <Tabs.Root variant="secondary" let:root>
+            {#if isSubDomain && !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && $consoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'cname')}
+                    active={selectedTab === 'cname'}>
+                    CNAME
+                </Tabs.Item.Button>
+            {/if}
+            {#if isCloud}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'nameserver')}
+                    active={selectedTab === 'nameserver'}>
+                    Nameservers
+                </Tabs.Item.Button>
+            {/if}
+            {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'a')}
+                    active={selectedTab === 'a'}>
+                    A
+                </Tabs.Item.Button>
+            {/if}
+            {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'aaaa')}
+                    active={selectedTab === 'aaaa'}>
+                    AAAA
+                </Tabs.Item.Button>
+            {/if}
+        </Tabs.Root>
+        <Divider />
+    </div>
+    {#if selectedTab === 'nameserver'}
+        <NameserverTable domain={selectedDomain.domain} {verified} />
+    {:else}
+        <RecordTable domain={selectedDomain.domain} {verified} variant={selectedTab} />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Retry</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/store.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/store.ts
new file mode 100644
index 000000000..902fb3e3e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/store.ts
@@ -0,0 +1,19 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    {
+        id: 'domain',
+        title: 'Domain',
+        type: 'string',
+        format: 'string',
+        width: { min: 200 }
+    },
+
+    {
+        id: 'target',
+        title: 'Target',
+        type: 'string',
+        width: { min: 120, max: 400 }
+    }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte
new file mode 100644
index 000000000..4fe75d81a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { protocol } from '$routes/(console)/store';
+    import type { Models } from '@appwrite.io/console';
+    import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import DeleteDomainModal from './deleteDomainModal.svelte';
+    import RetryDomainModal from './retryDomainModal.svelte';
+    import { columns } from './store';
+
+    let {
+        domains
+    }: {
+        domains: Models.ProxyRuleList;
+    } = $props();
+
+    let showDelete = $state(false);
+    let showRetry = $state(false);
+    let selectedDomain: Models.ProxyRule = $state(null);
+</script>
+
+<Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>
+                {title}
+            </Table.Header.Cell>
+        {/each}
+        <Table.Header.Cell column="actions" {root} />
+    </svelte:fragment>
+    {#each domains.rules as domain}
+        <Table.Row.Base {root}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === 'domain'}
+                        <Link external href={`${$protocol}${domain.domain}`} variant="quiet" icon>
+                            <Typography.Text truncate>
+                                {domain.domain}
+                                {#if domain.status !== 'verified'}
+                                    <Badge
+                                        variant="secondary"
+                                        type="error"
+                                        content="Verification failed"
+                                        size="s" />
+                                {/if}
+                            </Typography.Text>
+                        </Link>
+                    {:else if column.id === 'target'}
+                        {domain?.redirectUrl
+                            ? 'Redirect to ' + domain.redirectUrl
+                            : domain?.deploymentVcsProviderBranch
+                              ? 'Deployed from' + domain.deploymentVcsProviderBranch
+                              : '-'}
+                    {/if}
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="actions" {root}>
+                <Layout.Stack direction="row" justifyContent="flex-end">
+                    <Popover let:toggle placement="bottom-start" padding="none">
+                        <Button
+                            text
+                            icon
+                            on:click={(e) => {
+                                e.preventDefault();
+                                toggle(e);
+                            }}>
+                            <Icon icon={IconDotsHorizontal} size="s" />
+                        </Button>
+
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root>
+                                {#if domain.status !== 'verified'}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconRefresh}
+                                        on:click={(e) => {
+                                            selectedDomain = domain;
+                                            showRetry = true;
+                                            toggle(e);
+                                        }}>
+                                        Retry
+                                    </ActionMenu.Item.Button>
+                                {/if}
+                                <ActionMenu.Item.Button
+                                    status="danger"
+                                    leadingIcon={IconTrash}
+                                    on:click={(e) => {
+                                        selectedDomain = domain;
+                                        showDelete = true;
+                                        toggle(e);
+                                        trackEvent(Click.DomainDeleteClick, {
+                                            source: 'sites_domain_overview'
+                                        });
+                                    }}>
+                                    Delete
+                                </ActionMenu.Item.Button>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </Layout.Stack>
+            </Table.Cell>
+        </Table.Row.Base>
+    {/each}
+</Table.Root>
+
+{#if showDelete}
+    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
+{/if}
+
+{#if showRetry}
+    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte
new file mode 100644
index 000000000..7cca03506
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Badge, Divider, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import OpenOnMobileModal from '../(components)/openOnMobileModal.svelte';
+    import { timeFromNow } from '$lib/helpers/date';
+    import { IconQrcode } from '@appwrite.io/pink-icons-svelte';
+    import { protocol } from '$routes/(console)/store';
+    import { type Models } from '@appwrite.io/console';
+    import { Link } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { Card, Trim } from '$lib/components';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { RuleTrigger } from '$lib/stores/sdk';
+
+    export let proxyRuleList: Models.ProxyRuleList;
+
+    let showDomainQR = false;
+    let selectedDomainURL: string;
+
+    $: rules = proxyRuleList?.rules?.filter((rule) => rule.trigger === RuleTrigger.MANUAL) ?? [];
+</script>
+
+<Layout.Stack>
+    <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Layout.Stack gap="xs" direction="row" alignItems="center" inline>
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+                Domains
+            </Typography.Text>
+            <Badge variant="secondary" content={(rules?.length ?? 0).toString()} size="s" />
+        </Layout.Stack>
+        <Button
+            secondary
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`}>
+            View all
+        </Button>
+    </Layout.Stack>
+    <Card padding="xs" radius="s">
+        <Layout.Stack>
+            {#if rules.length <= 1}
+                <Layout.Stack gap="l">
+                    <Layout.Stack gap="xxs">
+                        <Typography.Text variant="m-500">
+                            Add your first custom domain
+                        </Typography.Text>
+                        <Typography.Caption variant="500" color="--fgcolor-neutral-tertiary">
+                            Personalize your site and enhance its accessibility and branding with a
+                            unique domain.
+                        </Typography.Caption>
+                    </Layout.Stack>
+                    <div>
+                        <Button
+                            secondary
+                            size="s"
+                            on:click={() => {
+                                trackEvent(Click.DomainCreateClick, {
+                                    source: 'sites_domain_overview'
+                                });
+                            }}
+                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}>
+                            Add domain
+                        </Button>
+                    </div>
+                </Layout.Stack>
+                {#if rules?.length}
+                    <Divider />
+                {/if}
+            {/if}
+            {#each rules?.slice(0, 3) as rule, i}
+                <Layout.Stack
+                    alignItems="center"
+                    justifyContent="space-between"
+                    direction="row"
+                    gap="xl">
+                    <Layout.Stack gap="xxs" inline>
+                        <Link
+                            variant="quiet"
+                            href={`${$protocol}${rule.domain}`}
+                            size="m"
+                            external
+                            icon>
+                            <Layout.Stack gap="xs" inline direction="row" alignItems="center">
+                                <Trim alternativeTrim>
+                                    {rule.domain}
+                                </Trim>
+                            </Layout.Stack>
+                        </Link>
+                        <Typography.Caption variant="400" truncate>
+                            Added {timeFromNow(rule.$createdAt)}
+                        </Typography.Caption>
+                    </Layout.Stack>
+                    <Button
+                        icon
+                        secondary
+                        size="xs"
+                        on:click={() => {
+                            showDomainQR = true;
+                            selectedDomainURL = rule.domain;
+                        }}>
+                        <Icon icon={IconQrcode} />
+                    </Button>
+                </Layout.Stack>
+                {#if i < 2 && i < rules.length - 1}
+                    <Divider />
+                {/if}
+            {/each}
+        </Layout.Stack>
+    </Card>
+</Layout.Stack>
+
+{#if showDomainQR && selectedDomainURL}
+    <OpenOnMobileModal bind:show={showDomainQR} {proxyRuleList} selectedUrl={selectedDomainURL} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte
new file mode 100644
index 000000000..44a68d3d5
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Id, Tab, Tabs } from '$lib/components';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { site } from './store';
+
+    $: path = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}`;
+    $: tabs = [
+        {
+            href: path,
+            title: 'Overview',
+            event: 'overview'
+        },
+        {
+            href: `${path}/deployments`,
+            title: 'Deployments',
+            event: 'deployments'
+        },
+        {
+            href: `${path}/logs`,
+            title: 'Logs',
+            event: 'logs'
+        },
+        {
+            href: `${path}/domains`,
+            title: 'Domains',
+            event: 'domains'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings',
+            event: 'settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`${base}/project-${page.params.region}-${page.params.project}/sites`}
+            >{$site.name}</CoverTitle>
+        <Id value={$site?.$id} event="team">{$site?.$id}</Id>
+    </svelte:fragment>
+
+    <Tabs let:root>
+        {#each tabs as tab}
+            <Tab
+                {root}
+                href={tab.href}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/instantRollbackModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/instantRollbackModal.svelte
new file mode 100644
index 000000000..a07ef1502
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/instantRollbackModal.svelte
@@ -0,0 +1,182 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Card, LabelCard, Modal, Paginator, Status } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Link } from '$lib/elements';
+    import { Button, InputCheckbox } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+    import DeploymentDomains from '$lib/components/git/deploymentDomains.svelte';
+    import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
+    import { capitalize } from '$lib/helpers/string';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { page } from '$app/state';
+
+    export let show = false;
+    export let deployment: Models.Deployment;
+    export let proxyRuleList: Models.ProxyRuleList;
+    export let prodReadyDeployments: Models.DeploymentList;
+    export let selectedDeployment: Models.Deployment = undefined;
+    let selectedDeploymentId: string;
+    let confirm = false;
+
+    async function handleSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.updateSiteDeployment(selectedDeployment.resourceId, selectedDeployment.$id);
+            await invalidate(Dependencies.SITE);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been activated`
+            });
+            trackEvent(Submit.DeploymentCancel);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DeploymentCancel);
+        }
+    }
+
+    $: if (selectedDeploymentId) {
+        selectedDeployment = prodReadyDeployments.deployments.find(
+            (deployment) => deployment.$id === selectedDeploymentId
+        );
+    }
+</script>
+
+<Modal title="Instant rollback" bind:show onSubmit={handleSubmit}>
+    <svelte:fragment slot="description">
+        Rollback is only available for deployments that are <b>ready and previously active</b>. <Link
+            href="https://appwrite.io/docs/products/sites/deployments#instant-rollback"
+            external>Learn more</Link
+        >.
+    </svelte:fragment>
+    <Layout.Stack gap="xl">
+        <Layout.Stack gap="s">
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                    Rollback
+                </Typography.Text>
+                <DeploymentDomains domains={proxyRuleList} />
+            </Layout.Stack>
+            <Card padding="xs" radius="s" variant="secondary">
+                <Layout.Stack gap="xxs">
+                    <Layout.Stack
+                        direction="row"
+                        alignItems="center"
+                        gap="s"
+                        justifyContent="space-between">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                            {toLocaleDateTime(deployment.$createdAt)}
+                        </Typography.Text>
+                        <Badge variant="secondary" content="Current" size="xs" />
+                    </Layout.Stack>
+
+                    <Layout.Stack direction="row" alignItems="center" gap="s">
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
+                            <Status status="ready">Active</Status>
+                        </Typography.Caption>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="2"
+                            height="3"
+                            viewBox="0 0 2 3"
+                            fill="none">
+                            <circle cx="1" cy="1.5" r="1" fill="currentColor" />
+                        </svg>
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
+                            {calculateSize(deployment.buildSize)}
+                        </Typography.Caption>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="2"
+                            height="3"
+                            viewBox="0 0 2 3"
+                            fill="none">
+                            <circle cx="1" cy="1.5" r="1" fill="currentColor" />
+                        </svg>
+                        <Typography.Caption
+                            variant="400"
+                            color="--fgcolor-neutral-secondary"
+                            truncate>
+                            {capitalize(timeFromNow(deployment.$createdAt))}
+                            {#if deployment?.providerCommitAuthorUrl && deployment?.providerCommitAuthor}
+                                by <Link size="s" href={deployment.providerCommitAuthorUrl} external
+                                    >{deployment.providerCommitAuthor}</Link>
+                            {/if}
+                        </Typography.Caption>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Card>
+        </Layout.Stack>
+        <Layout.Stack gap="s">
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                To the following deployment:
+            </Typography.Text>
+            {#if prodReadyDeployments?.deployments?.length}
+                {@const items = prodReadyDeployments.deployments.filter(
+                    (prodDeployment) => prodDeployment.$id !== deployment.$id
+                )}
+                <Paginator {items} hideFooter={items?.length <= 6} limit={6}>
+                    {#snippet children(paginatedItems: typeof items)}
+                        {#each paginatedItems as prodDeployment}
+                            <LabelCard
+                                padding="xs"
+                                radius="s"
+                                title={toLocaleDateTime(prodDeployment.$createdAt)}
+                                bind:group={selectedDeploymentId}
+                                value={prodDeployment.$id}>
+                                <Layout.Stack gap="s" direction="row" alignItems="center">
+                                    <Typography.Caption
+                                        variant="400"
+                                        color="--fgcolor-neutral-secondary">
+                                        {calculateSize(deployment.buildSize)}
+                                    </Typography.Caption>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="2"
+                                        height="3"
+                                        viewBox="0 0 2 3"
+                                        fill="none">
+                                        <circle cx="1" cy="1.5" r="1" fill="currentColor" />
+                                    </svg>
+                                    <Typography.Caption
+                                        variant="400"
+                                        color="--fgcolor-neutral-secondary"
+                                        truncate>
+                                        {capitalize(timeFromNow(prodDeployment.$createdAt))}
+                                        {#if prodDeployment?.providerCommitAuthorUrl && prodDeployment?.providerCommitAuthor}
+                                            by <Link
+                                                size="s"
+                                                href={prodDeployment.providerCommitAuthorUrl}
+                                                external
+                                                >{prodDeployment.providerCommitAuthor}</Link>
+                                        {/if}
+                                    </Typography.Caption>
+                                </Layout.Stack>
+                            </LabelCard>
+                        {/each}
+                    {/snippet}
+                </Paginator>
+            {/if}
+        </Layout.Stack>
+        {#if selectedDeployment?.$id}
+            <InputCheckbox
+                id="rollback"
+                label={`Rollback to ${toLocaleDateTime(selectedDeployment.$createdAt)}, making it the active deployment`}
+                bind:checked={confirm} />
+        {/if}
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit disabled={!selectedDeployment?.$id || !confirm}>Rollback</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.svelte
new file mode 100644
index 000000000..42d96245e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { EmptyFilter, PaginationWithLimit } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import Table from './table.svelte';
+    import { Card, Empty } from '@appwrite.io/pink-svelte';
+    import { columns } from './store';
+
+    export let data;
+
+    // const logs = getServiceLimit('logs');
+
+    onMount(() => {
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes('sites.*.executions.*')) {
+                invalidate(Dependencies.EXECUTIONS);
+            }
+        });
+    });
+</script>
+
+<Container>
+    <ResponsiveContainerHeader hasFilters {columns} hideView analyticsSource="site_logs" />
+
+    {#if data?.logs?.total}
+        <Table columns={$columns} logs={data.logs} />
+
+        <PaginationWithLimit
+            name="Logs"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.logs.total} />
+    {:else if data?.query}
+        <EmptyFilter resource="logs"></EmptyFilter>
+    {:else}
+        <Card.Base padding="none">
+            <Empty
+                type="secondary"
+                title="There are no logs to display at the moment"
+                description="Logs are automatically generated based on your site's activity.">
+                <svelte:fragment slot="actions">
+                    <Button
+                        external
+                        href="https://appwrite.io/docs/products/sites/logs"
+                        secondary
+                        event="empty_documentation"
+                        size="s"
+                        ariaLabel="logs">Documentation</Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
+    {/if}
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.ts
new file mode 100644
index 000000000..0fe9e14c8
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.ts
@@ -0,0 +1,32 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { queries, queryParamToMap } from '$lib/components/filters';
+
+export const load = async ({ params, depends, url, route, parent }) => {
+    const { site } = await parent();
+    depends(Dependencies.EXECUTIONS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    return {
+        offset,
+        limit,
+        query,
+        site,
+        logs: await sdk
+            .forProject(params.region, params.project)
+            .sites.listLogs(params.site, [
+                Query.limit(limit),
+                Query.offset(offset),
+                Query.orderDesc(''),
+                ...parsedQueries.values()
+            ])
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/sheet.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/sheet.svelte
new file mode 100644
index 000000000..881e4e3d2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/sheet.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+    import Button from '$lib/elements/forms/button.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import {
+        Accordion,
+        Badge,
+        InteractiveText,
+        Icon,
+        Layout,
+        Sheet,
+        Tag,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { timeFromNow } from '$lib/helpers/date';
+    import { capitalize } from '$lib/helpers/string';
+    import { Copy } from '$lib/components';
+    import { LogsRequest, LogsResponse } from '$lib/components/logs';
+    import { site } from '../store';
+
+    export let open = false;
+    export let selectedLogId: string;
+    export let logs: Models.Execution[];
+
+    function nextLog() {
+        const currentIndex = logs.findIndex((log) => log.$id === selectedLogId);
+        if (currentIndex < logs.length - 1) {
+            selectedLogId = logs[currentIndex + 1].$id;
+        }
+    }
+    function previousLog() {
+        const currentIndex = logs.findIndex((log) => log.$id === selectedLogId);
+        if (currentIndex > 0) {
+            selectedLogId = logs[currentIndex - 1].$id;
+        }
+    }
+    $: if (!open) {
+        selectedLogId = null;
+    }
+
+    $: selectedLog = logs?.find((log) => log.$id === selectedLogId);
+    $: isFirstLog = logs.findIndex((log) => log.$id === selectedLogId) === 0;
+    $: isLastLog = logs.findIndex((log) => log.$id === selectedLogId) === logs.length - 1;
+
+    let sheet: HTMLDivElement;
+    function handleClickOutside(event: MouseEvent) {
+        if (sheet && !sheet.contains(event.target as Node)) {
+            open = false;
+        }
+    }
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div style="position: absolute; top: 0; " bind:this={sheet}>
+    <Sheet bind:open closeOnBlur={false}>
+        <div slot="header" style:width="100%">
+            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Layout.Stack direction="row" gap="m" alignItems="center">
+                    <Typography.Text variant="m-400">Log ID</Typography.Text>
+                    <Copy value={selectedLog?.$id}>
+                        <Tag size="s" variant="code">{selectedLog?.$id}</Tag>
+                    </Copy>
+                </Layout.Stack>
+                <Layout.Stack direction="row" gap="xs" alignItems="center" inline>
+                    <Button icon text size="xs" on:click={previousLog} disabled={isFirstLog}>
+                        <Icon icon={IconChevronUp} />
+                    </Button>
+                    <Button icon text size="xs" on:click={nextLog} disabled={isLastLog}>
+                        <Icon icon={IconChevronDown} />
+                    </Button>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+        {#if selectedLog}
+            <Layout.Stack gap="xl">
+                <Accordion title="Details" open>
+                    <Layout.Stack gap="xl">
+                        <Layout.Stack direction="row">
+                            <Layout.Grid columnsXS={2} columns={4} gap="xxxl" rowGap="xl">
+                                <Layout.Stack gap="xs" inline>
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-tertiary">
+                                        Method
+                                    </Typography.Text>
+                                    <Typography.Text variant="m-400">
+                                        {selectedLog.requestMethod}
+                                    </Typography.Text>
+                                </Layout.Stack>
+                                <Layout.Stack gap="xs" inline>
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-tertiary">
+                                        Status code
+                                    </Typography.Text>
+                                    <span>
+                                        <Badge
+                                            content={selectedLog.responseStatusCode.toString()}
+                                            variant="secondary"
+                                            type={selectedLog?.responseStatusCode >= 400
+                                                ? 'error'
+                                                : 'success'} />
+                                    </span>
+                                </Layout.Stack>
+                                <Layout.Stack gap="xs" inline>
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-tertiary">
+                                        Duration
+                                    </Typography.Text>
+                                    <Typography.Text variant="m-400">
+                                        {calculateTime(selectedLog.duration)}
+                                    </Typography.Text>
+                                </Layout.Stack>
+                                <Layout.Stack gap="xs" inline>
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-tertiary">
+                                        Created
+                                    </Typography.Text>
+                                    <Typography.Text variant="m-400">
+                                        {capitalize(timeFromNow(selectedLog.$createdAt))}
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Grid>
+                        </Layout.Stack>
+
+                        <Layout.Stack gap="xs" inline alignItems="flex-start">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                Path
+                            </Typography.Text>
+                            <div>
+                                <InteractiveText
+                                    text={selectedLog.requestPath}
+                                    variant="copy-code"
+                                    isVisible />
+                            </div>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Accordion>
+                <Accordion title="Request" open>
+                    <LogsRequest {selectedLog} />
+                </Accordion>
+                <Accordion title="Response" open hideDivider>
+                    <LogsResponse {selectedLog} logging={$site?.logging} product="site" />
+                </Accordion>
+            </Layout.Stack>
+        {/if}
+    </Sheet>
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/store.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/store.ts
new file mode 100644
index 000000000..386ebfbf0
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/store.ts
@@ -0,0 +1,108 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Log ID', type: 'string', width: { min: 200, max: 250 } },
+    {
+        id: 'requestPath',
+        title: 'Path',
+        type: 'string',
+        width: { min: 480 },
+        format: 'string'
+    },
+
+    {
+        id: 'requestMethod',
+        title: 'Method',
+        type: 'string',
+        array: true,
+        format: 'enum',
+        elements: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
+        width: { min: 70, max: 150 }
+    },
+    {
+        id: 'responseStatusCode',
+        title: 'Status code',
+        type: 'integer',
+        format: 'integer',
+        elements: [
+            {
+                value: 299,
+                label: 'Success (200-299)'
+            },
+            {
+                value: 399,
+                label: 'Redirect (300-399)'
+            },
+            {
+                value: 499,
+                label: 'Client error (400-499)'
+            },
+            {
+                value: 599,
+                label: 'Server error (500-599)'
+            }
+        ],
+        width: { min: 90, max: 150 },
+        filter: false //TODO: re-enable
+    },
+
+    {
+        id: 'trigger',
+        title: 'Trigger',
+        type: 'string',
+        exclude: true,
+        array: true,
+        format: 'enum',
+        elements: [
+            { value: 'http', label: 'HTTP' },
+            { value: 'schedule', label: 'Schedule' },
+            { value: 'event', label: 'Event' }
+        ],
+        filter: false
+    },
+
+    {
+        id: 'duration',
+        title: 'Duration',
+        type: 'integer',
+        format: 'integer',
+        elements: [
+            {
+                value: 1,
+                label: 'more than 1 second'
+            },
+            {
+                value: 5,
+                label: 'more than 5 seconds'
+            },
+            {
+                value: 30,
+                label: 'more than 30 seconds'
+            }
+        ],
+        filter: false,
+        exclude: true
+    },
+    {
+        id: '$createdAt',
+        title: 'Created',
+        width: { min: 120, max: 180 },
+        type: 'datetime',
+        format: 'datetime',
+        elements: [
+            {
+                value: 5 * 60 * 1000,
+                label: 'last 5 minutes'
+            },
+            {
+                value: 60 * 60 * 1000,
+                label: 'last 1 hour'
+            },
+            {
+                value: 24 * 60 * 60 * 1000,
+                label: 'last 24 hours'
+            }
+        ]
+    }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/table.svelte
new file mode 100644
index 000000000..bb1cc5946
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/table.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { Id } from '$lib/components';
+    import type { Column } from '$lib/helpers/types';
+    import type { Models } from '@appwrite.io/console';
+    import { Badge, Table, Typography } from '@appwrite.io/pink-svelte';
+    import Sheet from './sheet.svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+
+    export let columns: Column[];
+    export let logs: Models.ExecutionList;
+
+    let openSheet = false;
+    let selectedLogId: string = null;
+
+    $: filteredColumns = columns.filter((c) => !c.exclude);
+</script>
+
+<Table.Root columns={filteredColumns} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each filteredColumns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
+        {/each}
+    </svelte:fragment>
+    {#each logs.executions as log}
+        <Table.Row.Button
+            {root}
+            on:click={(e) => {
+                e.stopPropagation();
+                openSheet = true;
+                selectedLogId = log.$id;
+            }}>
+            {#each filteredColumns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Id value={log.$id}>{log.$id}</Id>
+                        {/key}
+                    {:else if column.id === 'requestMethod'}
+                        <Typography.Code size="m">
+                            {log.requestMethod}
+                        </Typography.Code>
+                    {:else if column.id === 'responseStatusCode'}
+                        <div>
+                            <Badge
+                                variant="secondary"
+                                type={log.responseStatusCode >= 400 ? 'error' : 'success'}
+                                content={log.responseStatusCode.toString()} />
+                        </div>
+                    {:else if column.id === 'requestPath'}
+                        <Typography.Code size="m">
+                            {log.requestPath}
+                        </Typography.Code>
+                    {:else if column.id === '$createdAt'}
+                        <DualTimeView time={log.$createdAt} />
+                    {/if}
+                </Table.Cell>
+            {/each}
+        </Table.Row.Button>
+    {/each}
+</Table.Root>
+
+<Sheet bind:open={openSheet} bind:selectedLogId logs={logs.executions} />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte
new file mode 100644
index 000000000..b809abd7b
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import DangerZone from './dangerZone.svelte';
+    import UpdateName from './updateName.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import UpdateBuildSettings from './updateBuildSettings.svelte';
+    import UpdateTimeout from './updateTimeout.svelte';
+    import UpdateRuntimeSettings from './updateRuntimeSettings.svelte';
+    import UpdateRepository from './updateRepository.svelte';
+    import { onMount } from 'svelte';
+    import { showConnectRepo } from './store';
+    import { isCloud } from '$lib/system';
+    import UpdateResourceLimits from './updateResourceLimits.svelte';
+    import UpdateVariables from '$routes/(console)/project-[region]-[project]/updateVariables.svelte';
+    import UpdateLogging from './updateLogging.svelte';
+
+    export let data;
+
+    const sdkCreateVariable = async (key: string, value: string, secret: boolean) => {
+        await sdk
+            .forProject(page.params.region, page.params.project)
+            .sites.createVariable(page.params.site, key, value, secret);
+        await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.SITE)]);
+    };
+
+    const sdkUpdateVariable = async (
+        variableId: string,
+        key: string,
+        value: string,
+        secret: boolean
+    ) => {
+        await sdk
+            .forProject(page.params.region, page.params.project)
+            .sites.updateVariable(page.params.site, variableId, key, value, secret);
+        await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.SITE)]);
+    };
+
+    const sdkDeleteVariable = async (variableId: string) => {
+        await sdk
+            .forProject(page.params.region, page.params.project)
+            .sites.deleteVariable(page.params.site, variableId);
+        await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.SITE)]);
+    };
+
+    onMount(async () => {
+        if (
+            page.url.searchParams.has('newInstallation') &&
+            page.url.searchParams.get('newInstallation') === 'true'
+        ) {
+            showConnectRepo.set(true);
+        }
+    });
+</script>
+
+<Container>
+    <UpdateName site={data.site} />
+    {#key data.site.providerRepositoryId}
+        <UpdateRepository site={data.site} installations={data.installations} />
+    {/key}
+    <UpdateBuildSettings site={data.site} frameworks={data.frameworks.frameworks} />
+    <UpdateRuntimeSettings site={data.site} frameworks={data.frameworks.frameworks} />
+    <UpdateVariables
+        {sdkCreateVariable}
+        {sdkUpdateVariable}
+        {sdkDeleteVariable}
+        isGlobal={false}
+        globalVariableList={data.globalVariables}
+        variableList={data.variables}
+        product="site"
+        analyticsSource="site_settings" />
+    {#if isCloud}
+        <UpdateResourceLimits site={data.site} specs={data.specificationsList} />
+    {/if}
+    <UpdateTimeout site={data.site} />
+    <UpdateLogging site={data.site} />
+    <DangerZone site={data.site} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts
new file mode 100644
index 000000000..240a854f1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts
@@ -0,0 +1,44 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+
+export const load = async ({ params, depends, parent }) => {
+    depends(Dependencies.VARIABLES);
+    depends(Dependencies.SITE);
+    const { site } = await parent();
+
+    const [globalVariables, variables, frameworks, installations, specificationsList] =
+        await Promise.all([
+            sdk.forProject(params.region, params.project).projectApi.listVariables(),
+            sdk.forProject(params.region, params.project).sites.listVariables(params.site),
+            sdk.forProject(params.region, params.project).sites.listFrameworks(),
+            sdk.forProject(params.region, params.project).vcs.listInstallations(),
+            sdk.forProject(params.region, params.project).sites.listSpecifications()
+        ]);
+
+    // Conflicting variables first
+    variables.variables = variables.variables.sort((var1, var2) => {
+        const isVar1Global =
+            globalVariables.variables.find((variable) => variable.key === var1.key) !== undefined;
+        const isVar2Global =
+            globalVariables.variables.find((variable) => variable.key === var2.key) !== undefined;
+
+        if (isVar1Global && isVar2Global) {
+            return -var1.$createdAt.localeCompare(var2.$createdAt);
+        } else if (isVar1Global) {
+            return -1;
+        } else if (isVar2Global) {
+            return 1;
+        } else {
+            return -var1.$createdAt.localeCompare(var2.$createdAt);
+        }
+    });
+
+    return {
+        site,
+        frameworks,
+        variables,
+        globalVariables,
+        installations,
+        specificationsList
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/dangerZone.svelte
new file mode 100644
index 000000000..0470ebdd7
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/dangerZone.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { BoxAvatar, CardGrid } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import type { Models } from '@appwrite.io/console';
+    import Delete from './deleteModal.svelte';
+
+    export let site: Models.Site;
+    let showDelete = false;
+</script>
+
+<CardGrid>
+    <svelte:fragment slot="title">Delete site</svelte:fragment>
+    The site will be permanently deleted, including all deployments associated with it.
+    <svelte:fragment slot="aside">
+        <BoxAvatar>
+            <svelte:fragment slot="title">
+                <h6 class="u-bold u-trim-1">{site.name}</h6>
+            </svelte:fragment>
+            <p>Last updated: {toLocaleDateTime(site.$updatedAt)}</p>
+        </BoxAvatar>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+    </svelte:fragment>
+</CardGrid>
+
+<Delete {site} bind:showDelete />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte
new file mode 100644
index 000000000..a702286fd
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+
+    export let site: Models.Site;
+    export let showDelete = false;
+
+    let error: string;
+    const handleSubmit = async () => {
+        try {
+            await sdk.forProject(page.params.region, page.params.project).sites.delete(site.$id);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Site has been deleted`
+            });
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/sites`);
+            trackEvent(Submit.SiteDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SiteDelete);
+        }
+    };
+</script>
+
+<Confirm onSubmit={handleSubmit} title="Delete site" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this site and all associated deployments from your project? This
+    action is irreversible.
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/disconnectRepo.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/disconnectRepo.svelte
new file mode 100644
index 000000000..430650dc9
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/disconnectRepo.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Confirm } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Adapter, BuildRuntime, Framework, Models } from '@appwrite.io/console';
+    import { createEventDispatcher } from 'svelte';
+
+    export let show = false;
+    export let site: Models.Site;
+    let error = '';
+
+    const dispatch = createEventDispatcher();
+
+    async function handleSubmit() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site.framework as Framework,
+                    site.enabled || undefined,
+                    site.logging || undefined,
+                    site.timeout || undefined,
+                    site.installCommand || undefined,
+                    site.buildCommand || undefined,
+                    site.outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    (site?.adapter as Adapter) || undefined,
+                    site.fallbackFile || undefined,
+                    '',
+                    '',
+                    '',
+                    undefined,
+                    ''
+                );
+            await invalidate(Dependencies.SITE);
+            dispatch('success');
+            addNotification({
+                type: 'success',
+                message: `Repository has been disconnected from your site`
+            });
+            trackEvent(Submit.SiteDisconnectRepo);
+            show = false;
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SiteDisconnectRepo);
+        }
+    }
+
+    $: if (!show) {
+        error = '';
+    }
+</script>
+
+<Confirm title="Disconnect Git repository" bind:open={show} bind:error onSubmit={handleSubmit}>
+    <p data-private>
+        Are you sure you want to disconnect <b>{site.name}</b>? This will affect future deployments
+        to this site.
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Disconnect</Button>
+    </svelte:fragment>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/store.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/store.ts
new file mode 100644
index 000000000..e66ee97b3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/store.ts
@@ -0,0 +1,93 @@
+import { writable } from 'svelte/store';
+
+export const showConnectRepo = writable(false);
+
+export const adapterDataList = [
+    {
+        framework: 'sveltekit',
+        ssr: {
+            desc: 'Use $ adapter in $ file.',
+            code: ['@sveltejs/adapter-node', 'svelte.config.js'],
+            url: 'https://kit.svelte.dev/docs#adapter-node'
+        },
+        static: {
+            desc: 'Use $ adapter in $ file.',
+            code: ['@sveltejs/adapter-static', 'svelte.config.js'],
+            url: 'https://kit.svelte.dev/docs#adapter-static'
+        }
+    },
+    {
+        framework: 'astro',
+        ssr: {
+            desc: 'Use $ adapter in $ file.',
+            code: ['@astro/node', 'astro.config.mjs'],
+            url: 'https://docs.astro.build/en/guides/server-side-rendering/'
+        },
+        static: {
+            desc: "Ensure you don't set $ adapter in $ file.",
+            code: ['adapter', 'astro.config.mjs'],
+            url: 'https://docs.astro.build/en/guides/deploy/'
+        }
+    },
+    {
+        framework: 'remix',
+        ssr: {
+            desc: 'Ensure $ file uses $ package.',
+            code: ['entry.server.tsx', '@remix-run/node']
+        },
+        static: {
+            desc: 'Set $ in $ plugin in $ file.',
+            code: ['ssr: false', 'remix', 'vite.config.ts']
+        }
+    },
+    {
+        framework: 'nuxt',
+        ssr: {
+            desc: 'Set build command to $ in site settings.',
+            code: ['npm run build'],
+            url: 'https://nuxt.com/docs/getting-started/deployment'
+        },
+        static: {
+            desc: 'Set build command to $ in site settings.',
+            code: ['npm run generate'],
+            url: 'https://nuxt.com/docs/getting-started/deployment#static-hosting'
+        }
+    },
+    {
+        framework: 'nextjs',
+        ssr: {
+            desc: "Ensure you don't set $ in $ file.",
+            code: ['output', 'next.config.js'],
+            url: 'https://nextjs.org/docs/pages/building-your-application/deploying'
+        },
+        static: {
+            desc: 'Set $ in $ file',
+            code: ["output: 'export'", 'next.config.js'],
+            url: 'https://nextjs.org/docs/pages/building-your-application/deploying/static-exports'
+        }
+    },
+    {
+        framework: 'analog',
+        ssr: {
+            desc: 'Set $ in $ plugin in $',
+            code: ['ssr: true', 'analog', 'vite.config.ts'],
+            url: 'https://analogjs.org/docs/features/server/server-side-rendering'
+        },
+        static: {
+            desc: 'Set $ in $ plugin in $',
+            code: ['static: true', 'analog', 'vite.config.ts'],
+            url: 'https://analogjs.org/docs/features/server/static-site-generation'
+        }
+    },
+    {
+        framework: 'angular',
+        ssr: {
+            desc: 'Ensure $ file uses $ package.',
+            code: ['src/server.ts', '@angular/ssr/node'],
+            url: 'https://angular.dev/guide/ssr'
+        },
+        static: {
+            desc: "Angular's default build is static. No further action needed."
+        }
+    }
+];
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateBuildSettings.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
new file mode 100644
index 000000000..b8344ea39
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
@@ -0,0 +1,290 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputSelect, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { Card, Fieldset, Icon, InlineCode, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { iconPath } from '$lib/stores/app';
+    import { Link } from '$lib/elements';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { adapterDataList } from './store';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+    import { page } from '$app/state';
+
+    let {
+        site,
+        frameworks
+    }: {
+        site: Models.Site;
+        frameworks: Models.Framework[];
+    } = $props();
+
+    let frameworkKey = $state(site.framework);
+    let installCommand = $state(site?.installCommand);
+    let buildCommand = $state(site?.buildCommand);
+    let outputDirectory = $state(site?.outputDirectory);
+    let fallback = $state(site?.fallbackFile);
+    let adapter: Adapter = $state(site.adapter as Adapter);
+
+    let selectedFramework: Models.Framework = $derived(
+        frameworks.find((framework) => framework.key === site.framework)
+    );
+    let showFallback = $derived(adapter === Adapter.Static);
+    let hasChanges = $derived(
+        installCommand === site?.installCommand &&
+            buildCommand === site?.buildCommand &&
+            outputDirectory === site?.outputDirectory &&
+            selectedFramework?.key === site?.framework &&
+            fallback === (site?.fallbackFile || undefined) &&
+            adapter === site?.adapter
+    );
+    let frameworkAdapterData = $derived(
+        selectedFramework.adapters.find((a) => a.key === adapter) ?? selectedFramework.adapters[0]
+    );
+
+    $effect(() => {
+        if (selectedFramework?.key !== site.framework) {
+            //Update adapter
+            const singleAdapter = selectedFramework?.adapters?.length <= 1;
+            if (singleAdapter) {
+                const hasSSR = selectedFramework?.adapters?.some((a) => a?.key === Adapter.Ssr);
+                const hasStatic = selectedFramework?.adapters?.some(
+                    (a) => a?.key === Adapter.Static
+                );
+                if (!hasSSR) {
+                    adapter = Adapter.Static;
+                } else if (!hasStatic) {
+                    adapter = Adapter.Ssr;
+                }
+            }
+
+            //Update values
+            const data = selectedFramework.adapters.find((a) => a.key === adapter);
+            installCommand = data.installCommand;
+            buildCommand = data.buildCommand;
+            outputDirectory = data.outputDirectory;
+            adapter = selectedFramework.adapters[0].key as Adapter;
+            fallback = data.fallbackFile;
+        } else {
+            adapter = site.adapter as Adapter;
+            installCommand = site?.installCommand ?? frameworkAdapterData.installCommand;
+            buildCommand = site?.buildCommand ?? frameworkAdapterData.buildCommand;
+            outputDirectory = site?.outputDirectory ?? frameworkAdapterData.outputDirectory;
+            fallback = site?.fallbackFile ?? frameworkAdapterData.fallbackFile;
+        }
+    });
+
+    $effect(() => {
+        if (adapter === Adapter.Static) {
+            if (!fallback) {
+                fallback ||= selectedFramework.adapters.find(
+                    (a) => a.key === Adapter.Static
+                ).fallbackFile;
+            }
+        }
+    });
+
+    async function update() {
+        let adptr = selectedFramework.adapters.find((a) => a.key === adapter);
+        if (!adptr?.key && selectedFramework.adapters?.length) {
+            adapter = selectedFramework.adapters[0].key as Adapter;
+            adptr = selectedFramework.adapters[0];
+        }
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    selectedFramework.key as Framework,
+                    site.enabled || undefined,
+                    site.logging || undefined,
+                    site.timeout || undefined,
+                    installCommand || undefined,
+                    buildCommand || undefined,
+                    outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    (adptr?.key as Adapter) || undefined,
+                    adptr?.key === 'static' ? fallback || undefined : undefined,
+                    site.installationId || undefined,
+                    site.providerRepositoryId || undefined,
+                    site.providerBranch || undefined,
+                    site.providerSilentMode || undefined,
+                    site.providerRootDirectory || undefined,
+                    site?.specification || undefined
+                );
+            await invalidate(Dependencies.SITE);
+            addNotification({
+                message: 'Build settings have been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.SiteUpdateBuildSettings);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.SiteUpdateBuildSettings);
+        }
+    }
+
+    function reset(type: 'installCommand' | 'buildCommand' | 'outputDirectory') {
+        const data = selectedFramework.adapters.find((a) => a.key === adapter);
+
+        if (type === 'installCommand') {
+            installCommand = site?.installCommand ?? data.installCommand;
+        } else if (type === 'buildCommand') {
+            buildCommand = site?.buildCommand ?? data.buildCommand;
+        } else if (type === 'outputDirectory') {
+            outputDirectory = site?.outputDirectory ?? data.outputDirectory;
+        }
+    }
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid>
+        <svelte:fragment slot="title">Build settings</svelte:fragment>
+        Default build settings are configured based on your framework, ensuring optimal performance.
+        Adjust the settings here if needed.
+        <svelte:fragment slot="aside">
+            {@const adapterData = adapterDataList.find(
+                (adapterData) => adapterData.framework === frameworkKey.toLowerCase()
+            )}
+            <Layout.Stack gap="xl">
+                <InputSelect
+                    required
+                    id="framework"
+                    label="Framework"
+                    placeholder="Select framework"
+                    bind:value={frameworkKey}
+                    options={frameworks.map((framework) => ({
+                        value: framework.key,
+                        label: framework.name,
+                        leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
+                    }))}
+                    on:change={() => {
+                        selectedFramework = frameworks.find(
+                            (framework) => framework.key === frameworkKey
+                        );
+                    }} />
+                {#if selectedFramework.adapters?.length >= 2}
+                    <Layout.Grid columnsXS={1} columns={2} gap="l">
+                        <Card.Selector
+                            title="Server side rendering"
+                            variant="primary"
+                            radius="s"
+                            padding="s"
+                            name="adapter"
+                            value={`${Adapter.Ssr}`}
+                            bind:group={adapter}>
+                            {#if adapterData?.ssr?.desc?.includes('$')}
+                                {@const parts = adapterData.ssr.desc.split('$')}
+                                {#each parts as part, i}
+                                    {#if i === 0}
+                                        {part}
+                                    {:else}
+                                        <InlineCode code={adapterData.ssr.code[i - 1]} size="s" />
+                                        {part}
+                                    {/if}
+                                {/each}
+                            {:else if adapterData?.ssr?.desc}
+                                {adapterData.ssr.desc}
+                            {/if}
+                            {#if adapterData?.ssr?.url}
+                                <Link external href={adapterData.ssr.url}>Learn more</Link>
+                            {/if}
+                        </Card.Selector>
+                        <Card.Selector
+                            title="Static site"
+                            variant="primary"
+                            radius="s"
+                            padding="s"
+                            name="adapter"
+                            value={Adapter.Static}
+                            bind:group={adapter}>
+                            {#if adapterData?.static?.desc?.includes('$')}
+                                {@const parts = adapterData.static.desc.split('$')}
+                                {#each parts as part, i}
+                                    {#if i === 0}
+                                        {part}
+                                    {:else}
+                                        <InlineCode
+                                            code={adapterData.static.code[i - 1]}
+                                            size="s" />
+                                        {part}
+                                    {/if}
+                                {/each}
+                            {:else if adapterData?.ssr?.desc}
+                                {adapterData.static.desc}
+                            {/if}
+                            {#if adapterData?.static?.url}
+                                <Link external href={adapterData.static.url}>Learn more</Link>
+                            {/if}
+                        </Card.Selector>
+                    </Layout.Grid>
+                {/if}
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="xl">
+                        <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                            <InputText
+                                id="installCommand"
+                                label="Install command"
+                                bind:value={installCommand}
+                                placeholder={frameworkAdapterData?.installCommand ||
+                                    'Enter install command'} />
+
+                            <Button secondary size="s" on:click={() => reset('installCommand')}>
+                                Reset
+                            </Button>
+                        </Layout.Stack>
+                        <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                            <InputText
+                                id="buildCommand"
+                                label="Build command"
+                                bind:value={buildCommand}
+                                placeholder={frameworkAdapterData?.buildCommand ||
+                                    'Enter build command'} />
+                            <Button secondary size="s" on:click={() => reset('buildCommand')}>
+                                Reset
+                            </Button>
+                        </Layout.Stack>
+                        <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                            <InputText
+                                id="outputDirectory"
+                                label="Output directory"
+                                bind:value={outputDirectory}
+                                placeholder={frameworkAdapterData?.outputDirectory ||
+                                    'Enter output directory'} />
+                            <Button secondary size="s" on:click={() => reset('outputDirectory')}>
+                                Reset
+                            </Button>
+                        </Layout.Stack>
+                        {#if showFallback}
+                            <InputText
+                                id="fallback"
+                                label="Fallback file"
+                                placeholder="index.html"
+                                bind:value={fallback}>
+                                <Tooltip slot="info">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <span slot="tooltip">
+                                        Provide a fallback file for advanced routing and proper page
+                                        handling in SPA mode.
+                                    </span>
+                                </Tooltip>
+                            </InputText>
+                        {/if}
+                    </Layout.Stack>
+                </Fieldset>
+            </Layout.Stack>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={hasChanges} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateLogging.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateLogging.svelte
new file mode 100644
index 000000000..e3e66b659
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateLogging.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputSwitch } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
+
+    export let site: Models.Site;
+    let logging = site?.logging;
+
+    async function update() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site.framework as Framework,
+                    site?.enabled || undefined,
+                    logging,
+                    site?.timeout || undefined,
+                    site?.installCommand || undefined,
+                    site?.buildCommand || undefined,
+                    site?.outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    site?.adapter as Adapter,
+                    site?.fallbackFile || undefined,
+                    site?.installationId || undefined,
+                    site?.providerRepositoryId || undefined,
+                    site?.providerBranch || undefined,
+                    site?.providerSilentMode || undefined,
+                    site?.providerRootDirectory || undefined,
+                    site?.specification || undefined
+                );
+            await invalidate(Dependencies.SITE);
+            addNotification({
+                type: 'success',
+                message:
+                    site.name + ' logs settings have been ' + (logging ? 'enabled' : 'disabled')
+            });
+            trackEvent(Submit.SiteUpdateLogging);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.SiteUpdateLogging);
+        }
+    }
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid>
+        <svelte:fragment slot="title">Logging</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <InputSwitch label="Logs" id="logging" bind:value={logging} />
+            <Typography.Text>
+                When disabled, request logs will exclude logs and errors, and site responses will be
+                slightly faster.
+            </Typography.Text>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={site?.logging === logging} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateName.svelte
new file mode 100644
index 000000000..faa92563e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateName.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { page } from '$app/state';
+
+    export let site: Models.Site;
+    let siteName: string = null;
+
+    onMount(async () => {
+        siteName ??= site.name;
+    });
+
+    async function updateName() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    siteName,
+                    site.framework as Framework,
+                    site?.enabled || undefined,
+                    site?.logging || undefined,
+                    site?.timeout || undefined,
+                    site?.installCommand || undefined,
+                    site?.buildCommand || undefined,
+                    site?.outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    site?.adapter as Adapter,
+                    site?.fallbackFile || undefined,
+                    site?.installationId || undefined,
+                    site?.providerRepositoryId || undefined,
+                    site?.providerBranch || undefined,
+                    site?.providerSilentMode || undefined,
+                    site?.providerRootDirectory || undefined,
+                    site?.specification || undefined
+                );
+            await invalidate(Dependencies.SITE);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.SiteUpdateName);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.SiteUpdateName);
+        }
+    }
+</script>
+
+<Form onSubmit={updateName}>
+    <CardGrid>
+        <svelte:fragment slot="title">Name</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <InputText
+                id="name"
+                label="Name"
+                placeholder="Enter name"
+                required
+                bind:value={siteName} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={siteName === site.name || !siteName} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte
new file mode 100644
index 000000000..648667a27
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte
@@ -0,0 +1,273 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import DisconnectRepo from './disconnectRepo.svelte';
+    import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs';
+    import {
+        Empty,
+        Fieldset,
+        Icon,
+        Layout,
+        Skeleton,
+        Card as PinkCard,
+        Input,
+        Selector
+    } from '@appwrite.io/pink-svelte';
+    import Card from '$lib/components/card.svelte';
+    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git';
+    import { showConnectRepo } from './store';
+    import { page } from '$app/state';
+    import SelectRootModal from '$lib/components/git/selectRootModal.svelte';
+
+    export let site: Models.Site;
+    export let installations: Models.InstallationList;
+
+    let branchesList: Models.BranchList;
+    let selectedBranch = site?.providerBranch;
+    let silentMode = site?.providerSilentMode ?? false;
+    let selectedDir = site?.providerRootDirectory;
+    let showDisconnect = false;
+    let showSelectRoot = false;
+    let repository: Models.ProviderRepository | null | false = false;
+
+    onMount(() => {
+        const inst = installations?.installations.find(
+            (installation) => installation.$id === site?.installationId
+        );
+        installation.set(inst ?? installations?.installations[0]);
+        loadRepository();
+    });
+
+    async function loadRepository() {
+        try {
+            if (site.installationId && site.providerRepositoryId) {
+                repository = await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .vcs.getRepository(site.installationId, site.providerRepositoryId);
+                repositoryStore.set(repository);
+            }
+        } catch (err) {
+            console.warn(err);
+        } finally {
+            if (repository === false) {
+                repository = null;
+            }
+        }
+    }
+
+    async function updateConfiguration() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site?.framework as Framework,
+                    site?.enabled || undefined,
+                    site?.logging || undefined,
+                    site?.timeout || undefined,
+                    site?.installCommand || undefined,
+                    site?.buildCommand || undefined,
+                    site?.outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    site?.adapter as Adapter,
+                    site?.fallbackFile || undefined,
+                    site?.installationId || undefined,
+                    site?.providerRepositoryId || undefined,
+                    selectedBranch || undefined,
+                    silentMode || undefined,
+                    selectedDir || undefined,
+                    site?.specification || undefined
+                );
+            await invalidate(Dependencies.SITE);
+            addNotification({
+                type: 'success',
+                message: `${site.name} git configuration has been updated successfully`
+            });
+            trackEvent(Submit.FunctionUpdateConfiguration);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateConfiguration);
+        }
+    }
+
+    async function getBranches(installation: string, repo: string) {
+        branchesList = await sdk
+            .forProject(page.params.region, page.params.project)
+            .vcs.listRepositoryBranches(installation, repo);
+        branchesList.branches = sortBranches(branchesList.branches);
+
+        selectedBranch = site?.providerBranch ?? branchesList.branches[0].name;
+    }
+
+    async function connect(selectedInstallationId: string, selectedRepository: string) {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site.framework as Framework,
+                    site?.enabled,
+                    site?.logging || undefined,
+                    site?.timeout,
+                    site?.installCommand,
+                    site?.buildCommand,
+                    site?.outputDirectory,
+                    site?.buildRuntime as BuildRuntime,
+                    site.adapter as Adapter,
+                    site?.fallbackFile,
+                    selectedInstallationId,
+                    selectedRepository,
+                    'main',
+                    undefined,
+                    undefined,
+                    site?.specification || undefined
+                );
+            invalidate(Dependencies.SITE);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    $: if (site?.installationId && site?.providerRepositoryId) {
+        getBranches(site.installationId, site.providerRepositoryId);
+    }
+
+    $: isUpdateButtonEnabled =
+        selectedBranch !== site?.providerBranch ||
+        silentMode !== site?.providerSilentMode ||
+        selectedDir !== site?.providerRootDirectory;
+</script>
+
+<Form onSubmit={updateConfiguration}>
+    <CardGrid hideFooter={!repository}>
+        <svelte:fragment slot="title">Git repository</svelte:fragment>
+        Automatically deploy changes for every commit pushed to your Git repository.
+        <svelte:fragment slot="aside">
+            {#if repository === false}
+                <Layout.Stack gap="xl">
+                    <Card padding="xs" radius="s" variant="secondary">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" gap="s">
+                                <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
+                                <Layout.Stack gap="xxxs">
+                                    <Skeleton variant="line" width={100} height={20} />
+                                    <Skeleton variant="line" width={200} height={15} />
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+
+                    <Fieldset legend="Branch">
+                        <Layout.Stack gap="xl">
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width="100%" height={32} />
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width="100%" height={32} />
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width="100%" height={15} />
+                                <Skeleton variant="line" width="100%" height={15} />
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Fieldset>
+                </Layout.Stack>
+            {:else if repository}
+                <Layout.Stack gap="xl">
+                    <RepositoryCard {repository} on:disconnect={() => (showDisconnect = true)} />
+
+                    <Fieldset legend="Branch">
+                        <Layout.Stack gap="xl">
+                            <Input.ComboBox
+                                required={true}
+                                id="branch"
+                                label="Production branch"
+                                placeholder="main"
+                                interactiveOutput
+                                bind:value={selectedBranch}
+                                bind:search={selectedBranch}
+                                on:select={(event) => {
+                                    selectedBranch = event.detail.value;
+                                }}
+                                name="branch"
+                                options={branchesList?.branches?.map((branch) => {
+                                    return {
+                                        value: branch.name,
+                                        label: branch.name
+                                    };
+                                }) ?? []} />
+                            <Layout.Stack direction="row" gap="s" alignItems="flex-end">
+                                <InputText
+                                    id="root"
+                                    label="Root directory"
+                                    placeholder="Select directory"
+                                    bind:value={selectedDir} />
+                                <Button secondary size="s" on:click={() => (showSelectRoot = true)}
+                                    >Select</Button>
+                            </Layout.Stack>
+
+                            <Selector.Checkbox
+                                size="s"
+                                id="silentMode"
+                                label="Silent mode"
+                                description="If selected, comments will not be created when pushing changes to this repository."
+                                bind:checked={silentMode} />
+                        </Layout.Stack>
+                    </Fieldset>
+                </Layout.Stack>
+            {:else if site.installationId || installations?.total}
+                <PinkCard.Base padding="none" border="dashed">
+                    <Empty
+                        type="secondary"
+                        title="No repository is connected to this site yet"
+                        description="Connect to enable automatic deployments">
+                        <svelte:fragment slot="actions">
+                            <Button secondary on:click={() => showConnectRepo.set(true)}>
+                                <Icon icon={IconGithub} size="s" slot="start" />
+                                Connect Git repository
+                            </Button>
+                        </svelte:fragment>
+                    </Empty>
+                </PinkCard.Base>
+            {:else}
+                <ConnectGit callbackState={{ newInstallation: 'true' }} />
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={!isUpdateButtonEnabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+{#if $showConnectRepo}
+    <ConnectRepoModal bind:show={$showConnectRepo} {connect} product="sites" />
+{/if}
+
+{#if showDisconnect}
+    <DisconnectRepo bind:show={showDisconnect} {site} on:success={loadRepository} />
+{/if}
+
+{#if showSelectRoot}
+    <SelectRootModal bind:show={showSelectRoot} product="sites" bind:rootDir={selectedDir} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateResourceLimits.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateResourceLimits.svelte
new file mode 100644
index 000000000..8ff56517e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateResourceLimits.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Button, Form, InputSelect } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import Link from '$lib/elements/link.svelte';
+    import { Alert } from '@appwrite.io/pink-svelte';
+    import { upgradeURL } from '$lib/stores/billing';
+    import { isCloud } from '$lib/system';
+    import { organization } from '$lib/stores/organization';
+    import { page } from '$app/state';
+
+    export let site: Models.Site;
+    export let specs: Models.SpecificationList;
+    let specification = site.specification;
+
+    async function updateLogging() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site.framework as Framework,
+                    site?.enabled || undefined,
+                    site?.logging || undefined,
+                    site?.timeout || undefined,
+                    site?.installCommand || undefined,
+                    site?.buildCommand || undefined,
+                    site?.outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    site?.adapter as Adapter,
+                    site?.fallbackFile || undefined,
+                    site?.installationId || undefined,
+                    site?.providerRepositoryId || undefined,
+                    site?.providerBranch || undefined,
+                    site?.providerSilentMode || undefined,
+                    site?.providerRootDirectory || undefined,
+                    specification || undefined
+                );
+            await invalidate(Dependencies.FUNCTION);
+            addNotification({
+                type: 'success',
+                message: 'Resource limits have been updated'
+            });
+            trackEvent(Submit.FunctionUpdateLogging);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateLogging);
+        }
+    }
+
+    const options = specs.specifications.map((spec) => ({
+        label: `${spec.cpus} CPU, ${spec.memory} MB RAM`,
+        value: spec.slug,
+        disabled: !spec.enabled
+    }));
+</script>
+
+<Form onSubmit={updateLogging}>
+    <CardGrid>
+        <svelte:fragment slot="title">Resource limits</svelte:fragment>
+        Define your sites's compute specifications, including CPU and memory, to optimize performance
+        for your workloads. <Link
+            href="https://appwrite.io/docs/advanced/platform/compute"
+            external>
+            Learn more
+        </Link>.
+        <svelte:fragment slot="aside">
+            <InputSelect
+                label="CPU and memory"
+                id="resources"
+                required
+                disabled={options.length < 1}
+                bind:value={specification}
+                {options} />
+            {#if isCloud && $organization.billingPlan === BillingPlan.FREE}
+                <Alert.Inline title="Customizing specs available with Pro or Scale plans">
+                    Upgrade to Pro or Scale to adjust your CPU and RAM beyond the default.
+                    <svelte:fragment slot="actions">
+                        <Button href={$upgradeURL} compact>Upgrade</Button>
+                    </svelte:fragment>
+                </Alert.Inline>
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={site.specification === specification} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
new file mode 100644
index 000000000..66cf5b72f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputSelect } from '$lib/elements/forms';
+    import { capitalize } from '$lib/helpers/string';
+    import { iconPath } from '$lib/stores/app';
+    import { addNotification } from '$lib/stores/notifications';
+    import { getIconFromRuntime } from '$lib/stores/runtimes';
+    import { sdk } from '$lib/stores/sdk';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+
+    export let site: Models.Site;
+    export let frameworks: Models.Framework[];
+    const framework = frameworks.find((framework) => framework.key === site.framework);
+    let buildRuntime = site?.buildRuntime;
+
+    let buildRuntimeOptions = framework.runtimes.map((runtime) => ({
+        label: capitalize(runtime),
+        value: runtime,
+        leadingHtml: `<img src='${$iconPath(getIconFromRuntime(runtime), 'color')}' style='inline-size: var(--icon-size-m)' />`
+    }));
+
+    async function updateRuntime() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site?.framework as Framework,
+                    site?.enabled || undefined,
+                    site?.logging || undefined,
+                    site?.timeout || undefined,
+                    site?.installCommand || undefined,
+                    site?.buildCommand || undefined,
+                    site?.outputDirectory || undefined,
+                    (buildRuntime as BuildRuntime) || undefined,
+                    site?.adapter as Adapter,
+                    site?.fallbackFile || undefined,
+                    site?.installationId || undefined,
+                    site?.providerRepositoryId || undefined,
+                    site?.providerBranch || undefined,
+                    site?.providerSilentMode || undefined,
+                    site?.providerRootDirectory || undefined,
+                    site?.specification || undefined
+                );
+            await invalidate(Dependencies.SITE);
+            addNotification({
+                type: 'success',
+                message: 'Runtime has been updated'
+            });
+            trackEvent(Submit.SiteUpdateTimeout);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.SiteUpdateTimeout);
+        }
+    }
+</script>
+
+<Form onSubmit={updateRuntime}>
+    <CardGrid>
+        <svelte:fragment slot="title">Runtime settings</svelte:fragment>
+        Select the runtime for building and serving your site. Version changes apply on redeploy and
+        can be updated here.
+        <svelte:fragment slot="aside">
+            <InputSelect
+                label="Build runtime"
+                id="build-runtime"
+                placeholder="Select runtime"
+                bind:value={buildRuntime}
+                options={buildRuntimeOptions}
+                required />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={buildRuntime === site.buildRuntime} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateTimeout.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateTimeout.svelte
new file mode 100644
index 000000000..eb088cf4e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateTimeout.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputNumber } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
+    import { page } from '$app/state';
+
+    export let site: Models.Site;
+
+    let timeout = 0;
+
+    onMount(async () => (timeout = site.timeout));
+
+    async function updateTimeout() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .sites.update(
+                    site.$id,
+                    site.name,
+                    site?.framework as Framework,
+                    site?.enabled || undefined,
+                    site?.logging || undefined,
+                    timeout || undefined,
+                    site?.installCommand || undefined,
+                    site?.buildCommand || undefined,
+                    site?.outputDirectory || undefined,
+                    (site?.buildRuntime as BuildRuntime) || undefined,
+                    site?.adapter as Adapter,
+                    site?.fallbackFile || undefined,
+                    site?.installationId || undefined,
+                    site?.providerRepositoryId || undefined,
+                    site?.providerBranch || undefined,
+                    site?.providerSilentMode || undefined,
+                    site?.providerRootDirectory || undefined,
+                    site?.specification || undefined
+                );
+            await invalidate(Dependencies.SITE);
+            addNotification({
+                type: 'success',
+                message: 'Timeout has been updated'
+            });
+            trackEvent(Submit.SiteUpdateTimeout);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.SiteUpdateTimeout);
+        }
+    }
+</script>
+
+<Form onSubmit={updateTimeout}>
+    <CardGrid>
+        <svelte:fragment slot="title">Timeout</svelte:fragment>
+        Set a time limit for the execution of your site. The maximum value is 30 seconds.
+        <svelte:fragment slot="aside">
+            <InputNumber
+                min={1}
+                max={30}
+                id="time"
+                label="Time (in seconds)"
+                placeholder="Enter timeout"
+                required
+                bind:value={timeout} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={site.timeout === timeout || timeout < 1} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/store.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/store.ts
new file mode 100644
index 000000000..c761e1733
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/store.ts
@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import type { Models } from '@appwrite.io/console';
+import { derived } from 'svelte/store';
+
+export const site = derived(page, ($page) => $page.data.site as Models.Site);
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
new file mode 100644
index 000000000..0e89c82e1
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Container, Usage } from '$lib/layout';
+
+    export let data;
+    $: total = data.deploymentsTotal;
+    $: count = data.deployments;
+
+    // $: totalBuilds = data.buildsTotal;
+    // $: countBuilds = data.builds;
+
+    $: console.log(data);
+</script>
+
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/usage`}
+        countMetadata={{
+            legend: 'Deployments',
+            title: 'Total deployments'
+        }}
+        {total}
+        {count} />
+
+    <!-- <Usage
+    title="Builds"
+    path={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/usage`}
+    countMetadata={{
+        legend: 'Builds',
+        title: 'Total builds'
+        }}
+        total={totalBuilds}
+        count={countBuilds} /> -->
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.ts
new file mode 100644
index 000000000..db813ddf3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { SiteUsageRange } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(SiteUsageRange, params.period)
+        ? params.period
+        : SiteUsageRange.ThirtyDays;
+    try {
+        return sdk.forProject(params.region, params.project).sites.getUsage(params.site, period);
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte b/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte
new file mode 100644
index 000000000..a4697694b
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        IconCog,
+        IconDotsHorizontal,
+        IconGlobeAlt,
+        IconUserAdd
+    } from '@appwrite.io/pink-icons-svelte';
+
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+
+    export let site: Models.Site;
+    export let showAddCollaborator = false;
+    export let selectedSite: Models.Site = null;
+</script>
+
+<Popover padding="none" placement="bottom-end" let:toggle>
+    <Button
+        text
+        icon
+        size="s"
+        on:click={(e) => {
+            e.preventDefault();
+            toggle(e);
+        }}>
+        <Icon size="s" icon={IconDotsHorizontal} /></Button>
+    <svelte:fragment slot="tooltip" let:toggle>
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                leadingIcon={IconUserAdd}
+                on:click={(e) => {
+                    e.preventDefault();
+                    selectedSite = site;
+                    showAddCollaborator = true;
+                    toggle(e);
+                }}>
+                Add collaborator
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Anchor
+                href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/domains`}
+                leadingIcon={IconGlobeAlt}>
+                Domains
+            </ActionMenu.Item.Anchor>
+            <ActionMenu.Item.Anchor
+                href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/settings`}
+                leadingIcon={IconCog}>
+                Settings
+            </ActionMenu.Item.Anchor>
+        </ActionMenu.Root>
+    </svelte:fragment>
+</Popover>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/store.ts b/src/routes/(console)/project-[region]-[project]/sites/store.ts
new file mode 100644
index 000000000..5080d43cd
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/store.ts
@@ -0,0 +1,27 @@
+import { timeFromNow } from '$lib/helpers/date';
+import { timer } from '$lib/helpers/timeConversion';
+import type { Column } from '$lib/helpers/types';
+import { Framework, type Models } from '@appwrite.io/console';
+
+import { writable } from 'svelte/store';
+
+export function getEnumFromModel(model: Models.Framework): Framework {
+    return Framework[model.name];
+}
+
+export const columns = writable<Column[]>([
+    { id: 'name', title: 'Name', type: 'string', width: { min: 100 } },
+    // { id: 'domains', title: 'Domains', type: 'string' },
+    { id: 'deployed', title: 'Deployed', type: 'datetime', width: { min: 120 } },
+    { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } }
+]);
+
+export function generateSiteDeploymentDesc(site: Models.Site) {
+    if (site?.latestDeploymentStatus === 'building') {
+        return `Deployment building ${timer(site.latestDeploymentCreatedAt)}`;
+    } else if (site?.deploymentCreatedAt) {
+        return `Deployed ${timeFromNow(site.deploymentCreatedAt)}`;
+    } else {
+        return 'No active deployment';
+    }
+}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/table.svelte
new file mode 100644
index 000000000..680c82d38
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/table.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
+    import { Avatar, Icon, Layout, Popover, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { columns } from './store';
+    import type { Models } from '@appwrite.io/console';
+    import SitesActionMenu from './sitesActionMenu.svelte';
+    import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
+    import { SvgIcon } from '$lib/components';
+    import { capitalize } from '$lib/helpers/string';
+    import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
+    import { Link } from '$lib/elements';
+    import { timer } from '$lib/helpers/timeConversion';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { getFrameworkIcon } from '$lib/stores/sites';
+
+    export let siteList: Models.SiteList;
+
+    let showAddCollaborator = false;
+    let selectedSite: Models.Site = null;
+</script>
+
+<Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>
+                {title}
+            </Table.Header.Cell>
+        {/each}
+        <Table.Header.Cell column="actions" {root} />
+    </svelte:fragment>
+    {#each siteList.sites as site}
+        <Table.Row.Link
+            {root}
+            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}`}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === 'name'}
+                        <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                            <Avatar size="xs" alt={site.name}>
+                                <SvgIcon iconSize="small" name={getFrameworkIcon(site.framework)} />
+                            </Avatar>
+                            {site.name}
+                        </Layout.Stack>
+                    {:else if column.id === 'domains'}
+                        {site[column.id]}
+                    {:else if column.id === 'deployed'}
+                        {#if site?.latestDeploymentStatus === 'building'}
+                            Building {timer(site.latestDeploymentCreatedAt)}
+                        {:else if site?.latestDeploymentStatus === 'failed'}
+                            <Popover let:toggle portal>
+                                <button on:mouseenter={(e) => toggle(e)}>
+                                    <Layout.Stack
+                                        direction="row"
+                                        alignItems="center"
+                                        gap="xxs"
+                                        inline>
+                                        {capitalize(timeFromNow(site.deploymentCreatedAt))}
+
+                                        <Icon
+                                            icon={IconExclamation}
+                                            size="s"
+                                            color="--bgcolor-warning" />
+                                    </Layout.Stack>
+                                </button>
+                                <svelte:fragment slot="tooltip">
+                                    <Typography.Text variant="m-400">
+                                        Last deployment failed {timeFromNow(
+                                            site.latestDeploymentCreatedAt
+                                        )}. <Link
+                                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`}>
+                                            View logs
+                                        </Link>
+                                    </Typography.Text>
+                                </svelte:fragment>
+                            </Popover>
+                        {:else}
+                            <DualTimeView
+                                time={site?.latestDeploymentCreatedAt ?? site.$createdAt} />
+                        {/if}
+                    {:else if column.id === '$createdAt'}
+                        {toLocaleDateTime(site[column.id])}
+                    {/if}
+                </Table.Cell>
+            {/each}
+            <Table.Cell column="actions" {root}>
+                <Layout.Stack alignItems="flex-end">
+                    <SitesActionMenu {site} bind:showAddCollaborator bind:selectedSite />
+                </Layout.Stack>
+            </Table.Cell>
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
+{#if selectedSite?.$id && showAddCollaborator}
+    <AddCollaboratorModal bind:show={showAddCollaborator} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
new file mode 100644
index 000000000..72fbac58a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Container, Usage } from '$lib/layout';
+
+    export let data;
+    $: total = data.deploymentsTotal;
+    $: count = data.deployments;
+
+    $: console.log(data);
+</script>
+
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/sites/usage`}
+        countMetadata={{
+            legend: 'Sites',
+            title: 'Total sites'
+        }}
+        {total}
+        {count} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.ts
new file mode 100644
index 000000000..1aa27edd8
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { SiteUsageRange } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(SiteUsageRange, params.period)
+        ? params.period
+        : SiteUsageRange.ThirtyDays;
+    try {
+        return sdk.forProject(params.region, params.project).sites.listUsage(period);
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte b/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte
index 3ad9dc750..ef7b3773d 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { BucketsPanel } from '$lib/commandCenter/panels';
     import { canWriteBuckets } from '$lib/stores/roles';
     import { project } from '../store';
     import { showCreateBucket } from './+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
             label: 'Create bucket',
             callback: () => {
-                if (!$page.url.pathname.endsWith('storage')) {
+                if (!page.url.pathname.endsWith('storage')) {
                     goto(`${base}/project-${$project.region}-${$project.$id}/storage`);
                 }
                 $showCreateBucket = true;
             },
-            keys: $page.url.pathname.endsWith('storage') ? ['c'] : ['c', 'b'],
-            icon: 'plus',
+            keys: page.url.pathname.endsWith('storage') ? ['c'] : ['c', 'b'],
+            icon: IconPlus,
             group: 'buckets',
             disabled: !$canWriteBuckets
         },
@@ -28,8 +29,7 @@
                 goto(`${base}/project-${$project.region}-${$project.$id}/storage/usage`);
             },
             keys: ['g', 'u'],
-            disabled:
-                $page.url.pathname.endsWith('usage') || $page.url.pathname.includes('bucket-'),
+            disabled: page.url.pathname.endsWith('usage') || page.url.pathname.includes('bucket-'),
             group: 'navigation',
             rank: 10
         },
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 022179eb8..9d780c407 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -4,90 +4,65 @@
 
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { Empty, GridItem1, CardContainer, PaginationWithLimit, Id } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Empty, PaginationWithLimit, SearchQuery } from '$lib/components';
     import Create from './create.svelte';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
-    import type { PageData } from './$types';
     import { canWriteBuckets } from '$lib/stores/roles';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
+    import { columns } from './store';
+    import Grid from './grid.svelte';
+    import Table from './table.svelte';
+    import ViewSelector from '$lib/components/viewSelector.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
-    export let data: PageData;
+    export let data;
 
-    const project = $page.params.project;
+    const project = page.params.project;
 
     async function bucketCreated(event: CustomEvent<Models.Bucket>) {
-        $showCreateBucket = false;
+        showCreateBucket.set(false);
         await goto(
-            `${base}/project-${$page.params.region}-${project}/storage/bucket-${event.detail.$id}`
+            `${base}/project-${page.params.region}-${project}/storage/bucket-${event.detail.$id}`
         );
     }
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Buckets"
-        total={data.buckets.total}
-        buttonText={$canWriteBuckets ? 'Create bucket' : null}
-        buttonEvent="create_bucket"
-        buttonMethod={() => ($showCreateBucket = true)} />
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search by name or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector
+                {columns}
+                view={data.view}
+                hideColumns={!data.buckets.total}
+                hideView={!data.buckets.total} />
+            {#if $canWriteBuckets}
+                <Button
+                    on:mousedown={() => ($showCreateBucket = true)}
+                    event="create_bucket"
+                    size="s">
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create bucket
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
     {#if data.buckets.total}
-        <CardContainer
-            showEmpty={$canWriteBuckets}
-            total={data.buckets.total}
-            offset={data.offset}
-            event="bucket"
-            service="buckets"
-            on:click={() => ($showCreateBucket = true)}>
-            {#each data.buckets.buckets as bucket}
-                <GridItem1
-                    href={`${base}/project-${$page.params.region}-${project}/storage/bucket-${bucket.$id}`}>
-                    <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
-                    <svelte:fragment slot="status">
-                        {#if !bucket.enabled}
-                            <Pill>Disabled</Pill>
-                        {/if}
-                    </svelte:fragment>
-
-                    <Id value={bucket.$id}>{bucket.$id}</Id>
-
-                    <svelte:fragment slot="icons">
-                        <li>
-                            <span
-                                class:u-opacity-20={!bucket.encryption}
-                                class="icon-lock-closed"
-                                aria-hidden="true"
-                                use:tooltip={{
-                                    content: bucket.encryption
-                                        ? 'Encryption enabled'
-                                        : 'Encryption disabled'
-                                }} />
-                        </li>
-                        <li>
-                            <span
-                                class:u-opacity-20={!bucket.antivirus}
-                                class="icon-shield-check"
-                                aria-hidden="true"
-                                use:tooltip={{
-                                    content: bucket.antivirus
-                                        ? 'Antivirus enabled'
-                                        : 'Antivirus disabled'
-                                }} />
-                        </li>
-                    </svelte:fragment>
-                </GridItem1>
-            {/each}
-            <svelte:fragment slot="empty">
-                <p>Create a bucket</p>
-            </svelte:fragment>
-        </CardContainer>
+        {#if data.view === 'grid'}
+            <Grid {data} bind:showCreate={$showCreateBucket} />
+        {:else}
+            <Table {data} />
+        {/if}
 
         <PaginationWithLimit
-            name="Buckets"
+            name="Databases"
             limit={data.limit}
             offset={data.offset}
             total={data.buckets.total} />
@@ -96,7 +71,7 @@
             single
             href="https://appwrite.io/docs/products/storage"
             target="bucket"
-            on:click={() => ($showCreateBucket = true)} />
+            on:click={() => showCreateBucket.set(true)} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.ts b/src/routes/(console)/project-[region]-[project]/storage/+page.ts
index 6fe61a15b..61cb3d856 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.ts
@@ -1,19 +1,26 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import { CARD_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, route, params }) => {
     const page = getPage(url);
-    const limit = getLimit(params.project, url, route, CARD_LIMIT);
+    const search = getSearch(url);
+    const view = getView(url, route, View.Grid);
+    const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
         offset,
         limit,
+        view,
+        search,
         buckets: await sdk
             .forProject(params.region, params.project)
-            .storage.listBuckets([Query.limit(limit), Query.offset(offset), Query.orderDesc('')])
+            .storage.listBuckets(
+                [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+                search || undefined
+            )
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte
index 9a8c02271..5988aa94c 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import {
         registerCommands,
         registerSearchers,
@@ -10,23 +10,22 @@
     import { fileSearcher } from '$lib/commandCenter/searchers';
     import { canWriteBuckets } from '$lib/stores/roles';
     import { project } from '../../store';
-    import { showCreateFile } from './+page.svelte';
     import { bucket } from './store';
+    import { IconKey, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
             label: 'Create file',
             async callback() {
-                if (!$page.url.pathname.endsWith($bucket.$id)) {
+                if (!page.url.pathname.endsWith($bucket.$id)) {
                     goto(
-                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}`
+                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/create`
                     );
                 }
-                showCreateFile();
             },
-            keys: $page.url.pathname.endsWith($bucket.$id) ? ['c'] : ['c', 'f'],
+            keys: page.url.pathname.endsWith($bucket.$id) ? ['c'] : ['c', 'f'],
             group: 'files',
-            icon: 'plus'
+            icon: IconPlus
         },
         {
             label: 'Permissions',
@@ -37,7 +36,7 @@
                 scrollBy({ top: -100 });
             },
             group: 'buckets',
-            icon: 'key',
+            icon: IconKey,
             disabled: !$canWriteBuckets
         },
         {
@@ -48,7 +47,7 @@
                 );
             },
             group: 'buckets',
-            icon: 'puzzle',
+            icon: IconPuzzle,
             disabled: !$canWriteBuckets
         },
         {
@@ -60,7 +59,7 @@
                 scrollBy({ top: -100 });
             },
             group: 'buckets',
-            icon: 'lock-closed',
+            icon: IconLockClosed,
             disabled: !$canWriteBuckets
         },
         {
@@ -70,7 +69,7 @@
                     `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}`
                 );
             },
-            disabled: $page.url.pathname.endsWith($bucket.$id),
+            disabled: page.url.pathname.endsWith($bucket.$id),
             keys: ['g', 'f'],
             group: 'navigation',
             rank: 10
@@ -82,7 +81,7 @@
                     `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/usage`
                 );
             },
-            disabled: $page.url.pathname.endsWith('usage'),
+            disabled: page.url.pathname.endsWith('usage'),
             keys: ['g', 'u'],
             group: 'navigation',
             rank: 10
@@ -94,7 +93,7 @@
                     `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/settings`
                 );
             },
-            disabled: $page.url.pathname.endsWith('settings') || !$canWriteBuckets,
+            disabled: page.url.pathname.endsWith('settings') || !$canWriteBuckets,
             keys: ['g', 's'],
             group: 'navigation',
             rank: 10
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
index d49c183ad..859cf529c 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,65 +1,44 @@
-<script lang="ts" context="module">
-    export const showCreateFile = () => {
-        wizard.start(Create);
-    };
-</script>
-
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import {
-        Avatar,
-        DropList,
-        DropListItem,
-        DropListLink,
-        Empty,
-        EmptySearch,
-        PaginationWithLimit,
-        SearchQuery
-    } from '$lib/components';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Avatar, Empty, EmptySearch, PaginationWithLimit, SearchQuery } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableRowLink
-    } from '$lib/elements/table';
-    import { toLocaleDate } from '$lib/helpers/date';
-    import { calculateSize, humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
     import { addNotification } from '$lib/stores/notifications';
     import { uploader } from '$lib/stores/uploader';
-    import { wizard } from '$lib/stores/wizard';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { getServiceLimit, showUsageRatesModal, tierToPlan } from '$lib/stores/billing';
     import { sdk } from '$lib/stores/sdk.js';
-    import Create from './create-file/create.svelte';
     import DeleteFile from './deleteFile.svelte';
-    import { isCloud } from '$lib/system';
+    import { Layout, Table, Icon, Popover, ActionMenu } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import {
+        IconDotsHorizontal,
+        IconPencil,
+        IconPlus,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
     let showDelete = false;
-    let showDropdown = [];
     let selectedFile: Models.File = null;
 
-    const projectId = $page.params.project;
-    const bucketId = $page.params.bucket;
-    const getPreview = (fileId: string) =>
-        sdk
-            .forProject($page.params.region, $page.params.project)
-            .storage.getFilePreview(bucketId, fileId, 64, 64)
-            .toString() + '&mode=admin';
+    const bucketId = page.params.bucket;
+
+    function getPreview(fileId: string) {
+        return (
+            sdk
+                .forProject(page.params.region, page.params.project)
+                .storage.getFilePreview(bucketId, fileId, 128, 128)
+                .toString() + '&mode=admin'
+        );
+    }
 
     async function fileDeleted(event: CustomEvent<Models.File>) {
         showDelete = false;
@@ -70,10 +49,10 @@
     async function deleteFile(file: Models.File) {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.deleteFile(file.bucketId, file.$id);
             await invalidate(Dependencies.FILES);
-            uploader.removeFile(file);
+            await uploader.removeFile(file);
             trackEvent(Submit.FileDelete);
         } catch (error) {
             addNotification({
@@ -84,10 +63,6 @@
         }
     }
 
-    $: maxFileSize = isCloud
-        ? humanFileSize(sizeToBytes(getServiceLimit('fileSize'), 'MB', 1000))
-        : null;
-
     let isUploading = false;
 
     const beforeunload = (event: BeforeUnloadEvent) => {
@@ -104,7 +79,8 @@
     onMount(() => {
         return uploader.subscribe(() => {
             isUploading = $uploader.files.some(
-                (file) => !file.completed && file.progress < 100 && !file.failed
+                (file) =>
+                    file.status !== 'success' && file.progress < 100 && file.status !== 'failed'
             );
         });
     });
@@ -113,147 +89,108 @@
 <svelte:window on:beforeunload={beforeunload} />
 
 <Container>
-    <ContainerHeader title="Files" serviceId="storage" isFlex={false}>
-        <svelte:fragment let:isButtonDisabled>
-            <SearchQuery search={data.search} placeholder="Search by filename">
-                <div
-                    use:tooltip={{
-                        content: `Upgrade to add more files`,
-                        disabled: !isButtonDisabled
-                    }}>
-                    <Button
-                        on:click={() => wizard.start(Create)}
-                        event="create_file"
-                        disabled={isButtonDisabled}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create file</span>
-                    </Button>
-                </div>
-            </SearchQuery>
-        </svelte:fragment>
-        <svelte:fragment slot="tooltip" let:limit let:tier let:upgradeMethod>
-            {#if tier === tierToPlan(BillingPlan.FREE).name}
-                <p class="u-bold">The {tier} plan has limits</p>
-                <ul>
-                    <li>{limit}GB total file storage</li>
-                    <li>
-                        {Math.floor(parseInt(maxFileSize.value))}{maxFileSize.unit} file upload size
-                        limit
-                    </li>
-                </ul>
-                <p class="text">
-                    <button class="link" type="button" on:click|preventDefault={upgradeMethod}
-                        >Upgrade</button>
-                    for additional storage resources.
-                </p>
-            {:else}
-                <p class="text">
-                    You are limited to {limit} GB storage on the {tier} plan. After this amount
-                    <button
-                        class="link"
-                        type="button"
-                        on:click|preventDefault={() => ($showUsageRatesModal = true)}
-                        >usage fees will apply</button>
-                    .
-                </p>
-            {/if}
-        </svelte:fragment>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery placeholder="Search files" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button
+                href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/create`}
+                event="create_file"
+                size="s">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create file
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.files.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Filename</TableCellHead>
-                <TableCellHead onlyDesktop width={140}>Type</TableCellHead>
-                <TableCellHead onlyDesktop width={100}>Size</TableCellHead>
-                <TableCellHead onlyDesktop width={120}>Created</TableCellHead>
-                <TableCellHead width={40} />
-            </TableHeader>
-            <TableBody>
-                {#each data.files.files as file, index}
-                    {#if file.chunksTotal / file.chunksUploaded !== 1}
-                        <TableRow>
-                            <TableCell title="Name">
-                                <div class="u-flex u-gap-12 u-cross-center">
-                                    <span class="avatar is-size-small is-color-empty" />
-
-                                    <span class="text u-trim">{file.name}</span>
-                                    <div>
-                                        <Pill warning>Pending</Pill>
-                                    </div>
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'filename' },
+                { id: 'type', width: { min: 140 } },
+                { id: 'size', width: { min: 100 } },
+                { id: 'created', width: { min: 120 } },
+                { id: 'actions', width: 40 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="filename" {root}>Filename</Table.Header.Cell>
+                <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
+                <Table.Header.Cell column="size" {root}>Size</Table.Header.Cell>
+                <Table.Header.Cell column="created" {root}>Created</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each data.files.files as file}
+                {#if file.chunksTotal / file.chunksUploaded !== 1}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="filename" {root}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                <span class="avatar is-size-small is-color-empty"></span>
+                                <span class="text u-trim">{file.name}</span>
+                                <div>
+                                    <Pill warning>Pending</Pill>
                                 </div>
-                            </TableCell>
-                            <TableCellText onlyDesktop title="Type">{file.mimeType}</TableCellText>
-                            <TableCellText onlyDesktop title="Size">
-                                {calculateSize(file.sizeOriginal)}
-                            </TableCellText>
-                            <TableCellText onlyDesktop title="Date Created">
-                                {toLocaleDate(file.$createdAt)}
-                            </TableCellText>
-                            <TableCell>
-                                <div class="u-flex u-main-center">
-                                    <button
-                                        class="button is-only-icon is-text"
-                                        aria-label="Delete item"
-                                        on:click|preventDefault={() => {
-                                            deleteFile(file);
+                            </Layout.Stack>
+                        </Table.Cell>
+                        <Table.Cell column="type" {root}>{file.mimeType}</Table.Cell>
+                        <Table.Cell column="size" {root}>
+                            {calculateSize(file.sizeOriginal)}
+                        </Table.Cell>
+                        <Table.Cell column="created" {root}>
+                            <DualTimeView time={file.$createdAt} />
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <div class="u-flex u-main-center">
+                                <button
+                                    class="button is-only-icon is-text"
+                                    aria-label="Delete item"
+                                    on:click|preventDefault={() => deleteFile(file)}>
+                                    <span class="icon-trash" aria-hidden="true"></span>
+                                </button>
+                            </div>
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {:else}
+                    {@const href = `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${bucketId}/file-${file.$id}`}
+                    <Table.Row.Link {href} {root}>
+                        <Table.Cell column="filename" {root}>
+                            <div class="u-flex u-gap-12 u-cross-center">
+                                <Avatar size="xs" src={getPreview(file.$id)} alt={file.name} />
+                                <span class="text u-trim">{file.name}</span>
+                            </div>
+                        </Table.Cell>
+                        <Table.Cell column="type" {root}>{file.mimeType}</Table.Cell>
+                        <Table.Cell column="size" {root}>
+                            {calculateSize(file.sizeOriginal)}
+                        </Table.Cell>
+                        <Table.Cell column="created" {root}>
+                            <DualTimeView time={file.$createdAt} />
+                        </Table.Cell>
+                        <Table.Cell column="actions" {root}>
+                            <Popover let:toggle placement="bottom-start" padding="none">
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip">
+                                    <ActionMenu.Item.Anchor {href} leadingIcon={IconPencil}>
+                                        Update
+                                    </ActionMenu.Item.Anchor>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconTrash}
+                                        on:click={() => {
+                                            selectedFile = file;
+                                            showDelete = true;
                                         }}>
-                                        <span class="icon-trash" aria-hidden="true" />
-                                    </button>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-                    {:else}
-                        <TableRowLink
-                            href={`${base}/project-${$page.params.region}-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}>
-                            <TableCell title="Name">
-                                <div class="u-flex u-gap-12 u-cross-center">
-                                    <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
-                                    <span class="text u-trim">{file.name}</span>
-                                </div>
-                            </TableCell>
-                            <TableCellText onlyDesktop title="Type">{file.mimeType}</TableCellText>
-                            <TableCellText onlyDesktop title="Size">
-                                {calculateSize(file.sizeOriginal)}
-                            </TableCellText>
-                            <TableCellText onlyDesktop title="Date Created">
-                                {toLocaleDate(file.$createdAt)}
-                            </TableCellText>
-                            <TableCell showOverflow>
-                                <DropList
-                                    bind:show={showDropdown[index]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <button
-                                        class="button is-only-icon is-text"
-                                        aria-label="More options"
-                                        on:click|preventDefault={() => {
-                                            showDropdown[index] = !showDropdown[index];
-                                        }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                                    </button>
-                                    <svelte:fragment slot="list">
-                                        <DropListLink
-                                            on:click={() => {
-                                                showDropdown[index] = false;
-                                            }}
-                                            href={`${base}/project-${$page.params.region}-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
-                                            icon="pencil">Update</DropListLink>
-                                        <DropListItem
-                                            icon="trash"
-                                            on:click={() => {
-                                                showDropdown[index] = false;
-                                                selectedFile = file;
-                                                showDelete = true;
-                                            }}>Delete</DropListItem>
-                                    </svelte:fragment>
-                                </DropList>
-                            </TableCell>
-                        </TableRowLink>
-                    {/if}
-                {/each}
-            </TableBody>
-        </Table>
+                                        Delete
+                                    </ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </Popover>
+                        </Table.Cell>
+                    </Table.Row.Link>
+                {/if}
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit
             name="Files"
@@ -275,7 +212,7 @@
                 </Button>
                 <Button
                     secondary
-                    href={`${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$page.params.bucket}`}>
+                    href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}`}>
                     Clear Search
                 </Button>
             </div>
@@ -283,9 +220,12 @@
     {:else}
         <Empty
             single
-            href="https://appwrite.io/docs/products/storage/upload-download"
             target="file"
-            on:click={() => wizard.start(Create)} />
+            href="https://appwrite.io/docs/products/storage/upload-download"
+            on:click={() =>
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/create`
+                )} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.ts b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.ts
index 2cf007162..5c1076987 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.ts
@@ -8,7 +8,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.FILES);
     const page = getPage(url);
     const search = getSearch(url);
-    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     const files = await sdk
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
index 054a1811c..0e159506c 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -12,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
             title: $project.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/storage`,
             title: 'Storage'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$bucket?.$id}`,
             title: $bucket?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/create.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/create.svelte
deleted file mode 100644
index 0c0ce134a..000000000
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/create.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Dependencies } from '$lib/constants';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import Wizard from '$lib/layout/wizard.svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { uploader } from '$lib/stores/uploader';
-    import { wizard } from '$lib/stores/wizard';
-    import { ID } from '@appwrite.io/console';
-    import Step1 from './step1.svelte';
-    import Step2 from './step2.svelte';
-    import { createFile } from './store';
-
-    const bucketId = $page.params.bucket;
-
-    const stepComponents: WizardStepsType = new Map();
-
-    stepComponents.set(1, {
-        component: Step1,
-        label: 'Create'
-    });
-
-    stepComponents.set(2, {
-        component: Step2,
-        label: 'Permissions'
-    });
-
-    async function create() {
-        const fileId = $createFile.id ?? ID.unique();
-
-        try {
-            const uploadPromise = uploader.uploadFile(
-                $page.params.region,
-                $page.params.project,
-                bucketId,
-                fileId,
-                $createFile.files[0],
-                $createFile.permissions
-            );
-
-            createFile.reset();
-            wizard.hide();
-
-            addNotification({
-                type: 'success',
-                message: `File upload in progress`
-            });
-            trackEvent(Submit.FileCreate, {
-                customId: !!$createFile.id
-            });
-
-            await uploadPromise;
-            invalidate(Dependencies.FILES);
-        } catch (e) {
-            uploader.removeFromQueue(fileId);
-
-            addNotification({
-                type: 'error',
-                message: e.message
-            });
-            trackError(e, Submit.FileCreate);
-        }
-    }
-</script>
-
-<Wizard title="Create file" steps={stepComponents} on:exit={createFile.reset} on:finish={create} />
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte
deleted file mode 100644
index dd0daca05..000000000
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { Alert, CustomId } from '$lib/components';
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputFile } from '$lib/elements/forms';
-    import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
-    import WizardStep from '$lib/layout/wizardStep.svelte';
-    import { currentPlan } from '$lib/stores/organization';
-    import { isCloud } from '$lib/system';
-    import { bucket } from '../store';
-    import { createFile } from './store';
-    import { base } from '$app/paths';
-
-    let showCustomId = false;
-    let fileError: string = null;
-    const service = $currentPlan?.['fileSize'];
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">File</svelte:fragment>
-    <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
-
-    {#if isCloud && fileError === 'File size exceeds the limit'}
-        {@const size = humanFileSize($bucket.maximumFileSize ?? sizeToBytes(service, 'MB', 1000))}
-        <Alert type="info">
-            <p class="text">
-                The maximum file upload size for this bucket is {parseInt(size.value)}{size.unit}.
-                You can adjust it in your
-                <a
-                    href={`${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket.$id}/settings`}
-                    style:text-decoration="underline">bucket settings</a
-                >.
-            </p>
-        </Alert>
-    {/if}
-
-    <FormList class="u-margin-block-start-24">
-        <div class="u-width-full-line u-overflow-hidden">
-            <InputFile
-                required
-                bind:files={$createFile.files}
-                allowedFileExtensions={$bucket.allowedFileExtensions}
-                bind:error={fileError}
-                maxSize={isCloud
-                    ? $bucket.maximumFileSize
-                    : ($bucket.maximumFileSize ?? sizeToBytes(service, 'MB', 1000))} />
-        </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}
-            <div class="custom-id-wrapper">
-                <CustomId autofocus bind:show={showCustomId} name="File" bind:id={$createFile.id} />
-            </div>
-        {/if}
-    </FormList>
-</WizardStep>
-
-<style lang="scss">
-    .custom-id-wrapper :global(.is-inner-modal) {
-        inline-size: auto;
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step2.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step2.svelte
deleted file mode 100644
index 58363e57d..000000000
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step2.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-    import Alert from '$lib/components/alert.svelte';
-    import Permissions from '$lib/components/permissions/permissions.svelte';
-    import WizardStep from '$lib/layout/wizardStep.svelte';
-    import { bucket } from '../store';
-    import { createFile } from './store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose who can access your buckets and files. For more information, check out the
-        <a
-            href="https://appwrite.io/docs/advanced/platform/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions Guide
-        </a>.</svelte:fragment>
-
-    {#if $bucket.fileSecurity}
-        <div class="common-section">
-            <Alert type="info">
-                <svelte:fragment slot="title">File security enabled</svelte:fragment>
-                Users will be able to access this file if they have been granted
-                <b>either File or Bucket permissions</b>.
-            </Alert>
-        </div>
-        <div class="common-section">
-            <Permissions bind:permissions={$createFile.permissions} />
-        </div>
-    {:else}
-        <Alert type="info">
-            <svelte:fragment slot="title">File security disabled</svelte:fragment>
-            If you want to assign file permissions, navigate to Bucket settings and enable file security.
-            Otherwise, only Bucket permissions will be used.
-        </Alert>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/store.ts b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/store.ts
deleted file mode 100644
index 6a6eb9248..000000000
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/store.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { writable } from 'svelte/store';
-
-type CreateFile = {
-    files: FileList | null;
-    id: string | null;
-    permissions: string[];
-};
-
-const initialState: CreateFile = {
-    files: null,
-    id: null,
-    permissions: []
-};
-
-export const createFile = (function initialize() {
-    const store = writable<CreateFile>({ ...initialState });
-
-    return {
-        ...store,
-        reset() {
-            store.set({ ...initialState });
-        }
-    };
-})();
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte
new file mode 100644
index 000000000..0c43000cd
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import {
+        Alert,
+        Fieldset,
+        Icon,
+        Layout,
+        Tag,
+        Typography,
+        Upload
+    } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { writable } from 'svelte/store';
+    import { Permissions } from '$lib/components/permissions';
+    import type { PageData } from './$types';
+    import { isCloud } from '$lib/system';
+    import { currentPlan } from '$lib/stores/organization';
+    import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
+    import CustomId from '$lib/components/customId.svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { ID } from '@appwrite.io/console';
+    import { uploader } from '$lib/stores/uploader';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { removeFile } from '$lib/helpers/files';
+
+    export let data: PageData;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+    let fileError: string = null;
+    let showCustomId = false;
+    const service = $currentPlan?.['fileSize'];
+    let files: FileList | null = null;
+    let id: string | null = null;
+    let permissions: string[] = [];
+
+    async function create() {
+        const fileId = id ?? ID.unique();
+
+        try {
+            const promise = uploader.uploadFile(
+                page.params.region,
+                page.params.project,
+                page.params.bucket,
+                fileId,
+                files[0],
+                permissions
+            );
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}`
+            );
+            addNotification({
+                type: 'success',
+                message: `File upload in progress`
+            });
+            trackEvent(Submit.FileCreate, {
+                customId: !!id
+            });
+            await promise;
+            invalidate(Dependencies.FILES);
+        } catch (e) {
+            uploader.removeFromQueue(fileId);
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+            trackError(e, Submit.FileCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create file"
+    href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/`}
+    bind:showExitModal
+    column
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Data">
+                <Layout.Stack>
+                    {#if isCloud && fileError === 'File size exceeds the limit'}
+                        {@const size = humanFileSize(
+                            data.bucket.maximumFileSize ?? sizeToBytes(service, 'MB', 1000)
+                        )}
+                        <Alert.Inline status="info">
+                            The maximum file upload size for this bucket is {parseInt(
+                                size.value
+                            )}{size.unit}. You can adjust it in your
+                            <a
+                                href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/settings`}
+                                style:text-decoration="underline">bucket settings</a
+                            >.
+                        </Alert.Inline>
+                    {/if}
+                    <Upload.Dropzone
+                        bind:files
+                        required
+                        extensions={data.bucket.allowedFileExtensions}>
+                        <Typography.Text variant="l-500"
+                            >Drag and drop files here or click to upload</Typography.Text>
+                    </Upload.Dropzone>
+                    {#if files}
+                        <Upload.List
+                            files={Array.from(files).map((f) => {
+                                return {
+                                    ...f,
+                                    size: f.size,
+                                    name: f.name,
+                                    removable: true,
+                                    extension: f.type
+                                };
+                            })}
+                            on:remove={(e) => (files = removeFile(e.detail, files))} />
+                    {/if}
+
+                    {#if !showCustomId}
+                        <div>
+                            <Tag on:click={() => (showCustomId = !showCustomId)}>
+                                <Icon icon={IconPencil} slot="start" />
+                                <span class="text"> File ID </span>
+                            </Tag>
+                        </div>
+                    {:else}
+                        <CustomId autofocus bind:show={showCustomId} name="File" bind:id />
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Permissions">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose who can access your buckets and files. For more information, check
+                        out the
+                        <a
+                            href="https://appwrite.io/docs/advanced/platform/permissions"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="link">
+                            Permissions Guide
+                        </a>.
+                    </Typography.Text>
+
+                    {#if data.bucket.fileSecurity}
+                        <Alert.Inline status="info" title="File security enabled">
+                            Users will be able to access this file if they have been granted
+                            <b>either File or Bucket permissions</b>.
+                        </Alert.Inline>
+                        <Permissions bind:permissions />
+                    {:else}
+                        <Alert.Inline status="info" title="File security disabled">
+                            If you want to assign file permissions, navigate to Bucket settings and
+                            enable file security. Otherwise, only Bucket permissions will be used.
+                        </Alert.Inline>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte
index c1b305b6e..b7053609b 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte
@@ -1,48 +1,37 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { bucket } from './store';
 
     export let showDelete = false;
-
-    const deleteUser = async () => {
+    let error: string;
+    const onSubmit = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.deleteBucket($bucket.$id);
             showDelete = false;
             addNotification({
                 type: 'success',
                 message: `${$bucket.name} has been deleted`
             });
-            await goto(`${base}/project-${$page.params.region}-${$page.params.project}/storage`);
+            await goto(`${base}/project-${page.params.region}-${page.params.project}/storage`);
             trackEvent(Submit.BucketDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.BucketDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.BucketDelete);
         }
     };
 </script>
 
-<Modal
-    title="Delete bucket"
-    bind:show={showDelete}
-    onSubmit={deleteUser}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>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>
+<Confirm {onSubmit} title="Delete bucket" bind:open={showDelete} bind:error>
+    <Typography.Text>
+        Are you sure you want to delete <b>{$bucket.name}</b>?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteFile.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteFile.svelte
index 72c484b78..944a12b11 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteFile.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteFile.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
 
     export let file: Models.File;
     export let showDelete = false;
-
+    let error: string;
     const dispatch = createEventDispatcher();
 
-    const deleteFile = async () => {
+    const onSubmit = async () => {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.deleteFile(file.bucketId, file.$id);
             showDelete = false;
             dispatch('deleted', file);
@@ -25,26 +24,13 @@
                 message: `${file.name} has been deleted`
             });
             trackEvent(Submit.FileDelete);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.FileDelete);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.FileDelete);
         }
     };
 </script>
 
-<Modal
-    title="Delete file"
-    bind:show={showDelete}
-    onSubmit={deleteFile}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>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>
+<Confirm {onSubmit} title="Delete file" bind:open={showDelete} bind:error>
+    Are you sure you want to delete <b>{file.name}</b>?
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
index 161f625f5..e198256ae 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
@@ -7,6 +7,7 @@ import { error } from '@sveltejs/kit';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.FILE);
+    depends(Dependencies.FILE_TOKENS);
 
     try {
         return {
@@ -14,7 +15,10 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             breadcrumbs: Breadcrumbs,
             file: await sdk
                 .forProject(params.region, params.project)
-                .storage.getFile(params.bucket, params.file)
+                .storage.getFile(params.bucket, params.file),
+            tokens: await sdk
+                .forProject(params.region, params.project)
+                .tokens.list(params.bucket, params.file)
         };
     } catch (e) {
         error(e.code, e.message);
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index 7247669dd..36e087c71 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading, Alert, CopyInput } from '$lib/components';
+    import { CardGrid, BoxAvatar, CopyInput, Empty } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
-    import { file } from './store';
-    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { columns, file, tokens } from './store';
+    import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
@@ -15,38 +15,61 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { bucket } from '../store';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
+    import {
+        ActionMenu,
+        Alert,
+        Badge,
+        Button as PinkButton,
+        Layout,
+        Icon,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconDotsHorizontal,
+        IconDuplicate,
+        IconPencil,
+        IconPlus,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import FileTokensCopyUrl from './fileTokensCopyUrl.svelte';
+    import ManageFileTokenModal, { cleanFormattedDate } from './manageFileToken.svelte';
+    import { type Models } from '@appwrite.io/console';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { Menu } from '$lib/components/menu';
+    import { SHOW_INIT_FEATURES } from '$lib/system';
 
     let showFileAlert = true;
-    onMount(async () => {
-        filePermissions = $file?.$permissions;
-    });
 
     let showDelete = false;
-    let filePermissions = $file?.$permissions;
     let arePermsDisabled = true;
+    let filePermissions = $file?.$permissions;
+
+    let showManageToken = false;
+    let tokenDeleteMode = false;
+    let showCopyUrlModal = false;
+    let selectedFileToken: Models.ResourceToken | null = null;
 
     const getPreview = (fileId: string) =>
         sdk
-            .forProject($page.params.region, $page.params.project)
-            .storage.getFilePreview($file.bucketId, fileId, 410, 250)
+            .forProject(page.params.region, page.params.project)
+            .storage.getFilePreview($file.bucketId, fileId, 640, 300)
             .toString() + '&mode=admin';
     const getView = (fileId: string) =>
         sdk
-            .forProject($page.params.region, $page.params.project)
+            .forProject(page.params.region, page.params.project)
             .storage.getFileView($file.bucketId, fileId)
             .toString() + '&mode=admin';
 
     $: if (filePermissions) {
-        if (symmetricDifference(filePermissions, $file.$permissions).length) {
-            arePermsDisabled = false;
-        } else arePermsDisabled = true;
+        arePermsDisabled = !symmetricDifference(filePermissions, $file.$permissions).length;
     }
 
     function downloadFile() {
         return (
             sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.getFileDownload($file.bucketId, $file.$id)
                 .toString() + '&mode=admin'
         );
@@ -55,7 +78,7 @@
     async function updatePermissions() {
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.updateFile($file.bucketId, $file.$id, $file.name, filePermissions);
             await invalidate(Dependencies.FILE);
             arePermsDisabled = true;
@@ -70,8 +93,93 @@
                 type: 'error'
             });
             trackError(error, Submit.FileUpdatePermissions);
+        } finally {
+            selectedFileToken = null;
         }
     }
+
+    async function deleteFileToken(token: Models.ResourceToken) {
+        try {
+            await sdk.forProject(page.params.region, page.params.project).tokens.delete(token.$id);
+            await invalidate(Dependencies.FILE_TOKENS);
+            addNotification({
+                message: 'File token deleted',
+                type: 'success'
+            });
+            trackEvent(Submit.FileTokenDelete);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.FileTokenDelete);
+        } finally {
+            selectedFileToken = null;
+        }
+    }
+
+    async function createFileToken(expiry: string) {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .tokens.createFileToken($file.bucketId, $file.$id, expiry);
+
+            await invalidate(Dependencies.FILE_TOKENS);
+            addNotification({
+                message: 'File token created',
+                type: 'success'
+            });
+            trackEvent(Submit.FileTokenCreate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.FileTokenCreate);
+        } finally {
+            selectedFileToken = null;
+        }
+    }
+
+    async function updateFileToken(fileToken: Models.ResourceToken) {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .tokens.update(selectedFileToken.$id, fileToken.expire ? fileToken.expire : null);
+            await invalidate(Dependencies.FILE_TOKENS);
+            addNotification({
+                message: 'File token updated',
+                type: 'success'
+            });
+            trackEvent(Submit.FileTokenUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.FileTokenUpdate);
+        } finally {
+            selectedFileToken = null;
+        }
+    }
+
+    function getExpiryDetails(token: Models.ResourceToken): {
+        status: 'success' | 'warning' | 'error' | null;
+        message: string | null;
+    } {
+        if (token.expire === '') token.expire = null;
+        const isExpired = token.expire !== null && new Date(token.expire) < new Date();
+        const isExpiring = token.expire && diffDays(new Date(), new Date(token.expire)) < 14;
+
+        return {
+            status: isExpired ? 'error' : isExpiring ? 'warning' : null,
+            message: isExpired ? 'Expired' : isExpiring ? 'Expires soon' : null
+        };
+    }
+
+    onMount(async () => {
+        filePermissions = $file?.$permissions;
+    });
 </script>
 
 <Container>
@@ -83,6 +191,7 @@
                     class="file-preview is-with-image"
                     target="_blank"
                     rel="noopener noreferrer"
+                    style:inline-size="100%"
                     aria-label="open file in new window">
                     <div class="file-preview-image">
                         <img
@@ -93,18 +202,18 @@
                     </div>
                     <div class="file-preview-content">
                         <div class="avatar">
-                            <span class="icon-external-link" aria-hidden="true" />
+                            <span class="icon-external-link" aria-hidden="true"></span>
                         </div>
                     </div>
                 </a>
-                <div class="u-flex u-flex-vertical u-gap-4">
-                    <Heading tag="h2" size="7" trimmed={false} trimmedSecondLine={true}
-                        >{$file.name}</Heading>
-                    <p>{$file.mimeType}</p>
-                </div>
             </div>
             <svelte:fragment slot="aside">
                 <div>
+                    <p>
+                        <span class="u-bold">Filename:</span>
+                        <span class="u-trim">{$file.name}</span>
+                    </p>
+                    <p><span class="u-bold">MIME type:</span> {$file.mimeType}</p>
                     <p><span class="u-bold">Size:</span> {calculateSize($file.sizeOriginal)}</p>
                     <p><span class="u-bold">Created:</span> {toLocaleDate($file.$createdAt)}</p>
                     <p>
@@ -112,43 +221,144 @@
                         {toLocaleDate($file.$updatedAt)}
                     </p>
                 </div>
-                <CopyInput label="File URL" showLabel={true} value={getView($file.$id)} />
+                <CopyInput label="File URL" value={getView($file.$id)} />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
                 <Button secondary href={downloadFile()} event="download_file" external>
-                    <span class="icon-download" aria-hidden="true" />
+                    <span class="icon-download" aria-hidden="true"></span>
                     <span class="text"> Download</span></Button>
             </svelte:fragment>
         </CardGrid>
 
+        {#if SHOW_INIT_FEATURES}
+            <CardGrid>
+                <svelte:fragment slot="title">File tokens</svelte:fragment>
+                Use tokens to provide public access to the file.
+                <svelte:fragment slot="aside">
+                    {#if $tokens.total}
+                        <Layout.Stack
+                            justifyContent="flex-end"
+                            direction={$isSmallViewport ? 'column' : 'row'}>
+                            <Button secondary on:click={() => (showManageToken = true)}>
+                                <Icon size="s" icon={IconPlus} />
+                                <span class="text">Create token</span>
+                            </Button>
+                        </Layout.Stack>
+
+                        <Table.Root columns={$columns} let:root>
+                            <svelte:fragment slot="header" let:root>
+                                {#each $columns as { id, title } (id)}
+                                    <Table.Header.Cell column={id} {root}
+                                        >{title}</Table.Header.Cell>
+                                {/each}
+                            </svelte:fragment>
+
+                            {#each $tokens.tokens as token}
+                                <Table.Row.Base {root}>
+                                    <Table.Cell column="created" {root}
+                                        >{toLocaleDate(token.$createdAt)}</Table.Cell>
+
+                                    <Table.Cell column="expire" {root}>
+                                        <Layout.Stack gap="s" direction="row">
+                                            {@const expiration = getExpiryDetails(token)}
+                                            {token.expire
+                                                ? cleanFormattedDate(token.expire)
+                                                : 'Never'}
+
+                                            {#if expiration.status}
+                                                <Badge
+                                                    size="s"
+                                                    variant="secondary"
+                                                    type={expiration.status}
+                                                    content={expiration.message} />
+                                            {/if}
+                                        </Layout.Stack>
+                                    </Table.Cell>
+
+                                    <Table.Cell column="last_accessed" {root}
+                                        >{token.accessedAt
+                                            ? cleanFormattedDate(token.accessedAt, true)
+                                            : 'Never'}</Table.Cell>
+
+                                    <Table.Cell column="actions" {root}>
+                                        <Layout.Stack alignItems="flex-end">
+                                            <Menu>
+                                                <PinkButton.Button icon variant="ghost">
+                                                    <Icon size="s" icon={IconDotsHorizontal} />
+                                                </PinkButton.Button>
+
+                                                <svelte:fragment slot="menu" let:toggle>
+                                                    <ActionMenu.Root>
+                                                        <ActionMenu.Root noPadding>
+                                                            <ActionMenu.Item.Button
+                                                                on:click={() => {
+                                                                    toggle();
+                                                                    showCopyUrlModal = true;
+                                                                    selectedFileToken = token;
+                                                                }}
+                                                                leadingIcon={IconDuplicate}>
+                                                                Copy URL
+                                                            </ActionMenu.Item.Button>
+                                                        </ActionMenu.Root>
+                                                        <ActionMenu.Item.Button
+                                                            leadingIcon={IconPencil}
+                                                            on:click={() => {
+                                                                toggle();
+                                                                showManageToken = true;
+                                                                selectedFileToken = token;
+                                                            }}>
+                                                            Edit expiry
+                                                        </ActionMenu.Item.Button>
+                                                        <ActionMenu.Item.Button
+                                                            status="danger"
+                                                            leadingIcon={IconTrash}
+                                                            on:click={() => {
+                                                                toggle();
+                                                                tokenDeleteMode = true;
+                                                                showManageToken = true;
+                                                                selectedFileToken = token;
+                                                            }}>
+                                                            Delete
+                                                        </ActionMenu.Item.Button>
+                                                    </ActionMenu.Root>
+                                                </svelte:fragment>
+                                            </Menu>
+                                        </Layout.Stack>
+                                    </Table.Cell>
+                                </Table.Row.Base>
+                            {/each}
+                        </Table.Root>
+                    {:else}
+                        <Empty on:click={() => (showManageToken = true)}
+                            >Create new file token</Empty>
+                    {/if}
+                </svelte:fragment>
+            </CardGrid>
+        {/if}
         <CardGrid>
-            <Heading tag="h6" size="7">Permissions</Heading>
-            <p>
-                Assign read or write permissions at the bucket level or file level. If bucket level
-                permissions are enabled, file permissions will be ignored.
-            </p>
+            <svelte:fragment slot="title">Permissions</svelte:fragment>
+            Assign read or write permissions at the bucket level or file level. If bucket level permissions
+            are enabled, file permissions will be ignored.
             <svelte:fragment slot="aside">
                 {#if $bucket.fileSecurity}
                     {#if showFileAlert}
-                        <Alert type="info" dismissible on:dismiss={() => (showFileAlert = false)}>
-                            <svelte:fragment slot="title">File security is enabled</svelte:fragment>
-                            <p class="text">
+                        <Alert.Inline status="info" title="File security is enabled">
+                            <Typography.Text>
                                 Users will be able to access this file if they have been granted <b
                                     >either File or Bucket permissions.
                                 </b>
-                            </p>
-                        </Alert>
+                            </Typography.Text>
+                        </Alert.Inline>
                     {/if}
                     <Permissions bind:permissions={filePermissions} />
                 {:else}
-                    <Alert type="info">
-                        <svelte:fragment slot="title">File security is disabled</svelte:fragment>
-                        <p class="text">
-                            If you want to assign document permissions. Go to Bucket settings and
-                            enable file security. Otherwise, only Bucket permissions will be used.
-                        </p>
-                    </Alert>
+                    <Alert.Inline status="info" title="File security is disabled">
+                        <Typography.Text>
+                            If you want to assign file permissions. Go to Bucket settings and enable
+                            file security. Otherwise, only Bucket permissions will be used.
+                        </Typography.Text>
+                    </Alert.Inline>
                 {/if}
             </svelte:fragment>
 
@@ -161,9 +371,9 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid danger>
-            <Heading tag="h6" size="7">Delete file</Heading>
-            <p>The file will be permanently deleted. This action is irreversible.</p>
+        <CardGrid>
+            <svelte:fragment slot="title">Delete file</svelte:fragment>
+            The file will be permanently deleted. This action is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="title">
@@ -185,3 +395,13 @@
 </Container>
 
 <Delete bind:showDelete />
+
+<ManageFileTokenModal
+    bind:show={showManageToken}
+    bind:isDelete={tokenDeleteMode}
+    bind:fileToken={selectedFileToken}
+    on:created={({ detail: expiry }) => createFileToken(expiry)}
+    on:updated={({ detail: token }) => updateFileToken(token)}
+    on:deleted={async () => await deleteFileToken(selectedFileToken)} />
+
+<FileTokensCopyUrl file={$file} bind:token={selectedFileToken} bind:show={showCopyUrlModal} />
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
index c47b79901..e002ee332 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { bucket } from '../store';
     import { file } from './store';
@@ -10,15 +10,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/storage`,
             title: 'Storage'
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$bucket?.$id}`,
             title: $bucket?.name
         },
         {
-            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`,
             title: $file?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
index 13a9eb4c5..f560b76d3 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
@@ -1,50 +1,46 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { file } from './store';
 
     export let showDelete = false;
-
+    let error: string;
     const deleteFile = async () => {
         try {
+            const fileName = $file.name;
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.deleteFile($file.bucketId, $file.$id);
             showDelete = false;
-            await goto(
-                `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$file.bucketId}`
-            );
+
             addNotification({
                 type: 'success',
-                message: `${$file.name} has been deleted`
+                message: `${fileName} has been deleted`
             });
             trackEvent(Submit.FileDelete);
+            await goto(
+                `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$file.bucketId}`
+            );
         } catch (error) {
             addNotification({
                 type: 'error',
                 message: error.message
             });
             trackError(error, Submit.FileDelete);
+        } finally {
+            showDelete = false;
         }
     };
 </script>
 
-<Modal
-    title="Delete file"
-    bind:show={showDelete}
-    onSubmit={deleteFile}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
-    <p data-private>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>
+<Confirm onSubmit={deleteFile} title="Delete file" bind:open={showDelete} bind:error>
+    <Typography.Text>
+        Are you sure you want to delete <b>{$file.name}</b>?
+    </Typography.Text>
+</Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/fileTokensCopyUrl.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/fileTokensCopyUrl.svelte
new file mode 100644
index 000000000..9a179bb8d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/fileTokensCopyUrl.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import { Modal, CopyInput } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Alert, Layout, Tabs, Typography } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+    export let file: Models.File;
+    export let token: Models.ResourceToken;
+
+    let tabContents = {};
+    let selectedTab = 'Preview';
+
+    function copyPreviewWithToken(
+        token: string,
+        method: 'preview' | 'view' | 'download' = 'preview'
+    ) {
+        let url: string;
+        if (method === 'view') {
+            url = sdk
+                .forProject(page.params.region, page.params.project)
+                .storage.getFileView(file.bucketId, file.$id);
+        } else if (method === 'download') {
+            url = sdk
+                .forProject(page.params.region, page.params.project)
+                .storage.getFileDownload(file.bucketId, file.$id);
+        } else {
+            url = sdk
+                .forProject(page.params.region, page.params.project)
+                .storage.getFilePreview(file.bucketId, file.$id);
+        }
+
+        url = `${url}&token=${token}`;
+
+        return url;
+    }
+
+    function setUrlSnippets() {
+        tabContents = {
+            Preview: `${copyPreviewWithToken(token.secret)}`,
+            View: `${copyPreviewWithToken(token.secret, 'view')}`,
+            Download: `${copyPreviewWithToken(token.secret, 'download')}`
+        };
+    }
+
+    function getMoreInfo(): string {
+        let message = '';
+        switch (selectedTab.toLowerCase()) {
+            case 'preview':
+                message = 'Apply transformations or filters. Good for thumbnails or previews.';
+                break;
+            case 'view':
+                message =
+                    'Open the file in the browser (if supported). Works well for images and documents.';
+                break;
+            case 'download':
+                message = 'Download the file directly. Use when users need a local copy.';
+                break;
+            default:
+                message = '';
+        }
+
+        return message;
+    }
+
+    $: if (show) {
+        setUrlSnippets();
+    }
+</script>
+
+<Modal title="Copy File URL" bind:show hideFooter>
+    {@const tokenUrl = tabContents[selectedTab]}
+    <span slot="description"> Use the token-based URL below to access this file securely. </span>
+
+    <Layout.Stack gap="xl">
+        <Tabs.Root let:root stretch>
+            {#each ['Preview', 'View', 'Download'] as cat}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = cat)}
+                    active={selectedTab === cat}>
+                    {cat}
+                </Tabs.Item.Button>
+            {/each}
+        </Tabs.Root>
+
+        <Typography.Text variant="m-400">
+            {getMoreInfo()}
+        </Typography.Text>
+        {#if !token.expire}
+            <Alert.Inline title="No expiration date" status="warning">
+                This token doesn't expire. Be cautious when sharing links.
+            </Alert.Inline>
+        {/if}
+        <CopyInput value={tokenUrl} />
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
index 4ea97fa70..27c261285 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { file } from './store';
 
-    const projectId = $page.params.project;
-    const bucketId = $page.params.bucket;
+    const projectId = page.params.project;
+    const bucketId = page.params.bucket;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            href={`${base}/project-${$page.params.region}-${projectId}/storage/bucket-${bucketId}`}>
+            href={`${base}/project-${page.params.region}-${projectId}/storage/bucket-${bucketId}`}>
             {$file?.name}
         </CoverTitle>
         <Id value={$file?.$id} event="file">{$file?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
new file mode 100644
index 000000000..9a3e5e266
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
@@ -0,0 +1,96 @@
+<script context="module" lang="ts">
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+
+    export function cleanFormattedDate(date: string, time: boolean = false): string {
+        return time
+            ? toLocaleDateTime(date, true)
+            : toLocaleDate(date, 'dd mm yyyy').replaceAll(', ', ' ');
+    }
+</script>
+
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { Link } from '@appwrite.io/pink-svelte';
+    import { type Models } from '@appwrite.io/console';
+    import { Confirm, ExpirationInput, Modal } from '$lib/components';
+
+    export let show = false;
+    export let isDelete = false;
+    export let fileToken: Models.ResourceToken | null = null;
+
+    $: expire = fileToken?.expire ?? null;
+
+    const dispatch = createEventDispatcher();
+
+    function close(): void {
+        show = false;
+        expire = null;
+        isDelete = false;
+        fileToken = null;
+    }
+
+    function handleFileToken(): void {
+        if (isDelete) {
+            dispatch('deleted');
+        } else {
+            dispatch(
+                fileToken ? 'updated' : 'created',
+                fileToken ? { ...fileToken, expire } : expire
+            );
+        }
+        close();
+    }
+
+    function getModalTitle(): string {
+        return `${fileToken ? 'Edit' : 'Create'} token${fileToken ? ' expiry' : ''}`;
+    }
+
+    $: if (!show) {
+        close();
+    }
+</script>
+
+{#if isDelete}
+    <Confirm bind:open={show} title="Delete token" onSubmit={handleFileToken}>
+        {@const formattedDate = cleanFormattedDate(fileToken.$createdAt)}
+        <p data-private>
+            Are you sure you want to delete the file token created on <b>{formattedDate}</b>?
+        </p>
+
+        <p data-private>
+            {#if fileToken.accessedAt}
+                {@const formattedDate = cleanFormattedDate(fileToken.accessedAt, true)}
+
+                This token was last accessed on <b>{formattedDate}</b>
+            {:else}
+                This token has never been accessed.
+            {/if}
+        </p>
+    </Confirm>
+{:else}
+    <Modal bind:show size="s" onSubmit={handleFileToken} title={getModalTitle()}>
+        <!-- TODO: docs link needed-->
+        <svelte:fragment slot="description">
+            {#if fileToken}
+                {@const formattedDate = cleanFormattedDate(fileToken.$createdAt)}
+                Edit the expiry of the file token created on <b>{formattedDate}</b>.
+            {:else}
+                Create a file token to grant access to a file.
+                <!-- TODO: @itznotabug, @adityaoberai need documentations link -->
+                <Link.Anchor href="https://appwrite.com/docs/">Learn more</Link.Anchor>.
+            {/if}
+        </svelte:fragment>
+
+        <ExpirationInput
+            bind:value={expire}
+            resourceType="token"
+            selectorLabel="Expiry"
+            dateSelectorLabel="Expiry date" />
+
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={close}>Cancel</Button>
+            <Button submit>{fileToken ? 'Update' : 'Create'}</Button>
+        </svelte:fragment>
+    </Modal>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/store.ts b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/store.ts
index 7d42b415a..dd1432428 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/store.ts
@@ -1,5 +1,15 @@
-import { derived } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
+import type { Column } from '$lib/helpers/types';
 
 export const file = derived(page, ($page) => $page.data.file as Models.File);
+
+export const tokens = derived(page, ($page) => $page.data.tokens as Models.ResourceTokenList);
+
+export const columns = writable<Column[]>([
+    { id: 'created', title: 'Created', type: 'datetime', width: 200 },
+    { id: 'expire', title: 'Expiration', type: 'datetime', width: 200 },
+    { id: 'last_accessed', title: 'Last accessed', type: 'datetime', width: 200 },
+    { id: 'actions', title: '', type: 'string', width: 60 }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte
index 5e54b9442..5bdf52183 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteBuckets } from '$lib/stores/roles';
     import { bucket } from './store';
 
-    const projectId = $page.params.project;
-    const bucketId = $page.params.bucket;
-    const path = `${base}/project-${$page.params.region}-${projectId}/storage/bucket-${bucketId}`;
+    const projectId = page.params.project;
+    const bucketId = page.params.bucket;
+    const path = `${base}/project-${page.params.region}-${projectId}/storage/bucket-${bucketId}`;
     const tabs = [
         {
             href: path,
@@ -34,7 +34,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${$page.params.region}-${projectId}/storage`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/storage`}>
             {$bucket?.name}
         </CoverTitle>
         {#if $bucket?.$id}
@@ -46,7 +46,7 @@
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
index c98bce6ec..07c8a40e8 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts" context="module">
-    import { page } from '$app/stores';
-    import { get, writable } from 'svelte/store';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
     type TUpdateBucketMisc = {
@@ -12,10 +10,12 @@
 
     let arePermsDisabled = writable(true);
 
-    export async function updateBucket(updates: Partial<Models.Bucket>, misc: TUpdateBucketMisc) {
-        const bucketData = get(bucket);
-        const $page = get(page);
-        const values = { ...bucketData, ...updates };
+    export async function updateBucket(
+        bucket: Models.Bucket,
+        updates: Partial<Models.Bucket>,
+        misc: TUpdateBucketMisc
+    ) {
+        const values = { ...bucket, ...updates };
 
         if (!isValueOfStringEnum(Compression, values.compression)) {
             throw new Error(`Invalid compression: ${values.compression}`);
@@ -23,7 +23,7 @@
 
         try {
             await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.updateBucket(
                     values.$id,
                     values.name,
@@ -44,7 +44,7 @@
             }
 
             addNotification({
-                message: misc.successMessage ?? `${bucketData.name} has been updated`,
+                message: misc.successMessage ?? `${bucket.name} has been updated`,
                 type: 'success'
             });
 
@@ -63,16 +63,12 @@
 
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Permissions } from '$lib/components/permissions';
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
     import {
         Button,
         Form,
-        FormItem,
-        FormList,
-        InputChoice,
         InputSelect,
         InputSwitch,
         InputTags,
@@ -84,26 +80,31 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Compression, type Models } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
     import Delete from '../deleteBucket.svelte';
-    import { bucket } from '../store';
     import UpdateMaxFileSize from './updateMaxFileSize.svelte';
     import { readOnly } from '$lib/stores/billing';
     import { GRACE_PERIOD_OVERRIDE } from '$lib/system';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import type { PageData } from './$types';
+    import { Icon, Layout, Link, Selector, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Click } from '$lib/actions/analytics';
+    import { page } from '$app/state';
 
     export let data: PageData;
 
     let showDelete = false;
 
-    let enabled: boolean = null;
-    let bucketName: string = null;
-    let bucketFileSecurity: boolean = null;
-    let bucketPermissions: string[] = null;
-    let encryption: boolean = null;
-    let antivirus: boolean = null;
-    let compression: string = null;
+    let {
+        enabled,
+        name,
+        fileSecurity,
+        $permissions: permissions,
+        encryption,
+        antivirus,
+        compression
+    } = data.bucket;
 
     const compressionOptions = [
         { label: 'None', value: 'none' },
@@ -111,35 +112,21 @@
         { label: 'Zstd', value: 'zstd' }
     ];
     let suggestedExtensions = ['jpg', 'png', 'svg', 'gif', 'html', 'pdf', 'mp4'];
-    let extensions = $bucket.allowedFileExtensions;
+    let extensions = data.bucket.allowedFileExtensions;
     let isExtensionsDisabled = true;
 
-    onMount(async () => {
-        enabled ??= $bucket.enabled;
-        bucketName ??= $bucket.name;
-        bucketName ??= $bucket.name;
-        bucketFileSecurity ??= $bucket.fileSecurity;
-        bucketPermissions ??= $bucket.$permissions;
-        encryption ??= $bucket.encryption;
-        antivirus ??= $bucket.antivirus;
-
-        compression ??= $bucket.compression;
-    });
-
-    $: if (bucketPermissions) {
-        if (symmetricDifference(bucketPermissions, $bucket.$permissions).length) {
-            $arePermsDisabled = false;
-        } else $arePermsDisabled = true;
+    $: if (permissions) {
+        $arePermsDisabled = !symmetricDifference(permissions, data.bucket.$permissions).length;
     }
 
     $: if (extensions) {
-        if (JSON.stringify(extensions) !== JSON.stringify($bucket.allowedFileExtensions)) {
-            isExtensionsDisabled = false;
-        } else isExtensionsDisabled = true;
+        isExtensionsDisabled =
+            JSON.stringify(extensions) === JSON.stringify(data.bucket.allowedFileExtensions);
     }
 
     function toggleBucket() {
         updateBucket(
+            data.bucket,
             {
                 enabled
             },
@@ -154,8 +141,9 @@
 
     function updateName() {
         updateBucket(
+            data.bucket,
             {
-                name: bucketName
+                name
             },
             {
                 successMessage: 'Name has been updated',
@@ -166,8 +154,9 @@
 
     function updatePermissions() {
         updateBucket(
+            data.bucket,
             {
-                $permissions: bucketPermissions
+                $permissions: permissions
             },
             {
                 successMessage: 'Permissions have been updated',
@@ -179,8 +168,9 @@
 
     function updateFileSecurity() {
         updateBucket(
+            data.bucket,
             {
-                fileSecurity: bucketFileSecurity
+                fileSecurity
             },
             {
                 successMessage: 'Security has been updated',
@@ -192,6 +182,7 @@
 
     function updateSecurity() {
         updateBucket(
+            data.bucket,
             {
                 encryption,
                 antivirus
@@ -204,6 +195,7 @@
 
     function updateCompression() {
         updateBucket(
+            data.bucket,
             {
                 compression
             },
@@ -215,6 +207,7 @@
 
     function updateAllowedExtensions() {
         updateBucket(
+            data.bucket,
             {
                 allowedFileExtensions: extensions
             },
@@ -226,248 +219,219 @@
 </script>
 
 <Container>
-    {#if $bucket}
-        <Form onSubmit={toggleBucket}>
-            <CardGrid>
-                <Heading tag="h2" size="7">{$bucket.name}</Heading>
-
-                <svelte:fragment slot="aside">
-                    <div>
-                        <FormList>
-                            <InputSwitch
-                                label={enabled ? 'Enabled' : 'Disabled'}
-                                id="toggle"
-                                bind:value={enabled} />
-                        </FormList>
-                        <p class="text">Created: {toLocaleDateTime($bucket.$createdAt)}</p>
-                        <p class="text">Last updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
-                    </div>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button
-                        disabled={enabled === $bucket.enabled ||
-                            ($readOnly && !GRACE_PERIOD_OVERRIDE)}
-                        submit>
-                        Update
-                    </Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <Form onSubmit={updateName}>
-            <CardGrid>
-                <Heading tag="h6" size="7">Name</Heading>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputText
-                            id="name"
-                            label="Name"
-                            placeholder="Enter name"
-                            readonly={$readOnly && !GRACE_PERIOD_OVERRIDE}
-                            bind:value={bucketName} />
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button
-                        disabled={bucketName === $bucket.name ||
-                            !bucketName ||
-                            ($readOnly && !GRACE_PERIOD_OVERRIDE)}
-                        submit>
-                        Update
-                    </Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <Form onSubmit={updatePermissions}>
-            <CardGrid hideOverflow>
-                <Heading tag="h6" size="7" id="permissions">Permissions</Heading>
-                <p class="text">
-                    Choose who can access your buckets and files. For more information, visit our <a
-                        href="https://appwrite.io/docs/advanced/platform/permissions"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="link">
-                        Permissions guide
-                    </a>.
-                </p>
-                <svelte:fragment slot="aside">
-                    {#if bucketPermissions}
-                        <Permissions bind:permissions={bucketPermissions} withCreate />
-                    {/if}
-                </svelte:fragment>
-                <svelte:fragment slot="actions">
-                    <Button disabled={$arePermsDisabled} submit>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <Form onSubmit={updateFileSecurity}>
-            <CardGrid>
-                <Heading tag="h6" size="7" id="file-security">File security</Heading>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputSwitch
-                            bind:value={bucketFileSecurity}
-                            id="security"
-                            label="File security" />
-                    </FormList>
-                    <p class="text">
-                        When file security is enabled, users will be able to access files for which
-                        they have been granted <b>either File or Bucket permissions</b>.
-                    </p>
-                    <p class="text">
-                        If file security is disabled, users can access files <b
-                            >only if they have Bucket permissions</b
-                        >. File permissions will be ignored..
-                    </p>
-                </svelte:fragment>
-                <svelte:fragment slot="actions">
-                    <Button
-                        disabled={bucketFileSecurity === $bucket.fileSecurity ||
-                            ($readOnly && !GRACE_PERIOD_OVERRIDE)}
-                        submit>
-                        Update
-                    </Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <Form onSubmit={updateSecurity}>
-            <CardGrid>
-                <Heading tag="h2" size="7">Security settings</Heading>
-                <p class="text">
-                    Enable or disable security services for the bucket including <b>Ecryption</b>
-                    and <b>Antivirus scanning.</b>
-                </p>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <FormItem>
-                            <InputChoice
-                                label="Encryption"
-                                id="encryption"
-                                type="switchbox"
-                                bind:value={encryption}>
-                                This parameter allows you to configure whether or not the files
-                                inside the bucket will be encrypted. We don't encrypt files bigger
-                                than 20MB.
-                            </InputChoice>
-                        </FormItem>
-
-                        <FormItem>
-                            <InputChoice
-                                label="Antivirus"
-                                id="antivirus"
-                                type="switchbox"
-                                bind:value={antivirus}>
-                                This parameter allows you to configure whether or not the files
-                                inside the bucket should be scanned by the Appwrite Antivirus
-                                scanner.
-                            </InputChoice>
-                        </FormItem>
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button
-                        disabled={encryption === $bucket.encryption &&
-                            antivirus === $bucket.antivirus}
-                        submit>
-                        Update
-                    </Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <Form onSubmit={updateCompression}>
-            <CardGrid>
-                <Heading tag="h2" size="6">Compression</Heading>
-                <p class="text">
-                    Choose an algorithm for compression. For files larger than 20MB, compression
-                    will be skipped even if it's enabled.
-                </p>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputSelect
-                            id="compression"
-                            label="Algorithm"
-                            options={compressionOptions}
-                            bind:value={compression} />
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button disabled={compression === $bucket.compression} submit>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <UpdateMaxFileSize currentPlan={data.currentPlan} />
-
-        <Form onSubmit={updateAllowedExtensions}>
-            <CardGrid hideOverflow>
-                <Heading tag="h6" size="7" id="extensions">Allowed file extensions</Heading>
-                <p class="text">
-                    Allowed file extensions. A maximum of 100 file extensions can be added. Leave
-                    blank to allow all file types.
-                </p>
-                <svelte:fragment slot="aside">
-                    <ul class="common-section">
-                        <InputTags
-                            id="read"
-                            label="Allowed extensions"
-                            placeholder="Allowed file extensions (mp4, jpg, pdf, etc.)"
-                            bind:tags={extensions} />
-                        <li class="u-flex u-gap-12 u-margin-block-start-8 with-scroll">
-                            {#each suggestedExtensions as ext}
-                                <Pill
-                                    selected={extensions.includes(ext)}
-                                    button
-                                    on:click={() => {
-                                        if (!extensions.includes(ext)) {
-                                            extensions = [...extensions, ext];
-                                        } else {
-                                            extensions = extensions.filter((e) => e !== ext);
-                                        }
-                                    }}>
-                                    <span class="icon-plus" aria-hidden="true" />
-                                    {ext}
-                                </Pill>
-                            {/each}
-                        </li>
-                    </ul>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button
-                        disabled={isExtensionsDisabled || ($readOnly && !GRACE_PERIOD_OVERRIDE)}
-                        submit>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <CardGrid danger>
-            <Heading tag="h6" size="7">Delete bucket</Heading>
-            <p class="text">
-                The bucket will be permanently deleted, including all the files within it. This
-                action is irreversible.
-            </p>
+    <Form onSubmit={toggleBucket}>
+        <CardGrid>
+            <svelte:fragment slot="title">{data.bucket.name}</svelte:fragment>
             <svelte:fragment slot="aside">
-                <BoxAvatar>
-                    <svelte:fragment slot="title">
-                        <h6 class="u-bold u-trim-1">{$bucket.name}</h6>
-                    </svelte:fragment>
-                    <p class="text">Last updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
-                </BoxAvatar>
+                <div>
+                    <InputSwitch
+                        label={enabled ? 'Enabled' : 'Disabled'}
+                        id="toggle"
+                        bind:value={enabled} />
+                    <p class="text">Created: {toLocaleDateTime(data.bucket.$createdAt)}</p>
+                    <p class="text">Last updated: {toLocaleDateTime(data.bucket.$updatedAt)}</p>
+                </div>
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+                <Button
+                    disabled={enabled === data.bucket.enabled ||
+                        ($readOnly && !GRACE_PERIOD_OVERRIDE)}
+                    submit>
+                    Update
+                </Button>
             </svelte:fragment>
         </CardGrid>
-    {/if}
+    </Form>
+
+    <Form onSubmit={updateName}>
+        <CardGrid>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            <svelte:fragment slot="aside">
+                <InputText
+                    required
+                    id="name"
+                    label="Name"
+                    placeholder="Enter name"
+                    readonly={$readOnly && !GRACE_PERIOD_OVERRIDE}
+                    bind:value={name} />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={name === data.bucket.name ||
+                        !name ||
+                        ($readOnly && !GRACE_PERIOD_OVERRIDE)}
+                    submit>
+                    Update
+                </Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form onSubmit={updatePermissions}>
+        <CardGrid>
+            <svelte:fragment slot="title">Permissions</svelte:fragment>
+            Choose who can access your buckets and files. For more information, visit our
+            <Link.Anchor
+                href="https://appwrite.io/docs/advanced/platform/permissions"
+                target="_blank"
+                rel="noopener noreferrer">
+                Permissions guide
+            </Link.Anchor>.
+            <svelte:fragment slot="aside">
+                {#if permissions}
+                    <Permissions bind:permissions withCreate />
+                {/if}
+            </svelte:fragment>
+            <svelte:fragment slot="actions">
+                <Button disabled={$arePermsDisabled} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form onSubmit={updateFileSecurity}>
+        <CardGrid>
+            <svelte:fragment slot="title">File security</svelte:fragment>
+            <svelte:fragment slot="aside">
+                <Selector.Switch bind:checked={fileSecurity} id="security" label="File security" />
+                <Typography.Text>
+                    When file security is enabled, users will be able to access files for which they
+                    have been granted <b>either File or Bucket permissions</b>.
+                </Typography.Text>
+                <Typography.Text>
+                    If file security is disabled, users can access files <b
+                        >only if they have Bucket permissions</b
+                    >. File permissions will be ignored..
+                </Typography.Text>
+            </svelte:fragment>
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={fileSecurity === data.bucket.fileSecurity ||
+                        ($readOnly && !GRACE_PERIOD_OVERRIDE)}
+                    submit>
+                    Update
+                </Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form onSubmit={updateSecurity}>
+        <CardGrid>
+            <svelte:fragment slot="title">Security settings</svelte:fragment>
+            Enable or disable security services for the bucket including <b>Ecryption</b>
+            and <b>Antivirus scanning.</b>
+            <svelte:fragment slot="aside">
+                <Selector.Switch
+                    label="Encryption"
+                    id="encryption"
+                    bind:checked={encryption}
+                    description="This parameter allows you to configure whether or not the files inside the
+                bucket will be encrypted. We don't encrypt files bigger than 20MB." />
+                <Selector.Switch
+                    label="Antivirus"
+                    id="antivirus"
+                    bind:checked={antivirus}
+                    description="This parameter allows you to configure whether or not the files inside the
+                    bucket should be scanned by the Appwrite Antivirus scanner." />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={encryption === data.bucket.encryption &&
+                        antivirus === data.bucket.antivirus}
+                    submit>
+                    Update
+                </Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form onSubmit={updateCompression}>
+        <CardGrid>
+            <svelte:fragment slot="title">Compression</svelte:fragment>
+            Choose an algorithm for compression. For files larger than 20MB, compression will be skipped
+            even if it's enabled.
+            <svelte:fragment slot="aside">
+                <InputSelect
+                    required
+                    id="compression"
+                    label="Algorithm"
+                    options={compressionOptions}
+                    bind:value={compression} />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={compression === data.bucket.compression} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <UpdateMaxFileSize currentPlan={data.currentPlan} bucket={data.bucket} />
+
+    <Form onSubmit={updateAllowedExtensions}>
+        <CardGrid>
+            <svelte:fragment slot="title">Allowed file extension</svelte:fragment>
+            Allowed file extensions. A maximum of 100 file extensions can be added. Leave blank to allow
+            all file types.
+            <svelte:fragment slot="aside">
+                <Layout.Stack gap="s">
+                    {#key extensions.length}
+                        <InputTags
+                            id="user-labels"
+                            label="Labels"
+                            placeholder="Select or type user labels"
+                            bind:tags={extensions} />
+                    {/key}
+                    <Layout.Stack direction="row">
+                        {#each suggestedExtensions as ext}
+                            <Tag
+                                size="s"
+                                selected={extensions.includes(ext)}
+                                on:click={() => {
+                                    if (!extensions.includes(ext)) {
+                                        extensions = [...extensions, ext];
+                                    } else {
+                                        extensions = extensions.filter((e) => e !== ext);
+                                    }
+                                }}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                {ext}
+                            </Tag>
+                        {/each}
+                    </Layout.Stack>
+                </Layout.Stack>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={isExtensionsDisabled || ($readOnly && !GRACE_PERIOD_OVERRIDE)}
+                    submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <CardGrid>
+        <svelte:fragment slot="title">Delete bucket</svelte:fragment>
+        The bucket will be permanently deleted, including all the files within it. This action is irreversible.
+        <svelte:fragment slot="aside">
+            <BoxAvatar>
+                <svelte:fragment slot="title">
+                    <h6 class="u-bold u-trim-1">{data.bucket.name}</h6>
+                </svelte:fragment>
+                <p class="text">Last updated: {toLocaleDateTime(data.bucket.$updatedAt)}</p>
+            </BoxAvatar>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button
+                secondary
+                on:click={() => {
+                    showDelete = true;
+                    trackEvent(Click.StorageBucketDeleteClick);
+                }}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
 </Container>
 
 <Delete bind:showDelete />
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.ts b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.ts
deleted file mode 100644
index ff4815194..000000000
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { PageLoad } from './$types';
-import { sdk } from '$lib/stores/sdk';
-import { isCloud } from '$lib/system';
-
-export const load: PageLoad = async ({ parent }) => {
-    const { organization } = await parent();
-    const currentPlan = isCloud
-        ? await sdk.forConsole.billing.getOrganizationPlan(organization.$id)
-        : null;
-    return {
-        currentPlan
-    };
-};
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 55b17b17c..62bbb8c4b 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
-    import { Submit } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Click, Submit, trackEvent } from '$lib/actions/analytics';
+    import { Alert, CardGrid } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
-    import { Button, Form, FormItem, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
     import { createByteUnitPair } from '$lib/helpers/unit';
     import { readOnly, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
-    import { bucket } from '../store';
     import { updateBucket } from './+page.svelte';
     import type { Plan } from '$lib/sdk/billing';
+    import type { Models } from '@appwrite.io/console';
+
+    export let bucket: Models.Bucket;
     export let currentPlan: Plan | null;
 
-    const service = currentPlan?.['fileSize'];
-    const { value, unit, baseValue, units } = createByteUnitPair($bucket.maximumFileSize, 1000);
+    const service = currentPlan ? currentPlan['fileSize'] : null;
+    const { value, unit, baseValue, units } = createByteUnitPair(bucket.maximumFileSize, 1000);
     const options = units.map((v) => ({ label: v.name, value: v.name }));
     $: selectedUnit = $unit;
 
-    $: maxValue = function formMaxFileSize() {
+    const maxValue = function formMaxFileSize() {
         return (service * 1000 * 1000) / units.find((unit) => unit.name === selectedUnit).value;
     };
 
     function updateMaxSize() {
         updateBucket(
+            bucket,
             {
                 maximumFileSize: $baseValue
             },
@@ -37,8 +40,8 @@
 
 <Form onSubmit={updateMaxSize}>
     <CardGrid>
-        <Heading tag="h2" size="7">Maximum file size</Heading>
-        <p class="text">Set the maximum file size allowed in the bucket.</p>
+        <svelte:fragment slot="title">Maximum file size</svelte:fragment>
+        Set the maximum file size allowed in the bucket.
         <svelte:fragment slot="aside">
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
@@ -54,36 +57,34 @@
                     <svelte:fragment slot="action">
                         {#if $organization?.billingPlan === BillingPlan.FREE}
                             <div class="alert-buttons u-flex">
-                                <Button text href={$upgradeURL}>Upgrade plan</Button>
+                                <Button
+                                    text
+                                    href={$upgradeURL}
+                                    on:click={() => {
+                                        trackEvent(Click.OrganizationClickUpgrade, {
+                                            source: 'bucket_settings'
+                                        });
+                                    }}>Upgrade plan</Button>
                             </div>
                         {/if}
                     </svelte:fragment>
                 </Alert>
             {/if}
-            <FormItem isMultiple>
-                <InputNumber
-                    isMultiple
-                    fullWidth
-                    id="size"
-                    label="Size"
-                    disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}
-                    placeholder={$bucket.maximumFileSize.toString()}
-                    min={0}
-                    max={isCloud ? maxValue() : Infinity}
-                    bind:value={$value} />
-                <InputSelect
-                    id="bytes"
-                    label="Bytes"
-                    isMultiple
-                    fullWidth
-                    {options}
-                    bind:value={$unit} />
-            </FormItem>
+            <InputNumber
+                required
+                id="size"
+                label="Size"
+                disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}
+                placeholder={bucket.maximumFileSize.toString()}
+                min={0}
+                max={isCloud ? maxValue() : Infinity}
+                bind:value={$value} />
+            <InputSelect required id="bytes" label="Bytes" {options} bind:value={$unit} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
             <Button
-                disabled={$baseValue === $bucket.maximumFileSize ||
+                disabled={$baseValue === bucket.maximumFileSize ||
                     ($readOnly && !GRACE_PERIOD_OVERRIDE)}
                 submit>
                 Update
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
index 8de572d9a..3c39c5f9e 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
@@ -1,36 +1,33 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Usage } from '$lib/layout';
-    import type { PageData } from './$types';
+    import { page } from '$app/state';
+    import { Container, Usage } from '$lib/layout';
 
-    export let data: PageData;
+    export let data;
     $: filesTotal = data.filesTotal;
     $: files = data.files;
     $: transformationsTotal = data.imageTransformationsTotal;
     $: transformations = data.imageTransformations;
-
-    $: path = `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$page.params.bucket}/usage`;
 </script>
 
-<Usage
-    {path}
-    title="Files"
-    count={files}
-    total={filesTotal}
-    countMetadata={{
-        legend: 'Files',
-        title: 'Total files'
-    }} />
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/usage`}
+        total={filesTotal}
+        count={files}
+        countMetadata={{
+            legend: 'Files',
+            title: 'Total files'
+        }} />
 
-<Usage
-    {path}
-    title="Image transformations"
-    total={transformationsTotal}
-    count={transformations}
-    countMetadata={{
-        legend: 'Image transformations',
-        title: 'Total transformations'
-    }}
-    isCumulative
-    hideSelectPeriod />
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/usage`}
+        total={transformationsTotal}
+        count={transformations}
+        countMetadata={{
+            legend: 'Image transformations',
+            title: 'Total transformations'
+        }}
+        isCumulative
+        hidePeriodSelect />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/create.svelte b/src/routes/(console)/project-[region]-[project]/storage/create.svelte
index 3da90e60d..fcb3ca65f 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/create.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let showCreate = false;
 
@@ -21,7 +22,7 @@
     const create = async () => {
         try {
             const bucket = await sdk
-                .forProject($page.params.region, $page.params.project)
+                .forProject(page.params.region, page.params.project)
                 .storage.createBucket(id ? id : ID.unique(), name);
             showCreate = false;
             dispatch('created', bucket);
@@ -48,27 +49,26 @@
     }
 </script>
 
-<Modal title="Create bucket" {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="New bucket"
-            bind:value={name}
-            autofocus
-            required />
+<Modal title="Create bucket" {error} onSubmit={create} bind:show={showCreate}>
+    <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 autofocus bind:show={showCustomId} name="Bucket" bind:id />
-        {/if}
-    </FormList>
+    {#if !showCustomId}
+        <div>
+            <Tag
+                size="s"
+                on:click={() => {
+                    showCustomId = true;
+                }}><Icon icon={IconPencil} /> Bucket ID</Tag>
+        </div>
+    {:else}
+        <CustomId autofocus bind:show={showCustomId} name="Bucket" bind:id />
+    {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/grid.svelte b/src/routes/(console)/project-[region]-[project]/storage/grid.svelte
new file mode 100644
index 000000000..6d6fffae5
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/storage/grid.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { CardContainer, GridItem1, Id } from '$lib/components';
+    import { canWriteBuckets } from '$lib/stores/roles';
+    import { Badge, Tooltip } from '@appwrite.io/pink-svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+    export let showCreate = false;
+
+    const project = page.params.project;
+</script>
+
+<CardContainer
+    disableEmpty={!$canWriteBuckets}
+    total={data.buckets.total}
+    offset={data.offset}
+    event="bucket"
+    service="buckets"
+    on:click={() => (showCreate = true)}>
+    {#each data.buckets.buckets as bucket}
+        <GridItem1 href={`${base}/project-${project}/storage/bucket-${bucket.$id}`}>
+            <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
+            <svelte:fragment slot="status">
+                {#if !bucket.enabled}
+                    <div>
+                        <Badge size="s" variant="secondary" content="Disabled" />
+                    </div>
+                {/if}
+            </svelte:fragment>
+
+            <Id value={bucket.$id}>{bucket.$id}</Id>
+
+            <svelte:fragment slot="icons">
+                <Tooltip>
+                    <span
+                        class:u-opacity-20={!bucket.encryption}
+                        class="icon-lock-closed"
+                        aria-hidden="true"></span>
+                    <span slot="tooltip">
+                        {bucket.encryption ? 'Encryption enabled' : 'Encryption disabled'}
+                    </span>
+                </Tooltip>
+            </svelte:fragment>
+        </GridItem1>
+    {/each}
+    <svelte:fragment slot="empty">
+        <p>Create a bucket</p>
+    </svelte:fragment>
+</CardContainer>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/header.svelte b/src/routes/(console)/project-[region]-[project]/storage/header.svelte
index 72f204826..24aa16ec3 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const projectId = $page.params.project;
-    const path = `${base}/project-${$page.params.region}-${projectId}/storage`;
+    const path = `${base}/project-${page.params.region}-${page.params.project}/storage`;
     const tabs = [
         {
             href: path,
@@ -25,13 +25,13 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle>Storage</CoverTitle>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Storage</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
             <Tab
                 href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
                 event={tab.event}>
                 {tab.title}
             </Tab>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/store.ts b/src/routes/(console)/project-[region]-[project]/storage/store.ts
new file mode 100644
index 000000000..92de92584
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/storage/store.ts
@@ -0,0 +1,9 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Bucket ID', type: 'string', width: 200 },
+    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } },
+    { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 120 } }
+]);
diff --git a/src/routes/(console)/project-[region]-[project]/storage/table.svelte b/src/routes/(console)/project-[region]-[project]/storage/table.svelte
new file mode 100644
index 000000000..accff4d00
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/storage/table.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Id } from '$lib/components';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import type { PageData } from './$types';
+    import { columns } from './store';
+    import { Table } from '@appwrite.io/pink-svelte';
+
+    export let data: PageData;
+</script>
+
+<Table.Root columns={$columns} let:root>
+    <svelte:fragment slot="header" let:root>
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
+        {/each}
+    </svelte:fragment>
+    {#each data.buckets.buckets as bucket (bucket.$id)}
+        <Table.Row.Link
+            {root}
+            href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${bucket.$id}`}>
+            {#each $columns as column}
+                <Table.Cell column={column.id} {root}>
+                    {#if column.id === '$id'}
+                        {#key $columns}
+                            <Id value={bucket.$id}>
+                                {bucket.$id}
+                            </Id>
+                        {/key}
+                    {:else if column.id === 'name'}
+                        {bucket.name}
+                    {:else}
+                        {toLocaleDateTime(bucket[column.id])}
+                    {/if}
+                </Table.Cell>
+            {/each}
+        </Table.Row.Link>
+    {/each}
+</Table.Root>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte
index d493651ef..659277fbd 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Usage } from '$lib/layout';
-    import type { PageData } from './$types';
+    import { page } from '$app/state';
+    import { Container, Usage } from '$lib/layout';
 
-    export let data: PageData;
+    export let data;
     $: total = data.bucketsTotal;
     $: count = data.buckets;
 </script>
 
-<Usage
-    title="Buckets"
-    path={`${base}/project-${$page.params.region}-${$page.params.project}/storage/usage`}
-    {total}
-    {count}
-    countMetadata={{
-        legend: 'Buckets',
-        title: 'Total buckets'
-    }} />
+<Container>
+    <Usage
+        path={`${base}/project-${page.params.region}-${page.params.project}/storage/usage`}
+        {total}
+        {count}
+        countMetadata={{
+            legend: 'Buckets',
+            title: 'Total buckets'
+        }} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/store.ts b/src/routes/(console)/project-[region]-[project]/store.ts
index 9dac6dd48..e2836f1a5 100644
--- a/src/routes/(console)/project-[region]-[project]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/store.ts
@@ -1,8 +1,8 @@
-import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
 import type { BarSeriesOption } from 'echarts/charts';
 import { derived, get, writable } from 'svelte/store';
 import { regions } from '$lib/stores/organization';
+import { page } from '$app/stores';
 
 export const project = derived(
     page,
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
index c27bb6a14..2bc5f2707 100644
--- a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
@@ -1,64 +1,80 @@
 <script lang="ts">
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import {
-        CardGrid,
-        Heading,
-        DropList,
-        DropListItem,
-        Empty,
-        Output,
-        PaginationInline,
-        Secret
-    } from '$lib/components';
+    import { CardGrid, Empty, Output, PaginationInline } from '$lib/components';
     import UploadVariables from './uploadVariablesModal.svelte';
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { goto, invalidate } from '$app/navigation';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
-    import Alert from '$lib/components/alert.svelte';
     import PromoteVariableModal from './promoteVariableModal.svelte';
-    import CreateVariable from './createVariable.svelte';
+    import CreateVariable from './createVariableModal.svelte';
     import RawVariableEditor from './rawVariableEditor.svelte';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import {
+        ActionMenu,
+        Badge,
+        InteractiveText,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Alert
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconCode,
+        IconDotsHorizontal,
+        IconEyeOff,
+        IconGlobeAlt,
+        IconPencil,
+        IconPlus,
+        IconTrash,
+        IconUpload
+    } from '@appwrite.io/pink-icons-svelte';
+    import Link from '$lib/elements/link.svelte';
+    import Copy from '$lib/components/copy.svelte';
+    import { page } from '$app/state';
+    import UpdateVariablesModal from './updateVariablesModal.svelte';
+    import SecretVariableModal from './secretVariableModal.svelte';
 
     export let variableList: Models.VariableList;
     export let globalVariableList: Models.VariableList | undefined = undefined;
-
+    export let analyticsSource = '';
     export let isGlobal: boolean;
-    export let sdkCreateVariable: (key: string, value: string) => Promise<unknown>;
+    export let sdkCreateVariable: (
+        key: string,
+        value: string,
+        secret?: boolean
+    ) => Promise<unknown>;
     export let sdkUpdateVariable: (
         variableId: string,
         key: string,
-        value: string
+        value: string,
+        secret?: boolean
     ) => Promise<unknown>;
     export let sdkDeleteVariable: (variableId: string) => Promise<unknown>;
+    export let product: 'function' | 'site' = 'function';
 
-    let showVariablesDropdown = [];
     let selectedVar: Models.Variable = null;
     let showVariablesUpload = false;
     let showVariablesModal = false;
     let showPromoteModal = false;
     let showEditorModal = false;
+    let showUpdate = false;
+    let showSecretModal = false;
     let offset = 0;
     const limit = 10;
 
-    async function handleVariableCreated(event: CustomEvent<Models.Variable>) {
-        const variable = event.detail;
-
+    async function handleVariableCreated(event: CustomEvent<Models.Variable[]>) {
+        const variables = event.detail;
+        console.log(variables);
         try {
-            await sdkCreateVariable(variable.key, variable.value);
+            const promises = variables.map((variable) =>
+                sdkCreateVariable(variable.key, variable.value, variable?.secret || false)
+            );
+            await Promise.all(promises);
             showVariablesModal = false;
             addNotification({
                 type: 'success',
@@ -79,7 +95,7 @@
     async function handleVariableUpdated(event: CustomEvent<Models.Variable>) {
         const variable = event.detail;
         try {
-            await sdkUpdateVariable(variable.$id, variable.key, variable.value);
+            await sdkUpdateVariable(variable.$id, variable.key, variable.value, variable.secret);
             selectedVar = null;
             showVariablesModal = false;
             addNotification({
@@ -97,6 +113,28 @@
             trackError(error, Submit.VariableUpdate);
         }
     }
+    async function handleVariableSecret(event: CustomEvent<Models.Variable>) {
+        const variable = event.detail;
+        console.log(variable);
+        try {
+            await sdkUpdateVariable(variable.$id, variable.key, variable.value, variable.secret);
+            selectedVar = null;
+            showVariablesModal = false;
+            addNotification({
+                type: 'success',
+                message: `${$project.name} ${
+                    isGlobal ? 'global variable' : 'variable'
+                } has been marked as secret.`
+            });
+            trackEvent(Submit.VariableUpdate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.VariableUpdate);
+        }
+    }
 
     async function handleVariableDeleted(variable: Models.Variable) {
         try {
@@ -128,21 +166,33 @@
 
             if (isConflicting) {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
+                    .forProject(page.params.region, page.params.project)
                     .projectApi.deleteVariable(globalVariable.$id);
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .projectApi.createVariable(variable.key, variable.value);
-                await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .functions.deleteVariable(variable.resourceId, variable.$id);
+                    .forProject(page.params.region, page.params.project)
+                    .projectApi.createVariable(variable.key, variable.value, variable.secret);
+                if (product === 'site') {
+                    await sdk
+                        .forProject(page.params.region, page.params.project)
+                        .sites.deleteVariable(variable.resourceId, variable.$id);
+                } else {
+                    await sdk
+                        .forProject(page.params.region, page.params.project)
+                        .functions.deleteVariable(variable.resourceId, variable.$id);
+                }
             } else {
                 await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .projectApi.createVariable(variable.key, variable.value);
-                await sdk
-                    .forProject($page.params.region, $page.params.project)
-                    .functions.deleteVariable(variable.resourceId, variable.$id);
+                    .forProject(page.params.region, page.params.project)
+                    .projectApi.createVariable(variable.key, variable.value, variable.secret);
+                if (product === 'site') {
+                    await sdk
+                        .forProject(page.params.region, page.params.project)
+                        .sites.deleteVariable(variable.resourceId, variable.$id);
+                } else {
+                    await sdk
+                        .forProject(page.params.region, page.params.project)
+                        .functions.deleteVariable(variable.resourceId, variable.$id);
+                }
             }
 
             selectedVar = null;
@@ -151,12 +201,22 @@
             await Promise.all([
                 invalidate(Dependencies.FUNCTION),
                 invalidate(Dependencies.VARIABLES),
-                invalidate(Dependencies.PROJECT_VARIABLES)
+                invalidate(Dependencies.PROJECT_VARIABLES),
+                invalidate(Dependencies.SITE)
             ]);
 
             addNotification({
                 type: 'success',
-                message: `Variable has been ${isConflicting ? 'overwritten' : 'promoted'}.`
+                message: `Variable has been ${isConflicting ? 'overwritten' : 'promoted'}. You can find it in the project settings.`,
+                buttons: [
+                    {
+                        method: () =>
+                            goto(
+                                `${base}/project-${page.params.region}-${page.params.project}/settings`
+                            ),
+                        name: 'Go to settings'
+                    }
+                ]
             });
             trackEvent(Submit.VariableDelete);
         } catch (error) {
@@ -186,52 +246,56 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7" id="variables">
-        {isGlobal ? 'Global variables' : 'Environment variables'}
-    </Heading>
+    <svelte:fragment slot="title"
+        >{isGlobal ? 'Global variables' : 'Environment variables'}</svelte:fragment>
     {#if isGlobal}
-        <p>
-            Set the environment variables or secret keys that will be passed to all functions within
-            your project.
-        </p>
+        Set the environment variables or secret keys that will be passed to all Functions and Sites
+        within your project.
     {:else}
-        <p>
-            Set the environment variables or secret keys that will be passed to your function.
-            Global variables can be found in <a
-                href={`${base}/project-${$project.region}-${$project.$id}/settings#variables`}
-                title="Project settings"
-                class="link">
-                project settings</a
-            >.
-        </p>
+        Set the environment variables or secret keys that will be passed to your {product}. Global
+        variables can be found in <Link
+            href={`${base}/project-${$project.region}-${$project.$id}/settings#variables`}>
+            project settings</Link
+        >.
     {/if}
     <svelte:fragment slot="aside">
-        <div class="u-flex u-flex-vertical-mobile u-main-space-between u-gap-16 u-flex-wrap">
-            <ul class="buttons-list">
-                <li class="buttons-list-item padding-start">
-                    <Button text on:click={() => (showEditorModal = true)}>
-                        <span class="icon-code" />
-                        <span class="text">Editor</span>
+        <Layout.Stack gap="l">
+            <Layout.Stack direction="row">
+                <Layout.Stack direction="row" gap="s">
+                    <Button
+                        secondary
+                        on:mousedown={() => {
+                            showEditorModal = true;
+                            trackEvent(Click.VariablesUpdateClick, { source: analyticsSource });
+                        }}>
+                        <Icon slot="start" icon={IconCode} /> Editor
                     </Button>
-                </li>
-                <li class="buttons-list-item">
-                    <Button text on:click={() => (showVariablesUpload = true)}>
-                        <span class="icon-upload" />
-                        <span class="text">Import .env file</span>
+                    <Button
+                        secondary
+                        on:mousedown={() => {
+                            showVariablesUpload = true;
+                            trackEvent(Click.VariablesUpdateClick, { source: analyticsSource });
+                        }}>
+                        <Icon slot="start" icon={IconUpload} /> Import .env
                     </Button>
-                </li>
-            </ul>
-
-            <Button secondary on:click={() => (showVariablesModal = true)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create variable</span>
-            </Button>
-        </div>
+                </Layout.Stack>
+                {#if variableList.total}
+                    <Button
+                        secondary
+                        on:mousedown={() => {
+                            showVariablesModal = true;
+                            trackEvent(Click.VariablesCreateClick, { source: 'project_settings' });
+                        }}>
+                        <Icon slot="start" icon={IconPlus} /> Create variable
+                    </Button>
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
         {@const sum = variableList.total}
         {#if sum}
-            <div class="u-flex u-flex-vertical u-gap-24">
+            <Layout.Stack gap="l">
                 {#if conflictVariables.length > 0}
-                    <Alert type="warning">
+                    <Alert.Inline status="warning">
                         <p class="text">
                             {#if conflictVariables.length === 1}
                                 <b class="u-bold">{conflictVariables[0].key}</b> has
@@ -246,98 +310,119 @@
                                 project settings</a
                             >.
                         </p>
-                    </Alert>
+                    </Alert.Inline>
                 {/if}
-                <Table noMargin noStyles>
-                    <TableHeader>
-                        <TableCellHead width={100}>Key</TableCellHead>
-                        <TableCellHead width={180}>Value</TableCellHead>
-                        <TableCellHead width={40} />
-                    </TableHeader>
-                    <TableBody>
-                        {#each variableList.variables.slice(offset, offset + limit) as variable, i}
-                            <TableRow>
-                                <TableCell title="key">
-                                    {@const isConflicting = globalVariableList
-                                        ? globalVariableList.variables.find(
-                                              (globalVariable) =>
-                                                  globalVariable.key === variable.key
-                                          ) !== undefined
-                                        : false}
-                                    <div
-                                        class={isConflicting && hasConflictOnPage
-                                            ? 'u-flex u-gap-4 u-cross-center'
-                                            : ''}>
-                                        {#if isConflicting && hasConflictOnPage}
-                                            <span
-                                                class="icon-exclamation u-color-text-warning"
-                                                aria-hidden="true" />
-                                        {/if}
+                <Table.Root
+                    columns={[
+                        { id: 'key', width: { min: 200, max: 400 } },
+                        { id: 'value', width: { min: 200, max: 400 } },
+                        { id: 'actions', width: 50 }
+                    ]}
+                    let:root>
+                    <svelte:fragment slot="header" let:root>
+                        <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
+                        <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
+                        <Table.Header.Cell column="actions" {root} />
+                    </svelte:fragment>
+                    {#each variableList.variables.slice(offset, offset + limit) as variable}
+                        <Table.Row.Base {root}>
+                            <Table.Cell column="key" {root}>
+                                {@const isConflicting = globalVariableList
+                                    ? globalVariableList.variables.find(
+                                          (globalVariable) => globalVariable.key === variable.key
+                                      ) !== undefined
+                                    : false}
 
-                                        <Output value={variable.key} hideCopyIcon>
-                                            {variable.key}
-                                        </Output>
-                                    </div>
-                                </TableCell>
+                                <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                                    {#if isConflicting && hasConflictOnPage}
+                                        <span
+                                            class="icon-exclamation u-color-text-warning"
+                                            aria-hidden="true"></span>
+                                    {/if}
+                                    <Copy value={variable.key} />
+                                    <Output value={variable.key} hideCopyIcon>
+                                        {variable.key}
+                                    </Output>
+                                </Layout.Stack>
+                            </Table.Cell>
 
-                                <TableCell showOverflow title="value">
-                                    <Secret copyEvent="variable" value={variable.value} />
-                                </TableCell>
-                                <TableCell showOverflow title="options">
-                                    <DropList
-                                        bind:show={showVariablesDropdown[i]}
-                                        placement="bottom-start"
-                                        noArrow>
-                                        <Button
-                                            text
-                                            round
-                                            ariaLabel="more options"
-                                            on:click={() =>
-                                                (showVariablesDropdown[i] =
-                                                    !showVariablesDropdown[i])}>
-                                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                                        </Button>
-                                        <svelte:fragment slot="list">
-                                            <DropListItem
-                                                icon="pencil"
-                                                on:click={() => {
-                                                    selectedVar = variable;
-                                                    showVariablesDropdown[i] = false;
-                                                    showVariablesModal = true;
-                                                }}>
-                                                Edit
-                                            </DropListItem>
+                            <Table.Cell column="value" {root}>
+                                {#if variable.secret}
+                                    <Badge content="Secret" variant="secondary" />
+                                {:else}
+                                    <InteractiveText
+                                        variant="secret"
+                                        isVisible={false}
+                                        text={variable.value} />
+                                {/if}
+                            </Table.Cell>
+                            <Table.Cell column="actions" {root}>
+                                <Popover placement="bottom-end" let:toggle padding="none">
+                                    <Button
+                                        text
+                                        icon
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            toggle(e);
+                                        }}>
+                                        <Icon size="s" icon={IconDotsHorizontal} />
+                                    </Button>
+                                    <svelte:fragment slot="tooltip" let:toggle>
+                                        <ActionMenu.Root>
+                                            {#if !variable.secret}
+                                                <ActionMenu.Item.Button
+                                                    trailingIcon={IconPencil}
+                                                    on:click={(e) => {
+                                                        selectedVar = variable;
+                                                        showUpdate = true;
+                                                        toggle(e);
+                                                    }}>
+                                                    Update
+                                                </ActionMenu.Item.Button>
+                                                <ActionMenu.Item.Button
+                                                    trailingIcon={IconEyeOff}
+                                                    on:click={(e) => {
+                                                        selectedVar = variable;
+                                                        showSecretModal = true;
+                                                        toggle(e);
+                                                    }}>
+                                                    Secret
+                                                </ActionMenu.Item.Button>
+                                            {/if}
                                             {#if !isGlobal}
-                                                <DropListItem
-                                                    icon="globe-alt"
-                                                    on:click={async () => {
+                                                <ActionMenu.Item.Button
+                                                    trailingIcon={IconGlobeAlt}
+                                                    on:click={async (e) => {
                                                         selectedVar = variable;
-                                                        showVariablesDropdown[i] = false;
                                                         showPromoteModal = true;
+                                                        toggle(e);
                                                     }}>
                                                     Promote
-                                                </DropListItem>
+                                                </ActionMenu.Item.Button>
                                             {/if}
-                                            <DropListItem
-                                                icon="trash"
-                                                on:click={async () => {
+                                            <ActionMenu.Item.Button
+                                                status="danger"
+                                                trailingIcon={IconTrash}
+                                                on:click={async (e) => {
                                                     handleVariableDeleted(variable);
-                                                    showVariablesDropdown[i] = false;
+                                                    toggle(e);
                                                 }}>
                                                 Delete
-                                            </DropListItem>
-                                        </svelte:fragment>
-                                    </DropList>
-                                </TableCell>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
-                <div class="u-flex u-main-space-between">
-                    <p class="text">Total variables: {sum}</p>
-                    <PaginationInline {sum} {limit} bind:offset hidePages />
-                </div>
-            </div>
+                                            </ActionMenu.Item.Button>
+                                        </ActionMenu.Root>
+                                    </svelte:fragment>
+                                </Popover>
+                            </Table.Cell>
+                        </Table.Row.Base>
+                    {/each}
+                </Table.Root>
+                {#if sum > limit}
+                    <Layout.Stack direction="row" justifyContent="space-between">
+                        <p class="text">Total variables: {sum}</p>
+                        <PaginationInline total={sum} {limit} bind:offset hidePages />
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
         {:else}
             <Empty on:click={() => (showVariablesModal = true)}>
                 Create a {isGlobal ? 'global variable' : 'variable'} to get started
@@ -349,12 +434,25 @@
 {#if showVariablesModal}
     <CreateVariable
         {isGlobal}
-        bind:selectedVar
+        {product}
         bind:showCreate={showVariablesModal}
-        on:created={handleVariableCreated}
-        on:updated={handleVariableUpdated} />
+        on:created={handleVariableCreated} />
 {/if}
 
+{#if showUpdate}
+    <UpdateVariablesModal
+        {isGlobal}
+        {product}
+        bind:selectedVar
+        bind:show={showUpdate}
+        on:updated={handleVariableUpdated} />
+{/if}
+{#if showSecretModal}
+    <SecretVariableModal
+        bind:show={showSecretModal}
+        {selectedVar}
+        on:updated={handleVariableSecret} />
+{/if}
 {#if showEditorModal}
     <RawVariableEditor
         {isGlobal}
@@ -379,15 +477,8 @@
 
 {#if showVariablesUpload}
     <UploadVariables
-        {isGlobal}
         {sdkCreateVariable}
         {sdkUpdateVariable}
         {variableList}
         bind:show={showVariablesUpload} />
 {/if}
-
-<style>
-    .padding-start {
-        margin-left: -1rem;
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte
new file mode 100644
index 000000000..88e2387b6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { Button, InputPassword } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputText } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { project } from './store';
+    import { base } from '$app/paths';
+    import { Alert, Layout, Selector } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+
+    export let isGlobal: boolean;
+    export let product: 'function' | 'site' = 'function';
+    export let show = false;
+    export let selectedVar: Partial<Models.Variable>;
+
+    let pair = {
+        $id: selectedVar?.$id,
+        key: selectedVar?.key,
+        value: selectedVar?.value,
+        secret: selectedVar?.secret
+    };
+
+    const dispatch = createEventDispatcher();
+
+    function close() {
+        show = false;
+        selectedVar = null;
+    }
+
+    function handleVariable() {
+        dispatch('updated', pair);
+
+        close();
+    }
+
+    $: if (!show) {
+        selectedVar = null;
+    }
+</script>
+
+<Modal
+    bind:show
+    onSubmit={handleVariable}
+    title={`Update ${isGlobal ? 'global' : 'environment'} variable`}>
+    <svelte:fragment slot="description">
+        <span>
+            Set the environment variables or secret keys that will be passed to {!isGlobal
+                ? `your ${product}`
+                : `all functions and sites within your project`}.
+        </span>
+    </svelte:fragment>
+    <Layout.Stack>
+        {#if !isGlobal}
+            <Alert.Inline>
+                When there is a naming conflict with a global variable in your <Link
+                    href={`${base}/project-${$project.region}-${$project.$id}/settings/variables`}>
+                    project settings</Link>
+                and a {product} environment variable, the global variable will be ignored.
+            </Alert.Inline>
+        {/if}
+        <InputText
+            id="key"
+            label="Key"
+            placeholder="ENTER_KEY"
+            bind:value={pair.key}
+            required
+            autofocus
+            autocomplete={false} />
+        <InputPassword
+            id="value"
+            label="Value"
+            placeholder="Enter value"
+            bind:value={pair.value}
+            minlength={0} />
+        <Selector.Checkbox
+            id="secret"
+            label="Secret"
+            bind:checked={pair.secret}
+            description="If selected, you and your team won't be able to read the values after creation." />
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={close}>Cancel</Button>
+        <Button submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
index b9f79cd5a..93ef85bb9 100644
--- a/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
@@ -1,22 +1,37 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import Alert from '$lib/components/alert.svelte';
-    import { Button, InputFile } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
-    import { parse } from 'envfile';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Alert,
+        Icon,
+        InlineCode,
+        Layout,
+        Selector,
+        Tooltip,
+        Typography,
+        Upload
+    } from '@appwrite.io/pink-svelte';
+    import { parse } from '$lib/helpers/envfile';
 
-    export let isGlobal: boolean;
     export let show = false;
     export let variableList: Models.VariableList;
-    export let sdkCreateVariable: (key: string, value: string) => Promise<unknown>;
+    export let sdkCreateVariable: (
+        key: string,
+        value: string,
+        secret?: boolean
+    ) => Promise<unknown>;
     export let sdkUpdateVariable: (
         variableId: string,
         key: string,
-        value: string
+        value: string,
+        secret?: boolean
     ) => Promise<unknown>;
 
     let files: FileList;
+    let secret = false;
     let error: string;
 
     async function handleSubmit() {
@@ -47,8 +62,8 @@
                             (variable) => variable.key === key
                         );
                         return found
-                            ? sdkUpdateVariable(found.$id, key, value)
-                            : sdkCreateVariable(key, value);
+                            ? sdkUpdateVariable(found.$id, key, value, secret)
+                            : sdkCreateVariable(key, value, secret);
                     })
             );
 
@@ -64,29 +79,42 @@
     }
 </script>
 
-<Modal headerDivider={false} bind:show onSubmit={handleSubmit} bind:error>
-    <svelte:fragment slot="title">
-        Import new {isGlobal ? 'global' : 'environment'} variables
-    </svelte:fragment>
-    <div class="u-flex u-flex-vertical u-gap-24 u-margin-block-start-8">
-        <p>
-            Import new {isGlobal ? 'global' : 'environment'} variables from
-            <span class="inline-code">.env</span>
-            file that will be passed to {isGlobal
-                ? 'all functions within your project'
-                : 'your function'}.
-        </p>
+<Modal title="Import variables" bind:show bind:error onSubmit={handleSubmit}>
+    <span slot="description">
+        Import new environment variables from <InlineCode code=".env" size="s" /> file.
+    </span>
 
-        {#if variableList.total > 0}
-            <Alert type="info">
-                Existing {isGlobal ? 'global' : 'environment'} variables will be updated. They will not
-                be deleted if they are not present in your .env file.
-            </Alert>
-        {/if}
-    </div>
+    <Upload.Dropzone bind:files>
+        <Layout.Stack alignItems="center" gap="s">
+            <Layout.Stack alignItems="center" gap="s">
+                <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
+                    <Typography.Text variant="l-500">
+                        Drag and drop files here or click to upload
+                    </Typography.Text>
+                    <Tooltip>
+                        <Layout.Stack alignItems="center" justifyContent="center" inline>
+                            <Icon icon={IconInfo} size="s" />
+                        </Layout.Stack>
+                        <svelte:fragment slot="tooltip">Only .env files allowed</svelte:fragment>
+                    </Tooltip>
+                </Layout.Stack>
+                <Typography.Caption variant="400">Up to 100 variables allowed</Typography.Caption>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Upload.Dropzone>
 
-    <InputFile bind:files />
+    {#if variableList.total > 0}
+        <Alert.Inline>
+            This action can create and update variables but can not delete them.
+        </Alert.Inline>
+    {/if}
 
+    <Selector.Checkbox
+        size="s"
+        id="secret"
+        label="Secret"
+        bind:checked={secret}
+        description="If selected, you and your team won't be able to read the values after creation." />
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button submit disabled={!files?.length}>Import</Button>
diff --git a/src/routes/(console)/store.ts b/src/routes/(console)/store.ts
index 662572c6f..7735d4c29 100644
--- a/src/routes/(console)/store.ts
+++ b/src/routes/(console)/store.ts
@@ -9,6 +9,11 @@ export const consoleVariables = derived(
     page,
     ($page) => $page.data.consoleVariables as Models.ConsoleVariables
 );
+export const protocol = derived(page, ($page) =>
+    ($page.data.consoleVariables as Models.ConsoleVariables)?._APP_OPTIONS_FORCE_HTTPS === 'enabled'
+        ? 'https://'
+        : 'http://'
+);
 
 export const activeHeaderAlert = writable<HeaderAlert>(null);
 export const orgMissingPaymentMethod = writable<Organization>(null);
diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index eb21414aa..b6a177eb7 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { Icon, Layout, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
+    import { supportData, isSupportOnline } from './wizard/support/store';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Form, InputSelect, InputText, InputTextarea } from '$lib/elements/forms/index.js';
+
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import {
         localeTimezoneName,
@@ -6,16 +13,23 @@
         utcWeekDayToLocaleWeekDay,
         type WeekDay
     } from '$lib/helpers/date';
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { user } from '$lib/stores/user';
     import { wizard } from '$lib/stores/wizard';
     import { VARS } from '$lib/system';
     import { onDestroy } from 'svelte';
-    import Step1 from './wizard/support/step1.svelte';
-    import { isSupportOnline, supportData } from './wizard/support/store';
+    import { IconCheckCircle, IconXCircle } from '@appwrite.io/pink-icons-svelte';
+
+    let projectOptions: Array<{ value: string; label: string }>;
+
+    onMount(async () => {
+        const projectList = await sdk.forConsole.projects.list();
+        projectOptions = projectList.projects.map((project) => ({
+            value: project.$id,
+            label: project.name
+        }));
+    });
 
     onDestroy(() => {
         $supportData = {
@@ -26,13 +40,6 @@
         };
     });
 
-    const stepsComponents: WizardStepsType = new Map();
-
-    stepsComponents.set(1, {
-        label: 'How can we help you?',
-        component: Step1
-    });
-
     async function handleSubmit() {
         const response = await fetch(`${VARS.GROWTH_ENDPOINT}/support`, {
             method: 'POST',
@@ -96,25 +103,83 @@
     $: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
 </script>
 
-<Wizard title="Contact us" steps={stepsComponents} finalAction="Submit" on:exit={resetData}>
+<Wizard title="Contact us" confirmExit={true}>
+    <Form onSubmit={handleSubmit}>
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="s">
+                <Typography.Text
+                    >Please describe your request in detail. If applicable, include steps for
+                    reproduction of any in-app issues.</Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="s">
+                <Typography.Text color="--fgcolor-neutral-secondary"
+                    >Choose a topic</Typography.Text>
+                <Layout.Stack gap="s" direction="row">
+                    {#each ['general', 'billing', 'technical'] as category}
+                        <Tag
+                            on:click={() => {
+                                $supportData.category = category;
+                            }}
+                            selected={$supportData.category === category}>{category}</Tag>
+                    {/each}
+                </Layout.Stack>
+            </Layout.Stack>
+            <InputSelect
+                id="project"
+                label="Choose a project"
+                options={projectOptions ?? []}
+                bind:value={$supportData.project}
+                required={false}
+                placeholder="Select project" />
+            <InputText
+                id="subject"
+                label="Subject"
+                bind:value={$supportData.subject}
+                placeholder="What do you need help with?"
+                required />
+            <InputTextarea
+                id="message"
+                bind:value={$supportData.message}
+                placeholder="Type here..."
+                label="Tell us a bit more" />
+            <Layout.Stack direction="row" justifyContent="flex-end" gap="s">
+                <Button.Button
+                    size="s"
+                    variant="secondary"
+                    on:click={() => {
+                        wizard.hide();
+                    }}>Cancel</Button.Button>
+                <Button.Button size="s">Submit</Button.Button>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Form>
+
     <svelte:fragment slot="aside">
-        <h4 class="body-text-1 u-bold">Contact the Appwrite Team</h4>
-        <p class="text u-margin-block-start-16">
-            If you found a bug or have questions, please reach out to the Appwrite team. We try to
-            respond to all messages within our office hours.
-        </p>
-        <p class="text u-margin-block-start-32">
-            Available: <b>{supportWeekDays}, {supportTimings}</b>
-        </p>
-        <div class="u-flex u-gap-4 u-cross-center">
-            <span>Currently:</span>
-            {#if isSupportOnline()}
-                <span class="icon-check-circle u-color-text-success" aria-hidden="true" />
-                <span class="u-color-text-success text">Online</span>
-            {:else}
-                <span class="icon-x-circle" aria-hidden="true" />
-                <span class="text">Offline</span>
-            {/if}
-        </div>
+        <Card.Base padding="m">
+            <Layout.Stack gap="xl">
+                <Typography.Title size="s">Contact the Appwrite Team</Typography.Title>
+                <Typography.Text
+                    >If you found a bug or have questions, please reach out to the Appwrite team. We
+                    try to respond to all messages within our office hours.</Typography.Text>
+                <Layout.Stack direction="row" gap="s">
+                    <Typography.Text>Available:</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >{supportWeekDays}, {supportTimings}</Typography.Text>
+                </Layout.Stack>
+                <Layout.Stack direction="row" gap="s">
+                    <Typography.Text>Currently:</Typography.Text>
+                    {#if isSupportOnline()}
+                        <Layout.Stack direction="row" gap="xxxs" alignItems="center">
+                            <Icon icon={IconCheckCircle} color="--fgcolor-success" />
+                            <Typography.Text color="--fgcolor-success">Online</Typography.Text>
+                        </Layout.Stack>{:else}
+                        <Layout.Stack direction="row" gap="xxxs" alignItems="center">
+                            <Icon icon={IconXCircle} />
+                            <Typography.Text>Offline</Typography.Text>
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card.Base>
     </svelte:fragment>
 </Wizard>
diff --git a/src/routes/(console)/wizard/feedback/mobileFeedbackModal.svelte b/src/routes/(console)/wizard/feedback/mobileFeedbackModal.svelte
new file mode 100644
index 000000000..c16e5966c
--- /dev/null
+++ b/src/routes/(console)/wizard/feedback/mobileFeedbackModal.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Modal from '$lib/components/modal.svelte';
+    import { isSidebarOpen } from '$lib/stores/sidebar';
+    import { Feedback } from '$lib/components/feedback';
+    import { feedback } from '$lib/stores/feedback';
+
+    $: if ($feedback.show) {
+        $isSidebarOpen = false;
+    }
+</script>
+
+<div class="mobile-feedback-dialog-modal">
+    <Modal title="Feedback" bind:show={$feedback.show} dismissible={false}>
+        <Feedback isMobile />
+    </Modal>
+</div>
+
+<style>
+    :global(.mobile-feedback-dialog-modal dialog) {
+        background-color: #fff;
+    }
+
+    :global(.theme-dark .mobile-feedback-dialog-modal dialog) {
+        background-color: #131315;
+    }
+
+    /* pink2 modal doesn't allow removing the header divider yet, temporary fix*/
+    :global(.mobile-feedback-dialog-modal dialog header) {
+        border-bottom: unset !important;
+        padding-bottom: unset !important;
+    }
+
+    /* pink2 modal doesn't remove footer if not used, temporary fix*/
+    :global(.mobile-feedback-dialog-modal dialog footer) {
+        display: none !important;
+    }
+</style>
diff --git a/src/routes/(console)/wizard/feedback/step1.svelte b/src/routes/(console)/wizard/feedback/step1.svelte
index d6a087207..4d2cac840 100644
--- a/src/routes/(console)/wizard/feedback/step1.svelte
+++ b/src/routes/(console)/wizard/feedback/step1.svelte
@@ -9,7 +9,7 @@
     import { user } from '$lib/stores/user';
     import { organization } from '$lib/stores/organization';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
 
     $: $selectedFeedback = feedbackOptions.find((option) => option.type === $feedback.type);
@@ -19,7 +19,7 @@
             await feedback.submitFeedback(
                 `feedback-${$feedback.type}`,
                 $feedbackData.message,
-                $page.url.href,
+                page.url.href,
                 $user.name,
                 $user.email,
                 $organization?.billingPlan,
@@ -42,7 +42,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">{$selectedFeedback.title}</svelte:fragment>
+    <svelte:fragment slot="title">Feedback</svelte:fragment>
     <svelte:fragment slot="subtitle">{$selectedFeedback.desc}</svelte:fragment>
 
     <svelte:component this={$selectedFeedback.component} />
diff --git a/src/routes/(console)/wizard/support/mobileSupportModal.svelte b/src/routes/(console)/wizard/support/mobileSupportModal.svelte
index 91818eddc..a83f5c538 100644
--- a/src/routes/(console)/wizard/support/mobileSupportModal.svelte
+++ b/src/routes/(console)/wizard/support/mobileSupportModal.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
     import { Support } from '$lib/components';
     import Modal from '$lib/components/modal.svelte';
+    import { isSidebarOpen } from '$lib/stores/sidebar';
 
     export let show: boolean;
+
+    $: if (show) {
+        $isSidebarOpen = false;
+    }
 </script>
 
 <div class="mobile-support-dialog-modal">
-    <Modal title="Support" headerDivider={false} size="small" bind:show>
-        <div class="inner-modal-wrapper">
-            <Support showHeader={false} />
-        </div>
+    <Modal title="Support" bind:show>
+        <Support showHeader={false} />
     </Modal>
 </div>
 
@@ -22,7 +25,14 @@
         background-color: #131315;
     }
 
-    .inner-modal-wrapper {
-        padding-block-start: 0.5rem;
+    /* pink2 modal doesn't allow removing the header divider yet, temporary fix*/
+    :global(.mobile-support-dialog-modal dialog header) {
+        border-bottom: unset !important;
+        padding-bottom: unset !important;
+    }
+
+    /* pink2 modal doesn't remove footer if not used, temporary fix*/
+    :global(.mobile-support-dialog-modal dialog footer) {
+        display: none !important;
     }
 </style>
diff --git a/src/routes/(console)/wizard/support/step1.svelte b/src/routes/(console)/wizard/support/step1.svelte
deleted file mode 100644
index 68d2a3739..000000000
--- a/src/routes/(console)/wizard/support/step1.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { FormList, InputSelect, InputText, InputTextarea } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { supportData } from './store';
-    import { Pill } from '$lib/elements';
-    import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
-
-    let options: {
-        value: string;
-        label: string;
-    }[];
-
-    onMount(async () => {
-        const projectList = await sdk.forConsole.projects.list();
-        options = projectList.projects.map((project) => ({
-            value: project.$id,
-            label: project.name
-        }));
-    });
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">How can we help you?</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Please describe your request in detail. If applicable, include steps for reproduction of any
-        in-app issues.
-    </svelte:fragment>
-    <div class="common-section">
-        <p class="label">Choose a topic</p>
-        <div class="u-flex u-gap-8 u-margin-block-start-8">
-            {#each ['general', 'billing', 'technical'] as topic}
-                <Pill
-                    button
-                    selected={$supportData.category === topic}
-                    on:click={() => {
-                        $supportData.category = topic;
-                    }}>{topic}</Pill>
-            {/each}
-        </div>
-    </div>
-    <div class="common-section">
-        <FormList>
-            {#if options?.length}
-                <InputSelect
-                    id="project"
-                    label="Choose a project"
-                    placeholder="Select project"
-                    optionalText="(optional)"
-                    bind:value={$supportData.project}
-                    {options} />
-            {/if}
-            <InputText
-                label="Subject"
-                id="subject"
-                placeholder="What do you need help with?"
-                bind:value={$supportData.subject}
-                required />
-
-            <InputTextarea
-                label="Tell us a bit more"
-                id="message"
-                placeholder="Type here..."
-                bind:value={$supportData.message}
-                required />
-        </FormList>
-    </div>
-</WizardStep>
diff --git a/src/routes/(public)/(guest)/education/+layout.svelte b/src/routes/(public)/(guest)/education/+layout.svelte
index abdb606e8..37ec4d09d 100644
--- a/src/routes/(public)/(guest)/education/+layout.svelte
+++ b/src/routes/(public)/(guest)/education/+layout.svelte
@@ -20,7 +20,7 @@
             <img src={ArtworkDark} alt="" class="u-only-dark" />
             <img src={ArtworkLight} alt="" class="u-only-light" />
         </div>
-        <div class="mobile-gradient" />
+        <div class="mobile-gradient"></div>
     </div>
     <div class="content-container">
         <slot />
diff --git a/src/routes/(public)/(guest)/education/+page.svelte b/src/routes/(public)/(guest)/education/+page.svelte
index 8fb6b5d12..67a761bf9 100644
--- a/src/routes/(public)/(guest)/education/+page.svelte
+++ b/src/routes/(public)/(guest)/education/+page.svelte
@@ -28,7 +28,7 @@
         <img
             src={$app.themeInUse === 'light' ? AppwriteLogoLight : AppwriteLogoDark}
             alt="Appwrite logo" />
-        <div class="logo-divider" />
+        <div class="logo-divider"></div>
         <img
             src={$app.themeInUse === 'light' ? GithubLogoLight : GithubLogoDark}
             alt="Github logo" />
@@ -39,7 +39,7 @@
         Developer Pack.
     </p>
     <Button fullWidth on:click={onGithubLogin}>
-        <span class="icon-github" aria-hidden="true" />
+        <span class="icon-github" aria-hidden="true"></span>
         <span class="text">Sign up with GitHub</span>
     </Button>
 </div>
diff --git a/src/routes/(public)/(guest)/education/error/+page.svelte b/src/routes/(public)/(guest)/education/error/+page.svelte
index d1d33b5db..98928a070 100644
--- a/src/routes/(public)/(guest)/education/error/+page.svelte
+++ b/src/routes/(public)/(guest)/education/error/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
 
-    $: message = $page.url.searchParams.get('message');
-    $: code = parseInt($page.url.searchParams.get('code'));
+    $: message = page.url.searchParams.get('message');
+    $: code = parseInt(page.url.searchParams.get('code'));
 
     const getErrorTitle = () => {
         if (code == 403) {
diff --git a/src/routes/(public)/(guest)/login/+page.svelte b/src/routes/(public)/(guest)/login/+page.svelte
index 27fa0a8a4..799af47a1 100644
--- a/src/routes/(public)/(guest)/login/+page.svelte
+++ b/src/routes/(public)/(guest)/login/+page.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import {
-        Button,
-        Form,
-        FormItem,
-        FormList,
-        InputEmail,
-        InputPassword
-    } from '$lib/elements/forms';
+    import { Button, Form, InputEmail, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { isCloud } from '$lib/system';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { OAuthProvider } from '@appwrite.io/console';
     import { redirectTo } from '$routes/store';
     import { user } from '$lib/stores/user';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     let mail: string, pass: string, disabled: boolean;
 
@@ -28,20 +22,15 @@
         try {
             disabled = true;
             await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
-            await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountLogin);
+
             if ($user) {
+                trackEvent(Submit.AccountLogin, { mfa_used: 'none' });
                 addNotification({
                     type: 'success',
                     message: 'Successfully logged in.'
                 });
             }
-            if ($redirectTo) {
-                window.location.href = $redirectTo;
-                return;
-            }
 
-            await invalidate(Dependencies.ACCOUNT);
             if (data?.couponData?.code) {
                 trackEvent(Submit.AccountCreate, { campaign_name: data?.couponData?.code });
                 await goto(`${base}/apply-credit?code=${data?.couponData?.code}`);
@@ -51,6 +40,13 @@
                 await goto(`${base}/apply-credit?campaign=${data.campaign?.$id}`);
                 return;
             }
+            if ($redirectTo) {
+                window.location.href = $redirectTo;
+                return;
+            }
+
+            // no specific redirect, so redirect will happen through invalidating the account
+            await invalidate(Dependencies.ACCOUNT);
         } catch (error) {
             disabled = false;
             addNotification({
@@ -64,13 +60,13 @@
     function onGithubLogin() {
         let url = window.location.origin;
 
-        if ($page.url.searchParams) {
-            const redirect = $page.url.searchParams.get('redirect');
-            $page.url.searchParams.delete('redirect');
+        if (page.url.searchParams) {
+            const redirect = page.url.searchParams.get('redirect');
+            page.url.searchParams.delete('redirect');
             if (redirect) {
-                url = `${redirect}${$page.url.search}`;
+                url = `${redirect}${page.url.search}`;
             } else {
-                url = `${base}${$page.url.search ?? ''}`;
+                url = `${base}${page.url.search ?? ''}`;
             }
         }
         sdk.forConsole.account.createOAuth2Session(
@@ -90,7 +86,7 @@
     <svelte:fragment slot="title">Sign in</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={login}>
-            <FormList>
+            <Layout.Stack>
                 <InputEmail
                     id="email"
                     label="Email"
@@ -103,31 +99,25 @@
                     label="Password"
                     placeholder="Password"
                     required={true}
-                    meter={false}
-                    showPasswordButton={true}
                     bind:value={pass} />
-                <FormItem>
-                    <Button fullWidth submit {disabled}>Sign in</Button>
-                </FormItem>
+                <Button fullWidth submit {disabled}>Sign in</Button>
                 {#if isCloud}
                     <span class="with-separators eyebrow-heading-3">or</span>
-                    <FormItem>
-                        <Button github fullWidth on:click={onGithubLogin} {disabled}>
-                            <span class="icon-github" aria-hidden="true" />
-                            <span class="text">Sign in with GitHub</span>
-                        </Button>
-                    </FormItem>
+                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                        <span class="icon-github" aria-hidden="true"></span>
+                        <span class="text">Sign in with GitHub</span>
+                    </Button>
                 {/if}
-            </FormList>
+            </Layout.Stack>
         </Form>
     </svelte:fragment>
     <svelte:fragment slot="links">
         <li class="inline-links-item">
-            <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
+            <a href={`${base}/recover`}><span class="text">Forgot password?</span></a>
         </li>
         <li class="inline-links-item">
-            <a href={`${base}/register${$page?.url?.search ?? ''}`}>
-                <span class="text">Sign Up</span>
+            <a href={`${base}/register${page?.url?.search ?? ''}`}>
+                <span class="text">Sign up</span>
             </a>
         </li>
     </svelte:fragment>
diff --git a/src/routes/(public)/(guest)/register/+page.svelte b/src/routes/(public)/(guest)/register/+page.svelte
index 96fe43ae0..f9b0084bc 100644
--- a/src/routes/(public)/(guest)/register/+page.svelte
+++ b/src/routes/(public)/(guest)/register/+page.svelte
@@ -4,7 +4,6 @@
     import {
         Button,
         Form,
-        FormItem,
         InputChoice,
         InputEmail,
         InputPassword,
@@ -13,14 +12,14 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
-    import FormList from '$lib/elements/forms/formList.svelte';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { ID, OAuthProvider } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { redirectTo } from '$routes/store';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
+    import { Layout, Link, Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -48,20 +47,19 @@
                 await goto(`${base}/apply-credit?campaign=${data.campaign.$id}`);
                 return;
             }
-            if ($page.url.searchParams) {
-                const redirect = $page.url.searchParams.get('redirect');
-                $page.url.searchParams.delete('redirect');
+            if (page.url.searchParams) {
+                const redirect = page.url.searchParams.get('redirect');
+                page.url.searchParams.delete('redirect');
                 if (redirect) {
-                    await goto(`${redirect}${$page.url.search}`);
+                    await goto(`${redirect}${page.url.search}`);
                 } else if (isCloud) {
-                    checkPricingRefAndRedirect($page.url.searchParams);
+                    checkPricingRefAndRedirect(page.url.searchParams);
                 } else {
-                    await goto(`${base}/${$page.url.search ?? ''}`);
+                    await goto(`${base}/${page.url.search ?? ''}`);
                 }
             } else {
                 await goto(base);
             }
-            trackEvent(Submit.AccountCreate);
         } catch (error) {
             disabled = false;
             addNotification({
@@ -90,7 +88,7 @@
     <svelte:fragment slot="title">Sign up</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={register}>
-            <FormList>
+            <Layout.Stack>
                 <InputText
                     id="name"
                     label="Name"
@@ -108,45 +106,36 @@
                     id="password"
                     label="Password"
                     placeholder="Your password"
+                    helper="Password must be at least 8 characters long"
                     required
-                    showPasswordButton
                     bind:value={pass} />
                 <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
-                    By registering, you agree that you have read, understand, and acknowledge our <a
-                        class="link"
+                    By registering, you agree that you have read, understand, and acknowledge our <Link.Anchor
                         href="https://appwrite.io/privacy"
                         target="_blank"
                         rel="noopener noreferrer">
-                        Privacy Policy</a>
+                        Privacy Policy</Link.Anchor>
                     and accept our
-                    <a
-                        class="link"
+                    <Link.Anchor
                         href="https://appwrite.io/terms"
                         target="_blank"
-                        rel="noopener noreferrer">General Terms of Use</a
+                        rel="noopener noreferrer">General Terms of Use</Link.Anchor
                     >.</InputChoice>
-                <FormItem>
-                    <Button fullWidth submit {disabled}>Sign up</Button>
-                </FormItem>
+                <Button fullWidth submit {disabled}>Sign up</Button>
                 {#if isCloud}
                     <span class="with-separators eyebrow-heading-3">or</span>
-                    <FormItem>
-                        <Button github fullWidth on:click={onGithubLogin} {disabled}>
-                            <span class="icon-github" aria-hidden="true" />
-                            <span class="text">Sign up with GitHub</span>
-                        </Button>
-                    </FormItem>
+                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                        <span class="icon-github" aria-hidden="true"></span>
+                        <span class="text">Sign up with GitHub</span>
+                    </Button>
                 {/if}
-            </FormList>
+            </Layout.Stack>
         </Form>
     </svelte:fragment>
     <svelte:fragment slot="links">
-        <li class="inline-links-item">
-            <span class="text">
-                Already got an account? <a
-                    class="link"
-                    href={`${base}/login${$page?.url?.search ?? ''}`}>Sign in</a>
-            </span>
-        </li>
+        <Typography.Text variant="m-400">
+            Already got an account? <Link.Anchor href={`${base}/login${page?.url?.search ?? ''}`}
+                >Sign in</Link.Anchor>
+        </Typography.Text>
     </svelte:fragment>
 </Unauthenticated>
diff --git a/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte b/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
index a36c5505d..29ede2c9d 100644
--- a/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
+++ b/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
@@ -4,7 +4,6 @@
     import {
         Button,
         Form,
-        FormItem,
         InputChoice,
         InputEmail,
         InputPassword,
@@ -13,16 +12,16 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
-    import FormList from '$lib/elements/forms/formList.svelte';
     import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import LoginLight from '$lib/images/login/login-light-mode.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.svg';
     import { isCloud } from '$lib/system';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
-    let slug = $page.params.slug;
+    let slug = page.params.slug;
     let imgLight = LoginLight;
     let imgDark = LoginDark;
 
@@ -97,7 +96,7 @@
     <svelte:fragment slot="title">{title}</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={invite}>
-            <FormList>
+            <Layout.Stack>
                 <InputText
                     id="name"
                     label="Name"
@@ -115,7 +114,6 @@
                     label="Password"
                     placeholder="Your password"
                     required={true}
-                    showPasswordButton={true}
                     bind:value={pass} />
                 <InputText
                     id="Code"
@@ -137,10 +135,8 @@
                         target="_blank"
                         rel="noopener noreferrer">General Terms of Use</a
                     >.</InputChoice>
-                <FormItem>
-                    <Button fullWidth submit>Sign up</Button>
-                </FormItem>
-            </FormList>
+                <Button fullWidth submit>Sign up</Button>
+            </Layout.Stack>
         </Form>
     </svelte:fragment>
     <svelte:fragment slot="links">
diff --git a/src/routes/(public)/auth/+layout.svelte b/src/routes/(public)/auth/+layout.svelte
index 24921622c..a2ac0dc4f 100644
--- a/src/routes/(public)/auth/+layout.svelte
+++ b/src/routes/(public)/auth/+layout.svelte
@@ -1,10 +1,61 @@
-<script>
-    import { Container } from '$lib/layout';
+<script lang="ts">
+    import { app } from '$lib/stores/app';
     import { loading } from '$routes/store';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     loading.set(false);
 </script>
 
-<Container>
-    <slot />
-</Container>
+<div class="auth-bg">
+    <section>
+        <div class="console-container">
+            <slot />
+        </div>
+    </section>
+    <footer>
+        <Typography.Eyebrow color="--fgcolor-neutral-secondary">POWERED BY</Typography.Eyebrow>
+        {#if $app.themeInUse === 'dark'}
+            <img
+                src="/console/images/appwrite-logo-dark.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {:else}
+            <img
+                src="/console/images/appwrite-logo-light.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {/if}
+    </footer>
+</div>
+
+<style lang="scss">
+    .auth-bg {
+        position: fixed;
+        background: var(--bgcolor-neutral-primary, #fff);
+        background-size: cover;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        justify-content: space-between;
+        section {
+            flex: 1;
+            display: flex;
+            align-items: center;
+        }
+        footer {
+            padding: 2rem 1rem;
+            display: flex;
+            gap: 0.5rem;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+    }
+</style>
diff --git a/src/routes/(public)/auth/magic-url/+page.svelte b/src/routes/(public)/auth/magic-url/+page.svelte
index 0dc589b16..c84424577 100644
--- a/src/routes/(public)/auth/magic-url/+page.svelte
+++ b/src/routes/(public)/auth/magic-url/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { page } from '$app/state';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import { Account, Client } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
 
     const client = new Client();
@@ -10,18 +10,18 @@
     const endpoint = getApiEndpoint();
 
     onMount(async () => {
-        const projectId = $page.url.searchParams.get('project');
+        const projectId = page.url.searchParams.get('project');
         client.setEndpoint(endpoint).setProject(projectId);
 
-        const userId = $page.url.searchParams.get('userId');
-        const secret = $page.url.searchParams.get('secret');
+        const userId = page.url.searchParams.get('userId');
+        const secret = page.url.searchParams.get('secret');
 
         await account.updateMagicURLSession(userId, secret);
-        window.location.href = `appwrite-callback-${projectId}://${$page.url.search}`;
+        window.location.href = `appwrite-callback-${projectId}://${page.url.search}`;
     });
 </script>
 
-<Heading tag="h1" size="1">Missing redirect URL</Heading>
+<Typography.Title size="xl">Missing redirect URL</Typography.Title>
 <p>
     Your Magic URL login flow is missing a proper redirect URL. Please check the
     <a href="https://appwrite.io/docs/references/cloud/client-web/account#createMagicURLSession"
diff --git a/src/routes/(public)/auth/oauth2/failure/+page.svelte b/src/routes/(public)/auth/oauth2/failure/+page.svelte
index 811fb1b94..df84e3a46 100644
--- a/src/routes/(public)/auth/oauth2/failure/+page.svelte
+++ b/src/routes/(public)/auth/oauth2/failure/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { page } from '$app/state';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const project = $page.url.searchParams.get('project');
-    const link = `appwrite-callback-${project}://${$page.url.search}`;
+    const project = page.url.searchParams.get('project');
+    const link = `appwrite-callback-${project}://${page.url.search}`;
 
     const redirect = new Promise((_resolve, reject) => {
         if (!project) {
@@ -16,19 +16,18 @@
 {#await redirect then}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">Login failed</Heading>
+            <Typography.Title>Login failed</Typography.Title>
             <p class="text">You will be automatically redirected back to your app shortly.</p>
             <p class="text">
                 If you are not redirected, please click on the following
-                <a class="link" href={`appwrite-callback-${project}://${$page.url.search}`}>link</a
-                >.
+                <a class="link" href={`appwrite-callback-${project}://${page.url.search}`}>link</a>.
             </p>
         </div>
     </article>
 {:catch}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">Missing redirect URL</Heading>
+            <Typography.Title>Missing redirect URL</Typography.Title>
             <p class="text">
                 Your OAuth login flow is missing a proper redirect URL. Please check the
                 <a
@@ -42,7 +41,7 @@
 {/await}
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
     // override padding for screens bigger than mobile
     @media #{devices.$break2open} {
         article.card {
diff --git a/src/routes/(public)/auth/oauth2/success/+page.svelte b/src/routes/(public)/auth/oauth2/success/+page.svelte
index 362b80222..337fe435d 100644
--- a/src/routes/(public)/auth/oauth2/success/+page.svelte
+++ b/src/routes/(public)/auth/oauth2/success/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { page } from '$app/state';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
-    const project = $page.url.searchParams.get('project');
-    const link = `appwrite-callback-${project}://${$page.url.search}`;
+    const project = page.url.searchParams.get('project');
+    const link = `appwrite-callback-${project}://${page.url.search}`;
 
     const redirect = new Promise((_resolve, reject) => {
         if (!project) {
@@ -16,19 +16,18 @@
 {#await redirect then}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">You're now logged in</Heading>
+            <Typography.Title>You're now logged in</Typography.Title>
             <p class="text">You will be automatically redirected back to your app shortly.</p>
             <p class="text">
                 If you are not redirected, please click on the following
-                <a class="link" href={`appwrite-callback-${project}://${$page.url.search}`}>link</a
-                >.
+                <a class="link" href={`appwrite-callback-${project}://${page.url.search}`}>link</a>.
             </p>
         </div>
     </article>
 {:catch}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">Missing redirect URL</Heading>
+            <Typography.Title>Missing redirect URL</Typography.Title>
             <p class="text">
                 Your OAuth login flow is missing a proper redirect URL. Please check the
                 <a
@@ -42,7 +41,7 @@
 {/await}
 
 <style lang="scss">
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
     // override padding for screens bigger than mobile
     @media #{devices.$break2open} {
         article.card {
diff --git a/src/routes/(public)/auth/preview/+page.svelte b/src/routes/(public)/auth/preview/+page.svelte
new file mode 100644
index 000000000..0bb62f30d
--- /dev/null
+++ b/src/routes/(public)/auth/preview/+page.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { sdk } from '$lib/stores/sdk';
+    import { Layout, Spinner, Typography } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+
+    onMount(async () => {
+        const params = new URLSearchParams(window.location.search);
+
+        const projectId = params.get('projectId');
+        const origin = params.get('origin');
+        const path = params.get('path');
+        try {
+            await sdk.forConsole.projects.get(projectId);
+            const jwt = await sdk.forConsole.account.createJWT();
+            window.location.href = `${origin}/_appwrite/authorize?jwt=${jwt.jwt}&path=${path}`;
+        } catch (error) {
+            console.log(error);
+            goto(
+                `${base}/auth/preview/access?origin=${origin}&path=${path}&projectId=${projectId}`
+            );
+        }
+    });
+</script>
+
+<svelte:head>
+    <title>Preview - Appwrite</title>
+</svelte:head>
+
+<Layout.Stack alignItems="center" justifyContent="center" style="max-width: 400px">
+    <Layout.Stack direction="row" alignItems="center" justifyContent="center" gap="s">
+        <Spinner size="s" />
+        <Typography.Text>Authenticating...</Typography.Text>
+    </Layout.Stack>
+    <Typography.Title size="xl" align="center">
+        Please wait while we verify your access
+    </Typography.Title>
+</Layout.Stack>
diff --git a/src/routes/(public)/auth/preview/+page.ts b/src/routes/(public)/auth/preview/+page.ts
new file mode 100644
index 000000000..833ddee54
--- /dev/null
+++ b/src/routes/(public)/auth/preview/+page.ts
@@ -0,0 +1,24 @@
+import { base } from '$app/paths';
+import { redirect } from '@sveltejs/kit';
+
+export const load = async ({ parent, url }) => {
+    const { account } = await parent();
+
+    console.log(url);
+    // const params = new URLSearchParams(window.location.search);
+
+    const projectId = url.searchParams.get('projectId');
+    const origin = url.searchParams.get('origin');
+    const path = url.searchParams.get('path');
+    console.log(projectId);
+    if (!account) {
+        redirect(
+            303,
+            `${base}/auth/preview/access?origin=${origin}&path=${path}&projectId=${projectId}`
+        );
+    } else {
+        return {
+            account
+        };
+    }
+};
diff --git a/src/routes/(public)/auth/preview/access/+page.svelte b/src/routes/(public)/auth/preview/access/+page.svelte
new file mode 100644
index 000000000..be0b3d4cc
--- /dev/null
+++ b/src/routes/(public)/auth/preview/access/+page.svelte
@@ -0,0 +1,258 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Card } from '$lib/components';
+    import Modal from '$lib/components/modal.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Link } from '$lib/elements';
+    import {
+        Button,
+        Form,
+        InputChoice,
+        InputEmail,
+        InputPassword,
+        InputText
+    } from '$lib/elements/forms';
+    import { logout } from '$lib/helpers/logout';
+    import { sdk } from '$lib/stores/sdk';
+    import { isCloud } from '$lib/system';
+    import { ID, OAuthProvider } from '@appwrite.io/console';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import BGDark from './bg_dark.jpg';
+    import BGLight from './bg_light.jpg';
+    import { app } from '$lib/stores/app.js';
+
+    export let data;
+
+    let state: 'register' | 'login' | 'authenticated' = 'login';
+    let mail: string;
+    let pass: string;
+    let terms = false;
+    let name: string;
+    let error: string;
+
+    let projectId: string;
+    let origin: string;
+    let path: string;
+
+    onMount(() => {
+        if (data?.account?.$id) {
+            state = 'authenticated';
+        }
+        const params = new URLSearchParams(window.location.search);
+        projectId = params.get('projectId');
+        origin = params.get('origin');
+        path = params.get('path');
+    });
+
+    async function login() {
+        try {
+            await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
+            await invalidate(Dependencies.ACCOUNT);
+            trackEvent(Submit.AccountLogin);
+
+            goto(`${base}/auth/preview?origin=${origin}&path=${path}&projectId=${projectId}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.AccountLogin);
+        }
+    }
+
+    async function register() {
+        try {
+            await sdk.forConsole.account.create(ID.unique(), mail, pass, name ?? '');
+            await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
+
+            await invalidate(Dependencies.ACCOUNT);
+            trackEvent(Submit.AccountCreate);
+            goto(`${base}/auth/preview?origin=${origin}&path=${path}&projectId=${projectId}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.AccountCreate);
+        }
+    }
+
+    function onGithubAuth() {
+        let url = window.location.origin;
+
+        if (page.url.searchParams) {
+            const redirect = page.url.searchParams.get('redirect');
+            page.url.searchParams.delete('redirect');
+            if (redirect) {
+                url = `${redirect}${page.url.search}`;
+            } else {
+                url = `${base}${page.url.search ?? ''}`;
+            }
+        }
+        sdk.forConsole.account.createOAuth2Session(
+            OAuthProvider.Github,
+            window.location.origin + url,
+            window.location.origin,
+            ['read:user', 'user:email']
+        );
+    }
+
+    async function handleSubmit() {
+        if (state === 'login') {
+            await login();
+        } else if (state === 'register') {
+            await register();
+        }
+    }
+
+    // async function requestAccess() {
+    //     //TODO: Implement request access
+    // }
+
+    $: console.log(data);
+</script>
+
+{#if $app.themeInUse === 'dark'}
+    <img class="preview-img" src={BGDark} alt="background" aria-hidden="true" />
+{:else}
+    <img class="preview-img" src={BGLight} alt="background" aria-hidden="true" />
+{/if}
+
+<svelte:head>
+    <title>Preview access - Appwrite</title>
+</svelte:head>
+
+<Modal
+    title={state === 'authenticated' ? 'Access required' : 'Sign up or log in to view this preview'}
+    dismissible={false}
+    show
+    hideFooter
+    {error}>
+    <span slot="description">
+        {#if state === 'authenticated'}
+            Access is required to view this preview. You'll be able to see it once an admin invites
+            you to the organization.
+        {/if}
+    </span>
+    <Form onSubmit={handleSubmit}>
+        <Layout.Stack gap="xxl">
+            {#if state === 'login'}
+                <Layout.Stack gap="l">
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Enter email"
+                        autofocus
+                        required
+                        bind:value={mail} />
+                    <InputPassword
+                        id="password"
+                        label="Password"
+                        placeholder="Enter password"
+                        required
+                        bind:value={pass} />
+                </Layout.Stack>
+
+                <Layout.Stack gap="l">
+                    <Button size="m" fullWidth submit>Sign in</Button>
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    {#if isCloud}
+                        <Button size="m" secondary fullWidth on:click={onGithubAuth}>
+                            <span class="icon-github" aria-hidden="true"></span>
+                            <span class="text">Sign in with GitHub</span>
+                        </Button>
+                    {/if}
+                    <Button size="m" text fullWidth on:click={() => (state = 'register')}>
+                        Sign up instead
+                    </Button>
+                </Layout.Stack>
+            {:else if state === 'register'}
+                <Layout.Stack gap="l">
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter name"
+                        autofocus
+                        required
+                        bind:value={name} />
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Enter email"
+                        required
+                        bind:value={mail} />
+                    <InputPassword
+                        id="password"
+                        label="Password"
+                        placeholder="Enter password"
+                        required
+                        bind:value={pass} />
+
+                    <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
+                        By registering, you agree that you have read, understand, and acknowledge
+                        our <a
+                            class="link"
+                            href="https://appwrite.io/privacy"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            Privacy Policy</a>
+                        and accept our
+                        <a
+                            class="link"
+                            href="https://appwrite.io/terms"
+                            target="_blank"
+                            rel="noopener noreferrer">General Terms of Use</a
+                        >.</InputChoice>
+                </Layout.Stack>
+
+                <Layout.Stack gap="l">
+                    <Button size="m" fullWidth submit>Sign up</Button>
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    {#if isCloud}
+                        <Button size="m" secondary fullWidth on:click={onGithubAuth}>
+                            <span class="icon-github" aria-hidden="true"></span>
+                            <span class="text">Continue with GitHub</span>
+                        </Button>
+                    {/if}
+                    <Button size="m" text fullWidth on:click={() => (state = 'login')}>
+                        Sign in instead
+                    </Button>
+                </Layout.Stack>
+            {:else if state === 'authenticated'}
+                <Card variant="secondary" radius="s" padding="s">
+                    <Layout.Stack gap="xxs">
+                        <Layout.Stack direction="row" gap="xxs">
+                            <Typography.Text variant="m-400">You're signed in as</Typography.Text>
+
+                            <Typography.Text variant="m-500">
+                                {data.account.email}
+                            </Typography.Text>
+                        </Layout.Stack>
+                        <div>
+                            <Link
+                                variant="muted"
+                                on:click={() => {
+                                    logout(false);
+                                    state = 'login';
+                                }}>Switch account</Link>
+                        </div>
+                    </Layout.Stack>
+                </Card>
+            {/if}
+        </Layout.Stack>
+    </Form>
+
+    <!-- <svelte:fragment slot="footer">
+        <Button on:click={requestAccess}>Request access</Button>
+    </svelte:fragment> -->
+</Modal>
+
+<style lang="scss">
+    .preview-img {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top left;
+    }
+</style>
diff --git a/src/routes/(public)/auth/preview/access/+page.ts b/src/routes/(public)/auth/preview/access/+page.ts
new file mode 100644
index 000000000..87603f585
--- /dev/null
+++ b/src/routes/(public)/auth/preview/access/+page.ts
@@ -0,0 +1,7 @@
+export const load = async ({ parent }) => {
+    const { account } = await parent();
+
+    return {
+        account
+    };
+};
diff --git a/src/routes/(public)/auth/preview/access/bg_dark.jpg b/src/routes/(public)/auth/preview/access/bg_dark.jpg
new file mode 100644
index 000000000..1fbbdc128
Binary files /dev/null and b/src/routes/(public)/auth/preview/access/bg_dark.jpg differ
diff --git a/src/routes/(public)/auth/preview/access/bg_light.jpg b/src/routes/(public)/auth/preview/access/bg_light.jpg
new file mode 100644
index 000000000..febb1bab8
Binary files /dev/null and b/src/routes/(public)/auth/preview/access/bg_light.jpg differ
diff --git a/src/routes/(public)/card/+layout.svelte b/src/routes/(public)/card/+layout.svelte
index eaebf310b..b795ff5b0 100644
--- a/src/routes/(public)/card/+layout.svelte
+++ b/src/routes/(public)/card/+layout.svelte
@@ -1,20 +1,9 @@
 <script>
     import { Shell } from '$lib/layout';
-    import { app } from '$lib/stores/app';
-    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
-    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import Footer from '$lib/layout/footer.svelte';
-    import { base } from '$app/paths';
 </script>
 
 <Shell>
-    <a class="logo" slot="header" href={base}>
-        <img
-            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
-            width="120"
-            height="22"
-            alt="Appwrite Logo" />
-    </a>
     <slot />
     <Footer slot="footer" />
 </Shell>
diff --git a/src/routes/(public)/card/Card.svelte b/src/routes/(public)/card/Card.svelte
index 584a83f31..5f2cb78ef 100644
--- a/src/routes/(public)/card/Card.svelte
+++ b/src/routes/(public)/card/Card.svelte
@@ -257,16 +257,16 @@
                     loading="lazy"
                     width="450"
                     height="274" />
-                <div class="card__glare" />
+                <div class="card__glare"></div>
             </div>
 
             {#each new Array(THICKNESS) as _, i (i)}
-                <div class="card__thick" style:--i={i + 1} />
+                <div class="card__thick" style:--i={i + 1}></div>
             {/each}
             <div class="card__front" style:--thickness={THICKNESS}>
                 <img class="invisible" src={base64.front} alt="" />
                 <img class="abs" src={base64.front} alt="The front of the card" />
-                <div class="card__glare" />
+                <div class="card__glare"></div>
             </div>
         </button>
     </div>
diff --git a/src/routes/(public)/card/[uid]/+page.svelte b/src/routes/(public)/card/[uid]/+page.svelte
index 893d85080..d6bc8e181 100644
--- a/src/routes/(public)/card/[uid]/+page.svelte
+++ b/src/routes/(public)/card/[uid]/+page.svelte
@@ -122,21 +122,21 @@
                     href="https://twitter.com/intent/tweet?text={twitterText}"
                     target="_blank"
                     rel="noreferrer">
-                    <span class="icon-twitter" aria-hidden="true" />
+                    <span class="icon-twitter" aria-hidden="true"></span>
                     <span class="text">Tweet it</span>
                 </a>
             </li>
             {#if variant === 'owner'}
                 <li class="buttons-list-item embed-btn">
                     <button class="button is-text" on:click={() => (showEmbedCode = true)}>
-                        <span class="icon-code" aria-hidden="true" />
+                        <span class="icon-code" aria-hidden="true"></span>
                         <span class="text">Get embed code</span>
                     </button>
                 </li>
             {/if}
             <li class="buttons-list-item">
                 <button class="button is-text" on:click={copyShareableLink}>
-                    <span class="icon-link" aria-hidden="true" />
+                    <span class="icon-link" aria-hidden="true"></span>
                     <span class="text">Get a link</span>
                 </button>
             </li>
@@ -177,7 +177,8 @@
             }}
             transition:fade
             role="button"
-            tabindex="0" />
+            tabindex="0">
+        </div>
     {/if}
     <div class="controls" class:invisible={!cardActive}>
         <button
diff --git a/src/routes/(public)/hackathon/+layout.svelte b/src/routes/(public)/hackathon/+layout.svelte
index eaebf310b..b795ff5b0 100644
--- a/src/routes/(public)/hackathon/+layout.svelte
+++ b/src/routes/(public)/hackathon/+layout.svelte
@@ -1,20 +1,9 @@
 <script>
     import { Shell } from '$lib/layout';
-    import { app } from '$lib/stores/app';
-    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
-    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import Footer from '$lib/layout/footer.svelte';
-    import { base } from '$app/paths';
 </script>
 
 <Shell>
-    <a class="logo" slot="header" href={base}>
-        <img
-            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
-            width="120"
-            height="22"
-            alt="Appwrite Logo" />
-    </a>
     <slot />
     <Footer slot="footer" />
 </Shell>
diff --git a/src/routes/(public)/hackathon/+page.svelte b/src/routes/(public)/hackathon/+page.svelte
index 22271ff97..208ab772a 100644
--- a/src/routes/(public)/hackathon/+page.svelte
+++ b/src/routes/(public)/hackathon/+page.svelte
@@ -5,8 +5,8 @@
     import HashnodeDark from './hashnode-dark.svg';
     import HashnodeLight from './hashnode-light.svg';
     import Badge from './hackathon-badge.svg';
-    import { tooltip } from '$lib/actions/tooltip';
     import { base } from '$app/paths';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 </script>
 
 <svelte:head>
@@ -48,7 +48,7 @@
             </Button>
         </div>
         <div class="ht-logos">
-            <div class="u-only-light buttons-list" />
+            <div class="u-only-light buttons-list"></div>
             <ul class="inline-links">
                 <li class="inline-links-item" style="padding-inline-start: 0;">
                     <div class="u-only-light">
@@ -71,14 +71,10 @@
     </section>
     <section class="ht-img">
         <div class="card ht-card ht-card-main u-flex u-cross-center u-main-center">
-            <img
-                height="200"
-                width="200"
-                src={Badge}
-                alt="hackathon-badge"
-                use:tooltip={{
-                    content: 'Join the hackathon to unlock this badge'
-                }} />
+            <Tooltip>
+                <img height="200" width="200" src={Badge} alt="hackathon-badge" />
+                <span slot="tooltip">Join the hackathon to unlock this badge</span>
+            </Tooltip>
         </div>
         <div class="card ht-card u-flex u-flex-vertical">
             <div class="ht-tag ht-tag-primary u-cross-child-center">
diff --git a/src/routes/(public)/invite/+page.svelte b/src/routes/(public)/invite/+page.svelte
index 7bb11f6c7..2b44f2eb9 100644
--- a/src/routes/(public)/invite/+page.svelte
+++ b/src/routes/(public)/invite/+page.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { Button, Form, FormList, InputChoice } from '$lib/elements/forms';
+    import { Button, Form, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { onMount } from 'svelte';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Alert } from '$lib/components';
+    import { Layout, Link, Typography, Alert } from '@appwrite.io/pink-svelte';
 
     let teamId: string, membershipId: string, userId: string, secret: string;
     let terms = false;
 
     onMount(() => {
-        userId = $page.url.searchParams.get('userId');
-        secret = $page.url.searchParams.get('secret');
-        teamId = $page.url.searchParams.get('teamId');
-        membershipId = $page.url.searchParams.get('membershipId');
+        userId = page.url.searchParams.get('userId');
+        secret = page.url.searchParams.get('secret');
+        teamId = page.url.searchParams.get('teamId');
+        membershipId = page.url.searchParams.get('membershipId');
     });
 
     const acceptInvite = async () => {
@@ -53,43 +53,46 @@
     </svelte:fragment>
     <svelte:fragment>
         {#if !userId || !secret || !membershipId || !teamId}
-            <Alert type="warning">
-                <svelte:fragment slot="title">The invite link is not valid</svelte:fragment>
-                Please ask the project owner to send you a new invite.
-            </Alert>
-            <div class="u-flex u-main-end u-margin-block-start-40">
-                <Button href={`${base}/register`}>Sign up to Appwrite</Button>
-            </div>
+            <Layout.Stack>
+                <Alert.Inline status="warning" title="The invite link is not valid">
+                    Please ask the project owner to send you a new invite.
+                </Alert.Inline>
+                <div>
+                    <Button href={`${base}/register`}>Sign up to Appwrite</Button>
+                </div>
+            </Layout.Stack>
         {:else}
-            <p class="text">You have been invited to join an organization on Appwrite</p>
-            <Form onSubmit={acceptInvite}>
-                <FormList>
-                    <InputChoice
-                        required
-                        bind:value={terms}
-                        id="terms"
-                        label="terms"
-                        showLabel={false}>
-                        By accepting the invitation, you agree to the <a
-                            class="link"
-                            href="https://appwrite.io/terms"
-                            target="_blank"
-                            rel="noopener noreferrer">Terms and Conditions</a>
-                        and
-                        <a
-                            class="link"
-                            href="https://appwrite.io/privacy"
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            Privacy Policy</a
-                        >.</InputChoice>
+            <Layout.Stack>
+                <Typography.Text>
+                    You have been invited to join an organization on Appwrite
+                </Typography.Text>
+                <Form onSubmit={acceptInvite}>
+                    <Layout.Stack>
+                        <InputChoice
+                            required
+                            bind:value={terms}
+                            id="terms"
+                            label="terms"
+                            showLabel={false}>
+                            By accepting the invitation, you agree to the <Link.Anchor
+                                href="https://appwrite.io/terms"
+                                target="_blank"
+                                rel="noopener noreferrer">Terms and Conditions</Link.Anchor>
+                            and
+                            <Link.Anchor
+                                href="https://appwrite.io/privacy"
+                                target="_blank"
+                                rel="noopener noreferrer">
+                                Privacy Policy</Link.Anchor
+                            >.</InputChoice>
 
-                    <div class="u-flex u-main-end u-gap-12">
-                        <Button secondary href={`${base}/login`}>Cancel</Button>
-                        <Button submit>Accept</Button>
-                    </div>
-                </FormList>
-            </Form>
+                        <Layout.Stack direction="row">
+                            <Button secondary href={`${base}/login`}>Cancel</Button>
+                            <Button submit disabled={!terms}>Accept</Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
+                </Form>
+            </Layout.Stack>
         {/if}
     </svelte:fragment>
 </Unauthenticated>
diff --git a/src/routes/(public)/recover/+page.svelte b/src/routes/(public)/recover/+page.svelte
index 95c294ad1..1eac648d5 100644
--- a/src/routes/(public)/recover/+page.svelte
+++ b/src/routes/(public)/recover/+page.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import {
-        Button,
-        Form,
-        FormItem,
-        FormList,
-        InputEmail,
-        InputPassword
-    } from '$lib/elements/forms';
+    import { Button, Form, InputEmail, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { goto } from '$app/navigation';
+    import { Divider, Layout, Link } from '@appwrite.io/pink-svelte';
 
     let email: string;
     let userId: string;
@@ -24,8 +18,8 @@
     let confirmPassword: string;
 
     onMount(() => {
-        userId = $page.url.searchParams.get('userId');
-        secret = $page.url.searchParams.get('secret');
+        userId = page.url.searchParams.get('userId');
+        secret = page.url.searchParams.get('secret');
     });
 
     async function recover() {
@@ -70,35 +64,31 @@
 </svelte:head>
 
 <Unauthenticated>
-    <svelte:fragment slot="title">Password Recovery</svelte:fragment>
+    <svelte:fragment slot="title">Password recovery</svelte:fragment>
     <svelte:fragment>
         {#if userId && secret}
             <Form onSubmit={setPassword}>
-                <FormList>
+                <Layout.Stack>
                     <InputPassword
                         label="New password"
                         placeholder="Enter password"
                         id="password"
                         autofocus={true}
                         required={true}
-                        showPasswordButton={true}
                         bind:value={password} />
                     <InputPassword
                         label="Confirm password"
                         placeholder="Confirm password"
                         id="confirm-password"
                         required={true}
-                        showPasswordButton={true}
                         bind:value={confirmPassword} />
 
-                    <FormItem>
-                        <Button fullWidth submit>Update</Button>
-                    </FormItem>
-                </FormList>
+                    <Button fullWidth submit>Update</Button>
+                </Layout.Stack>
             </Form>
         {:else}
             <Form onSubmit={recover}>
-                <FormList>
+                <Layout.Stack>
                     <InputEmail
                         id="email"
                         label="Email"
@@ -107,19 +97,18 @@
                         required={true}
                         bind:value={email} />
 
-                    <FormItem>
-                        <Button fullWidth submit>Recover</Button>
-                    </FormItem>
-                </FormList>
+                    <Button fullWidth submit>Recover</Button>
+                </Layout.Stack>
             </Form>
         {/if}
     </svelte:fragment>
     <svelte:fragment slot="links">
-        <li class="inline-links-item">
-            <a href={`${base}/login`}><span class="text">Sign in</span></a>
-        </li>
-        <li class="inline-links-item">
-            <a href={`${base}/register`}><span class="text">Sign Up</span></a>
-        </li>
+        <Layout.Stack direction="row" justifyContent="center" alignItems="center">
+            <Link.Anchor href={`${base}/login`} variant="quiet">Sign in</Link.Anchor>
+            <div style:height="20px">
+                <Divider vertical />
+            </div>
+            <Link.Anchor href={`${base}/register`} variant="quiet">Sign up</Link.Anchor>
+        </Layout.Stack>
     </svelte:fragment>
 </Unauthenticated>
diff --git a/src/routes/(public)/template-[template]/+layout.svelte b/src/routes/(public)/template-[template]/+layout.svelte
new file mode 100644
index 000000000..24b88068c
--- /dev/null
+++ b/src/routes/(public)/template-[template]/+layout.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+
+    let { children } = $props();
+</script>
+
+<div class="auth-bg">
+    <section class="console-container">
+        {@render children()}
+    </section>
+    <footer>
+        {#if $app.themeInUse === 'dark'}
+            <img
+                src="/console/images/appwrite-logo-dark.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {:else}
+            <img
+                src="/console/images/appwrite-logo-light.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {/if}
+    </footer>
+</div>
+
+<style lang="scss">
+    .auth-bg {
+        position: fixed;
+        background: var(--bgcolor-neutral-default, #fff);
+        background-size: cover;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        justify-content: space-between;
+        section {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        }
+        footer {
+            padding: 2rem 1rem;
+            display: flex;
+            gap: 0.5rem;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+    }
+</style>
diff --git a/src/routes/(public)/template-[template]/+page.svelte b/src/routes/(public)/template-[template]/+page.svelte
new file mode 100644
index 000000000..b00b007ad
--- /dev/null
+++ b/src/routes/(public)/template-[template]/+page.svelte
@@ -0,0 +1,281 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import CustomId from '$lib/components/customId.svelte';
+    import { SvgIcon } from '$lib/components/index.js';
+    import { Button, Form, InputSelect } from '$lib/elements/forms';
+    import { getFlagUrl } from '$lib/helpers/flag.js';
+    import type { AllowedRegions } from '$lib/sdk/billing.js';
+    import { app } from '$lib/stores/app';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { getFrameworkIcon } from '$lib/stores/sites.js';
+    import { isCloud } from '$lib/system';
+    import { ID, OAuthProvider, Query, type Models, Region } from '@appwrite.io/console';
+    import { IconGithub, IconPencil, IconPlusSm } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Card,
+        Divider,
+        Icon,
+        Image,
+        Input,
+        Layout,
+        Tag,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+
+    let { data } = $props();
+
+    let projects = $state<Models.ProjectList>();
+    let selectedProject = $state<string>();
+    let selectedOrg = $state(
+        data?.organizations?.total ? data.organizations.teams[0].$id : undefined
+    );
+    let projectName = $state<string>();
+    let showCustomId = $state(false);
+    let region = $state<AllowedRegions>();
+    let regions = $state<Array<Models.ConsoleRegion>>([]);
+    let id = $state<string>();
+
+    function getRegions() {
+        return regions
+            .filter((region) => region.$id !== 'default')
+            .sort((regionA, regionB) => {
+                if (regionA.disabled && !regionB.disabled) {
+                    return 1;
+                }
+                return regionA.name > regionB.name ? 1 : -1;
+            })
+            .map((region) => {
+                return {
+                    label: region.name,
+                    value: region.$id,
+                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
+                    disabled: region.disabled
+                };
+            });
+    }
+
+    function isSiteTemplate(
+        template: Models.TemplateFunction | Models.TemplateSite,
+        product: 'site' | 'function'
+    ): template is Models.TemplateSite {
+        return product === 'site' && 'frameworks' in template;
+    }
+
+    function onGithubLogin() {
+        sdk.forConsole.account.createOAuth2Session(
+            OAuthProvider.Github,
+            window.location.origin,
+            window.location.origin,
+            ['read:user', 'user:email']
+        );
+    }
+
+    async function fetchProjects() {
+        projects = await sdk.forConsole.projects.list([
+            Query.equal('teamId', selectedOrg),
+            Query.orderDesc('')
+        ]);
+        selectedProject = projects?.total ? projects.projects[0].$id : null;
+    }
+
+    function generateUrl() {
+        if (isSiteTemplate(data.template, data.product)) {
+            return `${base}/project-${selectedProject}/sites/create-site/templates/template-${data.template.key}`;
+        } else {
+            return `${base}/project-${selectedProject}/functions/create-function/templates/template-${data.template.name}`;
+        }
+    }
+
+    async function handleSubmit() {
+        if (selectedProject === null) {
+            try {
+                const p = await sdk.forConsole.projects.create(
+                    id ?? ID.unique(),
+                    projectName,
+                    selectedOrg,
+                    isCloud ? (region as Region) : Region.Fra
+                );
+                trackEvent(Submit.ProjectCreate, {
+                    customId: !!id,
+                    selectedOrg,
+                    teamId: selectedOrg
+                });
+
+                selectedProject = p.$id;
+
+                window.location.href = generateUrl();
+            } catch (e) {
+                trackError(e, Submit.ProjectCreate);
+                addNotification({
+                    type: 'error',
+                    message: e.message
+                });
+            }
+        } else {
+            window.location.href = generateUrl();
+        }
+    }
+
+    $effect(() => {
+        if (selectedOrg !== undefined) {
+            fetchProjects();
+        }
+    });
+</script>
+
+<svelte:head>
+    <title>Deploy {data.template.name} - Appwrite</title>
+</svelte:head>
+
+<div style:max-width="592px" style:width="100%">
+    <Card.Base padding="s" radius="l">
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="l">
+                <Typography.Title size="m">
+                    Deploy {data.product}
+                </Typography.Title>
+                <Card.Base variant="secondary" padding="xxxs" radius="s">
+                    <Layout.GridFraction start={5} end={6}>
+                        {#if isSiteTemplate(data.template, data.product)}
+                            {@const framework = data.template.frameworks[0]}
+                            <Image
+                                border
+                                radius="xs"
+                                ratio="16/9"
+                                style=" align-self: start"
+                                src={$app.themeInUse === 'dark'
+                                    ? data.template.screenshotDark ||
+                                      `${base}/images/sites/screenshot-placeholder-dark.svg`
+                                    : data.template.screenshotLight ||
+                                      `${base}/images/sites/screenshot-placeholder-light.svg`}
+                                alt="Screenshot" />
+                            <Layout.Stack gap="xxl" justifyContent="center">
+                                <Layout.Stack gap="xxs">
+                                    <Typography.Text
+                                        variant="m-500"
+                                        color="--fgcolor-neutral-primary">
+                                        {data.template.name}
+                                    </Typography.Text>
+                                    <Typography.Text variant="m-500">
+                                        {data.template.tagline}
+                                    </Typography.Text>
+                                </Layout.Stack>
+                                {@const frameworkIcon = getFrameworkIcon(framework.key)}
+                                <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                                    {#if frameworkIcon}
+                                        <SvgIcon iconSize="small" size={16} name={frameworkIcon} />
+                                    {/if}
+                                    <Typography.Text
+                                        variant="m-500"
+                                        color="--fgcolor-neutral-primary">
+                                        {framework.name}
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.GridFraction>
+                </Card.Base>
+
+                {#if data.account}
+                    <Form onSubmit={handleSubmit}>
+                        <Layout.Stack gap="xl">
+                            <InputSelect
+                                id="organization"
+                                label="Organization"
+                                required
+                                placeholder="Select an organization"
+                                options={data.organizations.teams.map((o) => ({
+                                    label: o.name,
+                                    value: o.$id
+                                }))}
+                                bind:value={selectedOrg} />
+
+                            {#if projects?.total}
+                                {#key selectedProject}
+                                    <InputSelect
+                                        id="project"
+                                        label="Project"
+                                        required
+                                        options={[
+                                            ...projects.projects.map((p) => ({
+                                                label: p.name,
+                                                value: p.$id
+                                            })),
+                                            {
+                                                label: 'Create project',
+                                                leadingIcon: IconPlusSm,
+                                                value: null
+                                            }
+                                        ]}
+                                        bind:value={selectedProject} />
+                                {/key}
+                            {/if}
+                            {#if selectedProject === null}
+                                <Layout.Stack direction="column" gap="s">
+                                    <Input.Text
+                                        label="Name"
+                                        placeholder="Project name"
+                                        required
+                                        bind:value={projectName} />
+                                    {#if !showCustomId}
+                                        <div>
+                                            <Tag
+                                                size="s"
+                                                on:click={() => {
+                                                    showCustomId = true;
+                                                }}
+                                                ><Icon slot="start" icon={IconPencil} size="s" /> Project
+                                                ID</Tag>
+                                        </div>
+                                    {/if}
+                                    <CustomId
+                                        bind:show={showCustomId}
+                                        name="Project"
+                                        isProject
+                                        bind:id />
+                                </Layout.Stack>
+                                {#if isCloud}
+                                    <Layout.Stack gap="xs">
+                                        <Input.Select
+                                            required
+                                            bind:value={region}
+                                            placeholder="Select a region"
+                                            options={getRegions()}
+                                            label="Region" />
+                                        <Typography.Text>
+                                            Region cannot be changed after creation
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                {/if}
+                            {/if}
+
+                            <Divider />
+                            <Layout.Stack direction="row-reverse">
+                                <div>
+                                    <Button
+                                        disabled={!selectedOrg ||
+                                            (!selectedProject && !projectName && !region)}
+                                        submit>
+                                        <span class="text">Continue</span>
+                                    </Button>
+                                </div>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Form>
+                {:else}
+                    <Typography.Text variant="m-500">
+                        Sign in to deploy a site from GitHub.
+                    </Typography.Text>
+
+                    <Divider />
+                    <Button secondary fullWidth on:click={onGithubLogin}>
+                        <Icon slot="start" icon={IconGithub} />
+                        <span class="text">Sign in with GitHub</span>
+                    </Button>
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
+    </Card.Base>
+</div>
diff --git a/src/routes/(public)/template-[template]/+page.ts b/src/routes/(public)/template-[template]/+page.ts
new file mode 100644
index 000000000..dad1d1a06
--- /dev/null
+++ b/src/routes/(public)/template-[template]/+page.ts
@@ -0,0 +1,58 @@
+import { BillingPlan } from '$lib/constants.js';
+import { sdk } from '$lib/stores/sdk.js';
+import { ID, type Models } from '@appwrite.io/console';
+import { isCloud } from '$lib/system.js';
+import { error, redirect } from '@sveltejs/kit';
+import type { OrganizationList } from '$lib/stores/organization.js';
+import { redirectTo } from '$routes/store.js';
+
+export const load = async ({ parent, url, params }) => {
+    const { account } = await parent();
+
+    if (!account && !isCloud) {
+        redirectTo.set(url.pathname + url.search);
+        redirect(302, '/console/login?redirect=' + url.pathname + url.search);
+    }
+
+    if (!url.searchParams.has('type')) {
+        error(404, 'Type is not optional');
+    }
+
+    const product = url.searchParams.get('type');
+    let template: Models.TemplateFunction | Models.TemplateSite;
+
+    switch (product) {
+        case 'function':
+            template = await sdk.forConsole.functions.getTemplate(params.template);
+            break;
+        case 'site':
+            template = await sdk.forConsole.sites.getTemplate(params.template);
+            break;
+        default:
+            error(404, 'Type is not valid');
+    }
+
+    let organizations: Models.TeamList<Record<string, unknown>> | OrganizationList | undefined;
+    if (isCloud) {
+        organizations = account?.$id ? await sdk.forConsole.billing.listOrganization() : undefined;
+    } else {
+        organizations = account?.$id ? await sdk.forConsole.teams.list() : undefined;
+    }
+
+    if (!organizations?.total && account?.$id) {
+        await sdk.forConsole.billing.createOrganization(
+            ID.unique(),
+            'Personal project',
+            BillingPlan.FREE,
+            null,
+            null
+        );
+    }
+
+    return {
+        account,
+        template: template,
+        product,
+        organizations
+    };
+};
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index aeb76ff92..ed25aafc4 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,13 +1,16 @@
 <script>
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { Unauthenticated } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Unauthenticated>
-    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
-    <Heading size="3" tag="h4">{$page.error.message}</Heading>
+    <Typography.Title size="xl"
+        >{'status' in page.error
+            ? page.error.status || 'Invalid Argument'
+            : 'Invalid Argument'}</Typography.Title>
+    <Typography.Title>{page.error.message}</Typography.Title>
     <Button href={base}>Back to the console</Button>
 </Unauthenticated>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 169d2bb37..f5bed4b86 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,10 +2,10 @@
     import { browser } from '$app/environment';
     import { afterNavigate, goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { trackPageView } from '$lib/actions/analytics';
     import { Notifications, Progress } from '$lib/layout';
-    import { app } from '$lib/stores/app';
+    import { app, type AppStore } from '$lib/stores/app';
     import { isCloud } from '$lib/system';
     import { onMount } from 'svelte';
     import { requestedMigration } from './store';
@@ -13,11 +13,25 @@
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { loading } from '$routes/store';
+    import { Root } from '@appwrite.io/pink-svelte';
+    import { ThemeDark, ThemeLight, ThemeDarkCloud, ThemeLightCloud } from '../themes';
+    import { isSmallViewport, updateViewport } from '$lib/stores/viewport';
+    import { feedback } from '$lib/stores/feedback';
+
+    function resolveTheme(theme: AppStore['themeInUse']) {
+        switch (theme) {
+            case 'dark':
+                return isCloud ? ThemeDarkCloud : ThemeDark;
+            case 'light':
+                return isCloud ? ThemeLightCloud : ThemeLight;
+        }
+    }
 
     onMount(async () => {
+        updateViewport();
         // handle sources
         if (isCloud) {
-            const urlParams = $page.url.searchParams;
+            const urlParams = page.url.searchParams;
             const ref = urlParams.get('ref');
             const utmSource = urlParams.get('utm_source');
             const utmMedium = urlParams.get('utm_medium');
@@ -47,32 +61,33 @@
             }
         }
 
-        if ($page.url.searchParams.has('migrate')) {
-            const migrateData = $page.url.searchParams.get('migrate');
+        if (page.url.searchParams.has('migrate')) {
+            const migrateData = page.url.searchParams.get('migrate');
             requestedMigration.set(parseIfString(migrateData) as Record<string, string>);
         }
 
-        if ($page.url.searchParams.has('code')) {
-            const code = $page.url.searchParams.get('code');
+        if (page.url.searchParams.has('code')) {
+            const code = page.url.searchParams.get('code');
             const coupon = await sdk.forConsole.billing.getCoupon(code).catch<null>(() => null);
             if (coupon?.campaign) {
                 const campaign = await sdk.forConsole.billing
                     .getCampaign(coupon.campaign)
                     .catch<null>(() => null);
                 if (campaign && $user) {
-                    goto(`${base}/apply-credit?${$page.url.searchParams}`);
+                    goto(`${base}/apply-credit?${page.url.searchParams}`);
                     loading.set(false);
                     return;
                 }
             }
         }
-        if (user && $page.url.searchParams.has('campaign')) {
-            const campaignId = $page.url.searchParams.get('campaign');
+
+        if ($user && page.url.searchParams.has('campaign')) {
+            const campaignId = page.url.searchParams.get('campaign');
             const campaign = await sdk.forConsole.billing
                 .getCampaign(campaignId)
                 .catch<null>(() => null);
             if (campaign) {
-                goto(`${base}/apply-credit?${$page.url.searchParams}`);
+                goto(`${base}/apply-credit?${page.url.searchParams}`);
 
                 loading.set(false);
                 return;
@@ -80,6 +95,13 @@
         }
 
         loading.set(false);
+
+        isSmallViewport.subscribe(() => {
+            // reset the feedback form if the viewport changed else it requires dual click.
+            if ($feedback.show) {
+                feedback.toggleFeedback();
+            }
+        });
     });
 
     afterNavigate((navigation) => {
@@ -91,34 +113,87 @@
     $: {
         if (browser) {
             const isCloudClass = isCloud ? 'is-cloud' : '';
+
             if ($app.theme === 'auto') {
                 const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
                 if (darkThemeMq.matches) {
-                    document.body.setAttribute('class', `theme-dark ${isCloudClass}`);
+                    document.body.setAttribute('class', `theme-dark ${isCloudClass} no-transition`);
                     $app.themeInUse = 'dark';
                 } else {
-                    document.body.setAttribute('class', `theme-light ${isCloudClass}`);
+                    document.body.setAttribute(
+                        'class',
+                        `theme-light ${isCloudClass} no-transition`
+                    );
                     $app.themeInUse = 'light';
                 }
             } else {
-                document.body.setAttribute('class', `theme-${$app.theme} ${isCloudClass}`);
+                document.body.setAttribute(
+                    'class',
+                    `theme-${$app.theme} ${isCloudClass} no-transition`
+                );
                 $app.themeInUse = $app.theme;
             }
+            requestAnimationFrame(() => {
+                document.body.classList.remove('no-transition');
+            });
         }
     }
+
+    const preloadFonts = [
+        base + '/fonts/inter/inter-v8-latin-600.woff2',
+        base + '/fonts/inter/inter-v8-latin-regular.woff2',
+        base + '/fonts/poppins/poppins-v19-latin-500.woff2',
+        base + '/fonts/poppins/poppins-v19-latin-600.woff2',
+        base + '/fonts/poppins/poppins-v19-latin-700.woff2',
+        base + '/fonts/source-code-pro/source-code-pro-v20-latin-regular.woff2'
+    ];
+    const preloadFontsCloud = [
+        'https://fonts.appwrite.io/aeonik-pro/AeonikPro-Regular.woff2',
+        'https://fonts.appwrite.io/aeonik-pro/AeonikPro-Medium.woff2',
+        'https://fonts.appwrite.io/aeonik-pro/AeonikPro-Bold.woff2',
+        'https://fonts.appwrite.io/aeonik-fono/AeonikFono-Regular.woff2',
+        'https://fonts.appwrite.io/aeonik-fono/AeonikFono-Medium.woff2',
+        'https://fonts.appwrite.io/aeonik-fono/AeonikFono-Bold.woff2'
+    ];
 </script>
 
-<Notifications />
-<!-- {#if isCloud}
-    <Consent />
-{/if} -->
+<svelte:window on:resize={updateViewport} on:load={updateViewport} />
 
-<slot />
+<svelte:head>
+    {#each preloadFonts as font}
+        <link rel="preload" href={font} as="font" type="font/woff2" crossorigin="anonymous" />
+    {/each}
+    <link rel="preload" as="style" type="text/css" href="/console/fonts/main.css" />
+    <link rel="stylesheet" href={`${base}/fonts/main.css`} />
 
-<Progress />
+    {#if isCloud}
+        {#each preloadFontsCloud as font}
+            <link rel="preload" href={font} as="font" type="font/woff2" crossorigin="anonymous" />
+        {/each}
+        <link rel="preload" as="style" type="text/css" href="/console/fonts/cloud.css" />
+        <link rel="stylesheet" href={`${base}/fonts/cloud.css`} />
+    {/if}
+</svelte:head>
+
+<Root theme={resolveTheme($app.themeInUse)}>
+    <Notifications />
+    <!-- {#if isCloud}
+        <Consent />
+    {/if} -->
+
+    <slot />
+
+    <Progress />
+</Root>
 
 <style lang="scss" global>
-    @use '@appwrite.io/pink/src/abstract/variables/devices';
+    @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
+
+    .no-transition {
+        * {
+            transition: none !important;
+        }
+    }
 
     .tippy-box {
         --p-tooltip-text-color: var(--color-neutral-10);
@@ -198,7 +273,7 @@
     }
 
     .is-cloud {
-        --heading-font: 'Aeonik Pro', arial, sans-serif;
+        --heading-font: 'Aeonik Pro', 'Inter', sans-serif;
         .heading-level {
             @media #{devices.$break3open} {
                 &-1,
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 8b5532878..78d86d2e4 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,4 +1,4 @@
-import '@appwrite.io/pink';
+import '@appwrite.io/pink-legacy';
 import '@appwrite.io/pink-icons';
 import 'tippy.js/dist/tippy.css';
 import { sdk } from '$lib/stores/sdk';
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 9f228e1ec..625a46dec 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -42,7 +42,7 @@ export const load: PageLoad = async ({ parent, url }) => {
             redirect(303, `${base}/organization-${teamId}${url.search}`);
         }
     } else {
-        redirect(303, `${base}/onboarding${url.search}`);
+        redirect(303, `${base}/onboarding/create-project${url.search}`);
     }
 };
 
diff --git a/src/themes/dark-cloud.json b/src/themes/dark-cloud.json
new file mode 100644
index 000000000..84e37ca38
--- /dev/null
+++ b/src/themes/dark-cloud.json
@@ -0,0 +1,203 @@
+{
+    "neutral-0": "rgba(255, 255, 255, 100%)",
+    "neutral-25": "rgba(250, 250, 251, 100%)",
+    "neutral-40": "rgba(244, 244, 247, 100%)",
+    "neutral-50": "rgba(237, 237, 240, 100%)",
+    "neutral-100": "rgba(228, 228, 231, 100%)",
+    "neutral-200": "rgba(216, 216, 219, 100%)",
+    "neutral-250": "rgba(195, 195, 198, 100%)",
+    "neutral-300": "rgba(173, 173, 176, 100%)",
+    "neutral-400": "rgba(151, 151, 155, 100%)",
+    "neutral-500": "rgba(129, 129, 134, 100%)",
+    "neutral-600": "rgba(108, 108, 113, 100%)",
+    "neutral-700": "rgba(86, 86, 92, 100%)",
+    "neutral-750": "rgba(65, 65, 70, 100%)",
+    "neutral-800": "rgba(45, 45, 49, 100%)",
+    "neutral-850": "rgba(29, 29, 33, 100%)",
+    "neutral-900": "rgba(25, 25, 28, 100%)",
+    "neutral-950": "rgba(20, 20, 22, 100%)",
+    "neutral-1000": "rgba(0, 0, 0, 100%)",
+    "brand-pink-200": "rgba(254, 175, 197, 100%)",
+    "brand-purple-200": "rgba(203, 194, 255, 100%)",
+    "brand-purple-500": "rgba(124, 103, 254, 100%)",
+    "brand-purple-700": "rgba(74, 62, 152, 100%)",
+    "brand-mint-200": "rgba(206, 241, 239, 100%)",
+    "brand-mint-500": "rgba(133, 219, 216, 100%)",
+    "brand-mint-600": "rgba(106, 175, 173, 100%)",
+    "brand-mint-700": "rgba(78, 126, 124, 100%)",
+    "brand-mint-900": "rgba(27, 44, 43, 100%)",
+    "brand-orange-200": "rgba(255, 213, 194, 100%)",
+    "brand-orange-500": "rgba(254, 149, 103, 100%)",
+    "brand-orange-700": "rgba(152, 89, 62, 100%)",
+    "brand-yellow-200": "rgba(255, 237, 194, 100%)",
+    "brand-yellow-500": "rgba(254, 211, 103, 100%)",
+    "brand-yellow-700": "rgba(152, 127, 62, 100%)",
+    "brand-blue-200": "rgba(195, 218, 255, 100%)",
+    "brand-blue-500": "rgba(104, 163, 254, 100%)",
+    "brand-blue-600": "rgba(83, 130, 203, 100%)",
+    "web-red-200": "rgba(255, 213, 212, 100%)",
+    "web-red-500": "rgba(255, 69, 58, 100%)",
+    "web-red-700": "rgba(179, 18, 18, 100%)",
+    "brand-blue-700": "rgba(62, 98, 152, 100%)",
+    "brand-pink-500": "rgba(253, 54, 110, 100%)",
+    "brand-pink-600": "rgba(202, 43, 88, 100%)",
+    "brand-pink-700": "rgba(152, 32, 66, 100%)",
+    "web-orange-200": "rgba(255, 213, 194, 100%)",
+    "web-green-100": "rgba(223, 253, 238, 100%)",
+    "web-green-200": "rgba(180, 248, 226, 100%)",
+    "web-green-500": "rgba(16, 185, 129, 100%)",
+    "web-green-700": "rgba(10, 113, 79, 100%)",
+    "web-orange-500": "rgba(254, 124, 67, 100%)",
+    "web-orange-700": "rgba(97, 37, 10, 100%)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-900)",
+    "bgcolor-neutral-primary": "var(--neutral-850)",
+    "bgcolor-neutral-secondary": "var(--neutral-800)",
+    "bgcolor-neutral-tertiary": "var(--neutral-800)",
+    "bgcolor-neutral-invert": "var(--neutral-25)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-300)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-400)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-750)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-50)",
+    "fgcolor-neutral-secondary": "var(--neutral-250)",
+    "fgcolor-neutral-tertiary": "var(--neutral-500)",
+    "fgcolor-neutral-weak": "var(--neutral-600)",
+    "fgcolor-accent": "var(--neutral-0)",
+    "fgcolor-accent-neutral": "var(--neutral-0)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-500)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-200)",
+    "fgcolor-error": "var(--web-red-500)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-200)",
+    "fgcolor-warning": "var(--web-orange-500)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-200)",
+    "fgcolor-on-invert": "var(--neutral-1000)",
+    "border-neutral": "var(--neutral-800)",
+    "border-neutral-strong": "var(--neutral-750)",
+    "border-neutral-stronger": "var(--neutral-600)",
+    "border-neutral-strongest": "var(--neutral-0)",
+    "border-focus": "var(--neutral-600)",
+    "border-accent": "var(--neutral-0)",
+    "border-accent-secondary": "var(--neutral-0)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
+    "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
+    "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
+    "overlay-scrim": "rgba(0, 0, 0, 48%)",
+    "overlay-skeleton": "rgba(255, 255, 255, 8%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral-strong)",
+    "gradient-border-button-secondary-top": "var(--border-neutral)",
+    "font-family-brand": "Aeonik Pro",
+    "font-family-sansserif": "Inter",
+    "font-family-monospace": "Aeonik Fono",
+    "font-family-code": "Fira Code",
+    "font-weight-regular": "Regular",
+    "font-weight-medium": "Medium",
+    "font-weight-semibold": "Semibold",
+    "font-size-xs": "12px",
+    "font-size-s": "14px",
+    "font-size-m": "16px",
+    "font-size-l": "20px",
+    "font-size-xl": "24px",
+    "font-size-xxl": "28px",
+    "font-size-xxxl": "32px",
+    "base-0": "0px",
+    "base-2": "2px",
+    "base-4": "4px",
+    "base-6": "6px",
+    "base-8": "8px",
+    "base-10": "10px",
+    "base-12": "12px",
+    "base-16": "16px",
+    "base-20": "20px",
+    "base-24": "24px",
+    "base-28": "28px",
+    "base-32": "32px",
+    "base-36": "36px",
+    "base-40": "40px",
+    "base-44": "44px",
+    "base-48": "48px",
+    "base-64": "64px",
+    "base-80": "80px",
+    "base-96": "96px",
+    "base-128": "128px",
+    "space-0": "var(--base-0)",
+    "base-160": "160px",
+    "space-1": "var(--base-2)",
+    "space-2": "var(--base-4)",
+    "space-3": "var(--base-6)",
+    "space-4": "var(--base-8)",
+    "space-5": "var(--base-10)",
+    "space-6": "var(--base-12)",
+    "space-7": "var(--base-16)",
+    "space-8": "var(--base-20)",
+    "space-9": "var(--base-24)",
+    "space-10": "var(--base-32)",
+    "space-11": "var(--base-40)",
+    "space-12": "var(--base-48)",
+    "space-13": "var(--base-64)",
+    "icon-size-s": "var(--base-16)",
+    "border-radius-none": "var(--base-0)",
+    "border-radius-xxs": "var(--base-4)",
+    "border-radius-xs": "var(--base-6)",
+    "border-radius-s": "var(--base-8)",
+    "border-radius-m": "var(--base-12)",
+    "border-radius-l": "var(--base-16)",
+    "border-radius-xl": "var(--base-20)",
+    "border-radius-xxl": "var(--base-24)",
+    "border-radius-circle": "99999px",
+    "icon-size-m": "var(--base-20)",
+    "icon-size-l": "var(--base-24)",
+    "border-width-s": "1px",
+    "gap-none": "var(--base-0)",
+    "gap-xxxs": "var(--base-2)",
+    "gap-xxs": "var(--base-4)",
+    "gap-xs": "var(--base-6)",
+    "gap-s": "var(--base-8)",
+    "gap-m": "var(--base-12)",
+    "gap-l": "var(--base-16)",
+    "gap-xl": "var(--base-20)",
+    "gap-xxl": "var(--base-32)",
+    "gap-xxxl": "var(--base-40)",
+    "border-width-m": "1.2000000476837158px",
+    "border-width-l": "2px",
+    "border-width-xl": "3px",
+    "shadow-offsetx-0": "var(--base-0)",
+    "shadow-offsety-0": "var(--base-0)",
+    "shadow-offsety-1": "1px",
+    "shadow-offsety-4": "var(--base-4)",
+    "shadow-offsety-6": "var(--base-6)",
+    "shadow-offsety-8": "var(--base-8)",
+    "shadow-offsety-20": "var(--base-20)"
+}
diff --git a/src/themes/dark.json b/src/themes/dark.json
new file mode 100644
index 000000000..26acb26e1
--- /dev/null
+++ b/src/themes/dark.json
@@ -0,0 +1,203 @@
+{
+    "neutral-0": "rgba(255, 255, 255, 100%)",
+    "neutral-25": "rgba(250, 250, 251, 100%)",
+    "neutral-40": "rgba(244, 244, 247, 100%)",
+    "neutral-50": "rgba(237, 237, 240, 100%)",
+    "neutral-100": "rgba(228, 228, 231, 100%)",
+    "neutral-200": "rgba(216, 216, 219, 100%)",
+    "neutral-250": "rgba(195, 195, 198, 100%)",
+    "neutral-300": "rgba(173, 173, 176, 100%)",
+    "neutral-400": "rgba(151, 151, 155, 100%)",
+    "neutral-500": "rgba(129, 129, 134, 100%)",
+    "neutral-600": "rgba(108, 108, 113, 100%)",
+    "neutral-700": "rgba(86, 86, 92, 100%)",
+    "neutral-750": "rgba(65, 65, 70, 100%)",
+    "neutral-800": "rgba(45, 45, 49, 100%)",
+    "neutral-850": "rgba(29, 29, 33, 100%)",
+    "neutral-900": "rgba(25, 25, 28, 100%)",
+    "neutral-950": "rgba(20, 20, 22, 100%)",
+    "neutral-1000": "rgba(0, 0, 0, 100%)",
+    "brand-pink-200": "rgba(254, 175, 197, 100%)",
+    "brand-purple-200": "rgba(203, 194, 255, 100%)",
+    "brand-purple-500": "rgba(124, 103, 254, 100%)",
+    "brand-purple-700": "rgba(74, 62, 152, 100%)",
+    "brand-mint-200": "rgba(206, 241, 239, 100%)",
+    "brand-mint-500": "rgba(133, 219, 216, 100%)",
+    "brand-mint-600": "rgba(106, 175, 173, 100%)",
+    "brand-mint-700": "rgba(78, 126, 124, 100%)",
+    "brand-mint-900": "rgba(27, 44, 43, 100%)",
+    "brand-orange-200": "rgba(255, 213, 194, 100%)",
+    "brand-orange-500": "rgba(254, 149, 103, 100%)",
+    "brand-orange-700": "rgba(152, 89, 62, 100%)",
+    "brand-yellow-200": "rgba(255, 237, 194, 100%)",
+    "brand-yellow-500": "rgba(254, 211, 103, 100%)",
+    "brand-yellow-700": "rgba(152, 127, 62, 100%)",
+    "brand-blue-200": "rgba(195, 218, 255, 100%)",
+    "brand-blue-500": "rgba(104, 163, 254, 100%)",
+    "brand-blue-600": "rgba(83, 130, 203, 100%)",
+    "web-red-200": "rgba(255, 213, 212, 100%)",
+    "web-red-500": "rgba(255, 69, 58, 100%)",
+    "web-red-700": "rgba(179, 18, 18, 100%)",
+    "brand-blue-700": "rgba(62, 98, 152, 100%)",
+    "brand-pink-500": "rgba(253, 54, 110, 100%)",
+    "brand-pink-600": "rgba(202, 43, 88, 100%)",
+    "brand-pink-700": "rgba(152, 32, 66, 100%)",
+    "web-orange-200": "rgba(255, 213, 194, 100%)",
+    "web-green-100": "rgba(223, 253, 238, 100%)",
+    "web-green-200": "rgba(180, 248, 226, 100%)",
+    "web-green-500": "rgba(16, 185, 129, 100%)",
+    "web-green-700": "rgba(10, 113, 79, 100%)",
+    "web-orange-500": "rgba(254, 124, 67, 100%)",
+    "web-orange-700": "rgba(97, 37, 10, 100%)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-900)",
+    "bgcolor-neutral-primary": "var(--neutral-850)",
+    "bgcolor-neutral-secondary": "var(--neutral-800)",
+    "bgcolor-neutral-tertiary": "var(--neutral-800)",
+    "bgcolor-neutral-invert": "var(--neutral-25)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-300)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-400)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-750)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-50)",
+    "fgcolor-neutral-secondary": "var(--neutral-250)",
+    "fgcolor-neutral-tertiary": "var(--neutral-500)",
+    "fgcolor-neutral-weak": "var(--neutral-600)",
+    "fgcolor-accent": "var(--neutral-0)",
+    "fgcolor-accent-neutral": "var(--neutral-0)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-500)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-200)",
+    "fgcolor-error": "var(--web-red-500)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-200)",
+    "fgcolor-warning": "var(--web-orange-500)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-200)",
+    "fgcolor-on-invert": "var(--neutral-1000)",
+    "border-neutral": "var(--neutral-800)",
+    "border-neutral-strong": "var(--neutral-750)",
+    "border-neutral-stronger": "var(--neutral-600)",
+    "border-neutral-strongest": "var(--neutral-0)",
+    "border-focus": "var(--neutral-600)",
+    "border-accent": "var(--neutral-0)",
+    "border-accent-secondary": "var(--neutral-0)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
+    "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
+    "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
+    "overlay-scrim": "rgba(0, 0, 0, 48%)",
+    "overlay-skeleton": "rgba(255, 255, 255, 8%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral-strong)",
+    "gradient-border-button-secondary-top": "var(--border-neutral)",
+    "font-family-brand": "Inter",
+    "font-family-sansserif": "Inter",
+    "font-family-monospace": "Fira Code",
+    "font-family-code": "Fira Code",
+    "font-weight-regular": "Regular",
+    "font-weight-medium": "Medium",
+    "font-weight-semibold": "Semibold",
+    "font-size-xs": "12px",
+    "font-size-s": "14px",
+    "font-size-m": "16px",
+    "font-size-l": "20px",
+    "font-size-xl": "24px",
+    "font-size-xxl": "28px",
+    "font-size-xxxl": "32px",
+    "base-0": "0px",
+    "base-2": "2px",
+    "base-4": "4px",
+    "base-6": "6px",
+    "base-8": "8px",
+    "base-10": "10px",
+    "base-12": "12px",
+    "base-16": "16px",
+    "base-20": "20px",
+    "base-24": "24px",
+    "base-28": "28px",
+    "base-32": "32px",
+    "base-36": "36px",
+    "base-40": "40px",
+    "base-44": "44px",
+    "base-48": "48px",
+    "base-64": "64px",
+    "base-80": "80px",
+    "base-96": "96px",
+    "base-128": "128px",
+    "space-0": "var(--base-0)",
+    "base-160": "160px",
+    "space-1": "var(--base-2)",
+    "space-2": "var(--base-4)",
+    "space-3": "var(--base-6)",
+    "space-4": "var(--base-8)",
+    "space-5": "var(--base-10)",
+    "space-6": "var(--base-12)",
+    "space-7": "var(--base-16)",
+    "space-8": "var(--base-20)",
+    "space-9": "var(--base-24)",
+    "space-10": "var(--base-32)",
+    "space-11": "var(--base-40)",
+    "space-12": "var(--base-48)",
+    "space-13": "var(--base-64)",
+    "icon-size-s": "var(--base-16)",
+    "border-radius-none": "var(--base-0)",
+    "border-radius-xxs": "var(--base-4)",
+    "border-radius-xs": "var(--base-6)",
+    "border-radius-s": "var(--base-8)",
+    "border-radius-m": "var(--base-12)",
+    "border-radius-l": "var(--base-16)",
+    "border-radius-xl": "var(--base-20)",
+    "border-radius-xxl": "var(--base-24)",
+    "border-radius-circle": "99999px",
+    "icon-size-m": "var(--base-20)",
+    "icon-size-l": "var(--base-24)",
+    "border-width-s": "1px",
+    "gap-none": "var(--base-0)",
+    "gap-xxxs": "var(--base-2)",
+    "gap-xxs": "var(--base-4)",
+    "gap-xs": "var(--base-6)",
+    "gap-s": "var(--base-8)",
+    "gap-m": "var(--base-12)",
+    "gap-l": "var(--base-16)",
+    "gap-xl": "var(--base-20)",
+    "gap-xxl": "var(--base-32)",
+    "gap-xxxl": "var(--base-40)",
+    "border-width-m": "1.2000000476837158px",
+    "border-width-l": "2px",
+    "border-width-xl": "3px",
+    "shadow-offsetx-0": "var(--base-0)",
+    "shadow-offsety-0": "var(--base-0)",
+    "shadow-offsety-1": "1px",
+    "shadow-offsety-4": "var(--base-4)",
+    "shadow-offsety-6": "var(--base-6)",
+    "shadow-offsety-8": "var(--base-8)",
+    "shadow-offsety-20": "var(--base-20)"
+}
diff --git a/src/themes/index.ts b/src/themes/index.ts
new file mode 100644
index 000000000..2b2344244
--- /dev/null
+++ b/src/themes/index.ts
@@ -0,0 +1,5 @@
+export { default as ThemeDark } from './dark.json';
+export { default as ThemeLight } from './light.json';
+
+export { default as ThemeDarkCloud } from './dark-cloud.json';
+export { default as ThemeLightCloud } from './light-cloud.json';
diff --git a/src/themes/light-cloud.json b/src/themes/light-cloud.json
new file mode 100644
index 000000000..a2ab55069
--- /dev/null
+++ b/src/themes/light-cloud.json
@@ -0,0 +1,203 @@
+{
+    "neutral-0": "rgba(255, 255, 255, 100%)",
+    "neutral-25": "rgba(250, 250, 251, 100%)",
+    "neutral-40": "rgba(244, 244, 247, 100%)",
+    "neutral-50": "rgba(237, 237, 240, 100%)",
+    "neutral-100": "rgba(228, 228, 231, 100%)",
+    "neutral-200": "rgba(216, 216, 219, 100%)",
+    "neutral-250": "rgba(195, 195, 198, 100%)",
+    "neutral-300": "rgba(173, 173, 176, 100%)",
+    "neutral-400": "rgba(151, 151, 155, 100%)",
+    "neutral-500": "rgba(129, 129, 134, 100%)",
+    "neutral-600": "rgba(108, 108, 113, 100%)",
+    "neutral-700": "rgba(86, 86, 92, 100%)",
+    "neutral-750": "rgba(65, 65, 70, 100%)",
+    "neutral-800": "rgba(45, 45, 49, 100%)",
+    "neutral-850": "rgba(29, 29, 33, 100%)",
+    "neutral-900": "rgba(25, 25, 28, 100%)",
+    "neutral-950": "rgba(20, 20, 22, 100%)",
+    "neutral-1000": "rgba(0, 0, 0, 100%)",
+    "brand-pink-200": "rgba(254, 175, 197, 100%)",
+    "brand-purple-200": "rgba(203, 194, 255, 100%)",
+    "brand-purple-500": "rgba(124, 103, 254, 100%)",
+    "brand-purple-700": "rgba(74, 62, 152, 100%)",
+    "brand-mint-200": "rgba(206, 241, 239, 100%)",
+    "brand-mint-500": "rgba(133, 219, 216, 100%)",
+    "brand-mint-600": "rgba(106, 175, 173, 100%)",
+    "brand-mint-700": "rgba(78, 126, 124, 100%)",
+    "brand-mint-900": "rgba(27, 44, 43, 100%)",
+    "brand-orange-200": "rgba(255, 213, 194, 100%)",
+    "brand-orange-500": "rgba(254, 149, 103, 100%)",
+    "brand-orange-700": "rgba(152, 89, 62, 100%)",
+    "brand-yellow-200": "rgba(255, 237, 194, 100%)",
+    "brand-yellow-500": "rgba(254, 211, 103, 100%)",
+    "brand-yellow-700": "rgba(152, 127, 62, 100%)",
+    "brand-blue-200": "rgba(195, 218, 255, 100%)",
+    "brand-blue-500": "rgba(104, 163, 254, 100%)",
+    "brand-blue-600": "rgba(83, 130, 203, 100%)",
+    "web-red-200": "rgba(255, 213, 212, 100%)",
+    "web-red-500": "rgba(255, 69, 58, 100%)",
+    "web-red-700": "rgba(179, 18, 18, 100%)",
+    "brand-blue-700": "rgba(62, 98, 152, 100%)",
+    "brand-pink-500": "rgba(253, 54, 110, 100%)",
+    "brand-pink-600": "rgba(202, 43, 88, 100%)",
+    "brand-pink-700": "rgba(152, 32, 66, 100%)",
+    "web-orange-200": "rgba(255, 213, 194, 100%)",
+    "web-green-100": "rgba(223, 253, 238, 100%)",
+    "web-green-200": "rgba(180, 248, 226, 100%)",
+    "web-green-500": "rgba(16, 185, 129, 100%)",
+    "web-green-700": "rgba(10, 113, 79, 100%)",
+    "web-orange-500": "rgba(254, 124, 67, 100%)",
+    "web-orange-700": "rgba(97, 37, 10, 100%)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-25)",
+    "bgcolor-neutral-primary": "var(--neutral-0)",
+    "bgcolor-neutral-secondary": "var(--neutral-40)",
+    "bgcolor-neutral-tertiary": "var(--neutral-50)",
+    "bgcolor-neutral-invert": "var(--neutral-900)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-700)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-500)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-100)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-800)",
+    "fgcolor-neutral-secondary": "var(--neutral-700)",
+    "fgcolor-neutral-tertiary": "var(--neutral-400)",
+    "fgcolor-neutral-weak": "var(--neutral-200)",
+    "fgcolor-accent": "var(--brand-pink-500)",
+    "fgcolor-accent-neutral": "var(--neutral-900)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-700)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-700)",
+    "fgcolor-error": "var(--web-red-700)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-700)",
+    "fgcolor-warning": "var(--web-orange-700)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-700)",
+    "fgcolor-on-invert": "var(--neutral-25)",
+    "border-neutral": "var(--neutral-50)",
+    "border-neutral-strong": "var(--neutral-200)",
+    "border-neutral-stronger": "var(--neutral-500)",
+    "border-neutral-strongest": "var(--neutral-900)",
+    "border-focus": "var(--neutral-300)",
+    "border-accent": "var(--brand-pink-500)",
+    "border-accent-secondary": "var(--brand-pink-600)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
+    "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
+    "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
+    "overlay-scrim": "rgba(25, 25, 28, 80%)",
+    "overlay-skeleton": "rgba(25, 25, 28, 4%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral)",
+    "gradient-border-button-secondary-top": "var(--border-neutral-strong)",
+    "font-family-brand": "Aeonik Pro",
+    "font-family-sansserif": "Inter",
+    "font-family-monospace": "Aeonik Fono",
+    "font-family-code": "Fira Code",
+    "font-weight-regular": "Regular",
+    "font-weight-medium": "Medium",
+    "font-weight-semibold": "Semibold",
+    "font-size-xs": "12px",
+    "font-size-s": "14px",
+    "font-size-m": "16px",
+    "font-size-l": "20px",
+    "font-size-xl": "24px",
+    "font-size-xxl": "28px",
+    "font-size-xxxl": "32px",
+    "base-0": "0px",
+    "base-2": "2px",
+    "base-4": "4px",
+    "base-6": "6px",
+    "base-8": "8px",
+    "base-10": "10px",
+    "base-12": "12px",
+    "base-16": "16px",
+    "base-20": "20px",
+    "base-24": "24px",
+    "base-28": "28px",
+    "base-32": "32px",
+    "base-36": "36px",
+    "base-40": "40px",
+    "base-44": "44px",
+    "base-48": "48px",
+    "base-64": "64px",
+    "base-80": "80px",
+    "base-96": "96px",
+    "base-128": "128px",
+    "space-0": "var(--base-0)",
+    "base-160": "160px",
+    "space-1": "var(--base-2)",
+    "space-2": "var(--base-4)",
+    "space-3": "var(--base-6)",
+    "space-4": "var(--base-8)",
+    "space-5": "var(--base-10)",
+    "space-6": "var(--base-12)",
+    "space-7": "var(--base-16)",
+    "space-8": "var(--base-20)",
+    "space-9": "var(--base-24)",
+    "space-10": "var(--base-32)",
+    "space-11": "var(--base-40)",
+    "space-12": "var(--base-48)",
+    "space-13": "var(--base-64)",
+    "icon-size-s": "var(--base-16)",
+    "border-radius-none": "var(--base-0)",
+    "border-radius-xxs": "var(--base-4)",
+    "border-radius-xs": "var(--base-6)",
+    "border-radius-s": "var(--base-8)",
+    "border-radius-m": "var(--base-12)",
+    "border-radius-l": "var(--base-16)",
+    "border-radius-xl": "var(--base-20)",
+    "border-radius-xxl": "var(--base-24)",
+    "border-radius-circle": "99999px",
+    "icon-size-m": "var(--base-20)",
+    "icon-size-l": "var(--base-24)",
+    "border-width-s": "1px",
+    "gap-none": "var(--base-0)",
+    "gap-xxxs": "var(--base-2)",
+    "gap-xxs": "var(--base-4)",
+    "gap-xs": "var(--base-6)",
+    "gap-s": "var(--base-8)",
+    "gap-m": "var(--base-12)",
+    "gap-l": "var(--base-16)",
+    "gap-xl": "var(--base-20)",
+    "gap-xxl": "var(--base-32)",
+    "gap-xxxl": "var(--base-40)",
+    "border-width-m": "1.2000000476837158px",
+    "border-width-l": "2px",
+    "border-width-xl": "3px",
+    "shadow-offsetx-0": "var(--base-0)",
+    "shadow-offsety-0": "var(--base-0)",
+    "shadow-offsety-1": "1px",
+    "shadow-offsety-4": "var(--base-4)",
+    "shadow-offsety-6": "var(--base-6)",
+    "shadow-offsety-8": "var(--base-8)",
+    "shadow-offsety-20": "var(--base-20)"
+}
diff --git a/src/themes/light.json b/src/themes/light.json
new file mode 100644
index 000000000..2b3bd76ae
--- /dev/null
+++ b/src/themes/light.json
@@ -0,0 +1,203 @@
+{
+    "neutral-0": "rgba(255, 255, 255, 100%)",
+    "neutral-25": "rgba(250, 250, 251, 100%)",
+    "neutral-40": "rgba(244, 244, 247, 100%)",
+    "neutral-50": "rgba(237, 237, 240, 100%)",
+    "neutral-100": "rgba(228, 228, 231, 100%)",
+    "neutral-200": "rgba(216, 216, 219, 100%)",
+    "neutral-250": "rgba(195, 195, 198, 100%)",
+    "neutral-300": "rgba(173, 173, 176, 100%)",
+    "neutral-400": "rgba(151, 151, 155, 100%)",
+    "neutral-500": "rgba(129, 129, 134, 100%)",
+    "neutral-600": "rgba(108, 108, 113, 100%)",
+    "neutral-700": "rgba(86, 86, 92, 100%)",
+    "neutral-750": "rgba(65, 65, 70, 100%)",
+    "neutral-800": "rgba(45, 45, 49, 100%)",
+    "neutral-850": "rgba(29, 29, 33, 100%)",
+    "neutral-900": "rgba(25, 25, 28, 100%)",
+    "neutral-950": "rgba(20, 20, 22, 100%)",
+    "neutral-1000": "rgba(0, 0, 0, 100%)",
+    "brand-pink-200": "rgba(254, 175, 197, 100%)",
+    "brand-purple-200": "rgba(203, 194, 255, 100%)",
+    "brand-purple-500": "rgba(124, 103, 254, 100%)",
+    "brand-purple-700": "rgba(74, 62, 152, 100%)",
+    "brand-mint-200": "rgba(206, 241, 239, 100%)",
+    "brand-mint-500": "rgba(133, 219, 216, 100%)",
+    "brand-mint-600": "rgba(106, 175, 173, 100%)",
+    "brand-mint-700": "rgba(78, 126, 124, 100%)",
+    "brand-mint-900": "rgba(27, 44, 43, 100%)",
+    "brand-orange-200": "rgba(255, 213, 194, 100%)",
+    "brand-orange-500": "rgba(254, 149, 103, 100%)",
+    "brand-orange-700": "rgba(152, 89, 62, 100%)",
+    "brand-yellow-200": "rgba(255, 237, 194, 100%)",
+    "brand-yellow-500": "rgba(254, 211, 103, 100%)",
+    "brand-yellow-700": "rgba(152, 127, 62, 100%)",
+    "brand-blue-200": "rgba(195, 218, 255, 100%)",
+    "brand-blue-500": "rgba(104, 163, 254, 100%)",
+    "brand-blue-600": "rgba(83, 130, 203, 100%)",
+    "web-red-200": "rgba(255, 213, 212, 100%)",
+    "web-red-500": "rgba(255, 69, 58, 100%)",
+    "web-red-700": "rgba(179, 18, 18, 100%)",
+    "brand-blue-700": "rgba(62, 98, 152, 100%)",
+    "brand-pink-500": "rgba(253, 54, 110, 100%)",
+    "brand-pink-600": "rgba(202, 43, 88, 100%)",
+    "brand-pink-700": "rgba(152, 32, 66, 100%)",
+    "web-orange-200": "rgba(255, 213, 194, 100%)",
+    "web-green-100": "rgba(223, 253, 238, 100%)",
+    "web-green-200": "rgba(180, 248, 226, 100%)",
+    "web-green-500": "rgba(16, 185, 129, 100%)",
+    "web-green-700": "rgba(10, 113, 79, 100%)",
+    "web-orange-500": "rgba(254, 124, 67, 100%)",
+    "web-orange-700": "rgba(97, 37, 10, 100%)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-25)",
+    "bgcolor-neutral-primary": "var(--neutral-0)",
+    "bgcolor-neutral-secondary": "var(--neutral-40)",
+    "bgcolor-neutral-tertiary": "var(--neutral-50)",
+    "bgcolor-neutral-invert": "var(--neutral-900)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-700)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-500)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-100)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-800)",
+    "fgcolor-neutral-secondary": "var(--neutral-700)",
+    "fgcolor-neutral-tertiary": "var(--neutral-400)",
+    "fgcolor-neutral-weak": "var(--neutral-200)",
+    "fgcolor-accent": "var(--brand-pink-500)",
+    "fgcolor-accent-neutral": "var(--neutral-900)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-700)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-700)",
+    "fgcolor-error": "var(--web-red-700)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-700)",
+    "fgcolor-warning": "var(--web-orange-700)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-700)",
+    "fgcolor-on-invert": "var(--neutral-25)",
+    "border-neutral": "var(--neutral-50)",
+    "border-neutral-strong": "var(--neutral-200)",
+    "border-neutral-stronger": "var(--neutral-500)",
+    "border-neutral-strongest": "var(--neutral-900)",
+    "border-focus": "var(--neutral-300)",
+    "border-accent": "var(--brand-pink-500)",
+    "border-accent-secondary": "var(--brand-pink-600)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
+    "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
+    "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
+    "overlay-scrim": "rgba(25, 25, 28, 80%)",
+    "overlay-skeleton": "rgba(25, 25, 28, 4%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral)",
+    "gradient-border-button-secondary-top": "var(--border-neutral-strong)",
+    "font-family-brand": "Inter",
+    "font-family-sansserif": "Inter",
+    "font-family-monospace": "Fira Code",
+    "font-family-code": "Fira Code",
+    "font-weight-regular": "Regular",
+    "font-weight-medium": "Medium",
+    "font-weight-semibold": "Semibold",
+    "font-size-xs": "12px",
+    "font-size-s": "14px",
+    "font-size-m": "16px",
+    "font-size-l": "20px",
+    "font-size-xl": "24px",
+    "font-size-xxl": "28px",
+    "font-size-xxxl": "32px",
+    "base-0": "0px",
+    "base-2": "2px",
+    "base-4": "4px",
+    "base-6": "6px",
+    "base-8": "8px",
+    "base-10": "10px",
+    "base-12": "12px",
+    "base-16": "16px",
+    "base-20": "20px",
+    "base-24": "24px",
+    "base-28": "28px",
+    "base-32": "32px",
+    "base-36": "36px",
+    "base-40": "40px",
+    "base-44": "44px",
+    "base-48": "48px",
+    "base-64": "64px",
+    "base-80": "80px",
+    "base-96": "96px",
+    "base-128": "128px",
+    "space-0": "var(--base-0)",
+    "base-160": "160px",
+    "space-1": "var(--base-2)",
+    "space-2": "var(--base-4)",
+    "space-3": "var(--base-6)",
+    "space-4": "var(--base-8)",
+    "space-5": "var(--base-10)",
+    "space-6": "var(--base-12)",
+    "space-7": "var(--base-16)",
+    "space-8": "var(--base-20)",
+    "space-9": "var(--base-24)",
+    "space-10": "var(--base-32)",
+    "space-11": "var(--base-40)",
+    "space-12": "var(--base-48)",
+    "space-13": "var(--base-64)",
+    "icon-size-s": "var(--base-16)",
+    "border-radius-none": "var(--base-0)",
+    "border-radius-xxs": "var(--base-4)",
+    "border-radius-xs": "var(--base-6)",
+    "border-radius-s": "var(--base-8)",
+    "border-radius-m": "var(--base-12)",
+    "border-radius-l": "var(--base-16)",
+    "border-radius-xl": "var(--base-20)",
+    "border-radius-xxl": "var(--base-24)",
+    "border-radius-circle": "99999px",
+    "icon-size-m": "var(--base-20)",
+    "icon-size-l": "var(--base-24)",
+    "border-width-s": "1px",
+    "gap-none": "var(--base-0)",
+    "gap-xxxs": "var(--base-2)",
+    "gap-xxs": "var(--base-4)",
+    "gap-xs": "var(--base-6)",
+    "gap-s": "var(--base-8)",
+    "gap-m": "var(--base-12)",
+    "gap-l": "var(--base-16)",
+    "gap-xl": "var(--base-20)",
+    "gap-xxl": "var(--base-32)",
+    "gap-xxxl": "var(--base-40)",
+    "border-width-m": "1.2000000476837158px",
+    "border-width-l": "2px",
+    "border-width-xl": "3px",
+    "shadow-offsetx-0": "var(--base-0)",
+    "shadow-offsety-0": "var(--base-0)",
+    "shadow-offsety-1": "1px",
+    "shadow-offsety-4": "var(--base-4)",
+    "shadow-offsety-6": "var(--base-6)",
+    "shadow-offsety-8": "var(--base-8)",
+    "shadow-offsety-20": "var(--base-20)"
+}
diff --git a/static/css/loading.css b/static/css/loading.css
index 38f0dd187..aa2b8324a 100644
--- a/static/css/loading.css
+++ b/static/css/loading.css
@@ -1,8 +1,11 @@
 body {
     margin: 0;
+    font-size: 100%;
+    width: 100%;
 }
 
 [data-loading='true'] .page-loader {
+    pointer-events: initial;
     visibility: visible;
     opacity: 1;
 }
@@ -19,6 +22,7 @@ body {
 }
 
 .page-loader {
+    pointer-events: none;
     visibility: hidden;
     opacity: 0;
     z-index: 100000;
diff --git a/static/fonts/cloud.css b/static/fonts/cloud.css
new file mode 100644
index 000000000..26277ee0e
--- /dev/null
+++ b/static/fonts/cloud.css
@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aenoik Fono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://fonts.appwrite.io/aeonik-fono/AeonikFono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aenoik Fono';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://fonts.appwrite.io/aeonik-fono/AeonikFono-Medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aenoik Fono';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://fonts.appwrite.io/aeonik-fono/AeonikFono-Bold.woff2') format('woff2');
+}
diff --git a/static/fonts/main.css b/static/fonts/main.css
index e81677be5..af99c1f9d 100644
--- a/static/fonts/main.css
+++ b/static/fonts/main.css
@@ -45,115 +45,3 @@
     font-display: swap;
     src: url('poppins/poppins-v19-latin-700.woff2') format('woff2');
 }
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Air.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-AirItalic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 200;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Thin.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 200;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-ThinItalic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Light.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-LightItalic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-RegularItalic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-MediumItalic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-BoldItalic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-Black.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Aeonik Pro';
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://fonts.appwrite.io/aeonik-pro/AeonikPro-BlackItalic.woff2') format('woff2');
-}
diff --git a/static/icons/dark/color/analog.svg b/static/icons/dark/color/analog.svg
new file mode 100644
index 000000000..274a0e312
--- /dev/null
+++ b/static/icons/dark/color/analog.svg
@@ -0,0 +1,21 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_8345_913" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="3" width="15" height="14">
+<path d="M4.40698 3.5H19V16.466H4.40698V3.5Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_8345_913)">
+<path d="M11.7035 3.50035L19 16.4661H4.40698L11.7035 3.50035Z" fill="#C30F2E"/>
+</g>
+<mask id="mask1_8345_913" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="5" width="13" height="12">
+<path d="M1 5.43155H13.4195V16.5H1V5.43155Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_8345_913)">
+<path d="M7.20962 5.43155L13.4192 16.5H1L7.20962 5.43155Z" fill="#DD0330"/>
+</g>
+<path d="M17.8414 13.1984H2.32849V12.9626H17.8414V13.1984Z" fill="white"/>
+<mask id="mask2_8345_913" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="9" width="15" height="7">
+<path d="M2.92981 9.81918H16.8423V15.7488H2.92981V9.81918Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_8345_913)">
+<path d="M15.3707 15.7225C15.3101 15.7225 15.2532 15.6969 15.2056 15.6484C14.9212 15.3575 14.9088 14.1742 14.9225 12.4021C14.9302 11.4337 14.9406 10.1074 14.7889 10.0027C14.6409 10.0652 14.6262 11.1609 14.6166 11.8863C14.6052 12.7303 14.5936 13.6036 14.459 14.0482C14.4189 14.18 14.3671 14.3007 14.2631 14.291C14.1164 14.2778 14.069 14.0419 13.9595 13.1109C13.914 12.7242 13.8669 12.3246 13.8118 12.1699C13.8045 12.1504 13.7983 12.1349 13.7929 12.1227C13.7341 12.258 13.6663 12.6296 13.6192 12.8877C13.554 13.244 13.4924 13.5806 13.4153 13.7274C13.3558 13.8403 13.2613 13.9873 13.1293 13.9589C12.9495 13.9204 12.8957 13.5511 12.8796 13.3344C12.8796 11.5115 12.6454 11.2993 12.5986 11.2753L12.5911 11.2811L12.5797 11.2785C12.4125 11.3528 12.4034 11.944 12.3949 12.5157C12.3882 12.9351 12.3809 13.4103 12.3209 13.855C12.243 14.4315 12.1488 14.5427 12.0316 14.5359C11.7616 14.5171 11.7539 13.5703 11.7539 13.4625C11.7539 13.4288 11.7547 13.389 11.7557 13.345C11.7609 13.1246 11.7702 12.7147 11.6372 12.5856C11.6196 12.5685 11.5947 12.5487 11.5753 12.5542C11.4806 12.5785 11.3823 12.8919 11.3496 12.9949C11.3393 13.0276 11.331 13.0545 11.324 13.073C11.3186 13.0882 11.3116 13.1099 11.3033 13.136C11.2316 13.3576 11.1501 13.5788 11.0109 13.6333C10.9594 13.6536 10.9056 13.6492 10.8551 13.6202C10.7881 13.5814 10.7335 13.5023 10.6825 13.3708C10.6545 13.2981 10.6307 13.2243 10.6064 13.1502C10.5769 13.0598 10.5466 12.9662 10.5091 12.8774C10.4796 12.8083 10.4061 12.7772 10.3124 12.7941C10.1178 12.8294 10.0852 13.0297 10.0578 13.3313C10.0529 13.3837 10.0482 13.4351 10.0417 13.4836C10.041 13.4979 10.0065 13.9404 9.98454 14.0812C9.92373 14.4671 9.84376 14.6191 9.711 14.6081C9.38338 14.5796 9.23302 13.1159 9.24105 12.4976C9.24725 12.0255 9.16341 11.8531 9.1132 11.8257C9.10803 11.8233 9.10001 11.8188 9.08086 11.8325C9.02159 11.8734 8.9688 12.0007 8.98511 12.1343C9.16548 13.5896 9.03246 15.2562 8.70665 15.6316C8.60391 15.7497 8.46417 15.7481 8.36686 15.6484C8.08219 15.3574 8.07029 14.1742 8.08375 12.4021C8.09151 11.4337 8.1016 10.1074 7.95021 10.0027C7.80218 10.0652 7.78769 11.1609 7.77786 11.8863C7.76647 12.7303 7.75483 13.6036 7.62 14.0482C7.57989 14.18 7.52813 14.3007 7.42435 14.291C7.27736 14.2778 7.23026 14.0419 7.12054 13.1109C7.07499 12.7242 7.02789 12.3246 6.97277 12.1699C6.96578 12.1504 6.95957 12.1349 6.95388 12.1227C6.89539 12.258 6.82759 12.6296 6.78049 12.8877C6.71528 13.244 6.65368 13.5806 6.57631 13.7274C6.51678 13.8403 6.42233 13.9873 6.2906 13.9589C6.11075 13.9204 6.05692 13.5511 6.04087 13.3344C6.04061 11.5115 5.80667 11.2993 5.75983 11.2753L5.75232 11.2811L5.74068 11.2785C5.57376 11.3528 5.5647 11.944 5.5559 12.5157C5.54943 12.9351 5.54219 13.4103 5.48215 13.855C5.40426 14.4315 5.31083 14.5438 5.19308 14.5358C4.92265 14.5171 4.91489 13.5703 4.91489 13.4625C4.91489 13.4288 4.91592 13.389 4.91695 13.345C4.92213 13.1246 4.93145 12.7147 4.79843 12.5856C4.78083 12.5685 4.75599 12.5487 4.73658 12.5542C4.64186 12.5785 4.54326 12.8919 4.51117 12.9949C4.50082 13.0274 4.49202 13.0545 4.48555 13.073C4.47986 13.088 4.47287 13.1096 4.46459 13.1357C4.39291 13.3574 4.31139 13.5788 4.17242 13.6333C4.12066 13.6536 4.06658 13.6491 4.01637 13.6202C3.94935 13.5814 3.89448 13.5023 3.84376 13.3708C3.81581 13.2981 3.79174 13.2242 3.76768 13.1502C3.73818 13.0598 3.70764 12.9662 3.67011 12.8774C3.64087 12.8083 3.56712 12.7772 3.47344 12.7941C3.24932 12.8347 3.19627 13.1178 3.15357 13.4557L3.14607 13.5158L2.97656 13.4928L2.98458 13.4338C3.02159 13.1375 3.07801 12.6897 3.44367 12.6238C3.61577 12.5927 3.76612 12.6655 3.82668 12.8088C3.86731 12.9048 3.89914 13.0018 3.92968 13.0959C3.95245 13.1668 3.97574 13.2377 4.00266 13.3078C4.05001 13.4301 4.08676 13.4617 4.10048 13.4694C4.18614 13.4422 4.27361 13.171 4.30259 13.0817C4.31165 13.0529 4.31941 13.0292 4.32562 13.0123C4.33157 12.9957 4.33934 12.9715 4.34866 12.9422C4.42578 12.6966 4.52256 12.4306 4.6944 12.3863C4.74693 12.3726 4.82819 12.3745 4.91644 12.4604C5.1038 12.6425 5.09396 13.0677 5.0875 13.3492C5.08646 13.3914 5.08543 13.4298 5.08543 13.4625C5.08543 13.9117 5.1509 14.2256 5.20085 14.3334C5.22673 14.2783 5.27098 14.145 5.31316 13.8315C5.37165 13.3972 5.37915 12.9275 5.38536 12.5131C5.39675 11.7798 5.40477 11.2482 5.66537 11.1232C5.70419 11.099 5.76863 11.0858 5.83669 11.1208C6.08875 11.25 6.21116 11.972 6.21116 13.3278C6.22694 13.5374 6.28232 13.758 6.32787 13.7896C6.32813 13.7849 6.36513 13.7617 6.42595 13.6457C6.49091 13.5226 6.5556 13.1684 6.61254 12.856C6.73857 12.1675 6.79576 11.9258 6.94482 11.9132C7.05843 11.9018 7.11096 12.0489 7.13296 12.1109C7.19507 12.2843 7.24113 12.6757 7.28978 13.0903C7.32783 13.4119 7.38191 13.8711 7.43703 14.0569C7.44298 14.0406 7.44972 14.0211 7.45696 13.9971C7.58454 13.5761 7.59619 12.7161 7.60732 11.8839C7.62284 10.7281 7.64277 10.0119 7.8498 9.86249C7.89587 9.82928 7.95202 9.82111 8.00689 9.83982C8.24937 9.92179 8.268 10.6459 8.25429 12.4037C8.24445 13.6784 8.23229 15.2649 8.48797 15.5264C8.51023 15.5493 8.52602 15.5493 8.53171 15.5493C8.54361 15.5493 8.56069 15.5377 8.57881 15.5169C8.83759 15.2188 9.00141 13.6534 8.81586 12.1562C8.79282 11.9698 8.86347 11.774 8.98407 11.6897C9.05058 11.643 9.12718 11.6369 9.19343 11.6731C9.3443 11.7548 9.41754 12.0328 9.41159 12.4999C9.40098 13.3154 9.59326 14.2699 9.71877 14.4222C9.7387 14.3885 9.77803 14.296 9.81581 14.0537C9.83703 13.9198 9.87197 13.4699 9.87249 13.4654C9.8787 13.4146 9.88336 13.3653 9.88776 13.3152C9.91364 13.0342 9.94547 12.6847 10.2824 12.6238C10.4542 12.5927 10.6046 12.6652 10.6654 12.8088C10.706 12.9048 10.7376 13.0018 10.7682 13.0959C10.7914 13.1668 10.8147 13.2377 10.8416 13.3078C10.8887 13.4301 10.9258 13.4617 10.9392 13.4694C11.0249 13.4422 11.1126 13.171 11.1413 13.0819C11.1506 13.0532 11.1584 13.0292 11.1644 13.0123C11.1706 12.996 11.1781 12.9715 11.1871 12.9422C11.2645 12.6966 11.3613 12.4306 11.5334 12.3863C11.5854 12.3726 11.6669 12.3745 11.7552 12.4604C11.9425 12.6425 11.9327 13.0677 11.9265 13.3492C11.9252 13.3914 11.9242 13.4298 11.9242 13.4625C11.9242 13.9117 11.9896 14.2256 12.0396 14.3334C12.0652 14.2783 12.1094 14.1449 12.1521 13.8315C12.2106 13.3972 12.2176 12.9275 12.2244 12.5131C12.2355 11.7798 12.2435 11.2482 12.5041 11.1232C12.5429 11.099 12.6074 11.0858 12.6757 11.1208C12.9275 11.25 13.0501 11.972 13.0501 13.3278C13.0659 13.5374 13.1213 13.758 13.1666 13.7896C13.1671 13.7849 13.2036 13.7617 13.2649 13.6457C13.3299 13.5226 13.3943 13.1684 13.4515 12.856C13.577 12.1675 13.6345 11.9258 13.7835 11.9132C13.8974 11.9018 13.9499 12.0489 13.9719 12.1109C14.0338 12.2843 14.0799 12.6757 14.129 13.0903C14.1666 13.4119 14.2206 13.8711 14.276 14.0569C14.2817 14.0406 14.2884 14.0211 14.2957 13.9971C14.4233 13.5761 14.4347 12.7161 14.446 11.8839C14.4613 10.7281 14.4815 10.0119 14.6885 9.86248C14.7349 9.82927 14.7908 9.8211 14.8456 9.83982C15.0884 9.92179 15.107 10.6459 15.093 12.4037C15.0832 13.6784 15.071 15.2649 15.3264 15.5264C15.3492 15.5493 15.3647 15.5493 15.3707 15.5493C15.3823 15.5493 15.3994 15.5377 15.4173 15.5169C15.6766 15.2188 15.8401 13.6534 15.6546 12.1562C15.6305 11.9611 15.6849 11.7645 15.784 11.6889C15.8339 11.6504 15.8947 11.6425 15.9506 11.6665C16.095 11.7292 16.1929 11.998 16.2498 12.4888C16.2736 12.6944 16.2948 12.9166 16.3153 13.1359C16.3603 13.6146 16.4214 14.2596 16.5039 14.4014C16.5293 14.3685 16.581 14.2794 16.6579 14.0406L16.8202 14.0946C16.7009 14.4639 16.6074 14.6031 16.4858 14.5888C16.2966 14.5675 16.242 14.1782 16.1455 13.1525C16.1251 12.9343 16.1041 12.7134 16.0803 12.5089C16.0078 11.8829 15.8846 11.8262 15.8834 11.8257C15.8593 11.8381 15.8034 11.9683 15.8241 12.1343C16.0039 13.5896 15.8714 15.2565 15.5454 15.6316C15.4928 15.6919 15.4338 15.7225 15.3707 15.7225Z" fill="white"/>
+</g>
+</svg>
diff --git a/static/icons/dark/color/astro.svg b/static/icons/dark/color/astro.svg
new file mode 100644
index 000000000..ef225e517
--- /dev/null
+++ b/static/icons/dark/color/astro.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.57218 16.0036C6.72932 15.2433 6.48328 13.6458 6.83444 12.4884C7.44331 13.2181 8.28696 13.4493 9.16081 13.5798C10.5099 13.7811 11.8347 13.7058 13.0879 13.0973C13.2313 13.0277 13.3638 12.935 13.5204 12.8412C13.638 13.1779 13.6686 13.5177 13.6276 13.8637C13.5277 14.7061 13.1028 15.3569 12.4271 15.8502C12.1569 16.0475 11.871 16.2239 11.5919 16.4099C10.7346 16.9818 10.5026 17.6523 10.8248 18.6276C10.8324 18.6513 10.8393 18.6751 10.8566 18.7331C10.4189 18.5398 10.0991 18.2583 9.85547 17.8882C9.59815 17.4976 9.47572 17.0655 9.46928 16.598C9.46606 16.3705 9.46606 16.1409 9.43505 15.9166C9.35936 15.3698 9.0992 15.1249 8.60913 15.1108C8.10616 15.0963 7.70829 15.4032 7.60278 15.8864C7.59473 15.9235 7.58306 15.9601 7.57138 16.0032L7.57218 16.0036Z" fill="white"/>
+<path d="M3.33337 12.8428C3.33337 12.8428 5.63802 11.7229 7.94911 11.7229L9.69159 6.34362C9.75681 6.08347 9.94731 5.90669 10.1623 5.90669C10.3774 5.90669 10.5679 6.08347 10.6331 6.34362L12.3756 11.7229C15.1127 11.7229 16.9913 12.8428 16.9913 12.8428C16.9913 12.8428 13.0767 2.20508 13.069 2.18374C12.9567 1.86923 12.767 1.66667 12.5113 1.66667H7.8138C7.55809 1.66667 7.37607 1.86923 7.25605 2.18374C7.24759 2.20468 3.33337 12.8428 3.33337 12.8428Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/empty.svg b/static/icons/dark/color/empty.svg
new file mode 100644
index 000000000..0cf91cd64
--- /dev/null
+++ b/static/icons/dark/color/empty.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8287 11.7565L17.5044 11.4945C17.5998 11.0122 17.65 10.5126 17.65 10C17.65 9.48736 17.5998 8.9878 17.5044 8.50553L18.8287 8.24354C18.9411 8.81163 19 9.39893 19 10C19 10.6011 18.9411 11.1884 18.8287 11.7565ZM17.4841 4.99946L16.3623 5.75049C15.8034 4.91566 15.0843 4.19662 14.2495 3.63772L15.0005 2.51591C15.982 3.17298 16.827 4.018 17.4841 4.99946ZM11.7565 1.17131L11.4945 2.49564C11.0122 2.40023 10.5126 2.35 10 2.35C9.48736 2.35 8.9878 2.40023 8.50553 2.49564L8.24354 1.17131C8.81163 1.05892 9.39893 1 10 1C10.6011 1 11.1884 1.05892 11.7565 1.17131ZM4.99946 2.51591L5.75049 3.63772C4.91566 4.19662 4.19662 4.91567 3.63772 5.75049L2.51591 4.99946C3.17298 4.018 4.018 3.17298 4.99946 2.51591ZM1.17131 8.24354C1.05892 8.81163 1 9.39893 1 10C1 10.6011 1.05892 11.1884 1.17131 11.7565L2.49564 11.4945C2.40023 11.0122 2.35 10.5126 2.35 10C2.35 9.48736 2.40023 8.9878 2.49564 8.50554L1.17131 8.24354ZM2.51591 15.0005L3.63772 14.2495C4.19662 15.0843 4.91567 15.8034 5.75049 16.3623L4.99946 17.4841C4.018 16.827 3.17298 15.982 2.51591 15.0005ZM8.24354 18.8287L8.50554 17.5044C8.9878 17.5998 9.48736 17.65 10 17.65C10.5126 17.65 11.0122 17.5998 11.4945 17.5044L11.7565 18.8287C11.1884 18.9411 10.6011 19 10 19C9.39893 19 8.81163 18.9411 8.24354 18.8287ZM15.0005 17.4841C15.982 16.827 16.827 15.982 17.4841 15.0005L16.3623 14.2495C15.8034 15.0843 15.0843 15.8034 14.2495 16.3623L15.0005 17.4841Z" fill="#EDEDF0"/>
+</svg>
diff --git a/static/icons/dark/color/lynx.svg b/static/icons/dark/color/lynx.svg
new file mode 100644
index 000000000..1756f4547
--- /dev/null
+++ b/static/icons/dark/color/lynx.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87827 5.24328L3.76157 6.77958C3.53153 6.94653 3.37226 7.19742 3.31632 7.48095L3.10937 8.52978C3.0984 8.58537 3.07407 8.6373 3.03858 8.68076L2.07808 10.0075C1.94876 10.166 1.95188 10.5872 2.30609 10.8569C2.44191 10.9816 2.62351 11.2613 2.83008 11.5794C3.26743 12.2529 3.81668 13.0987 4.2803 13.0108C4.93636 12.768 5.73945 12.6903 6.35603 13.0108C7.55462 14.1011 7.26033 15.1064 6.83841 16.5477C6.66863 17.1277 6.47818 17.7782 6.35603 18.5333C6.93172 16.3256 8.22625 13.7616 10.5605 12.8915C10.1399 12.5295 9.28165 12.1932 8.52215 12.1123C8.52215 12.1123 10.8554 10.0075 13.7333 9.04033C11.7243 4.00356 8.40813 1.59656 8.40813 1.59656C8.23915 1.37634 7.8979 1.44858 7.82749 1.71948C7.77092 2.51574 7.67714 3.05719 7.52234 3.56757L6.35603 2.14952C6.2342 1.99476 5.99063 2.08412 5.99185 2.28313C6.18933 3.43983 6.16161 4.0891 5.87827 5.24328ZM6.69926 5.13755L6.70622 5.13708C6.72146 5.13605 6.73646 5.13396 6.75111 5.13088L6.69926 5.13755ZM8.27722 2.54048C9.07652 3.99567 9.4386 4.82238 9.56141 6.36521C8.7112 5.85632 8.34073 5.72682 7.7155 5.73003C8.08024 4.56144 8.19166 3.85776 8.27722 2.54048Z" fill="white"/>
+<path d="M13.748 13.1738C10.012 13.9851 7.88982 15.2068 6.26672 18.5333C9.18031 13.8944 18.0001 14.7241 18.0001 14.7241C17.8353 13.9663 16.0817 12.5213 14.9284 11.635C14.9284 11.635 15.8588 10.5495 17.9158 10C17.9158 10 13.961 10.2175 11.6588 11.3971C12.4046 11.7707 13.36 12.4011 13.748 13.1738Z" fill="url(#paint0_linear_8754_790)"/>
+<defs>
+<linearGradient id="paint0_linear_8754_790" x1="18" y1="10" x2="6.5" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78E6E5"/>
+<stop offset="0.100938" stop-color="#78D9EA"/>
+<stop offset="0.227353" stop-color="#7AC9F0"/>
+<stop offset="0.369246" stop-color="#85BADB"/>
+<stop offset="0.475618" stop-color="#B5928C"/>
+<stop offset="0.622562" stop-color="#E97452"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/mongo-db.svg b/static/icons/dark/color/mongo-db.svg
new file mode 100644
index 000000000..6339b5dec
--- /dev/null
+++ b/static/icons/dark/color/mongo-db.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6634_2777)">
+<path d="M11.4882 2.99962C10.7691 2.10624 10.1499 1.19891 10.0234 1.01047C10.0101 0.99651 9.9901 0.99651 9.97679 1.01047C9.85028 1.19891 9.23107 2.10624 8.51199 2.99962C2.33987 11.2423 9.48409 16.805 9.48409 16.805L9.54401 16.8469C9.59727 17.7054 9.73043 18.9407 9.73043 18.9407H9.99676H10.2631C10.2631 18.9407 10.3963 17.7123 10.4495 16.8469L10.5094 16.798C10.5161 16.798 17.6603 11.2423 11.4882 2.99962ZM9.99676 16.6794C9.99676 16.6794 9.67717 16.3932 9.59061 16.2466V16.2327L9.97679 7.2571C9.97679 7.22918 10.0167 7.22918 10.0167 7.2571L10.4029 16.2327V16.2466C10.3164 16.3932 9.99676 16.6794 9.99676 16.6794Z" fill="#00ED64"/>
+</g>
+<defs>
+<clipPath id="clip0_6634_2777">
+<rect width="8" height="18" fill="white" transform="translate(6 1)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/neo4j.svg b/static/icons/dark/color/neo4j.svg
new file mode 100644
index 000000000..5557bd020
--- /dev/null
+++ b/static/icons/dark/color/neo4j.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.19907 9.02885C3.3343 8.79432 3.52446 8.6105 3.74349 8.48443C3.97803 8.34921 4.23439 8.28511 4.48723 8.28511C4.75839 8.28511 5.01193 8.35766 5.23097 8.48443C5.4655 8.61966 5.64932 8.80982 5.77539 9.02885C5.86061 9.17605 5.91696 9.3317 5.94795 9.48946C6.22121 10.822 7.18117 11.3735 8.47286 10.9396C8.62921 10.8868 8.78979 10.8607 8.94967 10.8614C9.22082 10.8614 9.47437 10.934 9.6934 11.0608C9.92793 11.196 10.1118 11.3861 10.2378 11.6052C10.3731 11.8397 10.4371 12.0961 10.4371 12.3489C10.4371 12.6201 10.3646 12.8736 10.2378 13.0927C10.1026 13.3272 9.91244 13.511 9.6934 13.6371C9.45887 13.7723 9.20251 13.8364 8.94967 13.8364C8.78345 13.8364 8.62428 13.8089 8.47497 13.7589C7.17976 13.323 6.2184 13.8765 5.94654 15.2133C5.94654 15.2133 5.94654 15.2126 5.94654 15.2119C5.91484 15.3753 5.85568 15.5288 5.77539 15.6683C5.64017 15.9028 5.45001 16.0866 5.23097 16.2127C4.99644 16.3479 4.74008 16.412 4.48723 16.412C4.21608 16.412 3.96253 16.3395 3.74349 16.2127C3.50896 16.0775 3.32514 15.8873 3.19907 15.6683C3.06385 15.4337 2.99976 15.1774 2.99976 14.9245C2.99976 14.6534 3.0723 14.3998 3.19907 14.1808C3.3343 13.9463 3.52446 13.7624 3.74349 13.6364C3.97803 13.5011 4.23439 13.4371 4.48723 13.4371C4.65838 13.4371 4.82248 13.4659 4.97602 13.5195C5.83737 13.8054 6.55012 13.6519 7.00862 13.1194C7.39387 12.6729 7.39317 12.0228 7.00792 11.5763C6.54801 11.0431 5.83244 10.8903 4.96756 11.1798C4.81051 11.2333 4.64781 11.2601 4.48723 11.2594C4.21608 11.2594 3.96253 11.1868 3.74349 11.06C3.50896 10.9248 3.32514 10.7347 3.19907 10.5156C3.06385 10.2811 2.99976 10.0247 2.99976 9.77189C2.99976 9.50214 3.0723 9.24789 3.19907 9.02885Z" fill="#00547F"/>
+<path d="M16.9998 8.16955V12.8968H15.2658V8.16955C15.2658 6.19822 14.1889 5.1946 12.5458 5.1946C10.9027 5.1946 9.82651 6.19822 9.82651 8.16955V10.2986C9.55747 10.1831 9.26166 10.1183 8.95036 10.1183C8.6616 10.1183 8.37073 10.1747 8.09253 10.2902V8.18787C8.09253 5.15798 9.88145 3.5881 12.5465 3.5881C15.2109 3.5881 17.0181 5.12135 16.9998 8.16955Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/neon.svg b/static/icons/dark/color/neon.svg
new file mode 100644
index 000000000..09135c1d1
--- /dev/null
+++ b/static/icons/dark/color/neon.svg
@@ -0,0 +1,16 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#00E0D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="url(#paint0_linear_6634_2785)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="url(#paint1_linear_6634_2785)" fill-opacity="0.4"/>
+<path d="M13.9311 3.99987C14.4799 3.99987 15.0062 4.21786 15.3942 4.60588C15.7822 4.99389 16.0002 5.52016 16.0002 6.0689V12.7556C16.0002 13.9376 14.5042 14.4507 13.7788 13.5176L11.5105 10.5996V14.138C11.5105 14.6318 11.3143 15.1054 10.9651 15.4546C10.6159 15.8038 10.1423 16 9.64844 16C9.67557 16 9.70247 15.9947 9.72754 15.9843C9.75261 15.9739 9.77537 15.9587 9.79457 15.9395C9.81377 15.9203 9.82901 15.8975 9.83937 15.8724C9.84977 15.8473 9.85511 15.8205 9.85511 15.7933V9.39326C9.85511 8.21092 11.3511 7.69791 12.0768 8.63126L14.3452 11.549V4.41355C14.3452 4.18521 14.1598 3.99987 13.9311 3.99987Z" fill="#63F655"/>
+<defs>
+<linearGradient id="paint0_linear_6634_2785" x1="16.0001" y1="16.0001" x2="5.44835" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#62F755"/>
+<stop offset="1" stop-color="#8FF986" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6634_2785" x1="16.0001" y1="16.0001" x2="8.87238" y2="13.2278" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.9"/>
+<stop offset="1" stop-color="#1A1A1A" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/nextjs.svg b/static/icons/dark/color/nextjs.svg
new file mode 100644
index 000000000..d1e0cbfb4
--- /dev/null
+++ b/static/icons/dark/color/nextjs.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.45418 1.67116C9.41834 1.67441 9.30429 1.68582 9.20165 1.69396C6.83443 1.90736 4.6171 3.18446 3.21273 5.14735C2.43072 6.23875 1.93056 7.47676 1.74157 8.78806C1.67477 9.2458 1.66663 9.381 1.66663 10.0016C1.66663 10.6223 1.67477 10.7575 1.74157 11.2152C2.19449 14.3444 4.42159 16.9736 7.44212 17.9477C7.98302 18.122 8.55323 18.2409 9.20165 18.3126C9.45418 18.3403 10.5457 18.3403 10.7983 18.3126C11.9175 18.1888 12.8657 17.9118 13.8009 17.4346C13.9442 17.3613 13.9719 17.3417 13.9524 17.3254C13.9394 17.3156 13.3284 16.4963 12.5953 15.5059L11.2626 13.7059L9.59266 11.2348C8.67379 9.87621 7.91785 8.76526 7.91133 8.76526C7.90481 8.76363 7.8983 9.86155 7.89504 11.2022C7.89015 13.5495 7.88852 13.644 7.8592 13.6994C7.81684 13.7792 7.78425 13.8118 7.71583 13.8476C7.66369 13.8737 7.61808 13.8786 7.37207 13.8786H7.09022L7.01527 13.8313C6.9664 13.8004 6.93056 13.7596 6.90612 13.7124L6.8719 13.6391L6.87516 10.373L6.88005 7.10535L6.93056 7.04182C6.95662 7.00762 7.01201 6.96363 7.05112 6.94246C7.11791 6.90988 7.14398 6.90662 7.42583 6.90662C7.75819 6.90662 7.81358 6.91965 7.89993 7.01413C7.92436 7.04019 8.82857 8.402 9.91035 10.0424C10.9921 11.6827 12.4714 13.9225 13.1981 15.0221L14.5177 17.0208L14.5845 16.9768C15.1759 16.5924 15.8015 16.0451 16.2968 15.4749C17.3509 14.2646 18.0303 12.7888 18.2583 11.2152C18.3251 10.7575 18.3333 10.6223 18.3333 10.0016C18.3333 9.381 18.3251 9.2458 18.2583 8.78806C17.8054 5.65884 15.5783 3.02971 12.5578 2.05559C12.025 1.88292 11.4581 1.76401 10.8227 1.69233C10.6663 1.67604 9.5894 1.65813 9.45418 1.67116ZM12.8657 6.71115C12.9439 6.75024 13.0075 6.82517 13.0303 6.90336C13.0433 6.94572 13.0466 7.85141 13.0433 9.8925L13.0384 12.8214L12.522 12.0297L12.0039 11.238V9.10897C12.0039 7.7325 12.0104 6.95875 12.0202 6.92128C12.0462 6.83006 12.1032 6.75839 12.1815 6.71603C12.2482 6.68182 12.2727 6.67857 12.5285 6.67857C12.7696 6.67857 12.8119 6.68182 12.8657 6.71115Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/nuxt.svg b/static/icons/dark/color/nuxt.svg
new file mode 100644
index 000000000..0d278fbaf
--- /dev/null
+++ b/static/icons/dark/color/nuxt.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0168 15.8333H17.2125C17.4093 15.8333 17.6026 15.7794 17.7731 15.677C17.9435 15.5746 18.085 15.4273 18.1834 15.25C18.2817 15.0726 18.3334 14.8714 18.3334 14.6666C18.3333 14.4618 18.2814 14.2607 18.1829 14.0834L14.022 6.58339C13.9237 6.40605 13.7822 6.25878 13.6118 6.15639C13.4414 6.05401 13.2481 6.00009 13.0514 6.00009C12.8546 6.00009 12.6613 6.05401 12.491 6.15639C12.3206 6.25878 12.1791 6.40605 12.0808 6.58339L11.0168 8.50236L8.93671 4.74985C8.83828 4.57254 8.69674 4.42529 8.52632 4.32291C8.35587 4.22056 8.16256 4.16666 7.96578 4.16666C7.769 4.16666 7.57569 4.22056 7.40526 4.32291C7.23482 4.42529 7.09328 4.57254 6.99485 4.74985L1.81718 14.0834C1.71868 14.2607 1.66677 14.4618 1.66669 14.6666C1.6666 14.8714 1.71834 15.0726 1.81669 15.25C1.91504 15.4273 2.05654 15.5746 2.22696 15.677C2.39738 15.7794 2.59071 15.8333 2.7875 15.8333H6.67665C8.21758 15.8333 9.35395 15.1289 10.1359 13.7547L12.0343 10.3334L13.0511 8.50236L16.1027 14.0023H12.0343L11.0168 15.8333ZM6.61324 14.0004L3.89911 13.9998L7.96759 6.66694L9.99761 10.3334L8.63843 12.7839C8.11915 13.6756 7.52922 14.0004 6.61324 14.0004Z" fill="#00DC82"/>
+</svg>
diff --git a/static/icons/dark/color/redis.svg b/static/icons/dark/color/redis.svg
new file mode 100644
index 000000000..6a5a203f4
--- /dev/null
+++ b/static/icons/dark/color/redis.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2479 10.6207C15.2795 11.7541 14.2336 13.0495 12.1419 13.0495C10.2734 13.0495 9.57733 11.5186 9.5284 10.275C9.93776 11.0791 10.7381 11.7303 11.9869 11.7002C14.3886 11.6282 16.0349 9.61319 16.0349 7.77811C16.0349 5.58321 14.2724 4 11.2122 4C9.02355 4 6.31199 4.77361 4.5301 5.997C4.51073 7.25637 5.2661 8.89355 5.53725 8.71364C7.08203 7.68194 8.30698 7.0178 9.49509 6.68479C7.73635 8.50655 3.51665 12.7366 3 13.4813C3.05811 14.1649 3.96842 16 4.41389 16C4.54947 16 4.66568 15.928 4.80126 15.8021C6.0734 14.4744 7.11044 13.284 8.03286 12.1366C8.16238 13.8182 9.05261 15.8741 11.5414 15.8741C13.7688 15.8741 15.9768 14.3808 16.9839 11.0165C17.1002 10.6027 16.5578 10.2789 16.2479 10.6207ZM13.7107 7.90405C13.7107 8.96552 12.5873 9.48726 11.5608 9.48726C11.0121 9.48726 10.5906 9.35342 10.2572 9.17951C10.8706 8.3168 11.4778 7.43217 12.1301 6.48517C13.2803 6.666 13.7107 7.25988 13.7107 7.90405Z" fill="#FF4438"/>
+</svg>
diff --git a/static/icons/dark/color/remix.svg b/static/icons/dark/color/remix.svg
new file mode 100644
index 000000000..fb817aebc
--- /dev/null
+++ b/static/icons/dark/color/remix.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5876 3C13.8692 3 15.5 4.71409 15.5 7.45218C15.5 9.50017 14.3524 10.8358 12.8022 11.0584C14.1108 11.3478 14.8758 12.1715 15.0168 13.7965L15.0372 14.0953L15.055 14.3747L15.0704 14.636L15.0811 14.8331L15.0926 15.0656L15.0985 15.1983L15.107 15.4091L15.1138 15.6082L15.1172 15.7226L15.1218 15.906L15.1258 16.1156L15.1272 16.2169L15.1298 16.5105L15.1306 16.8168L15.1307 17H11.7465L11.7467 16.9236L11.7479 16.7752L11.7499 16.6307L11.7558 16.2806L11.7572 16.1633L11.7584 15.9792L11.7582 15.8615L11.7573 15.7381L11.7559 15.6413L11.7531 15.5057L11.7491 15.3618L11.7437 15.2089L11.7368 15.046L11.7327 14.9605L11.7258 14.827L11.7178 14.6866L11.7055 14.4883L11.6949 14.3307C11.6918 14.2821 11.6883 14.2347 11.6843 14.1883L11.6756 14.0972C11.5639 13.0207 11.1748 12.5807 10.5084 12.434L10.4523 12.4224C10.4144 12.4152 10.3757 12.4088 10.3361 12.4032L10.2761 12.3955C10.2659 12.3943 10.2558 12.3931 10.2456 12.392L10.1836 12.3861L10.1204 12.3812L10.0559 12.3774L9.99079 12.3746L9.92444 12.3728L9.85685 12.3719L4.5 12.3718V9.45568H9.98364C10.0733 9.45568 10.1602 9.45381 10.2443 9.45L10.3275 9.44555L10.4088 9.43978L10.4883 9.43269C10.5014 9.43139 10.5145 9.43004 10.5274 9.42864L10.6041 9.41952C10.6546 9.41299 10.7039 9.40555 10.752 9.39717L10.8232 9.3839C11.713 9.20685 12.1579 8.68846 12.1579 7.67686C12.1579 6.54159 11.4332 5.85355 9.98364 5.85355H4.5V3H10.5876ZM8.07828 14.8261C8.52228 14.8261 8.70805 15.0966 8.77423 15.3556L8.78296 15.3928L8.79013 15.4297L8.79479 15.4588L8.79679 15.4732L8.80013 15.5017L8.80264 15.5295L8.80361 15.5432L8.80497 15.57L8.80539 15.5831L8.80572 15.6086V17H4.5V14.8261H8.07828Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/svelte.svg b/static/icons/dark/color/svelte.svg
new file mode 100644
index 000000000..7b0a9e1cd
--- /dev/null
+++ b/static/icons/dark/color/svelte.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8135 3.87146C14.332 1.65445 11.3827 1.00489 9.26251 2.40287L5.52492 4.88817C4.50558 5.55186 3.79883 6.63918 3.59496 7.86771C3.41828 8.89855 3.56778 9.95763 4.04348 10.8755C3.71729 11.3839 3.49983 11.9487 3.40469 12.5418C3.18723 13.7985 3.47264 15.0977 4.17939 16.1285C5.67442 18.3455 8.61013 18.9951 10.7304 17.5971L14.468 15.1259C15.4873 14.4622 16.194 13.3749 16.3979 12.1464C16.5746 11.1156 16.4251 10.0565 15.9494 9.13861C16.2756 8.63025 16.493 8.06541 16.5882 7.47232C16.8192 6.20143 16.5338 4.90229 15.8135 3.87146Z" fill="#FF3E00"/>
+<path d="M8.85238 16.5709C7.5914 16.8861 6.27376 16.4064 5.53701 15.3784C5.08363 14.7753 4.91361 14.0215 5.04113 13.2813C5.06946 13.158 5.0978 13.0483 5.12614 12.9249L5.19698 12.7056L5.39533 12.8427C5.86288 13.1717 6.37294 13.4184 6.9255 13.5829L7.06718 13.624L7.05301 13.761C7.03884 13.9529 7.09552 14.1585 7.20886 14.323C7.43555 14.6383 7.83226 14.789 8.21481 14.6931C8.29982 14.6657 8.38482 14.6383 8.45567 14.5971L12.3378 12.1985C12.5361 12.0751 12.6636 11.897 12.7061 11.6777C12.7486 11.4584 12.692 11.2253 12.5644 11.0472C12.3378 10.7319 11.941 10.5948 11.5585 10.6908C11.4735 10.7182 11.3885 10.7456 11.3176 10.7867L9.82998 11.7051C9.58912 11.8558 9.31993 11.9655 9.03656 12.034C7.77559 12.3493 6.45795 11.8695 5.7212 10.8416C5.28199 10.2385 5.0978 9.48461 5.23948 8.74446C5.367 8.03172 5.82038 7.38752 6.45795 7.00374L10.3542 4.6051C10.5951 4.45433 10.8643 4.34467 11.1476 4.26243C12.4086 3.94718 13.7262 4.42691 14.463 5.4549C14.9164 6.05799 15.0864 6.81184 14.9589 7.552C14.9305 7.67535 14.9022 7.78501 14.8597 7.90837L14.7889 8.12767L14.5905 7.9906C14.1229 7.66165 13.6129 7.41493 13.0603 7.25045L12.9187 7.20933L12.9328 7.07227C12.947 6.88038 12.8903 6.67478 12.777 6.5103C12.5503 6.19505 12.1536 6.05799 11.771 6.15393C11.686 6.18134 11.601 6.20876 11.5302 6.24988L7.64808 8.64852C7.44972 8.77187 7.32221 8.95006 7.2797 9.16936C7.2372 9.38867 7.29387 9.62168 7.42139 9.79986C7.64808 10.1151 8.04479 10.2522 8.42733 10.1562C8.51234 10.1288 8.59735 10.1014 8.66819 10.0603L10.1558 9.14195C10.3967 8.99118 10.6659 8.88153 10.9493 8.79929C12.2102 8.48404 13.5279 8.96377 14.2646 9.99175C14.718 10.5948 14.888 11.3487 14.7605 12.0889C14.633 12.8016 14.1796 13.4458 13.5421 13.8296L9.64579 16.2282C9.40494 16.379 9.13574 16.4886 8.85238 16.5709Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/upstash.svg b/static/icons/dark/color/upstash.svg
new file mode 100644
index 000000000..a0fb67474
--- /dev/null
+++ b/static/icons/dark/color/upstash.svg
@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_6634_2763" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="1" width="12" height="18">
+<path d="M4 1.9546H15.9999V18.0454H4V1.9546Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6634_2763)">
+<path d="M4.01428 16.0333C6.66191 18.6959 10.9545 18.6959 13.6021 16.0333C16.2497 13.3707 16.2497 9.05355 13.6021 6.39093L12.4036 7.59624C14.3893 9.59328 14.3893 12.8309 12.4036 14.828C10.4179 16.8249 7.19849 16.8249 5.21278 14.828L4.01428 16.0333Z" fill="#00E9A3"/>
+<path d="M6.41127 13.6226C7.73508 14.9539 9.8813 14.9539 11.2051 13.6226C12.5289 12.2913 12.5289 10.1328 11.2051 8.8015L10.0068 10.0068C10.6687 10.6724 10.6687 11.7517 10.0068 12.4173C9.84982 12.5755 9.66312 12.7011 9.45742 12.7867C9.25172 12.8724 9.03109 12.9166 8.80826 12.9166C8.58543 12.9166 8.3648 12.8724 8.1591 12.7867C7.9534 12.7011 7.7667 12.5755 7.60976 12.4173L6.41127 13.6226Z" fill="#00E9A3"/>
+<path d="M15.9992 3.98039C13.3516 1.31776 9.059 1.31776 6.41138 3.98039C3.76375 6.64315 3.76375 10.9601 6.41138 13.6227L7.60974 12.4174C5.62415 10.4204 5.62415 7.18273 7.60974 5.1857C9.59545 3.1888 12.815 3.1888 14.8007 5.1857L15.9992 3.98039Z" fill="#00E9A3"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72226 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34116 9.34475 8.26198 10.0068 7.59626C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09708 11.2052 7.09708C11.428 7.09708 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59626L13.6021 6.39094Z" fill="#00E9A3"/>
+<path d="M15.9991 3.98039C13.3515 1.31776 9.05876 1.31776 6.41113 3.98039C3.76351 6.64315 3.76351 10.9601 6.41113 13.6227L7.60976 12.4174C5.62391 10.4204 5.62391 7.18273 7.60976 5.1857C9.59535 3.1888 12.8147 3.1888 14.8005 5.1857L15.9991 3.98039Z" fill="white" fill-opacity="0.8"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72226 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34116 9.34475 8.26198 10.0068 7.59626C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09708 11.2052 7.09708C11.428 7.09708 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59626L13.6021 6.39094Z" fill="white" fill-opacity="0.8"/>
+</g>
+</svg>
diff --git a/static/icons/dark/color/vite.svg b/static/icons/dark/color/vite.svg
new file mode 100644
index 000000000..3d6e1f472
--- /dev/null
+++ b/static/icons/dark/color/vite.svg
@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9471 4.59883L10.4311 17.7947C10.2759 18.0671 9.87719 18.0687 9.71968 17.7976L2.05465 4.6001C1.88306 4.30465 2.14037 3.94678 2.48137 4.00662L10.0054 5.32708C10.0534 5.3355 10.1026 5.33542 10.1505 5.32683L17.5173 4.00851C17.8571 3.94769 18.1156 4.3028 17.9471 4.59883Z" fill="url(#paint0_linear_8495_3619)"/>
+<path d="M13.6179 2.00383L7.55298 3.06314C7.4533 3.08055 7.37949 3.15585 7.37348 3.24622L7.0004 8.86276C6.99163 8.99505 7.12792 9.09772 7.27277 9.06795L8.96133 8.72058C9.11932 8.68811 9.26207 8.81214 9.2296 8.95376L8.72793 11.1435C8.69417 11.2909 8.8494 11.4169 9.01086 11.3732L10.0538 11.0907C10.2155 11.047 10.3708 11.1734 10.3366 11.3209L9.53938 14.7605C9.4895 14.9756 9.81055 15.0929 9.94444 14.9085L10.0339 14.7853L14.9759 5.9939C15.0587 5.8467 14.916 5.67885 14.7346 5.71005L12.9965 6.00906C12.8332 6.03713 12.6942 5.90155 12.7403 5.7591L13.8747 2.25366C13.9209 2.11098 13.7814 1.97528 13.6179 2.00383Z" fill="url(#paint1_linear_8495_3619)"/>
+<defs>
+<linearGradient id="paint0_linear_8495_3619" x1="1.8675" y1="3.53502" x2="11.0007" y2="16.168" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8495_3619" x1="9.23886" y1="2.29143" x2="10.7112" y2="13.6223" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/grayscale/empty.svg b/static/icons/dark/grayscale/empty.svg
new file mode 100644
index 000000000..0cf91cd64
--- /dev/null
+++ b/static/icons/dark/grayscale/empty.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8287 11.7565L17.5044 11.4945C17.5998 11.0122 17.65 10.5126 17.65 10C17.65 9.48736 17.5998 8.9878 17.5044 8.50553L18.8287 8.24354C18.9411 8.81163 19 9.39893 19 10C19 10.6011 18.9411 11.1884 18.8287 11.7565ZM17.4841 4.99946L16.3623 5.75049C15.8034 4.91566 15.0843 4.19662 14.2495 3.63772L15.0005 2.51591C15.982 3.17298 16.827 4.018 17.4841 4.99946ZM11.7565 1.17131L11.4945 2.49564C11.0122 2.40023 10.5126 2.35 10 2.35C9.48736 2.35 8.9878 2.40023 8.50553 2.49564L8.24354 1.17131C8.81163 1.05892 9.39893 1 10 1C10.6011 1 11.1884 1.05892 11.7565 1.17131ZM4.99946 2.51591L5.75049 3.63772C4.91566 4.19662 4.19662 4.91567 3.63772 5.75049L2.51591 4.99946C3.17298 4.018 4.018 3.17298 4.99946 2.51591ZM1.17131 8.24354C1.05892 8.81163 1 9.39893 1 10C1 10.6011 1.05892 11.1884 1.17131 11.7565L2.49564 11.4945C2.40023 11.0122 2.35 10.5126 2.35 10C2.35 9.48736 2.40023 8.9878 2.49564 8.50554L1.17131 8.24354ZM2.51591 15.0005L3.63772 14.2495C4.19662 15.0843 4.91567 15.8034 5.75049 16.3623L4.99946 17.4841C4.018 16.827 3.17298 15.982 2.51591 15.0005ZM8.24354 18.8287L8.50554 17.5044C8.9878 17.5998 9.48736 17.65 10 17.65C10.5126 17.65 11.0122 17.5998 11.4945 17.5044L11.7565 18.8287C11.1884 18.9411 10.6011 19 10 19C9.39893 19 8.81163 18.9411 8.24354 18.8287ZM15.0005 17.4841C15.982 16.827 16.827 15.982 17.4841 15.0005L16.3623 14.2495C15.8034 15.0843 15.0843 15.8034 14.2495 16.3623L15.0005 17.4841Z" fill="#EDEDF0"/>
+</svg>
diff --git a/static/icons/dark/grayscale/lynx.svg b/static/icons/dark/grayscale/lynx.svg
new file mode 100644
index 000000000..b291edcb8
--- /dev/null
+++ b/static/icons/dark/grayscale/lynx.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87827 5.24329L3.76157 6.77959C3.53153 6.94654 3.37226 7.19742 3.31632 7.48096L3.10937 8.52979C3.0984 8.58538 3.07407 8.63731 3.03858 8.68077L2.07808 10.0075C1.94876 10.166 1.95188 10.5872 2.30609 10.8569C2.44191 10.9816 2.62351 11.2613 2.83008 11.5794C3.26743 12.2529 3.81668 13.0987 4.2803 13.0108C4.93636 12.768 5.73945 12.6903 6.35603 13.0108C7.55462 14.1011 7.26033 15.1064 6.83841 16.5477C6.66863 17.1277 6.47818 17.7783 6.35603 18.5333C6.93172 16.3256 8.22625 13.7616 10.5605 12.8915C10.1399 12.5295 9.28165 12.1933 8.52215 12.1123C8.52215 12.1123 10.8554 10.0075 13.7333 9.04033C11.7243 4.00357 8.40813 1.59656 8.40813 1.59656C8.23915 1.37634 7.8979 1.44859 7.82749 1.71949C7.77092 2.51575 7.67714 3.0572 7.52234 3.56758L6.35603 2.14953C6.2342 1.99477 5.99063 2.08413 5.99185 2.28313C6.18933 3.43984 6.16161 4.08911 5.87827 5.24329ZM6.69926 5.13756L6.70622 5.13709C6.72146 5.13606 6.73646 5.13397 6.75111 5.13088L6.69926 5.13756ZM8.27722 2.54048C9.07652 3.99568 9.4386 4.82238 9.56141 6.36522C8.7112 5.85633 8.34073 5.72682 7.7155 5.73004C8.08024 4.56144 8.19166 3.85776 8.27722 2.54048Z" fill="#EDEDF0"/>
+<path d="M13.748 13.1738C10.012 13.9851 7.88982 15.2068 6.26672 18.5333C9.18031 13.8944 18.0001 14.7241 18.0001 14.7241C17.8353 13.9663 16.0817 12.5213 14.9284 11.635C14.9284 11.635 15.8588 10.5495 17.9158 10C17.9158 10 13.961 10.2175 11.6588 11.3971C12.4046 11.7707 13.36 12.4011 13.748 13.1738Z" fill="#EDEDF0"/>
+</svg>
diff --git a/static/icons/dark/grayscale/mongo-db.svg b/static/icons/dark/grayscale/mongo-db.svg
new file mode 100644
index 000000000..b238a992d
--- /dev/null
+++ b/static/icons/dark/grayscale/mongo-db.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6600_315)">
+<path d="M11.4882 2.99962C10.7691 2.10624 10.1499 1.19891 10.0234 1.01047C10.0101 0.99651 9.9901 0.99651 9.97679 1.01047C9.85028 1.19891 9.23107 2.10624 8.51199 2.99962C2.33987 11.2423 9.48409 16.805 9.48409 16.805L9.54401 16.8469C9.59727 17.7054 9.73043 18.9407 9.73043 18.9407H9.99676H10.2631C10.2631 18.9407 10.3963 17.7123 10.4495 16.8469L10.5094 16.798C10.5161 16.798 17.6603 11.2423 11.4882 2.99962ZM9.99676 16.6794C9.99676 16.6794 9.67717 16.3932 9.59061 16.2466V16.2327L9.97679 7.2571C9.97679 7.22918 10.0167 7.22918 10.0167 7.2571L10.4029 16.2327V16.2466C10.3164 16.3932 9.99676 16.6794 9.99676 16.6794Z" fill="#2D2D31"/>
+</g>
+<defs>
+<clipPath id="clip0_6600_315">
+<rect width="8" height="18" fill="white" transform="translate(6 1)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/dark/grayscale/neo4j.svg b/static/icons/dark/grayscale/neo4j.svg
new file mode 100644
index 000000000..942f32a7f
--- /dev/null
+++ b/static/icons/dark/grayscale/neo4j.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.19919 9.02883C3.33442 8.7943 3.52458 8.61048 3.74362 8.48441C3.97815 8.34919 4.23451 8.2851 4.48735 8.2851C4.75851 8.2851 5.01206 8.35764 5.23109 8.48441C5.46562 8.61964 5.64945 8.8098 5.77552 9.02883C5.86074 9.17603 5.91708 9.33168 5.94807 9.48944C6.22134 10.822 7.18129 11.3734 8.47298 10.9396C8.62933 10.8868 8.78991 10.8607 8.94979 10.8614C9.22094 10.8614 9.47449 10.934 9.69353 11.0607C9.92806 11.196 10.1119 11.3861 10.2379 11.6052C10.3732 11.8397 10.4373 12.0961 10.4373 12.3489C10.4373 12.62 10.3647 12.8736 10.2379 13.0926C10.1027 13.3272 9.91256 13.511 9.69353 13.6371C9.45899 13.7723 9.20263 13.8364 8.94979 13.8364C8.78357 13.8364 8.6244 13.8089 8.47509 13.7589C7.17989 13.3229 6.21852 13.8765 5.94666 15.2133C5.94666 15.2133 5.94666 15.2126 5.94666 15.2119C5.91497 15.3753 5.85581 15.5288 5.77552 15.6683C5.64029 15.9028 5.45013 16.0866 5.23109 16.2127C4.99656 16.3479 4.7402 16.412 4.48735 16.412C4.2162 16.412 3.96265 16.3394 3.74362 16.2127C3.50909 16.0774 3.32526 15.8873 3.19919 15.6683C3.06397 15.4337 2.99988 15.1774 2.99988 14.9245C2.99988 14.6534 3.07242 14.3998 3.19919 14.1808C3.33442 13.9462 3.52458 13.7624 3.74362 13.6364C3.97815 13.5011 4.23451 13.437 4.48735 13.437C4.6585 13.437 4.8226 13.4659 4.97614 13.5194C5.83749 13.8054 6.55024 13.6518 7.00874 13.1194C7.39399 12.6729 7.39329 12.0228 7.00804 11.5763C6.54813 11.0431 5.83256 10.8903 4.96769 11.1798C4.81063 11.2333 4.64793 11.26 4.48735 11.2593C4.2162 11.2593 3.96265 11.1868 3.74362 11.06C3.50909 10.9248 3.32526 10.7346 3.19919 10.5156C3.06397 10.2811 2.99988 10.0247 2.99988 9.77187C2.99988 9.50212 3.07242 9.24787 3.19919 9.02883Z" fill="#2D2D31"/>
+<path d="M16.9999 8.16953V12.8968H15.2659V8.16953C15.2659 6.1982 14.1891 5.19458 12.5459 5.19458C10.9028 5.19458 9.82663 6.1982 9.82663 8.16953V10.2986C9.55759 10.1831 9.26179 10.1183 8.95049 10.1183C8.66172 10.1183 8.37085 10.1747 8.09265 10.2902V8.18784C8.09265 5.15795 9.88157 3.58807 12.5466 3.58807C15.211 3.58807 17.0182 5.12133 16.9999 8.16953Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/dark/grayscale/neon.svg b/static/icons/dark/grayscale/neon.svg
new file mode 100644
index 000000000..a0a158f18
--- /dev/null
+++ b/static/icons/dark/grayscale/neon.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#2D2D31"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#2D2D31"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#2D2D31"/>
+<path d="M13.9311 3.99988C14.4799 3.99988 15.0062 4.21786 15.3942 4.60588C15.7822 4.9939 16.0002 5.52016 16.0002 6.0689V12.7556C16.0002 13.9376 14.5042 14.4507 13.7788 13.5176L11.5105 10.5996V14.138C11.5105 14.6318 11.3143 15.1054 10.9651 15.4546C10.6159 15.8038 10.1423 16 9.64844 16C9.67557 16 9.70247 15.9947 9.72754 15.9843C9.75261 15.9739 9.77537 15.9587 9.79457 15.9395C9.81377 15.9203 9.82901 15.8975 9.83937 15.8724C9.84977 15.8473 9.85511 15.8205 9.85511 15.7933V9.39327C9.85511 8.21092 11.3511 7.69792 12.0768 8.63126L14.3452 11.549V4.41355C14.3452 4.18521 14.1598 3.99988 13.9311 3.99988Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/dark/grayscale/redis.svg b/static/icons/dark/grayscale/redis.svg
new file mode 100644
index 000000000..8362bc644
--- /dev/null
+++ b/static/icons/dark/grayscale/redis.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2479 10.6207C15.2795 11.7541 14.2336 13.0495 12.1419 13.0495C10.2734 13.0495 9.57733 11.5186 9.5284 10.275C9.93776 11.0791 10.7381 11.7303 11.9869 11.7002C14.3886 11.6282 16.0349 9.61319 16.0349 7.77811C16.0349 5.58321 14.2724 4 11.2122 4C9.02355 4 6.31199 4.77361 4.5301 5.997C4.51073 7.25637 5.2661 8.89355 5.53725 8.71364C7.08203 7.68194 8.30698 7.0178 9.49509 6.68479C7.73635 8.50655 3.51665 12.7366 3 13.4813C3.05811 14.1649 3.96842 16 4.41389 16C4.54947 16 4.66568 15.928 4.80126 15.8021C6.0734 14.4744 7.11044 13.284 8.03286 12.1366C8.16238 13.8182 9.05261 15.8741 11.5414 15.8741C13.7688 15.8741 15.9768 14.3808 16.9839 11.0165C17.1002 10.6027 16.5578 10.2789 16.2479 10.6207ZM13.7107 7.90405C13.7107 8.96552 12.5873 9.48726 11.5608 9.48726C11.0121 9.48726 10.5906 9.35342 10.2572 9.17951C10.8706 8.3168 11.4778 7.43217 12.1301 6.48517C13.2803 6.666 13.7107 7.25988 13.7107 7.90405Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/dark/grayscale/upstash.svg b/static/icons/dark/grayscale/upstash.svg
new file mode 100644
index 000000000..33d004763
--- /dev/null
+++ b/static/icons/dark/grayscale/upstash.svg
@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_6600_313" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="1" width="12" height="18">
+<path d="M4 1.95459H15.9999V18.0454H4V1.95459Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6600_313)">
+<path d="M4.01428 16.0333C6.66191 18.6959 10.9545 18.6959 13.6021 16.0333C16.2497 13.3707 16.2497 9.05355 13.6021 6.39093L12.4036 7.59624C14.3893 9.59328 14.3893 12.8309 12.4036 14.828C10.4179 16.8249 7.19849 16.8249 5.21278 14.828L4.01428 16.0333Z" fill="#2D2D31"/>
+<path d="M6.41127 13.6226C7.73508 14.9539 9.8813 14.9539 11.2051 13.6226C12.5289 12.2913 12.5289 10.1328 11.2051 8.80151L10.0068 10.0068C10.6687 10.6724 10.6687 11.7517 10.0068 12.4173C9.84982 12.5755 9.66312 12.7011 9.45742 12.7868C9.25172 12.8724 9.03109 12.9166 8.80826 12.9166C8.58543 12.9166 8.3648 12.8724 8.1591 12.7868C7.9534 12.7011 7.7667 12.5755 7.60976 12.4173L6.41127 13.6226Z" fill="#2D2D31"/>
+<path d="M15.9992 3.98037C13.3516 1.31774 9.059 1.31774 6.41138 3.98037C3.76375 6.64313 3.76375 10.9601 6.41138 13.6227L7.60974 12.4174C5.62415 10.4204 5.62415 7.18271 7.60974 5.18568C9.59545 3.18878 12.815 3.18878 14.8007 5.18568L15.9992 3.98037Z" fill="#2D2D31"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72225 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34115 9.34475 8.26198 10.0068 7.59625C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09707 11.2052 7.09707C11.428 7.09707 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59625L13.6021 6.39094Z" fill="#2D2D31"/>
+<path d="M15.9991 3.98037C13.3515 1.31774 9.05876 1.31774 6.41113 3.98037C3.76351 6.64313 3.76351 10.9601 6.41113 13.6227L7.60976 12.4174C5.62391 10.4204 5.62391 7.18271 7.60976 5.18568C9.59535 3.18878 12.8147 3.18878 14.8005 5.18568L15.9991 3.98037Z" fill="#2D2D31"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72225 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34115 9.34475 8.26198 10.0068 7.59625C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09707 11.2052 7.09707C11.428 7.09707 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59625L13.6021 6.39094Z" fill="#2D2D31"/>
+</g>
+</svg>
diff --git a/static/icons/light/color/analog.svg b/static/icons/light/color/analog.svg
new file mode 100644
index 000000000..d38917f6d
--- /dev/null
+++ b/static/icons/light/color/analog.svg
@@ -0,0 +1,21 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_8344_502" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="3" width="15" height="14">
+<path d="M4.40698 3.5H19V16.466H4.40698V3.5Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_8344_502)">
+<path d="M11.7035 3.50035L19 16.4661H4.40698L11.7035 3.50035Z" fill="#C30F2E"/>
+</g>
+<mask id="mask1_8344_502" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="5" width="13" height="12">
+<path d="M1 5.43155H13.4195V16.5H1V5.43155Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_8344_502)">
+<path d="M7.20962 5.43155L13.4192 16.5H1L7.20962 5.43155Z" fill="#DD0330"/>
+</g>
+<path d="M17.8414 13.1984H2.32849V12.9626H17.8414V13.1984Z" fill="white"/>
+<mask id="mask2_8344_502" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="9" width="15" height="7">
+<path d="M2.92981 9.81918H16.8423V15.7488H2.92981V9.81918Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_8344_502)">
+<path d="M15.3707 15.7225C15.3101 15.7225 15.2532 15.6969 15.2056 15.6484C14.9212 15.3575 14.9088 14.1742 14.9225 12.4021C14.9302 11.4337 14.9406 10.1074 14.7889 10.0027C14.6409 10.0652 14.6262 11.1609 14.6166 11.8863C14.6052 12.7303 14.5936 13.6036 14.459 14.0482C14.4189 14.18 14.3671 14.3007 14.2631 14.291C14.1164 14.2778 14.069 14.0419 13.9595 13.1109C13.914 12.7242 13.8669 12.3246 13.8118 12.1699C13.8045 12.1504 13.7983 12.1349 13.7929 12.1227C13.7341 12.258 13.6663 12.6296 13.6192 12.8877C13.554 13.244 13.4924 13.5806 13.4153 13.7274C13.3558 13.8403 13.2613 13.9873 13.1293 13.9589C12.9495 13.9204 12.8957 13.5511 12.8796 13.3344C12.8796 11.5115 12.6454 11.2993 12.5986 11.2753L12.5911 11.2811L12.5797 11.2785C12.4125 11.3528 12.4034 11.944 12.3949 12.5157C12.3882 12.9351 12.3809 13.4103 12.3209 13.855C12.243 14.4315 12.1488 14.5427 12.0316 14.5359C11.7616 14.5171 11.7539 13.5703 11.7539 13.4625C11.7539 13.4288 11.7547 13.389 11.7557 13.345C11.7609 13.1246 11.7702 12.7147 11.6372 12.5856C11.6196 12.5685 11.5947 12.5487 11.5753 12.5542C11.4806 12.5785 11.3823 12.8919 11.3496 12.9949C11.3393 13.0276 11.331 13.0545 11.324 13.073C11.3186 13.0882 11.3116 13.1099 11.3033 13.136C11.2316 13.3576 11.1501 13.5788 11.0109 13.6333C10.9594 13.6536 10.9056 13.6492 10.8551 13.6202C10.7881 13.5814 10.7335 13.5023 10.6825 13.3708C10.6545 13.2981 10.6307 13.2243 10.6064 13.1502C10.5769 13.0598 10.5466 12.9662 10.5091 12.8774C10.4796 12.8083 10.4061 12.7772 10.3124 12.7941C10.1178 12.8294 10.0852 13.0297 10.0578 13.3313C10.0529 13.3837 10.0482 13.4351 10.0417 13.4836C10.041 13.4979 10.0065 13.9404 9.98454 14.0812C9.92373 14.4671 9.84376 14.6191 9.711 14.6081C9.38338 14.5796 9.23302 13.1159 9.24105 12.4976C9.24725 12.0255 9.16341 11.8531 9.1132 11.8257C9.10803 11.8233 9.10001 11.8188 9.08086 11.8325C9.02159 11.8734 8.9688 12.0007 8.98511 12.1343C9.16548 13.5896 9.03246 15.2562 8.70665 15.6316C8.60391 15.7497 8.46417 15.7481 8.36686 15.6484C8.08219 15.3574 8.07029 14.1742 8.08375 12.4021C8.09151 11.4337 8.1016 10.1074 7.95021 10.0027C7.80218 10.0652 7.78769 11.1609 7.77786 11.8863C7.76647 12.7303 7.75483 13.6036 7.62 14.0482C7.57989 14.18 7.52813 14.3007 7.42435 14.291C7.27736 14.2778 7.23026 14.0419 7.12054 13.1109C7.07499 12.7242 7.02789 12.3246 6.97277 12.1699C6.96578 12.1504 6.95957 12.1349 6.95388 12.1227C6.89539 12.258 6.82759 12.6296 6.78049 12.8877C6.71528 13.244 6.65368 13.5806 6.57631 13.7274C6.51678 13.8403 6.42233 13.9873 6.2906 13.9589C6.11075 13.9204 6.05692 13.5511 6.04087 13.3344C6.04061 11.5115 5.80667 11.2993 5.75983 11.2753L5.75232 11.2811L5.74068 11.2785C5.57376 11.3528 5.5647 11.944 5.5559 12.5157C5.54943 12.9351 5.54219 13.4103 5.48215 13.855C5.40426 14.4315 5.31083 14.5438 5.19308 14.5358C4.92265 14.5171 4.91489 13.5703 4.91489 13.4625C4.91489 13.4288 4.91592 13.389 4.91695 13.345C4.92213 13.1246 4.93145 12.7147 4.79843 12.5856C4.78083 12.5685 4.75599 12.5487 4.73658 12.5542C4.64186 12.5785 4.54326 12.8919 4.51117 12.9949C4.50082 13.0274 4.49202 13.0545 4.48555 13.073C4.47986 13.088 4.47287 13.1096 4.46459 13.1357C4.39291 13.3574 4.31139 13.5788 4.17242 13.6333C4.12066 13.6536 4.06658 13.6491 4.01637 13.6202C3.94935 13.5814 3.89448 13.5023 3.84376 13.3708C3.81581 13.2981 3.79174 13.2242 3.76768 13.1502C3.73818 13.0598 3.70764 12.9662 3.67011 12.8774C3.64087 12.8083 3.56712 12.7772 3.47344 12.7941C3.24932 12.8347 3.19627 13.1178 3.15357 13.4557L3.14607 13.5158L2.97656 13.4928L2.98458 13.4338C3.02159 13.1375 3.07801 12.6897 3.44367 12.6238C3.61577 12.5927 3.76612 12.6655 3.82668 12.8088C3.86731 12.9048 3.89914 13.0018 3.92968 13.0959C3.95245 13.1668 3.97574 13.2377 4.00266 13.3078C4.05001 13.4301 4.08676 13.4617 4.10048 13.4694C4.18614 13.4422 4.27361 13.171 4.30259 13.0817C4.31165 13.0529 4.31941 13.0292 4.32562 13.0123C4.33157 12.9957 4.33934 12.9715 4.34866 12.9422C4.42578 12.6966 4.52256 12.4306 4.6944 12.3863C4.74693 12.3726 4.82819 12.3745 4.91644 12.4604C5.1038 12.6425 5.09396 13.0677 5.0875 13.3492C5.08646 13.3914 5.08543 13.4298 5.08543 13.4625C5.08543 13.9117 5.1509 14.2256 5.20085 14.3334C5.22673 14.2783 5.27098 14.145 5.31316 13.8315C5.37165 13.3972 5.37915 12.9275 5.38536 12.5131C5.39675 11.7798 5.40477 11.2482 5.66537 11.1232C5.70419 11.099 5.76863 11.0858 5.83669 11.1208C6.08875 11.25 6.21116 11.972 6.21116 13.3278C6.22694 13.5374 6.28232 13.758 6.32787 13.7896C6.32813 13.7849 6.36513 13.7617 6.42595 13.6457C6.49091 13.5226 6.5556 13.1684 6.61254 12.856C6.73857 12.1675 6.79576 11.9258 6.94482 11.9132C7.05843 11.9018 7.11096 12.0489 7.13296 12.1109C7.19507 12.2843 7.24113 12.6757 7.28978 13.0903C7.32783 13.4119 7.38191 13.8711 7.43703 14.0569C7.44298 14.0406 7.44972 14.0211 7.45696 13.9971C7.58454 13.5761 7.59619 12.7161 7.60732 11.8839C7.62284 10.7281 7.64277 10.0119 7.8498 9.86249C7.89587 9.82928 7.95202 9.82111 8.00689 9.83982C8.24937 9.92179 8.268 10.6459 8.25429 12.4037C8.24445 13.6784 8.23229 15.2649 8.48797 15.5264C8.51023 15.5493 8.52602 15.5493 8.53171 15.5493C8.54361 15.5493 8.56069 15.5377 8.57881 15.5169C8.83759 15.2188 9.00141 13.6534 8.81586 12.1562C8.79282 11.9698 8.86347 11.774 8.98407 11.6897C9.05058 11.643 9.12718 11.6369 9.19343 11.6731C9.3443 11.7548 9.41754 12.0328 9.41159 12.4999C9.40098 13.3154 9.59326 14.2699 9.71877 14.4222C9.7387 14.3885 9.77803 14.296 9.81581 14.0537C9.83703 13.9198 9.87197 13.4699 9.87249 13.4654C9.8787 13.4146 9.88336 13.3653 9.88776 13.3152C9.91364 13.0342 9.94547 12.6847 10.2824 12.6238C10.4542 12.5927 10.6046 12.6652 10.6654 12.8088C10.706 12.9048 10.7376 13.0018 10.7682 13.0959C10.7914 13.1668 10.8147 13.2377 10.8416 13.3078C10.8887 13.4301 10.9258 13.4617 10.9392 13.4694C11.0249 13.4422 11.1126 13.171 11.1413 13.0819C11.1506 13.0532 11.1584 13.0292 11.1644 13.0123C11.1706 12.996 11.1781 12.9715 11.1871 12.9422C11.2645 12.6966 11.3613 12.4306 11.5334 12.3863C11.5854 12.3726 11.6669 12.3745 11.7552 12.4604C11.9425 12.6425 11.9327 13.0677 11.9265 13.3492C11.9252 13.3914 11.9242 13.4298 11.9242 13.4625C11.9242 13.9117 11.9896 14.2256 12.0396 14.3334C12.0652 14.2783 12.1094 14.1449 12.1521 13.8315C12.2106 13.3972 12.2176 12.9275 12.2244 12.5131C12.2355 11.7798 12.2435 11.2482 12.5041 11.1232C12.5429 11.099 12.6074 11.0858 12.6757 11.1208C12.9275 11.25 13.0501 11.972 13.0501 13.3278C13.0659 13.5374 13.1213 13.758 13.1666 13.7896C13.1671 13.7849 13.2036 13.7617 13.2649 13.6457C13.3299 13.5226 13.3943 13.1684 13.4515 12.856C13.577 12.1675 13.6345 11.9258 13.7835 11.9132C13.8974 11.9018 13.9499 12.0489 13.9719 12.1109C14.0338 12.2843 14.0799 12.6757 14.129 13.0903C14.1666 13.4119 14.2206 13.8711 14.276 14.0569C14.2817 14.0406 14.2884 14.0211 14.2957 13.9971C14.4233 13.5761 14.4347 12.7161 14.446 11.8839C14.4613 10.7281 14.4815 10.0119 14.6885 9.86248C14.7349 9.82927 14.7908 9.8211 14.8456 9.83982C15.0884 9.92179 15.107 10.6459 15.093 12.4037C15.0832 13.6784 15.071 15.2649 15.3264 15.5264C15.3492 15.5493 15.3647 15.5493 15.3707 15.5493C15.3823 15.5493 15.3994 15.5377 15.4173 15.5169C15.6766 15.2188 15.8401 13.6534 15.6546 12.1562C15.6305 11.9611 15.6849 11.7645 15.784 11.6889C15.8339 11.6504 15.8947 11.6425 15.9506 11.6665C16.095 11.7292 16.1929 11.998 16.2498 12.4888C16.2736 12.6944 16.2948 12.9166 16.3153 13.1359C16.3603 13.6146 16.4214 14.2596 16.5039 14.4014C16.5293 14.3685 16.581 14.2794 16.6579 14.0406L16.8202 14.0946C16.7009 14.4639 16.6074 14.6031 16.4858 14.5888C16.2966 14.5675 16.242 14.1782 16.1455 13.1525C16.1251 12.9343 16.1041 12.7134 16.0803 12.5089C16.0078 11.8829 15.8846 11.8262 15.8834 11.8257C15.8593 11.8381 15.8034 11.9683 15.8241 12.1343C16.0039 13.5896 15.8714 15.2565 15.5454 15.6316C15.4928 15.6919 15.4338 15.7225 15.3707 15.7225Z" fill="white"/>
+</g>
+</svg>
diff --git a/static/icons/light/color/astro.svg b/static/icons/light/color/astro.svg
new file mode 100644
index 000000000..eb4ffe0b4
--- /dev/null
+++ b/static/icons/light/color/astro.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.57212 16.0036C6.72926 15.2433 6.48322 13.6458 6.83438 12.4884C7.44325 13.2181 8.2869 13.4493 9.16075 13.5797C10.5098 13.7811 11.8347 13.7058 13.0879 13.0973C13.2312 13.0277 13.3637 12.935 13.5204 12.8412C13.638 13.1779 13.6686 13.5177 13.6275 13.8636C13.5276 14.7061 13.1028 15.3569 12.427 15.8502C12.1568 16.0475 11.8709 16.2239 11.5919 16.4099C10.7345 16.9817 10.5025 17.6522 10.8247 18.6276C10.8324 18.6513 10.8392 18.6751 10.8565 18.7331C10.4188 18.5398 10.099 18.2583 9.85541 17.8882C9.59809 17.4976 9.47566 17.0655 9.46922 16.598C9.466 16.3704 9.466 16.1409 9.43499 15.9166C9.35929 15.3697 9.09914 15.1249 8.60907 15.1108C8.1061 15.0963 7.70823 15.4032 7.60272 15.8864C7.59467 15.9235 7.58299 15.9601 7.57132 16.0032L7.57212 16.0036Z" fill="#17191E"/>
+<path d="M3.33331 12.8428C3.33331 12.8428 5.63796 11.7229 7.94905 11.7229L9.69153 6.34361C9.75675 6.08346 9.94725 5.90668 10.1623 5.90668C10.3773 5.90668 10.5678 6.08346 10.633 6.34361L12.3755 11.7229C15.1127 11.7229 16.9912 12.8428 16.9912 12.8428C16.9912 12.8428 13.0766 2.20506 13.0689 2.18372C12.9566 1.86921 12.7669 1.66666 12.5112 1.66666H7.81374C7.55803 1.66666 7.37601 1.86921 7.25599 2.18372C7.24753 2.20466 3.33331 12.8428 3.33331 12.8428Z" fill="#17191E"/>
+</svg>
diff --git a/static/icons/light/color/empty.svg b/static/icons/light/color/empty.svg
new file mode 100644
index 000000000..c3c555d5f
--- /dev/null
+++ b/static/icons/light/color/empty.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8287 11.7565L17.5044 11.4945C17.5998 11.0122 17.65 10.5126 17.65 10C17.65 9.48736 17.5998 8.9878 17.5044 8.50553L18.8287 8.24354C18.9411 8.81163 19 9.39893 19 10C19 10.6011 18.9411 11.1884 18.8287 11.7565ZM17.4841 4.99946L16.3623 5.75049C15.8034 4.91566 15.0843 4.19662 14.2495 3.63772L15.0005 2.51591C15.982 3.17298 16.827 4.018 17.4841 4.99946ZM11.7565 1.17131L11.4945 2.49564C11.0122 2.40023 10.5126 2.35 10 2.35C9.48736 2.35 8.9878 2.40023 8.50553 2.49564L8.24354 1.17131C8.81163 1.05892 9.39893 1 10 1C10.6011 1 11.1884 1.05892 11.7565 1.17131ZM4.99946 2.51591L5.75049 3.63772C4.91566 4.19662 4.19662 4.91567 3.63772 5.75049L2.51591 4.99946C3.17298 4.018 4.018 3.17298 4.99946 2.51591ZM1.17131 8.24354C1.05892 8.81163 1 9.39893 1 10C1 10.6011 1.05892 11.1884 1.17131 11.7565L2.49564 11.4945C2.40023 11.0122 2.35 10.5126 2.35 10C2.35 9.48736 2.40023 8.9878 2.49564 8.50554L1.17131 8.24354ZM2.51591 15.0005L3.63772 14.2495C4.19662 15.0843 4.91567 15.8034 5.75049 16.3623L4.99946 17.4841C4.018 16.827 3.17298 15.982 2.51591 15.0005ZM8.24354 18.8287L8.50554 17.5044C8.9878 17.5998 9.48736 17.65 10 17.65C10.5126 17.65 11.0122 17.5998 11.4945 17.5044L11.7565 18.8287C11.1884 18.9411 10.6011 19 10 19C9.39893 19 8.81163 18.9411 8.24354 18.8287ZM15.0005 17.4841C15.982 16.827 16.827 15.982 17.4841 15.0005L16.3623 14.2495C15.8034 15.0843 15.0843 15.8034 14.2495 16.3623L15.0005 17.4841Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/light/color/lynx.svg b/static/icons/light/color/lynx.svg
new file mode 100644
index 000000000..e22aa3374
--- /dev/null
+++ b/static/icons/light/color/lynx.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87827 5.24328L3.76157 6.77958C3.53153 6.94653 3.37226 7.19742 3.31632 7.48095L3.10937 8.52978C3.0984 8.58537 3.07407 8.6373 3.03858 8.68076L2.07808 10.0075C1.94876 10.166 1.95188 10.5872 2.30609 10.8569C2.44191 10.9816 2.62351 11.2613 2.83008 11.5794C3.26743 12.2529 3.81668 13.0987 4.2803 13.0108C4.93636 12.768 5.73945 12.6903 6.35603 13.0108C7.55462 14.1011 7.26033 15.1064 6.83841 16.5477C6.66863 17.1277 6.47818 17.7782 6.35603 18.5333C6.93172 16.3256 8.22625 13.7616 10.5605 12.8915C10.1399 12.5295 9.28165 12.1932 8.52215 12.1123C8.52215 12.1123 10.8554 10.0075 13.7333 9.04033C11.7243 4.00356 8.40813 1.59656 8.40813 1.59656C8.23915 1.37634 7.8979 1.44858 7.82749 1.71948C7.77092 2.51574 7.67714 3.05719 7.52234 3.56757L6.35603 2.14952C6.2342 1.99476 5.99063 2.08412 5.99185 2.28313C6.18933 3.43983 6.16161 4.0891 5.87827 5.24328ZM6.69926 5.13755L6.70622 5.13708C6.72146 5.13605 6.73646 5.13396 6.75111 5.13088L6.69926 5.13755ZM8.27722 2.54048C9.07652 3.99567 9.4386 4.82238 9.56141 6.36521C8.7112 5.85632 8.34073 5.72682 7.7155 5.73003C8.08024 4.56144 8.19166 3.85776 8.27722 2.54048Z" fill="#111113"/>
+<path d="M13.748 13.1738C10.012 13.9851 7.88982 15.2068 6.26672 18.5333C9.18031 13.8944 18.0001 14.7241 18.0001 14.7241C17.8353 13.9663 16.0817 12.5213 14.9284 11.635C14.9284 11.635 15.8588 10.5495 17.9158 10C17.9158 10 13.961 10.2175 11.6588 11.3971C12.4046 11.7707 13.36 12.4011 13.748 13.1738Z" fill="url(#paint0_linear_8754_789)"/>
+<defs>
+<linearGradient id="paint0_linear_8754_789" x1="18" y1="10" x2="6.5" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78E6E5"/>
+<stop offset="0.100938" stop-color="#78D9EA"/>
+<stop offset="0.227353" stop-color="#7AC9F0"/>
+<stop offset="0.369246" stop-color="#85BADB"/>
+<stop offset="0.475618" stop-color="#B5928C"/>
+<stop offset="0.622562" stop-color="#E97452"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/mongo-db.svg b/static/icons/light/color/mongo-db.svg
new file mode 100644
index 000000000..4209b312e
--- /dev/null
+++ b/static/icons/light/color/mongo-db.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6599_2863)">
+<path d="M11.4882 2.99962C10.7691 2.10624 10.1499 1.19891 10.0234 1.01047C10.0101 0.99651 9.9901 0.99651 9.97679 1.01047C9.85028 1.19891 9.23107 2.10624 8.51199 2.99962C2.33987 11.2423 9.48409 16.805 9.48409 16.805L9.54401 16.8469C9.59727 17.7054 9.73043 18.9407 9.73043 18.9407H9.99676H10.2631C10.2631 18.9407 10.3963 17.7123 10.4495 16.8469L10.5094 16.798C10.5161 16.798 17.6603 11.2423 11.4882 2.99962ZM9.99676 16.6794C9.99676 16.6794 9.67717 16.3932 9.59061 16.2466V16.2327L9.97679 7.2571C9.97679 7.22918 10.0167 7.22918 10.0167 7.2571L10.4029 16.2327V16.2466C10.3164 16.3932 9.99676 16.6794 9.99676 16.6794Z" fill="#00ED64"/>
+</g>
+<defs>
+<clipPath id="clip0_6599_2863">
+<rect width="8" height="18" fill="white" transform="translate(6 1)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/light/color/neo4j.svg b/static/icons/light/color/neo4j.svg
new file mode 100644
index 000000000..7c376119b
--- /dev/null
+++ b/static/icons/light/color/neo4j.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.19919 9.02885C3.33442 8.79432 3.52458 8.6105 3.74362 8.48443C3.97815 8.34921 4.23451 8.28511 4.48735 8.28511C4.75851 8.28511 5.01206 8.35766 5.23109 8.48443C5.46562 8.61966 5.64945 8.80982 5.77552 9.02885C5.86074 9.17605 5.91708 9.3317 5.94807 9.48946C6.22134 10.822 7.18129 11.3735 8.47298 10.9396C8.62933 10.8868 8.78991 10.8607 8.94979 10.8614C9.22094 10.8614 9.47449 10.934 9.69353 11.0608C9.92806 11.196 10.1119 11.3861 10.2379 11.6052C10.3732 11.8397 10.4373 12.0961 10.4373 12.3489C10.4373 12.6201 10.3647 12.8736 10.2379 13.0927C10.1027 13.3272 9.91256 13.511 9.69353 13.6371C9.45899 13.7723 9.20263 13.8364 8.94979 13.8364C8.78357 13.8364 8.6244 13.8089 8.47509 13.7589C7.17989 13.323 6.21852 13.8765 5.94666 15.2133C5.94666 15.2133 5.94666 15.2126 5.94666 15.2119C5.91497 15.3753 5.85581 15.5288 5.77552 15.6683C5.64029 15.9028 5.45013 16.0866 5.23109 16.2127C4.99656 16.3479 4.7402 16.412 4.48735 16.412C4.2162 16.412 3.96265 16.3395 3.74362 16.2127C3.50909 16.0775 3.32526 15.8873 3.19919 15.6683C3.06397 15.4337 2.99988 15.1774 2.99988 14.9245C2.99988 14.6534 3.07242 14.3998 3.19919 14.1808C3.33442 13.9463 3.52458 13.7624 3.74362 13.6364C3.97815 13.5011 4.23451 13.4371 4.48735 13.4371C4.6585 13.4371 4.8226 13.4659 4.97614 13.5195C5.83749 13.8054 6.55024 13.6519 7.00874 13.1194C7.39399 12.6729 7.39329 12.0228 7.00804 11.5763C6.54813 11.0431 5.83256 10.8903 4.96769 11.1798C4.81063 11.2333 4.64793 11.2601 4.48735 11.2594C4.2162 11.2594 3.96265 11.1868 3.74362 11.06C3.50909 10.9248 3.32526 10.7347 3.19919 10.5156C3.06397 10.2811 2.99988 10.0247 2.99988 9.77189C2.99988 9.50214 3.07242 9.24789 3.19919 9.02885Z" fill="#00547F"/>
+<path d="M16.9999 8.16955V12.8968H15.2659V8.16955C15.2659 6.19822 14.1891 5.1946 12.5459 5.1946C10.9028 5.1946 9.82663 6.19822 9.82663 8.16955V10.2986C9.55759 10.1831 9.26179 10.1183 8.95049 10.1183C8.66172 10.1183 8.37085 10.1747 8.09265 10.2902V8.18787C8.09265 5.15798 9.88157 3.5881 12.5466 3.5881C15.211 3.5881 17.0182 5.12135 16.9999 8.16955Z" fill="#19191C"/>
+</svg>
diff --git a/static/icons/light/color/neon.svg b/static/icons/light/color/neon.svg
new file mode 100644
index 000000000..2760a8b47
--- /dev/null
+++ b/static/icons/light/color/neon.svg
@@ -0,0 +1,16 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#00E0D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="url(#paint0_linear_6599_2865)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="url(#paint1_linear_6599_2865)" fill-opacity="0.4"/>
+<path d="M13.9311 3.99987C14.4799 3.99987 15.0062 4.21786 15.3942 4.60588C15.7822 4.99389 16.0002 5.52016 16.0002 6.0689V12.7556C16.0002 13.9376 14.5042 14.4507 13.7788 13.5176L11.5105 10.5996V14.138C11.5105 14.6318 11.3143 15.1054 10.9651 15.4546C10.6159 15.8038 10.1423 16 9.64844 16C9.67557 16 9.70247 15.9947 9.72754 15.9843C9.75261 15.9739 9.77537 15.9587 9.79457 15.9395C9.81377 15.9203 9.82901 15.8975 9.83937 15.8724C9.84977 15.8473 9.85511 15.8205 9.85511 15.7933V9.39326C9.85511 8.21092 11.3511 7.69791 12.0768 8.63126L14.3452 11.549V4.41355C14.3452 4.18521 14.1598 3.99987 13.9311 3.99987Z" fill="#63F655"/>
+<defs>
+<linearGradient id="paint0_linear_6599_2865" x1="16.0001" y1="16.0001" x2="5.44835" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#62F755"/>
+<stop offset="1" stop-color="#8FF986" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6599_2865" x1="16.0001" y1="16.0001" x2="8.87238" y2="13.2278" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.9"/>
+<stop offset="1" stop-color="#1A1A1A" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/nextjs.svg b/static/icons/light/color/nextjs.svg
new file mode 100644
index 000000000..ab548fda0
--- /dev/null
+++ b/static/icons/light/color/nextjs.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.45424 1.67114C9.4184 1.6744 9.30435 1.6858 9.20171 1.69395C6.83449 1.90734 4.61716 3.18444 3.21279 5.14733C2.43078 6.23873 1.93062 7.47674 1.74163 8.78805C1.67483 9.24579 1.66669 9.38099 1.66669 10.0016C1.66669 10.6223 1.67483 10.7575 1.74163 11.2152C2.19455 14.3444 4.42166 16.9736 7.44218 17.9477C7.98308 18.122 8.55329 18.2409 9.20171 18.3126C9.45424 18.3402 10.5458 18.3402 10.7983 18.3126C11.9176 18.1888 12.8658 17.9118 13.8009 17.4345C13.9443 17.3612 13.972 17.3417 13.9524 17.3254C13.9394 17.3156 13.3285 16.4963 12.5953 15.5059L11.2626 13.7059L9.59272 11.2347C8.67386 9.87619 7.91791 8.76524 7.91139 8.76524C7.90488 8.76361 7.89836 9.86153 7.8951 11.2022C7.89021 13.5495 7.88858 13.644 7.85926 13.6994C7.8169 13.7792 7.78431 13.8117 7.71589 13.8476C7.66375 13.8736 7.61814 13.8785 7.37213 13.8785H7.09028L7.01533 13.8313C6.96646 13.8003 6.93062 13.7596 6.90618 13.7124L6.87197 13.6391L6.87522 10.373L6.88011 7.10534L6.93062 7.04181C6.95668 7.0076 7.01208 6.96362 7.05118 6.94244C7.11797 6.90986 7.14404 6.90661 7.42589 6.90661C7.75825 6.90661 7.81364 6.91964 7.89999 7.01412C7.92443 7.04018 8.82863 8.40199 9.91041 10.0423C10.9922 11.6827 12.4715 13.9225 13.1981 15.0221L14.5178 17.0208L14.5846 16.9768C15.176 16.5924 15.8016 16.045 16.2969 15.4749C17.3509 14.2646 18.0303 12.7888 18.2584 11.2152C18.3252 10.7575 18.3334 10.6223 18.3334 10.0016C18.3334 9.38099 18.3252 9.24579 18.2584 8.78805C17.8055 5.65883 15.5784 3.02969 12.5579 2.05558C12.0251 1.88291 11.4581 1.76399 10.8228 1.69232C10.6664 1.67603 9.58946 1.65811 9.45424 1.67114ZM12.8658 6.71113C12.944 6.75023 13.0075 6.82516 13.0303 6.90335C13.0434 6.9457 13.0466 7.8514 13.0434 9.89248L13.0385 12.8213L12.522 12.0297L12.0039 11.238V9.10895C12.0039 7.73249 12.0104 6.95873 12.0202 6.92127C12.0463 6.83004 12.1033 6.75837 12.1815 6.71602C12.2483 6.68181 12.2727 6.67855 12.5285 6.67855C12.7697 6.67855 12.812 6.68181 12.8658 6.71113Z" fill="black"/>
+</svg>
diff --git a/static/icons/light/color/nuxt.svg b/static/icons/light/color/nuxt.svg
new file mode 100644
index 000000000..0d278fbaf
--- /dev/null
+++ b/static/icons/light/color/nuxt.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0168 15.8333H17.2125C17.4093 15.8333 17.6026 15.7794 17.7731 15.677C17.9435 15.5746 18.085 15.4273 18.1834 15.25C18.2817 15.0726 18.3334 14.8714 18.3334 14.6666C18.3333 14.4618 18.2814 14.2607 18.1829 14.0834L14.022 6.58339C13.9237 6.40605 13.7822 6.25878 13.6118 6.15639C13.4414 6.05401 13.2481 6.00009 13.0514 6.00009C12.8546 6.00009 12.6613 6.05401 12.491 6.15639C12.3206 6.25878 12.1791 6.40605 12.0808 6.58339L11.0168 8.50236L8.93671 4.74985C8.83828 4.57254 8.69674 4.42529 8.52632 4.32291C8.35587 4.22056 8.16256 4.16666 7.96578 4.16666C7.769 4.16666 7.57569 4.22056 7.40526 4.32291C7.23482 4.42529 7.09328 4.57254 6.99485 4.74985L1.81718 14.0834C1.71868 14.2607 1.66677 14.4618 1.66669 14.6666C1.6666 14.8714 1.71834 15.0726 1.81669 15.25C1.91504 15.4273 2.05654 15.5746 2.22696 15.677C2.39738 15.7794 2.59071 15.8333 2.7875 15.8333H6.67665C8.21758 15.8333 9.35395 15.1289 10.1359 13.7547L12.0343 10.3334L13.0511 8.50236L16.1027 14.0023H12.0343L11.0168 15.8333ZM6.61324 14.0004L3.89911 13.9998L7.96759 6.66694L9.99761 10.3334L8.63843 12.7839C8.11915 13.6756 7.52922 14.0004 6.61324 14.0004Z" fill="#00DC82"/>
+</svg>
diff --git a/static/icons/light/color/redis.svg b/static/icons/light/color/redis.svg
new file mode 100644
index 000000000..6a5a203f4
--- /dev/null
+++ b/static/icons/light/color/redis.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2479 10.6207C15.2795 11.7541 14.2336 13.0495 12.1419 13.0495C10.2734 13.0495 9.57733 11.5186 9.5284 10.275C9.93776 11.0791 10.7381 11.7303 11.9869 11.7002C14.3886 11.6282 16.0349 9.61319 16.0349 7.77811C16.0349 5.58321 14.2724 4 11.2122 4C9.02355 4 6.31199 4.77361 4.5301 5.997C4.51073 7.25637 5.2661 8.89355 5.53725 8.71364C7.08203 7.68194 8.30698 7.0178 9.49509 6.68479C7.73635 8.50655 3.51665 12.7366 3 13.4813C3.05811 14.1649 3.96842 16 4.41389 16C4.54947 16 4.66568 15.928 4.80126 15.8021C6.0734 14.4744 7.11044 13.284 8.03286 12.1366C8.16238 13.8182 9.05261 15.8741 11.5414 15.8741C13.7688 15.8741 15.9768 14.3808 16.9839 11.0165C17.1002 10.6027 16.5578 10.2789 16.2479 10.6207ZM13.7107 7.90405C13.7107 8.96552 12.5873 9.48726 11.5608 9.48726C11.0121 9.48726 10.5906 9.35342 10.2572 9.17951C10.8706 8.3168 11.4778 7.43217 12.1301 6.48517C13.2803 6.666 13.7107 7.25988 13.7107 7.90405Z" fill="#FF4438"/>
+</svg>
diff --git a/static/icons/light/color/remix.svg b/static/icons/light/color/remix.svg
new file mode 100644
index 000000000..253f87fd3
--- /dev/null
+++ b/static/icons/light/color/remix.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mode=color, Icon=remix">
+<path id="Vector" d="M10.5876 3C13.8692 3 15.5 4.71409 15.5 7.45218C15.5 9.50017 14.3524 10.8358 12.8022 11.0584C14.1108 11.3478 14.8758 12.1715 15.0168 13.7965L15.0372 14.0953L15.055 14.3747L15.0704 14.636L15.0811 14.8331L15.0926 15.0656L15.0985 15.1983L15.107 15.4091L15.1138 15.6082L15.1172 15.7226L15.1218 15.906L15.1258 16.1156L15.1272 16.2169L15.1298 16.5105L15.1306 16.8168L15.1307 17H11.7465L11.7467 16.9236L11.7479 16.7752L11.7499 16.6307L11.7558 16.2806L11.7572 16.1633L11.7584 15.9792L11.7582 15.8615L11.7573 15.7381L11.7559 15.6413L11.7531 15.5057L11.7491 15.3618L11.7437 15.2089L11.7368 15.046L11.7327 14.9605L11.7258 14.827L11.7178 14.6866L11.7055 14.4883L11.6949 14.3307C11.6918 14.2821 11.6883 14.2347 11.6843 14.1883L11.6756 14.0972C11.5639 13.0207 11.1748 12.5807 10.5084 12.434L10.4523 12.4224C10.4144 12.4152 10.3757 12.4088 10.3361 12.4032L10.2761 12.3955C10.2659 12.3943 10.2558 12.3931 10.2456 12.392L10.1836 12.3861L10.1204 12.3812L10.0559 12.3774L9.99079 12.3746L9.92444 12.3728L9.85685 12.3719L4.5 12.3718V9.45568H9.98364C10.0733 9.45568 10.1602 9.45381 10.2443 9.45L10.3275 9.44555L10.4088 9.43978L10.4883 9.43269C10.5014 9.43139 10.5145 9.43004 10.5274 9.42864L10.6041 9.41952C10.6546 9.41299 10.7039 9.40555 10.752 9.39717L10.8232 9.3839C11.713 9.20685 12.1579 8.68846 12.1579 7.67686C12.1579 6.54159 11.4332 5.85355 9.98364 5.85355H4.5V3H10.5876ZM8.07828 14.8261C8.52228 14.8261 8.70805 15.0966 8.77423 15.3556L8.78296 15.3928L8.79013 15.4297L8.79479 15.4588L8.79679 15.4732L8.80013 15.5017L8.80264 15.5295L8.80361 15.5432L8.80497 15.57L8.80539 15.5831L8.80572 15.6086V17H4.5V14.8261H8.07828Z" fill="#19191C"/>
+</g>
+</svg>
diff --git a/static/icons/light/color/svelte.svg b/static/icons/light/color/svelte.svg
new file mode 100644
index 000000000..7b0a9e1cd
--- /dev/null
+++ b/static/icons/light/color/svelte.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8135 3.87146C14.332 1.65445 11.3827 1.00489 9.26251 2.40287L5.52492 4.88817C4.50558 5.55186 3.79883 6.63918 3.59496 7.86771C3.41828 8.89855 3.56778 9.95763 4.04348 10.8755C3.71729 11.3839 3.49983 11.9487 3.40469 12.5418C3.18723 13.7985 3.47264 15.0977 4.17939 16.1285C5.67442 18.3455 8.61013 18.9951 10.7304 17.5971L14.468 15.1259C15.4873 14.4622 16.194 13.3749 16.3979 12.1464C16.5746 11.1156 16.4251 10.0565 15.9494 9.13861C16.2756 8.63025 16.493 8.06541 16.5882 7.47232C16.8192 6.20143 16.5338 4.90229 15.8135 3.87146Z" fill="#FF3E00"/>
+<path d="M8.85238 16.5709C7.5914 16.8861 6.27376 16.4064 5.53701 15.3784C5.08363 14.7753 4.91361 14.0215 5.04113 13.2813C5.06946 13.158 5.0978 13.0483 5.12614 12.9249L5.19698 12.7056L5.39533 12.8427C5.86288 13.1717 6.37294 13.4184 6.9255 13.5829L7.06718 13.624L7.05301 13.761C7.03884 13.9529 7.09552 14.1585 7.20886 14.323C7.43555 14.6383 7.83226 14.789 8.21481 14.6931C8.29982 14.6657 8.38482 14.6383 8.45567 14.5971L12.3378 12.1985C12.5361 12.0751 12.6636 11.897 12.7061 11.6777C12.7486 11.4584 12.692 11.2253 12.5644 11.0472C12.3378 10.7319 11.941 10.5948 11.5585 10.6908C11.4735 10.7182 11.3885 10.7456 11.3176 10.7867L9.82998 11.7051C9.58912 11.8558 9.31993 11.9655 9.03656 12.034C7.77559 12.3493 6.45795 11.8695 5.7212 10.8416C5.28199 10.2385 5.0978 9.48461 5.23948 8.74446C5.367 8.03172 5.82038 7.38752 6.45795 7.00374L10.3542 4.6051C10.5951 4.45433 10.8643 4.34467 11.1476 4.26243C12.4086 3.94718 13.7262 4.42691 14.463 5.4549C14.9164 6.05799 15.0864 6.81184 14.9589 7.552C14.9305 7.67535 14.9022 7.78501 14.8597 7.90837L14.7889 8.12767L14.5905 7.9906C14.1229 7.66165 13.6129 7.41493 13.0603 7.25045L12.9187 7.20933L12.9328 7.07227C12.947 6.88038 12.8903 6.67478 12.777 6.5103C12.5503 6.19505 12.1536 6.05799 11.771 6.15393C11.686 6.18134 11.601 6.20876 11.5302 6.24988L7.64808 8.64852C7.44972 8.77187 7.32221 8.95006 7.2797 9.16936C7.2372 9.38867 7.29387 9.62168 7.42139 9.79986C7.64808 10.1151 8.04479 10.2522 8.42733 10.1562C8.51234 10.1288 8.59735 10.1014 8.66819 10.0603L10.1558 9.14195C10.3967 8.99118 10.6659 8.88153 10.9493 8.79929C12.2102 8.48404 13.5279 8.96377 14.2646 9.99175C14.718 10.5948 14.888 11.3487 14.7605 12.0889C14.633 12.8016 14.1796 13.4458 13.5421 13.8296L9.64579 16.2282C9.40494 16.379 9.13574 16.4886 8.85238 16.5709Z" fill="white"/>
+</svg>
diff --git a/static/icons/light/color/upstash.svg b/static/icons/light/color/upstash.svg
new file mode 100644
index 000000000..8da3831e4
--- /dev/null
+++ b/static/icons/light/color/upstash.svg
@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_6599_2861" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="1" width="12" height="18">
+<path d="M4 1.9546H15.9999V18.0454H4V1.9546Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6599_2861)">
+<path d="M4.01428 16.0333C6.66191 18.6959 10.9545 18.6959 13.6021 16.0333C16.2497 13.3707 16.2497 9.05355 13.6021 6.39093L12.4036 7.59624C14.3893 9.59328 14.3893 12.8309 12.4036 14.828C10.4179 16.8249 7.19849 16.8249 5.21278 14.828L4.01428 16.0333Z" fill="#00E9A3"/>
+<path d="M6.41127 13.6226C7.73508 14.9539 9.8813 14.9539 11.2051 13.6226C12.5289 12.2913 12.5289 10.1328 11.2051 8.8015L10.0068 10.0068C10.6687 10.6724 10.6687 11.7517 10.0068 12.4173C9.84982 12.5755 9.66312 12.7011 9.45742 12.7867C9.25172 12.8724 9.03109 12.9166 8.80826 12.9166C8.58543 12.9166 8.3648 12.8724 8.1591 12.7867C7.9534 12.7011 7.7667 12.5755 7.60976 12.4173L6.41127 13.6226Z" fill="#00E9A3"/>
+<path d="M15.9992 3.98039C13.3516 1.31776 9.059 1.31776 6.41138 3.98039C3.76375 6.64315 3.76375 10.9601 6.41138 13.6227L7.60974 12.4174C5.62415 10.4204 5.62415 7.18273 7.60974 5.1857C9.59545 3.1888 12.815 3.1888 14.8007 5.1857L15.9992 3.98039Z" fill="#00E9A3"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72226 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34116 9.34475 8.26198 10.0068 7.59626C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09708 11.2052 7.09708C11.428 7.09708 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59626L13.6021 6.39094Z" fill="#00E9A3"/>
+<path d="M15.9991 3.98039C13.3515 1.31776 9.05876 1.31776 6.41113 3.98039C3.76351 6.64315 3.76351 10.9601 6.41113 13.6227L7.60976 12.4174C5.62391 10.4204 5.62391 7.18273 7.60976 5.1857C9.59535 3.1888 12.8147 3.1888 14.8005 5.1857L15.9991 3.98039Z" fill="white" fill-opacity="0.8"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72226 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34116 9.34475 8.26198 10.0068 7.59626C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09708 11.2052 7.09708C11.428 7.09708 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59626L13.6021 6.39094Z" fill="white" fill-opacity="0.8"/>
+</g>
+</svg>
diff --git a/static/icons/light/color/vite.svg b/static/icons/light/color/vite.svg
new file mode 100644
index 000000000..37c9e66b9
--- /dev/null
+++ b/static/icons/light/color/vite.svg
@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9471 4.59883L10.4311 17.7947C10.2759 18.0671 9.87719 18.0687 9.71968 17.7976L2.05465 4.6001C1.88306 4.30465 2.14037 3.94678 2.48137 4.00662L10.0054 5.32708C10.0534 5.3355 10.1026 5.33542 10.1505 5.32683L17.5173 4.00851C17.8571 3.94769 18.1156 4.3028 17.9471 4.59883Z" fill="url(#paint0_linear_8486_3242)"/>
+<path d="M13.6179 2.00383L7.55298 3.06314C7.4533 3.08055 7.37949 3.15585 7.37348 3.24622L7.0004 8.86276C6.99163 8.99505 7.12792 9.09772 7.27277 9.06795L8.96133 8.72058C9.11932 8.68811 9.26207 8.81214 9.2296 8.95376L8.72793 11.1435C8.69417 11.2909 8.8494 11.4169 9.01086 11.3732L10.0538 11.0907C10.2155 11.047 10.3708 11.1734 10.3366 11.3209L9.53938 14.7605C9.4895 14.9756 9.81055 15.0929 9.94444 14.9085L10.0339 14.7853L14.9759 5.9939C15.0587 5.8467 14.916 5.67885 14.7346 5.71005L12.9965 6.00906C12.8332 6.03713 12.6942 5.90155 12.7403 5.7591L13.8747 2.25366C13.9209 2.11098 13.7814 1.97528 13.6179 2.00383Z" fill="url(#paint1_linear_8486_3242)"/>
+<defs>
+<linearGradient id="paint0_linear_8486_3242" x1="1.8675" y1="3.53502" x2="11.0007" y2="16.168" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8486_3242" x1="9.23886" y1="2.29143" x2="10.7112" y2="13.6223" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/grayscale/empty.svg b/static/icons/light/grayscale/empty.svg
new file mode 100644
index 000000000..c3c555d5f
--- /dev/null
+++ b/static/icons/light/grayscale/empty.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8287 11.7565L17.5044 11.4945C17.5998 11.0122 17.65 10.5126 17.65 10C17.65 9.48736 17.5998 8.9878 17.5044 8.50553L18.8287 8.24354C18.9411 8.81163 19 9.39893 19 10C19 10.6011 18.9411 11.1884 18.8287 11.7565ZM17.4841 4.99946L16.3623 5.75049C15.8034 4.91566 15.0843 4.19662 14.2495 3.63772L15.0005 2.51591C15.982 3.17298 16.827 4.018 17.4841 4.99946ZM11.7565 1.17131L11.4945 2.49564C11.0122 2.40023 10.5126 2.35 10 2.35C9.48736 2.35 8.9878 2.40023 8.50553 2.49564L8.24354 1.17131C8.81163 1.05892 9.39893 1 10 1C10.6011 1 11.1884 1.05892 11.7565 1.17131ZM4.99946 2.51591L5.75049 3.63772C4.91566 4.19662 4.19662 4.91567 3.63772 5.75049L2.51591 4.99946C3.17298 4.018 4.018 3.17298 4.99946 2.51591ZM1.17131 8.24354C1.05892 8.81163 1 9.39893 1 10C1 10.6011 1.05892 11.1884 1.17131 11.7565L2.49564 11.4945C2.40023 11.0122 2.35 10.5126 2.35 10C2.35 9.48736 2.40023 8.9878 2.49564 8.50554L1.17131 8.24354ZM2.51591 15.0005L3.63772 14.2495C4.19662 15.0843 4.91567 15.8034 5.75049 16.3623L4.99946 17.4841C4.018 16.827 3.17298 15.982 2.51591 15.0005ZM8.24354 18.8287L8.50554 17.5044C8.9878 17.5998 9.48736 17.65 10 17.65C10.5126 17.65 11.0122 17.5998 11.4945 17.5044L11.7565 18.8287C11.1884 18.9411 10.6011 19 10 19C9.39893 19 8.81163 18.9411 8.24354 18.8287ZM15.0005 17.4841C15.982 16.827 16.827 15.982 17.4841 15.0005L16.3623 14.2495C15.8034 15.0843 15.0843 15.8034 14.2495 16.3623L15.0005 17.4841Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/light/grayscale/lynx.svg b/static/icons/light/grayscale/lynx.svg
new file mode 100644
index 000000000..29fcc1dc8
--- /dev/null
+++ b/static/icons/light/grayscale/lynx.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87827 5.24329L3.76157 6.77959C3.53153 6.94654 3.37226 7.19742 3.31632 7.48096L3.10937 8.52979C3.0984 8.58538 3.07407 8.63731 3.03858 8.68077L2.07808 10.0075C1.94876 10.166 1.95188 10.5872 2.30609 10.8569C2.44191 10.9816 2.62351 11.2613 2.83008 11.5794C3.26743 12.2529 3.81668 13.0987 4.2803 13.0108C4.93636 12.768 5.73945 12.6903 6.35603 13.0108C7.55462 14.1011 7.26033 15.1064 6.83841 16.5477C6.66863 17.1277 6.47818 17.7783 6.35603 18.5333C6.93172 16.3256 8.22625 13.7616 10.5605 12.8915C10.1399 12.5295 9.28165 12.1933 8.52215 12.1123C8.52215 12.1123 10.8554 10.0075 13.7333 9.04033C11.7243 4.00357 8.40813 1.59656 8.40813 1.59656C8.23915 1.37634 7.8979 1.44859 7.82749 1.71949C7.77092 2.51575 7.67714 3.0572 7.52234 3.56758L6.35603 2.14953C6.2342 1.99477 5.99063 2.08413 5.99185 2.28313C6.18933 3.43984 6.16161 4.08911 5.87827 5.24329ZM6.69926 5.13756L6.70622 5.13709C6.72146 5.13606 6.73646 5.13397 6.75111 5.13088L6.69926 5.13756ZM8.27722 2.54048C9.07652 3.99568 9.4386 4.82238 9.56141 6.36522C8.7112 5.85633 8.34073 5.72682 7.7155 5.73004C8.08024 4.56144 8.19166 3.85776 8.27722 2.54048Z" fill="#2D2D31"/>
+<path d="M13.748 13.1738C10.012 13.9851 7.88982 15.2068 6.26672 18.5333C9.18031 13.8944 18.0001 14.7241 18.0001 14.7241C17.8353 13.9663 16.0817 12.5213 14.9284 11.635C14.9284 11.635 15.8588 10.5495 17.9158 10C17.9158 10 13.961 10.2175 11.6588 11.3971C12.4046 11.7707 13.36 12.4011 13.748 13.1738Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/light/grayscale/mongo-db.svg b/static/icons/light/grayscale/mongo-db.svg
new file mode 100644
index 000000000..b238a992d
--- /dev/null
+++ b/static/icons/light/grayscale/mongo-db.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6600_315)">
+<path d="M11.4882 2.99962C10.7691 2.10624 10.1499 1.19891 10.0234 1.01047C10.0101 0.99651 9.9901 0.99651 9.97679 1.01047C9.85028 1.19891 9.23107 2.10624 8.51199 2.99962C2.33987 11.2423 9.48409 16.805 9.48409 16.805L9.54401 16.8469C9.59727 17.7054 9.73043 18.9407 9.73043 18.9407H9.99676H10.2631C10.2631 18.9407 10.3963 17.7123 10.4495 16.8469L10.5094 16.798C10.5161 16.798 17.6603 11.2423 11.4882 2.99962ZM9.99676 16.6794C9.99676 16.6794 9.67717 16.3932 9.59061 16.2466V16.2327L9.97679 7.2571C9.97679 7.22918 10.0167 7.22918 10.0167 7.2571L10.4029 16.2327V16.2466C10.3164 16.3932 9.99676 16.6794 9.99676 16.6794Z" fill="#2D2D31"/>
+</g>
+<defs>
+<clipPath id="clip0_6600_315">
+<rect width="8" height="18" fill="white" transform="translate(6 1)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/light/grayscale/neo4j.svg b/static/icons/light/grayscale/neo4j.svg
new file mode 100644
index 000000000..942f32a7f
--- /dev/null
+++ b/static/icons/light/grayscale/neo4j.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.19919 9.02883C3.33442 8.7943 3.52458 8.61048 3.74362 8.48441C3.97815 8.34919 4.23451 8.2851 4.48735 8.2851C4.75851 8.2851 5.01206 8.35764 5.23109 8.48441C5.46562 8.61964 5.64945 8.8098 5.77552 9.02883C5.86074 9.17603 5.91708 9.33168 5.94807 9.48944C6.22134 10.822 7.18129 11.3734 8.47298 10.9396C8.62933 10.8868 8.78991 10.8607 8.94979 10.8614C9.22094 10.8614 9.47449 10.934 9.69353 11.0607C9.92806 11.196 10.1119 11.3861 10.2379 11.6052C10.3732 11.8397 10.4373 12.0961 10.4373 12.3489C10.4373 12.62 10.3647 12.8736 10.2379 13.0926C10.1027 13.3272 9.91256 13.511 9.69353 13.6371C9.45899 13.7723 9.20263 13.8364 8.94979 13.8364C8.78357 13.8364 8.6244 13.8089 8.47509 13.7589C7.17989 13.3229 6.21852 13.8765 5.94666 15.2133C5.94666 15.2133 5.94666 15.2126 5.94666 15.2119C5.91497 15.3753 5.85581 15.5288 5.77552 15.6683C5.64029 15.9028 5.45013 16.0866 5.23109 16.2127C4.99656 16.3479 4.7402 16.412 4.48735 16.412C4.2162 16.412 3.96265 16.3394 3.74362 16.2127C3.50909 16.0774 3.32526 15.8873 3.19919 15.6683C3.06397 15.4337 2.99988 15.1774 2.99988 14.9245C2.99988 14.6534 3.07242 14.3998 3.19919 14.1808C3.33442 13.9462 3.52458 13.7624 3.74362 13.6364C3.97815 13.5011 4.23451 13.437 4.48735 13.437C4.6585 13.437 4.8226 13.4659 4.97614 13.5194C5.83749 13.8054 6.55024 13.6518 7.00874 13.1194C7.39399 12.6729 7.39329 12.0228 7.00804 11.5763C6.54813 11.0431 5.83256 10.8903 4.96769 11.1798C4.81063 11.2333 4.64793 11.26 4.48735 11.2593C4.2162 11.2593 3.96265 11.1868 3.74362 11.06C3.50909 10.9248 3.32526 10.7346 3.19919 10.5156C3.06397 10.2811 2.99988 10.0247 2.99988 9.77187C2.99988 9.50212 3.07242 9.24787 3.19919 9.02883Z" fill="#2D2D31"/>
+<path d="M16.9999 8.16953V12.8968H15.2659V8.16953C15.2659 6.1982 14.1891 5.19458 12.5459 5.19458C10.9028 5.19458 9.82663 6.1982 9.82663 8.16953V10.2986C9.55759 10.1831 9.26179 10.1183 8.95049 10.1183C8.66172 10.1183 8.37085 10.1747 8.09265 10.2902V8.18784C8.09265 5.15795 9.88157 3.58807 12.5466 3.58807C15.211 3.58807 17.0182 5.12133 16.9999 8.16953Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/light/grayscale/neon.svg b/static/icons/light/grayscale/neon.svg
new file mode 100644
index 000000000..a0a158f18
--- /dev/null
+++ b/static/icons/light/grayscale/neon.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#2D2D31"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#2D2D31"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.06902C4 5.52028 4.21799 4.99402 4.606 4.606C4.99402 4.21799 5.52028 4 6.06902 4H13.9311C14.4798 4 15.0061 4.21799 15.3941 4.606C15.7821 4.99402 16.0001 5.52028 16.0001 6.06902V12.7558C16.0001 13.9378 14.5041 14.4508 13.7788 13.5178L11.5104 10.5997V14.1381C11.5104 14.6319 11.3142 15.1055 10.965 15.4548C10.6158 15.804 10.1422 16.0001 9.64839 16.0001H6.06902C5.52028 16.0001 4.99402 15.7821 4.606 15.3941C4.21799 15.0061 4 14.4798 4 13.9311V6.06902ZM6.06902 5.65535C5.84035 5.65535 5.65535 5.84035 5.65535 6.06869V13.9311C5.65535 14.1598 5.84035 14.3451 6.06869 14.3451H9.71039C9.82473 14.3451 9.85506 14.2524 9.85506 14.1381V9.39339C9.85506 8.21104 11.3511 7.69804 12.0768 8.63138L14.3451 11.5491V6.06902C14.3451 5.84035 14.3664 5.65535 14.1381 5.65535H6.06902Z" fill="#2D2D31"/>
+<path d="M13.9311 3.99988C14.4799 3.99988 15.0062 4.21786 15.3942 4.60588C15.7822 4.9939 16.0002 5.52016 16.0002 6.0689V12.7556C16.0002 13.9376 14.5042 14.4507 13.7788 13.5176L11.5105 10.5996V14.138C11.5105 14.6318 11.3143 15.1054 10.9651 15.4546C10.6159 15.8038 10.1423 16 9.64844 16C9.67557 16 9.70247 15.9947 9.72754 15.9843C9.75261 15.9739 9.77537 15.9587 9.79457 15.9395C9.81377 15.9203 9.82901 15.8975 9.83937 15.8724C9.84977 15.8473 9.85511 15.8205 9.85511 15.7933V9.39327C9.85511 8.21092 11.3511 7.69792 12.0768 8.63126L14.3452 11.549V4.41355C14.3452 4.18521 14.1598 3.99988 13.9311 3.99988Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/light/grayscale/redis.svg b/static/icons/light/grayscale/redis.svg
new file mode 100644
index 000000000..8362bc644
--- /dev/null
+++ b/static/icons/light/grayscale/redis.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2479 10.6207C15.2795 11.7541 14.2336 13.0495 12.1419 13.0495C10.2734 13.0495 9.57733 11.5186 9.5284 10.275C9.93776 11.0791 10.7381 11.7303 11.9869 11.7002C14.3886 11.6282 16.0349 9.61319 16.0349 7.77811C16.0349 5.58321 14.2724 4 11.2122 4C9.02355 4 6.31199 4.77361 4.5301 5.997C4.51073 7.25637 5.2661 8.89355 5.53725 8.71364C7.08203 7.68194 8.30698 7.0178 9.49509 6.68479C7.73635 8.50655 3.51665 12.7366 3 13.4813C3.05811 14.1649 3.96842 16 4.41389 16C4.54947 16 4.66568 15.928 4.80126 15.8021C6.0734 14.4744 7.11044 13.284 8.03286 12.1366C8.16238 13.8182 9.05261 15.8741 11.5414 15.8741C13.7688 15.8741 15.9768 14.3808 16.9839 11.0165C17.1002 10.6027 16.5578 10.2789 16.2479 10.6207ZM13.7107 7.90405C13.7107 8.96552 12.5873 9.48726 11.5608 9.48726C11.0121 9.48726 10.5906 9.35342 10.2572 9.17951C10.8706 8.3168 11.4778 7.43217 12.1301 6.48517C13.2803 6.666 13.7107 7.25988 13.7107 7.90405Z" fill="#2D2D31"/>
+</svg>
diff --git a/static/icons/light/grayscale/upstash.svg b/static/icons/light/grayscale/upstash.svg
new file mode 100644
index 000000000..33d004763
--- /dev/null
+++ b/static/icons/light/grayscale/upstash.svg
@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_6600_313" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="1" width="12" height="18">
+<path d="M4 1.95459H15.9999V18.0454H4V1.95459Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6600_313)">
+<path d="M4.01428 16.0333C6.66191 18.6959 10.9545 18.6959 13.6021 16.0333C16.2497 13.3707 16.2497 9.05355 13.6021 6.39093L12.4036 7.59624C14.3893 9.59328 14.3893 12.8309 12.4036 14.828C10.4179 16.8249 7.19849 16.8249 5.21278 14.828L4.01428 16.0333Z" fill="#2D2D31"/>
+<path d="M6.41127 13.6226C7.73508 14.9539 9.8813 14.9539 11.2051 13.6226C12.5289 12.2913 12.5289 10.1328 11.2051 8.80151L10.0068 10.0068C10.6687 10.6724 10.6687 11.7517 10.0068 12.4173C9.84982 12.5755 9.66312 12.7011 9.45742 12.7868C9.25172 12.8724 9.03109 12.9166 8.80826 12.9166C8.58543 12.9166 8.3648 12.8724 8.1591 12.7868C7.9534 12.7011 7.7667 12.5755 7.60976 12.4173L6.41127 13.6226Z" fill="#2D2D31"/>
+<path d="M15.9992 3.98037C13.3516 1.31774 9.059 1.31774 6.41138 3.98037C3.76375 6.64313 3.76375 10.9601 6.41138 13.6227L7.60974 12.4174C5.62415 10.4204 5.62415 7.18271 7.60974 5.18568C9.59545 3.18878 12.815 3.18878 14.8007 5.18568L15.9992 3.98037Z" fill="#2D2D31"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72225 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34115 9.34475 8.26198 10.0068 7.59625C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09707 11.2052 7.09707C11.428 7.09707 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59625L13.6021 6.39094Z" fill="#2D2D31"/>
+<path d="M15.9991 3.98037C13.3515 1.31774 9.05876 1.31774 6.41113 3.98037C3.76351 6.64313 3.76351 10.9601 6.41113 13.6227L7.60976 12.4174C5.62391 10.4204 5.62391 7.18271 7.60976 5.18568C9.59535 3.18878 12.8147 3.18878 14.8005 5.18568L15.9991 3.98037Z" fill="#2D2D31"/>
+<path d="M13.6021 6.39094C12.2783 5.05963 10.132 5.05963 8.80817 6.39094C7.48435 7.72225 7.48435 9.88074 8.80817 11.2121L10.0068 10.0067C9.34475 9.34115 9.34475 8.26198 10.0068 7.59625C10.1637 7.43808 10.3504 7.31253 10.5561 7.22686C10.7618 7.14118 10.9824 7.09707 11.2052 7.09707C11.428 7.09707 11.6487 7.14118 11.8543 7.22686C12.06 7.31253 12.2467 7.43808 12.4036 7.59625L13.6021 6.39094Z" fill="#2D2D31"/>
+</g>
+</svg>
diff --git a/static/images/domains/empty-domain-dark.svg b/static/images/domains/empty-domain-dark.svg
new file mode 100644
index 000000000..35d9d9355
--- /dev/null
+++ b/static/images/domains/empty-domain-dark.svg
@@ -0,0 +1,153 @@
+<svg width="1080" height="184" viewBox="0 0 1080 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8117_31770)">
+<line x1="348.5" y1="21" x2="348.5" y2="175" stroke="url(#paint0_linear_8117_31770)" stroke-dasharray="2 2"/>
+<line x1="1060" y1="68.5" x2="60" y2="68.5" stroke="url(#paint1_linear_8117_31770)" stroke-dasharray="2 2"/>
+<line x1="1060" y1="131.5" x2="60" y2="131.5" stroke="url(#paint2_linear_8117_31770)" stroke-dasharray="2 2"/>
+<line x1="749.5" y1="21" x2="749.5" y2="175" stroke="url(#paint3_linear_8117_31770)" stroke-dasharray="2 2"/>
+<g filter="url(#filter0_f_8117_31770)">
+<path d="M410.235 157.993C378.333 157.893 352.471 142.71 352.471 124.08C352.471 105.45 378.333 90.4284 410.235 90.5282C442.138 90.6281 468 105.812 468 124.441C468 143.071 442.138 158.093 410.235 157.993Z" fill="url(#paint4_radial_8117_31770)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_8117_31770)">
+<path d="M493.038 189.144C404.194 188.866 332.172 149.646 332.172 101.543C332.172 53.4411 404.194 14.6718 493.038 14.9498C581.881 15.2278 653.903 54.4478 653.903 102.55C653.903 150.653 581.881 189.422 493.038 189.144Z" fill="url(#paint5_radial_8117_31770)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_8117_31770)">
+<path d="M344.854 91.6665C345.718 112.51 411.054 125.512 406.697 132.158C402.339 138.805 341.038 154.884 331.827 139.04C322.615 123.196 329.068 42.6668 333.426 36.02C337.783 29.3732 335.643 75.8224 344.854 91.6665Z" fill="url(#paint6_radial_8117_31770)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_8117_31770)">
+<path d="M343.38 161.06C319.698 146.154 318.254 106.689 340.154 72.9128C362.055 39.1368 399.007 23.8399 422.689 38.7461C446.372 53.6524 447.816 93.1172 425.915 126.893C404.015 160.669 367.063 175.966 343.38 161.06Z" fill="url(#paint7_radial_8117_31770)" fill-opacity="0.08"/>
+</g>
+<foreignObject x="340.8" y="63.8" width="415.4" height="76.4"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_8117_31770_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_d_8117_31770)" data-figma-bg-blur-radius="4">
+<path d="M347 84C347 75.1634 354.163 68 363 68H734C742.837 68 750 75.1634 750 84V116C750 124.837 742.837 132 734 132H363C354.163 132 347 124.837 347 116V84Z" fill="white" fill-opacity="0.02" shape-rendering="crispEdges"/>
+<path d="M347.5 84C347.5 75.4396 354.44 68.5 363 68.5H734C742.56 68.5 749.5 75.4396 749.5 84V116C749.5 124.56 742.56 131.5 734 131.5H363C354.44 131.5 347.5 124.56 347.5 116V84Z" stroke="white" stroke-opacity="0.04" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_d_8117_31770)">
+<mask id="path-11-inside-1_8117_31770" fill="white">
+<path d="M355 84C355 79.5817 358.582 76 363 76H734C738.418 76 742 79.5817 742 84V116C742 120.418 738.418 124 734 124H363C358.582 124 355 120.418 355 116V84Z"/>
+</mask>
+<path d="M355 84C355 79.5817 358.582 76 363 76H734C738.418 76 742 79.5817 742 84V116C742 120.418 738.418 124 734 124H363C358.582 124 355 120.418 355 116V84Z" fill="#1D1D21"/>
+<path d="M363 76.8H734V75.2H363V76.8ZM741.2 84V116H742.8V84H741.2ZM734 123.2H363V124.8H734V123.2ZM355.8 116V84H354.2V116H355.8ZM363 123.2C359.024 123.2 355.8 119.976 355.8 116H354.2C354.2 120.86 358.14 124.8 363 124.8V123.2ZM741.2 116C741.2 119.976 737.976 123.2 734 123.2V124.8C738.86 124.8 742.8 120.86 742.8 116H741.2ZM734 76.8C737.976 76.8 741.2 80.0236 741.2 84H742.8C742.8 79.1399 738.86 75.2 734 75.2V76.8ZM363 75.2C358.14 75.2 354.2 79.1399 354.2 84H355.8C355.8 80.0236 359.024 76.8 363 76.8V75.2Z" fill="#2D2D31" mask="url(#path-11-inside-1_8117_31770)"/>
+<path d="M363 76.8H734V75.2H363V76.8ZM741.2 84V116H742.8V84H741.2ZM734 123.2H363V124.8H734V123.2ZM355.8 116V84H354.2V116H355.8ZM363 123.2C359.024 123.2 355.8 119.976 355.8 116H354.2C354.2 120.86 358.14 124.8 363 124.8V123.2ZM741.2 116C741.2 119.976 737.976 123.2 734 123.2V124.8C738.86 124.8 742.8 120.86 742.8 116H741.2ZM734 76.8C737.976 76.8 741.2 80.0236 741.2 84H742.8C742.8 79.1399 738.86 75.2 734 75.2V76.8ZM363 75.2C358.14 75.2 354.2 79.1399 354.2 84H355.8C355.8 80.0236 359.024 76.8 363 76.8V75.2Z" fill="url(#paint8_linear_8117_31770)" fill-opacity="0.4" mask="url(#path-11-inside-1_8117_31770)"/>
+</g>
+<rect opacity="0.5" x="367" y="96" width="207" height="8" rx="4" fill="#2D2D31"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M715.6 92.8004C712.949 92.8004 710.8 94.9494 710.8 97.6004C710.8 100.251 712.949 102.4 715.6 102.4C718.251 102.4 720.4 100.251 720.4 97.6004C720.4 94.9494 718.251 92.8004 715.6 92.8004ZM708.4 97.6004C708.4 93.6239 711.624 90.4004 715.6 90.4004C719.577 90.4004 722.8 93.6239 722.8 97.6004C722.8 99.1554 722.307 100.595 721.469 101.772L727.249 107.552C727.718 108.02 727.718 108.78 727.249 109.249C726.78 109.718 726.02 109.718 725.552 109.249L719.772 103.469C718.595 104.307 717.155 104.8 715.6 104.8C711.624 104.8 708.4 101.577 708.4 97.6004Z" fill="#414146"/>
+<rect x="355.43" y="93" width="10" height="10" rx="2" transform="rotate(45 355.43 93)" fill="url(#paint9_linear_8117_31770)" fill-opacity="0.8"/>
+<foreignObject x="250.515" y="98.0147" width="97.9706" height="3.97062"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.74px);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="1.48531" d="M347 100H252" stroke="url(#paint10_linear_8117_31770)" stroke-dasharray="3 3"/>
+<path d="M246.5 92C246.5 88.9624 248.962 86.5 252 86.5H285C288.038 86.5 290.5 88.9624 290.5 92V107C290.5 110.038 288.038 112.5 285 112.5H252C248.962 112.5 246.5 110.038 246.5 107V92Z" fill="#2D2D31"/>
+<path d="M246.5 92C246.5 88.9624 248.962 86.5 252 86.5H285C288.038 86.5 290.5 88.9624 290.5 92V107C290.5 110.038 288.038 112.5 285 112.5H252C248.962 112.5 246.5 110.038 246.5 107V92Z" stroke="#414146"/>
+<path d="M246.5 92C246.5 88.9624 248.962 86.5 252 86.5H285C288.038 86.5 290.5 88.9624 290.5 92V107C290.5 110.038 288.038 112.5 285 112.5H252C248.962 112.5 246.5 110.038 246.5 107V92Z" stroke="url(#paint11_linear_8117_31770)" stroke-opacity="0.4"/>
+<path d="M254.425 104.08C254.18 104.08 253.969 103.992 253.793 103.816C253.618 103.64 253.53 103.43 253.53 103.185C253.53 102.939 253.618 102.729 253.793 102.553C253.969 102.378 254.18 102.29 254.425 102.29C254.67 102.29 254.881 102.378 255.056 102.553C255.232 102.729 255.32 102.939 255.32 103.185C255.32 103.347 255.278 103.496 255.195 103.632C255.116 103.768 255.008 103.877 254.872 103.96C254.74 104.04 254.591 104.08 254.425 104.08ZM260.464 104.159C259.749 104.159 259.132 103.99 258.615 103.652C258.098 103.314 257.7 102.848 257.422 102.255C257.143 101.662 257.004 100.984 257.004 100.222C257.004 99.446 257.147 98.7616 257.432 98.1683C257.72 97.5717 258.121 97.1061 258.635 96.7713C259.152 96.4332 259.755 96.2642 260.445 96.2642C260.982 96.2642 261.465 96.3636 261.896 96.5625C262.327 96.7614 262.68 97.0398 262.955 97.3977C263.23 97.7557 263.401 98.1733 263.467 98.6506H262.294C262.205 98.3026 262.006 97.9943 261.697 97.7259C261.393 97.4541 260.982 97.3182 260.464 97.3182C260.007 97.3182 259.606 97.4375 259.261 97.6761C258.92 97.9115 258.653 98.2446 258.461 98.6754C258.272 99.103 258.178 99.6051 258.178 100.182C258.178 100.772 258.27 101.286 258.456 101.723C258.645 102.161 258.91 102.5 259.251 102.742C259.596 102.984 260 103.105 260.464 103.105C260.769 103.105 261.046 103.052 261.295 102.946C261.543 102.84 261.754 102.688 261.926 102.489C262.098 102.29 262.221 102.051 262.294 101.773H263.467C263.401 102.223 263.237 102.629 262.975 102.991C262.717 103.349 262.374 103.634 261.946 103.846C261.522 104.055 261.028 104.159 260.464 104.159ZM268.222 104.159C267.532 104.159 266.928 103.995 266.407 103.667C265.89 103.339 265.486 102.88 265.194 102.29C264.906 101.7 264.762 101.01 264.762 100.222C264.762 99.4261 264.906 98.7318 265.194 98.1385C265.486 97.5452 265.89 97.0845 266.407 96.7564C266.928 96.4283 267.532 96.2642 268.222 96.2642C268.911 96.2642 269.514 96.4283 270.031 96.7564C270.552 97.0845 270.956 97.5452 271.245 98.1385C271.536 98.7318 271.682 99.4261 271.682 100.222C271.682 101.01 271.536 101.7 271.245 102.29C270.956 102.88 270.552 103.339 270.031 103.667C269.514 103.995 268.911 104.159 268.222 104.159ZM268.222 103.105C268.745 103.105 269.176 102.971 269.514 102.702C269.852 102.434 270.103 102.081 270.265 101.643C270.428 101.206 270.509 100.732 270.509 100.222C270.509 99.7112 270.428 99.2356 270.265 98.7947C270.103 98.3539 269.852 97.9976 269.514 97.7259C269.176 97.4541 268.745 97.3182 268.222 97.3182C267.698 97.3182 267.267 97.4541 266.929 97.7259C266.591 97.9976 266.341 98.3539 266.178 98.7947C266.016 99.2356 265.935 99.7112 265.935 100.222C265.935 100.732 266.016 101.206 266.178 101.643C266.341 102.081 266.591 102.434 266.929 102.702C267.267 102.971 267.698 103.105 268.222 103.105ZM273.41 104V96.3636H274.544V97.5568H274.643C274.802 97.1491 275.059 96.8326 275.414 96.6072C275.768 96.3786 276.194 96.2642 276.691 96.2642C277.195 96.2642 277.614 96.3786 277.949 96.6072C278.287 96.8326 278.551 97.1491 278.74 97.5568H278.819C279.015 97.1624 279.308 96.8492 279.699 96.6172C280.09 96.3819 280.559 96.2642 281.106 96.2642C281.789 96.2642 282.347 96.478 282.781 96.9055C283.216 97.3298 283.433 97.991 283.433 98.8892V104H282.259V98.8892C282.259 98.3258 282.105 97.9231 281.797 97.6811C281.489 97.4392 281.126 97.3182 280.708 97.3182C280.171 97.3182 279.755 97.4806 279.46 97.8054C279.165 98.1269 279.018 98.5346 279.018 99.0284V104H277.825V98.7699C277.825 98.3357 277.684 97.986 277.402 97.7209C277.12 97.4524 276.758 97.3182 276.313 97.3182C276.009 97.3182 275.723 97.3994 275.458 97.5618C275.196 97.7242 274.984 97.9496 274.822 98.2379C274.663 98.523 274.583 98.8527 274.583 99.2273V104H273.41Z" fill="#818186"/>
+<g opacity="0.4">
+<path d="M493.5 27C493.5 23.9624 495.962 21.5 499 21.5H528C531.038 21.5 533.5 23.9624 533.5 27V42C533.5 45.0376 531.038 47.5 528 47.5H499C495.962 47.5 493.5 45.0376 493.5 42V27Z" fill="#2D2D31" stroke="#414146"/>
+<path d="M501.329 39.0795C501.084 39.0795 500.874 38.9917 500.698 38.8161C500.522 38.6404 500.435 38.4299 500.435 38.1847C500.435 37.9394 500.522 37.7289 500.698 37.5533C500.874 37.3776 501.084 37.2898 501.329 37.2898C501.575 37.2898 501.785 37.3776 501.961 37.5533C502.136 37.7289 502.224 37.9394 502.224 38.1847C502.224 38.3471 502.183 38.4962 502.1 38.6321C502.02 38.768 501.913 38.8774 501.777 38.9602C501.644 39.0398 501.495 39.0795 501.329 39.0795ZM504.267 39V31.3636H505.44V39H504.267ZM504.863 30.0909C504.635 30.0909 504.437 30.013 504.272 29.8572C504.109 29.7015 504.028 29.5142 504.028 29.2955C504.028 29.0767 504.109 28.8894 504.272 28.7337C504.437 28.5779 504.635 28.5 504.863 28.5C505.092 28.5 505.288 28.5779 505.45 28.7337C505.616 28.8894 505.699 29.0767 505.699 29.2955C505.699 29.5142 505.616 29.7015 505.45 29.8572C505.288 30.013 505.092 30.0909 504.863 30.0909ZM508.699 34.4062V39H507.526V31.3636H508.66V32.5568H508.759C508.938 32.169 509.21 31.8575 509.574 31.6222C509.939 31.3835 510.41 31.2642 510.986 31.2642C511.503 31.2642 511.956 31.3703 512.343 31.5824C512.731 31.7912 513.033 32.1094 513.248 32.5369C513.464 32.9612 513.571 33.4981 513.571 34.1477V39H512.398V34.2273C512.398 33.6274 512.242 33.16 511.931 32.8253C511.619 32.4872 511.192 32.3182 510.648 32.3182C510.274 32.3182 509.939 32.3994 509.644 32.5618C509.352 32.7242 509.122 32.9612 508.953 33.2727C508.784 33.5843 508.699 33.9621 508.699 34.4062ZM519.053 31.3636V32.358H514.937V31.3636H519.053ZM516.17 39V30.3097C516.17 29.8722 516.272 29.5076 516.478 29.2159C516.683 28.9242 516.95 28.7055 517.278 28.5597C517.606 28.4138 517.953 28.3409 518.317 28.3409C518.606 28.3409 518.841 28.3641 519.023 28.4105C519.205 28.4569 519.341 28.5 519.431 28.5398L519.093 29.554C519.033 29.5341 518.95 29.5092 518.844 29.4794C518.741 29.4496 518.606 29.4347 518.437 29.4347C518.049 29.4347 517.769 29.5324 517.596 29.728C517.427 29.9235 517.343 30.2102 517.343 30.5881V39H516.17ZM523.422 39.1591C522.733 39.1591 522.128 38.995 521.608 38.6669C521.091 38.3388 520.686 37.8797 520.395 37.2898C520.106 36.6998 519.962 36.0104 519.962 35.2216C519.962 34.4261 520.106 33.7318 520.395 33.1385C520.686 32.5452 521.091 32.0845 521.608 31.7564C522.128 31.4283 522.733 31.2642 523.422 31.2642C524.112 31.2642 524.715 31.4283 525.232 31.7564C525.752 32.0845 526.157 32.5452 526.445 33.1385C526.737 33.7318 526.882 34.4261 526.882 35.2216C526.882 36.0104 526.737 36.6998 526.445 37.2898C526.157 37.8797 525.752 38.3388 525.232 38.6669C524.715 38.995 524.112 39.1591 523.422 39.1591ZM523.422 38.1051C523.946 38.1051 524.377 37.9709 524.715 37.7024C525.053 37.4339 525.303 37.081 525.466 36.6435C525.628 36.206 525.709 35.732 525.709 35.2216C525.709 34.7112 525.628 34.2356 525.466 33.7947C525.303 33.3539 525.053 32.9976 524.715 32.7259C524.377 32.4541 523.946 32.3182 523.422 32.3182C522.899 32.3182 522.468 32.4541 522.13 32.7259C521.792 32.9976 521.541 33.3539 521.379 33.7947C521.216 34.2356 521.135 34.7112 521.135 35.2216C521.135 35.732 521.216 36.206 521.379 36.6435C521.541 37.081 521.792 37.4339 522.13 37.7024C522.468 37.9709 522.899 38.1051 523.422 38.1051Z" fill="#818186"/>
+</g>
+<g opacity="0.8">
+<path d="M693.5 150C693.5 146.962 695.962 144.5 699 144.5H728C731.038 144.5 733.5 146.962 733.5 150V165C733.5 168.038 731.038 170.5 728 170.5H699C695.962 170.5 693.5 168.038 693.5 165V150Z" fill="#2D2D31" stroke="#414146"/>
+<path d="M701.394 162.08C701.148 162.08 700.938 161.992 700.762 161.816C700.587 161.64 700.499 161.43 700.499 161.185C700.499 160.939 700.587 160.729 700.762 160.553C700.938 160.378 701.148 160.29 701.394 160.29C701.639 160.29 701.849 160.378 702.025 160.553C702.201 160.729 702.288 160.939 702.288 161.185C702.288 161.347 702.247 161.496 702.164 161.632C702.085 161.768 701.977 161.877 701.841 161.96C701.708 162.04 701.559 162.08 701.394 162.08ZM707.214 162.159C706.578 162.159 706.016 161.998 705.529 161.677C705.042 161.352 704.661 160.895 704.386 160.305C704.111 159.711 703.973 159.01 703.973 158.202C703.973 157.4 704.111 156.704 704.386 156.114C704.661 155.524 705.044 155.068 705.534 154.746C706.025 154.425 706.591 154.264 707.234 154.264C707.732 154.264 708.124 154.347 708.413 154.513C708.704 154.675 708.926 154.861 709.079 155.07C709.235 155.275 709.356 155.444 709.442 155.577H709.541V151.818H710.714V162H709.581V160.827H709.442C709.356 160.966 709.233 161.142 709.074 161.354C708.915 161.562 708.688 161.75 708.393 161.915C708.098 162.078 707.705 162.159 707.214 162.159ZM707.374 161.105C707.844 161.105 708.242 160.982 708.567 160.737C708.892 160.489 709.138 160.146 709.308 159.708C709.477 159.267 709.561 158.759 709.561 158.182C709.561 157.612 709.478 157.113 709.312 156.685C709.147 156.254 708.901 155.92 708.577 155.681C708.252 155.439 707.851 155.318 707.374 155.318C706.876 155.318 706.462 155.446 706.131 155.701C705.803 155.953 705.556 156.296 705.39 156.73C705.227 157.161 705.146 157.645 705.146 158.182C705.146 158.725 705.229 159.219 705.395 159.663C705.564 160.104 705.812 160.455 706.141 160.717C706.472 160.976 706.883 161.105 707.374 161.105ZM716.165 162.159C715.429 162.159 714.794 161.997 714.261 161.672C713.731 161.344 713.321 160.886 713.033 160.3C712.748 159.71 712.605 159.024 712.605 158.241C712.605 157.459 712.748 156.77 713.033 156.173C713.321 155.573 713.722 155.106 714.236 154.771C714.753 154.433 715.356 154.264 716.046 154.264C716.443 154.264 716.836 154.33 717.224 154.463C717.612 154.596 717.965 154.811 718.283 155.109C718.601 155.404 718.855 155.795 719.044 156.283C719.232 156.77 719.327 157.37 719.327 158.082V158.58H713.441V157.565H718.134C718.134 157.134 718.048 156.75 717.875 156.412C717.706 156.074 717.464 155.807 717.149 155.612C716.838 155.416 716.47 155.318 716.046 155.318C715.578 155.318 715.174 155.434 714.833 155.666C714.495 155.895 714.234 156.193 714.052 156.561C713.87 156.929 713.779 157.323 713.779 157.744V158.42C713.779 158.997 713.878 159.486 714.077 159.887C714.279 160.285 714.559 160.588 714.917 160.797C715.275 161.002 715.691 161.105 716.165 161.105C716.473 161.105 716.752 161.062 717 160.976C717.252 160.886 717.469 160.754 717.651 160.578C717.834 160.399 717.975 160.177 718.074 159.912L719.208 160.23C719.088 160.615 718.888 160.953 718.606 161.244C718.324 161.533 717.976 161.758 717.562 161.92C717.148 162.08 716.682 162.159 716.165 162.159ZM727.061 154.364L724.237 162H723.044L720.22 154.364H721.492L723.6 160.449H723.68L725.788 154.364H727.061Z" fill="#818186"/>
+</g>
+<g opacity="0.5">
+<foreignObject x="777.9" y="59.9" width="63.2" height="59.2"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(8.05px);clip-path:url(#bgblur_2_8117_31770_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="16.1" d="M794.5 82C794.5 78.9624 796.962 76.5 800 76.5H819C822.038 76.5 824.5 78.9624 824.5 82V97C824.5 100.038 822.038 102.5 819 102.5H800C796.962 102.5 794.5 100.038 794.5 97V82Z" fill="#2D2D31" stroke="#414146"/>
+<path d="M803.959 94.0795C803.714 94.0795 803.503 93.9917 803.327 93.8161C803.152 93.6404 803.064 93.4299 803.064 93.1847C803.064 92.9394 803.152 92.7289 803.327 92.5533C803.503 92.3776 803.714 92.2898 803.959 92.2898C804.204 92.2898 804.415 92.3776 804.59 92.5533C804.766 92.7289 804.854 92.9394 804.854 93.1847C804.854 93.3471 804.812 93.4962 804.729 93.6321C804.65 93.768 804.542 93.8774 804.406 93.9602C804.274 94.0398 804.124 94.0795 803.959 94.0795ZM809.143 94.179C808.659 94.179 808.22 94.0878 807.826 93.9055C807.431 93.7199 807.118 93.4531 806.886 93.1051C806.654 92.7538 806.538 92.3295 806.538 91.8324C806.538 91.3949 806.624 91.0402 806.797 90.7685C806.969 90.4934 807.199 90.2779 807.488 90.1222C807.776 89.9664 808.094 89.8504 808.442 89.7741C808.794 89.6946 809.147 89.6316 809.501 89.5852C809.965 89.5256 810.341 89.4808 810.63 89.451C810.921 89.4179 811.134 89.3632 811.266 89.2869C811.402 89.2107 811.47 89.0781 811.47 88.8892V88.8494C811.47 88.3589 811.336 87.9777 811.067 87.706C810.802 87.4342 810.399 87.2983 809.859 87.2983C809.299 87.2983 808.86 87.4209 808.542 87.6662C808.224 87.9115 808 88.1733 807.871 88.4517L806.757 88.054C806.956 87.59 807.221 87.2287 807.552 86.9702C807.887 86.7083 808.252 86.526 808.646 86.4233C809.044 86.3172 809.435 86.2642 809.819 86.2642C810.065 86.2642 810.346 86.294 810.665 86.3537C810.986 86.41 811.296 86.5277 811.594 86.7067C811.896 86.8857 812.146 87.1558 812.345 87.517C812.544 87.8783 812.643 88.3622 812.643 88.9688V94H811.47V92.9659H811.41C811.331 93.1316 811.198 93.3089 811.013 93.4979C810.827 93.6868 810.58 93.8475 810.272 93.9801C809.964 94.1127 809.587 94.179 809.143 94.179ZM809.322 93.125C809.786 93.125 810.177 93.0339 810.496 92.8516C810.817 92.6693 811.059 92.4339 811.221 92.1456C811.387 91.8572 811.47 91.554 811.47 91.2358V90.1619C811.42 90.2216 811.311 90.2763 811.142 90.326C810.976 90.3724 810.784 90.4138 810.565 90.4503C810.35 90.4834 810.139 90.5133 809.934 90.5398C809.732 90.563 809.568 90.5829 809.442 90.5994C809.137 90.6392 808.852 90.7038 808.586 90.7933C808.325 90.8795 808.113 91.0104 807.95 91.1861C807.791 91.3584 807.711 91.5937 807.711 91.892C807.711 92.2997 807.862 92.608 808.164 92.8168C808.469 93.0223 808.855 93.125 809.322 93.125ZM814.722 94V86.3636H815.895V94H814.722ZM815.318 85.0909C815.09 85.0909 814.892 85.013 814.727 84.8572C814.564 84.7015 814.483 84.5142 814.483 84.2955C814.483 84.0767 814.564 83.8894 814.727 83.7337C814.892 83.5779 815.09 83.5 815.318 83.5C815.547 83.5 815.743 83.5779 815.905 83.7337C816.071 83.8894 816.154 84.0767 816.154 84.2955C816.154 84.5142 816.071 84.7015 815.905 84.8572C815.743 85.013 815.547 85.0909 815.318 85.0909Z" fill="#818186"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_8117_31770" x="344.971" y="83.0273" width="130.529" height="82.4658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_8117_31770"/>
+</filter>
+<filter id="filter1_f_8117_31770" x="324.672" y="7.44824" width="336.73" height="189.197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_8117_31770"/>
+</filter>
+<filter id="filter2_f_8117_31770" x="312.136" y="20.374" width="109.77" height="140.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_8117_31770"/>
+</filter>
+<filter id="filter3_f_8117_31770" x="284.629" y="-6.96191" width="196.812" height="213.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8117_31770"/>
+</filter>
+<filter id="filter4_d_8117_31770" x="340.8" y="63.8" width="415.4" height="76.4" 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="2"/>
+<feGaussianBlur stdDeviation="3.1"/>
+<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.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8117_31770"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8117_31770" result="shape"/>
+</filter>
+<clipPath id="bgblur_1_8117_31770_clip_path" transform="translate(-340.8 -63.8)"><path d="M347 84C347 75.1634 354.163 68 363 68H734C742.837 68 750 75.1634 750 84V116C750 124.837 742.837 132 734 132H363C354.163 132 347 124.837 347 116V84Z"/>
+</clipPath><filter id="filter5_d_8117_31770" x="350" y="76" width="397" height="58" 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="5"/>
+<feGaussianBlur stdDeviation="2.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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8117_31770"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8117_31770" result="shape"/>
+</filter>
+<clipPath id="bgblur_2_8117_31770_clip_path" transform="translate(-777.9 -59.9)"><path d="M794.5 82C794.5 78.9624 796.962 76.5 800 76.5H819C822.038 76.5 824.5 78.9624 824.5 82V97C824.5 100.038 822.038 102.5 819 102.5H800C796.962 102.5 794.5 100.038 794.5 97V82Z"/>
+</clipPath><linearGradient id="paint0_linear_8117_31770" x1="347.5" y1="21" x2="347.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8117_31770" x1="1060" y1="67.5" x2="60" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8117_31770" x1="1060" y1="130.5" x2="60" y2="130.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_8117_31770" x1="748.5" y1="21" x2="748.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_8117_31770" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(380.704 124.213) rotate(17.2101) scale(55.7161 30.1745)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_8117_31770" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(493.038 102.047) rotate(-179.821) scale(160.866 87.0966)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_8117_31770" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(353.921 129.79) rotate(-128.298) scale(35.2087 15.5314)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_8117_31770" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(361.06 86.1864) rotate(69.532) scale(58.1223 54.8169)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_8117_31770" x1="384.06" y1="129.63" x2="402.148" y2="73.1294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<linearGradient id="paint9_linear_8117_31770" x1="360.43" y1="93" x2="360.43" y2="103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<linearGradient id="paint10_linear_8117_31770" x1="1.1571e+11" y1="1.8897e+27" x2="1.1571e+11" y2="1.8897e+27" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD596B" stop-opacity="0.51"/>
+<stop offset="0.465" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0.31"/>
+</linearGradient>
+<linearGradient id="paint11_linear_8117_31770" x1="242.786" y1="116" x2="297.793" y2="105.387" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<clipPath id="clip0_8117_31770">
+<rect width="1080" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/images/domains/empty-domain-light.svg b/static/images/domains/empty-domain-light.svg
new file mode 100644
index 000000000..86b5e87c0
--- /dev/null
+++ b/static/images/domains/empty-domain-light.svg
@@ -0,0 +1,178 @@
+<svg width="1080" height="184" viewBox="0 0 1080 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7767_14720)">
+<line x1="348.5" y1="21" x2="348.5" y2="175" stroke="url(#paint0_linear_7767_14720)" stroke-dasharray="2 2"/>
+<line x1="1060" y1="68.5" x2="60" y2="68.5" stroke="url(#paint1_linear_7767_14720)" stroke-dasharray="2 2"/>
+<line x1="1060" y1="131.5" x2="60" y2="131.5" stroke="url(#paint2_linear_7767_14720)" stroke-dasharray="2 2"/>
+<line x1="749.5" y1="21" x2="749.5" y2="175" stroke="url(#paint3_linear_7767_14720)" stroke-dasharray="2 2"/>
+<g filter="url(#filter0_f_7767_14720)">
+<path d="M410.235 157.993C378.333 157.893 352.471 142.71 352.471 124.08C352.471 105.45 378.333 90.4284 410.235 90.5282C442.138 90.6281 468 105.812 468 124.441C468 143.071 442.138 158.093 410.235 157.993Z" fill="url(#paint4_radial_7767_14720)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_7767_14720)">
+<path d="M493.038 189.144C404.194 188.866 332.172 149.646 332.172 101.543C332.172 53.4411 404.194 14.6718 493.038 14.9498C581.881 15.2278 653.903 54.4478 653.903 102.55C653.903 150.653 581.881 189.422 493.038 189.144Z" fill="url(#paint5_radial_7767_14720)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_7767_14720)">
+<path d="M344.854 91.6665C345.718 112.51 411.054 125.512 406.697 132.158C402.339 138.805 341.038 154.884 331.827 139.04C322.615 123.196 329.068 42.6668 333.425 36.02C337.783 29.3732 335.642 75.8224 344.854 91.6665Z" fill="url(#paint6_radial_7767_14720)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_7767_14720)">
+<path d="M343.38 161.06C319.698 146.154 318.254 106.689 340.155 72.9128C362.055 39.1368 399.007 23.8399 422.69 38.7461C446.372 53.6524 447.816 93.1172 425.915 126.893C404.015 160.669 367.063 175.966 343.38 161.06Z" fill="url(#paint7_radial_7767_14720)" fill-opacity="0.08"/>
+</g>
+<foreignObject x="342.4" y="64" width="412.2" height="74.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_7767_14720_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_d_7767_14720)" data-figma-bg-blur-radius="4">
+<rect x="347" y="68" width="403" height="64" rx="16" fill="white" fill-opacity="0.4" shape-rendering="crispEdges"/>
+<rect x="347.5" y="68.5" width="402" height="63" rx="15.5" stroke="#19191C" stroke-opacity="0.03" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_d_7767_14720)">
+<mask id="path-11-inside-1_7767_14720" fill="white">
+<path d="M355 84C355 79.5817 358.582 76 363 76H734C738.418 76 742 79.5817 742 84V116C742 120.418 738.418 124 734 124H363C358.582 124 355 120.418 355 116V84Z"/>
+</mask>
+<path d="M355 84C355 79.5817 358.582 76 363 76H734C738.418 76 742 79.5817 742 84V116C742 120.418 738.418 124 734 124H363C358.582 124 355 120.418 355 116V84Z" fill="white"/>
+<path d="M363 76.8H734V75.2H363V76.8ZM741.2 84V116H742.8V84H741.2ZM734 123.2H363V124.8H734V123.2ZM355.8 116V84H354.2V116H355.8ZM363 123.2C359.024 123.2 355.8 119.976 355.8 116H354.2C354.2 120.86 358.14 124.8 363 124.8V123.2ZM741.2 116C741.2 119.976 737.976 123.2 734 123.2V124.8C738.86 124.8 742.8 120.86 742.8 116H741.2ZM734 76.8C737.976 76.8 741.2 80.0236 741.2 84H742.8C742.8 79.1399 738.86 75.2 734 75.2V76.8ZM363 75.2C358.14 75.2 354.2 79.1399 354.2 84H355.8C355.8 80.0236 359.024 76.8 363 76.8V75.2Z" fill="#EDEDF0" mask="url(#path-11-inside-1_7767_14720)"/>
+<path d="M363 76.8H734V75.2H363V76.8ZM741.2 84V116H742.8V84H741.2ZM734 123.2H363V124.8H734V123.2ZM355.8 116V84H354.2V116H355.8ZM363 123.2C359.024 123.2 355.8 119.976 355.8 116H354.2C354.2 120.86 358.14 124.8 363 124.8V123.2ZM741.2 116C741.2 119.976 737.976 123.2 734 123.2V124.8C738.86 124.8 742.8 120.86 742.8 116H741.2ZM734 76.8C737.976 76.8 741.2 80.0236 741.2 84H742.8C742.8 79.1399 738.86 75.2 734 75.2V76.8ZM363 75.2C358.14 75.2 354.2 79.1399 354.2 84H355.8C355.8 80.0236 359.024 76.8 363 76.8V75.2Z" fill="url(#paint8_linear_7767_14720)" fill-opacity="0.4" mask="url(#path-11-inside-1_7767_14720)"/>
+</g>
+<rect opacity="0.5" x="367" y="96" width="207" height="8" rx="4" fill="#EDEDF0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M715.6 92.8004C712.949 92.8004 710.8 94.9494 710.8 97.6004C710.8 100.251 712.949 102.4 715.6 102.4C718.251 102.4 720.4 100.251 720.4 97.6004C720.4 94.9494 718.251 92.8004 715.6 92.8004ZM708.4 97.6004C708.4 93.6239 711.624 90.4004 715.6 90.4004C719.577 90.4004 722.8 93.6239 722.8 97.6004C722.8 99.1554 722.307 100.595 721.469 101.772L727.249 107.552C727.718 108.02 727.718 108.78 727.249 109.249C726.78 109.718 726.02 109.718 725.552 109.249L719.772 103.469C718.595 104.307 717.155 104.8 715.6 104.8C711.624 104.8 708.4 101.577 708.4 97.6004Z" fill="#D8D8DB"/>
+<rect x="355.43" y="93" width="10" height="10" rx="2" transform="rotate(45 355.43 93)" fill="url(#paint9_linear_7767_14720)" fill-opacity="0.8"/>
+<foreignObject x="250.515" y="98.0147" width="97.9706" height="3.97062"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.74px);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="1.48531" d="M347 100H252" stroke="url(#paint10_linear_7767_14720)" stroke-dasharray="3 3"/>
+<rect x="246.5" y="86.5" width="44" height="26" rx="5.5" fill="url(#paint11_linear_7767_14720)" fill-opacity="0.1"/>
+<rect x="246.5" y="86.5" width="44" height="26" rx="5.5" fill="white"/>
+<rect x="246.5" y="86.5" width="44" height="26" rx="5.5" stroke="#EDEDF0"/>
+<rect x="246.5" y="86.5" width="44" height="26" rx="5.5" stroke="url(#paint12_linear_7767_14720)" stroke-opacity="0.4"/>
+<path d="M254.425 104.08C254.18 104.08 253.969 103.992 253.793 103.816C253.618 103.64 253.53 103.43 253.53 103.185C253.53 102.939 253.618 102.729 253.793 102.553C253.969 102.378 254.18 102.29 254.425 102.29C254.67 102.29 254.881 102.378 255.056 102.553C255.232 102.729 255.32 102.939 255.32 103.185C255.32 103.347 255.278 103.496 255.195 103.632C255.116 103.768 255.008 103.877 254.872 103.96C254.74 104.04 254.591 104.08 254.425 104.08ZM260.464 104.159C259.749 104.159 259.132 103.99 258.615 103.652C258.098 103.314 257.7 102.848 257.422 102.255C257.143 101.662 257.004 100.984 257.004 100.222C257.004 99.446 257.147 98.7616 257.432 98.1683C257.72 97.5717 258.121 97.1061 258.635 96.7713C259.152 96.4332 259.755 96.2642 260.445 96.2642C260.982 96.2642 261.465 96.3636 261.896 96.5625C262.327 96.7614 262.68 97.0398 262.955 97.3977C263.23 97.7557 263.401 98.1733 263.467 98.6506H262.294C262.205 98.3026 262.006 97.9943 261.697 97.7259C261.393 97.4541 260.982 97.3182 260.464 97.3182C260.007 97.3182 259.606 97.4375 259.261 97.6761C258.92 97.9115 258.653 98.2446 258.461 98.6754C258.272 99.103 258.178 99.6051 258.178 100.182C258.178 100.772 258.27 101.286 258.456 101.723C258.645 102.161 258.91 102.5 259.251 102.742C259.596 102.984 260 103.105 260.464 103.105C260.769 103.105 261.046 103.052 261.295 102.946C261.543 102.84 261.754 102.688 261.926 102.489C262.098 102.29 262.221 102.051 262.294 101.773H263.467C263.401 102.223 263.237 102.629 262.975 102.991C262.717 103.349 262.374 103.634 261.946 103.846C261.522 104.055 261.028 104.159 260.464 104.159ZM268.222 104.159C267.532 104.159 266.928 103.995 266.407 103.667C265.89 103.339 265.486 102.88 265.194 102.29C264.906 101.7 264.762 101.01 264.762 100.222C264.762 99.4261 264.906 98.7318 265.194 98.1385C265.486 97.5452 265.89 97.0845 266.407 96.7564C266.928 96.4283 267.532 96.2642 268.222 96.2642C268.911 96.2642 269.514 96.4283 270.031 96.7564C270.552 97.0845 270.956 97.5452 271.245 98.1385C271.536 98.7318 271.682 99.4261 271.682 100.222C271.682 101.01 271.536 101.7 271.245 102.29C270.956 102.88 270.552 103.339 270.031 103.667C269.514 103.995 268.911 104.159 268.222 104.159ZM268.222 103.105C268.745 103.105 269.176 102.971 269.514 102.702C269.852 102.434 270.103 102.081 270.265 101.643C270.428 101.206 270.509 100.732 270.509 100.222C270.509 99.7112 270.428 99.2356 270.265 98.7947C270.103 98.3539 269.852 97.9976 269.514 97.7259C269.176 97.4541 268.745 97.3182 268.222 97.3182C267.698 97.3182 267.267 97.4541 266.929 97.7259C266.591 97.9976 266.341 98.3539 266.178 98.7947C266.016 99.2356 265.935 99.7112 265.935 100.222C265.935 100.732 266.016 101.206 266.178 101.643C266.341 102.081 266.591 102.434 266.929 102.702C267.267 102.971 267.698 103.105 268.222 103.105ZM273.41 104V96.3636H274.544V97.5568H274.643C274.802 97.1491 275.059 96.8326 275.414 96.6072C275.768 96.3786 276.194 96.2642 276.691 96.2642C277.195 96.2642 277.614 96.3786 277.949 96.6072C278.287 96.8326 278.551 97.1491 278.74 97.5568H278.819C279.015 97.1624 279.308 96.8492 279.699 96.6172C280.09 96.3819 280.559 96.2642 281.106 96.2642C281.789 96.2642 282.347 96.478 282.781 96.9055C283.216 97.3298 283.433 97.991 283.433 98.8892V104H282.259V98.8892C282.259 98.3258 282.105 97.9231 281.797 97.6811C281.489 97.4392 281.126 97.3182 280.708 97.3182C280.171 97.3182 279.755 97.4806 279.46 97.8054C279.165 98.1269 279.018 98.5346 279.018 99.0284V104H277.825V98.7699C277.825 98.3357 277.684 97.986 277.402 97.7209C277.12 97.4524 276.758 97.3182 276.313 97.3182C276.009 97.3182 275.723 97.3994 275.458 97.5618C275.196 97.7242 274.984 97.9496 274.822 98.2379C274.663 98.523 274.583 98.8527 274.583 99.2273V104H273.41Z" fill="#97979B"/>
+<g opacity="0.4">
+<rect x="493.5" y="21.5" width="40" height="26" rx="5.5" fill="url(#paint13_linear_7767_14720)" fill-opacity="0.1"/>
+<rect x="493.5" y="21.5" width="40" height="26" rx="5.5" fill="white"/>
+<rect x="493.5" y="21.5" width="40" height="26" rx="5.5" stroke="#EDEDF0"/>
+<path d="M501.329 39.0795C501.084 39.0795 500.874 38.9917 500.698 38.8161C500.522 38.6404 500.435 38.4299 500.435 38.1847C500.435 37.9394 500.522 37.7289 500.698 37.5533C500.874 37.3776 501.084 37.2898 501.329 37.2898C501.575 37.2898 501.785 37.3776 501.961 37.5533C502.136 37.7289 502.224 37.9394 502.224 38.1847C502.224 38.3471 502.183 38.4962 502.1 38.6321C502.02 38.768 501.913 38.8774 501.777 38.9602C501.644 39.0398 501.495 39.0795 501.329 39.0795ZM504.267 39V31.3636H505.44V39H504.267ZM504.863 30.0909C504.635 30.0909 504.437 30.013 504.272 29.8572C504.109 29.7015 504.028 29.5142 504.028 29.2955C504.028 29.0767 504.109 28.8894 504.272 28.7337C504.437 28.5779 504.635 28.5 504.863 28.5C505.092 28.5 505.288 28.5779 505.45 28.7337C505.616 28.8894 505.699 29.0767 505.699 29.2955C505.699 29.5142 505.616 29.7015 505.45 29.8572C505.288 30.013 505.092 30.0909 504.863 30.0909ZM508.699 34.4062V39H507.526V31.3636H508.66V32.5568H508.759C508.938 32.169 509.21 31.8575 509.574 31.6222C509.939 31.3835 510.41 31.2642 510.986 31.2642C511.503 31.2642 511.956 31.3703 512.343 31.5824C512.731 31.7912 513.033 32.1094 513.248 32.5369C513.464 32.9612 513.571 33.4981 513.571 34.1477V39H512.398V34.2273C512.398 33.6274 512.242 33.16 511.931 32.8253C511.619 32.4872 511.192 32.3182 510.648 32.3182C510.274 32.3182 509.939 32.3994 509.644 32.5618C509.352 32.7242 509.122 32.9612 508.953 33.2727C508.784 33.5843 508.699 33.9621 508.699 34.4062ZM519.053 31.3636V32.358H514.937V31.3636H519.053ZM516.17 39V30.3097C516.17 29.8722 516.272 29.5076 516.478 29.2159C516.683 28.9242 516.95 28.7055 517.278 28.5597C517.606 28.4138 517.953 28.3409 518.317 28.3409C518.606 28.3409 518.841 28.3641 519.023 28.4105C519.205 28.4569 519.341 28.5 519.431 28.5398L519.093 29.554C519.033 29.5341 518.95 29.5092 518.844 29.4794C518.741 29.4496 518.606 29.4347 518.437 29.4347C518.049 29.4347 517.769 29.5324 517.596 29.728C517.427 29.9235 517.343 30.2102 517.343 30.5881V39H516.17ZM523.422 39.1591C522.733 39.1591 522.128 38.995 521.608 38.6669C521.091 38.3388 520.686 37.8797 520.395 37.2898C520.106 36.6998 519.962 36.0104 519.962 35.2216C519.962 34.4261 520.106 33.7318 520.395 33.1385C520.686 32.5452 521.091 32.0845 521.608 31.7564C522.128 31.4283 522.733 31.2642 523.422 31.2642C524.112 31.2642 524.715 31.4283 525.232 31.7564C525.752 32.0845 526.157 32.5452 526.445 33.1385C526.737 33.7318 526.882 34.4261 526.882 35.2216C526.882 36.0104 526.737 36.6998 526.445 37.2898C526.157 37.8797 525.752 38.3388 525.232 38.6669C524.715 38.995 524.112 39.1591 523.422 39.1591ZM523.422 38.1051C523.946 38.1051 524.377 37.9709 524.715 37.7024C525.053 37.4339 525.303 37.081 525.466 36.6435C525.628 36.206 525.709 35.732 525.709 35.2216C525.709 34.7112 525.628 34.2356 525.466 33.7947C525.303 33.3539 525.053 32.9976 524.715 32.7259C524.377 32.4541 523.946 32.3182 523.422 32.3182C522.899 32.3182 522.468 32.4541 522.13 32.7259C521.792 32.9976 521.541 33.3539 521.379 33.7947C521.216 34.2356 521.135 34.7112 521.135 35.2216C521.135 35.732 521.216 36.206 521.379 36.6435C521.541 37.081 521.792 37.4339 522.13 37.7024C522.468 37.9709 522.899 38.1051 523.422 38.1051Z" fill="#97979B"/>
+</g>
+<g opacity="0.8">
+<rect x="693.5" y="144.5" width="40" height="26" rx="5.5" fill="url(#paint14_linear_7767_14720)" fill-opacity="0.1"/>
+<rect x="693.5" y="144.5" width="40" height="26" rx="5.5" fill="white"/>
+<rect x="693.5" y="144.5" width="40" height="26" rx="5.5" stroke="#EDEDF0"/>
+<path d="M701.394 162.08C701.148 162.08 700.938 161.992 700.762 161.816C700.587 161.64 700.499 161.43 700.499 161.185C700.499 160.939 700.587 160.729 700.762 160.553C700.938 160.378 701.148 160.29 701.394 160.29C701.639 160.29 701.849 160.378 702.025 160.553C702.201 160.729 702.288 160.939 702.288 161.185C702.288 161.347 702.247 161.496 702.164 161.632C702.085 161.768 701.977 161.877 701.841 161.96C701.708 162.04 701.559 162.08 701.394 162.08ZM707.214 162.159C706.578 162.159 706.016 161.998 705.529 161.677C705.042 161.352 704.661 160.895 704.386 160.305C704.111 159.711 703.973 159.01 703.973 158.202C703.973 157.4 704.111 156.704 704.386 156.114C704.661 155.524 705.044 155.068 705.534 154.746C706.025 154.425 706.591 154.264 707.234 154.264C707.732 154.264 708.124 154.347 708.413 154.513C708.704 154.675 708.926 154.861 709.079 155.07C709.235 155.275 709.356 155.444 709.442 155.577H709.541V151.818H710.714V162H709.581V160.827H709.442C709.356 160.966 709.233 161.142 709.074 161.354C708.915 161.562 708.688 161.75 708.393 161.915C708.098 162.078 707.705 162.159 707.214 162.159ZM707.374 161.105C707.844 161.105 708.242 160.982 708.567 160.737C708.892 160.489 709.138 160.146 709.308 159.708C709.477 159.267 709.561 158.759 709.561 158.182C709.561 157.612 709.478 157.113 709.312 156.685C709.147 156.254 708.901 155.92 708.577 155.681C708.252 155.439 707.851 155.318 707.374 155.318C706.876 155.318 706.462 155.446 706.131 155.701C705.803 155.953 705.556 156.296 705.39 156.73C705.227 157.161 705.146 157.645 705.146 158.182C705.146 158.725 705.229 159.219 705.395 159.663C705.564 160.104 705.812 160.455 706.141 160.717C706.472 160.976 706.883 161.105 707.374 161.105ZM716.165 162.159C715.429 162.159 714.794 161.997 714.261 161.672C713.731 161.344 713.321 160.886 713.033 160.3C712.748 159.71 712.605 159.024 712.605 158.241C712.605 157.459 712.748 156.77 713.033 156.173C713.321 155.573 713.722 155.106 714.236 154.771C714.753 154.433 715.356 154.264 716.046 154.264C716.443 154.264 716.836 154.33 717.224 154.463C717.612 154.596 717.965 154.811 718.283 155.109C718.601 155.404 718.855 155.795 719.044 156.283C719.232 156.77 719.327 157.37 719.327 158.082V158.58H713.441V157.565H718.134C718.134 157.134 718.048 156.75 717.875 156.412C717.706 156.074 717.464 155.807 717.149 155.612C716.838 155.416 716.47 155.318 716.046 155.318C715.578 155.318 715.174 155.434 714.833 155.666C714.495 155.895 714.234 156.193 714.052 156.561C713.87 156.929 713.779 157.323 713.779 157.744V158.42C713.779 158.997 713.878 159.486 714.077 159.887C714.279 160.285 714.559 160.588 714.917 160.797C715.275 161.002 715.691 161.105 716.165 161.105C716.473 161.105 716.752 161.062 717 160.976C717.252 160.886 717.469 160.754 717.651 160.578C717.834 160.399 717.975 160.177 718.074 159.912L719.208 160.23C719.088 160.615 718.888 160.953 718.606 161.244C718.324 161.533 717.976 161.758 717.562 161.92C717.148 162.08 716.682 162.159 716.165 162.159ZM727.061 154.364L724.237 162H723.044L720.22 154.364H721.492L723.6 160.449H723.68L725.788 154.364H727.061Z" fill="#97979B"/>
+</g>
+<g opacity="0.5">
+<foreignObject x="778" y="60" width="63" height="59"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(8px);clip-path:url(#bgblur_2_7767_14720_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="16">
+<rect x="794.5" y="76.5" width="30" height="26" rx="5.5" fill="url(#paint15_linear_7767_14720)" fill-opacity="0.1"/>
+<rect x="794.5" y="76.5" width="30" height="26" rx="5.5" fill="white"/>
+<rect x="794.5" y="76.5" width="30" height="26" rx="5.5" stroke="#EDEDF0"/>
+</g>
+<path d="M803.959 94.0795C803.714 94.0795 803.503 93.9917 803.327 93.8161C803.152 93.6404 803.064 93.4299 803.064 93.1847C803.064 92.9394 803.152 92.7289 803.327 92.5533C803.503 92.3776 803.714 92.2898 803.959 92.2898C804.204 92.2898 804.415 92.3776 804.59 92.5533C804.766 92.7289 804.854 92.9394 804.854 93.1847C804.854 93.3471 804.812 93.4962 804.729 93.6321C804.65 93.768 804.542 93.8774 804.406 93.9602C804.274 94.0398 804.124 94.0795 803.959 94.0795ZM809.143 94.179C808.659 94.179 808.22 94.0878 807.826 93.9055C807.431 93.7199 807.118 93.4531 806.886 93.1051C806.654 92.7538 806.538 92.3295 806.538 91.8324C806.538 91.3949 806.624 91.0402 806.797 90.7685C806.969 90.4934 807.199 90.2779 807.488 90.1222C807.776 89.9664 808.094 89.8504 808.442 89.7741C808.794 89.6946 809.147 89.6316 809.501 89.5852C809.965 89.5256 810.341 89.4808 810.63 89.451C810.921 89.4179 811.134 89.3632 811.266 89.2869C811.402 89.2107 811.47 89.0781 811.47 88.8892V88.8494C811.47 88.3589 811.336 87.9777 811.067 87.706C810.802 87.4342 810.399 87.2983 809.859 87.2983C809.299 87.2983 808.86 87.4209 808.542 87.6662C808.224 87.9115 808 88.1733 807.871 88.4517L806.757 88.054C806.956 87.59 807.221 87.2287 807.552 86.9702C807.887 86.7083 808.252 86.526 808.646 86.4233C809.044 86.3172 809.435 86.2642 809.819 86.2642C810.065 86.2642 810.346 86.294 810.665 86.3537C810.986 86.41 811.296 86.5277 811.594 86.7067C811.896 86.8857 812.146 87.1558 812.345 87.517C812.544 87.8783 812.643 88.3622 812.643 88.9688V94H811.47V92.9659H811.41C811.331 93.1316 811.198 93.3089 811.013 93.4979C810.827 93.6868 810.58 93.8475 810.272 93.9801C809.964 94.1127 809.587 94.179 809.143 94.179ZM809.322 93.125C809.786 93.125 810.177 93.0339 810.496 92.8516C810.817 92.6693 811.059 92.4339 811.221 92.1456C811.387 91.8572 811.47 91.554 811.47 91.2358V90.1619C811.42 90.2216 811.311 90.2763 811.142 90.326C810.976 90.3724 810.784 90.4138 810.565 90.4503C810.35 90.4834 810.139 90.5133 809.934 90.5398C809.732 90.563 809.568 90.5829 809.442 90.5994C809.137 90.6392 808.852 90.7038 808.586 90.7933C808.325 90.8795 808.113 91.0104 807.95 91.1861C807.791 91.3584 807.711 91.5937 807.711 91.892C807.711 92.2997 807.862 92.608 808.164 92.8168C808.469 93.0223 808.855 93.125 809.322 93.125ZM814.722 94V86.3636H815.895V94H814.722ZM815.318 85.0909C815.09 85.0909 814.892 85.013 814.727 84.8572C814.564 84.7015 814.483 84.5142 814.483 84.2955C814.483 84.0767 814.564 83.8894 814.727 83.7337C814.892 83.5779 815.09 83.5 815.318 83.5C815.547 83.5 815.743 83.5779 815.905 83.7337C816.071 83.8894 816.154 84.0767 816.154 84.2955C816.154 84.5142 816.071 84.7015 815.905 84.8572C815.743 85.013 815.547 85.0909 815.318 85.0909Z" fill="#97979B"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_7767_14720" x="344.971" y="83.0273" width="130.529" height="82.4658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_7767_14720"/>
+</filter>
+<filter id="filter1_f_7767_14720" x="324.672" y="7.44824" width="336.73" height="189.197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_7767_14720"/>
+</filter>
+<filter id="filter2_f_7767_14720" x="312.135" y="20.374" width="109.77" height="140.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_7767_14720"/>
+</filter>
+<filter id="filter3_f_7767_14720" x="284.629" y="-6.96191" width="196.812" height="213.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_7767_14720"/>
+</filter>
+<filter id="filter4_d_7767_14720" x="342.4" y="64" width="412.2" height="74.6" 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="2"/>
+<feGaussianBlur stdDeviation="2.3"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7767_14720"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7767_14720" result="shape"/>
+</filter>
+<clipPath id="bgblur_1_7767_14720_clip_path" transform="translate(-342.4 -64)"><rect x="347" y="68" width="403" height="64" rx="16"/>
+</clipPath><filter id="filter5_d_7767_14720" x="350" y="76" width="397" height="58" 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="5"/>
+<feGaussianBlur stdDeviation="2.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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7767_14720"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7767_14720" result="shape"/>
+</filter>
+<clipPath id="bgblur_2_7767_14720_clip_path" transform="translate(-778 -60)"><rect x="794.5" y="76.5" width="30" height="26" rx="5.5"/>
+</clipPath><linearGradient id="paint0_linear_7767_14720" x1="347.5" y1="21" x2="347.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7767_14720" x1="1060" y1="67.5" x2="60" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7767_14720" x1="1060" y1="130.5" x2="60" y2="130.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_7767_14720" x1="748.5" y1="21" x2="748.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_7767_14720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(380.704 124.213) rotate(17.2101) scale(55.7161 30.1745)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_7767_14720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(493.038 102.047) rotate(-179.821) scale(160.866 87.0966)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_7767_14720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(353.92 129.79) rotate(-128.298) scale(35.2087 15.5314)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_7767_14720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(361.06 86.1864) rotate(69.532) scale(58.1223 54.8169)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_7767_14720" x1="384.06" y1="129.63" x2="402.148" y2="73.1294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#EDEDF0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_7767_14720" x1="360.43" y1="93" x2="360.43" y2="103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<linearGradient id="paint10_linear_7767_14720" x1="1.1571e+11" y1="1.8897e+27" x2="1.1571e+11" y2="1.8897e+27" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD596B" stop-opacity="0.51"/>
+<stop offset="0.465" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0.31"/>
+</linearGradient>
+<linearGradient id="paint11_linear_7767_14720" x1="246" y1="99.5" x2="291" y2="99.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<linearGradient id="paint12_linear_7767_14720" x1="242.786" y1="116" x2="297.793" y2="105.387" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<linearGradient id="paint13_linear_7767_14720" x1="493" y1="34.5" x2="534" y2="34.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<linearGradient id="paint14_linear_7767_14720" x1="693" y1="157.5" x2="734" y2="157.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<linearGradient id="paint15_linear_7767_14720" x1="794" y1="89.5" x2="825" y2="89.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<clipPath id="clip0_7767_14720">
+<rect width="1080" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/images/domains/empty-records-dark.svg b/static/images/domains/empty-records-dark.svg
new file mode 100644
index 000000000..84778421a
--- /dev/null
+++ b/static/images/domains/empty-records-dark.svg
@@ -0,0 +1,153 @@
+<svg width="1136" height="184" viewBox="0 0 1136 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8117_31723)">
+<line x1="372.5" y1="21" x2="372.5" y2="175" stroke="url(#paint0_linear_8117_31723)" stroke-dasharray="2 2"/>
+<line x1="1084" y1="68.5" x2="84" y2="68.5" stroke="url(#paint1_linear_8117_31723)" stroke-dasharray="2 2"/>
+<line x1="1084" y1="131.5" x2="84" y2="131.5" stroke="url(#paint2_linear_8117_31723)" stroke-dasharray="2 2"/>
+<line x1="773.5" y1="21" x2="773.5" y2="175" stroke="url(#paint3_linear_8117_31723)" stroke-dasharray="2 2"/>
+<g filter="url(#filter0_f_8117_31723)">
+<path d="M434.235 157.993C402.333 157.893 376.471 142.71 376.471 124.08C376.471 105.45 402.333 90.4284 434.235 90.5282C466.138 90.6281 492 105.812 492 124.441C492 143.071 466.138 158.093 434.235 157.993Z" fill="url(#paint4_radial_8117_31723)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_8117_31723)">
+<path d="M517.038 189.144C428.194 188.866 356.172 149.646 356.172 101.543C356.172 53.4411 428.194 14.6718 517.038 14.9498C605.881 15.2278 677.903 54.4478 677.903 102.55C677.903 150.653 605.881 189.422 517.038 189.144Z" fill="url(#paint5_radial_8117_31723)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_8117_31723)">
+<path d="M368.854 91.6665C369.718 112.51 435.054 125.512 430.697 132.158C426.339 138.805 365.038 154.884 355.827 139.04C346.615 123.196 353.068 42.6668 357.426 36.02C361.783 29.3732 359.643 75.8224 368.854 91.6665Z" fill="url(#paint6_radial_8117_31723)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_8117_31723)">
+<path d="M367.38 161.06C343.698 146.154 342.254 106.689 364.154 72.9128C386.055 39.1368 423.007 23.8399 446.689 38.7461C470.372 53.6524 471.816 93.1172 449.915 126.893C428.015 160.669 391.063 175.966 367.38 161.06Z" fill="url(#paint7_radial_8117_31723)" fill-opacity="0.08"/>
+</g>
+<foreignObject x="364.8" y="63.8" width="415.4" height="76.4"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_8117_31723_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_d_8117_31723)" data-figma-bg-blur-radius="4">
+<path d="M371 84C371 75.1634 378.163 68 387 68H758C766.837 68 774 75.1634 774 84V116C774 124.837 766.837 132 758 132H387C378.163 132 371 124.837 371 116V84Z" fill="white" fill-opacity="0.02" shape-rendering="crispEdges"/>
+<path d="M371.5 84C371.5 75.4396 378.44 68.5 387 68.5H758C766.56 68.5 773.5 75.4396 773.5 84V116C773.5 124.56 766.56 131.5 758 131.5H387C378.44 131.5 371.5 124.56 371.5 116V84Z" stroke="white" stroke-opacity="0.04" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_d_8117_31723)">
+<mask id="path-11-inside-1_8117_31723" fill="white">
+<path d="M379 84C379 79.5817 382.582 76 387 76H758C762.418 76 766 79.5817 766 84V116C766 120.418 762.418 124 758 124H387C382.582 124 379 120.418 379 116V84Z"/>
+</mask>
+<path d="M379 84C379 79.5817 382.582 76 387 76H758C762.418 76 766 79.5817 766 84V116C766 120.418 762.418 124 758 124H387C382.582 124 379 120.418 379 116V84Z" fill="#1D1D21"/>
+<path d="M387 76.8H758V75.2H387V76.8ZM765.2 84V116H766.8V84H765.2ZM758 123.2H387V124.8H758V123.2ZM379.8 116V84H378.2V116H379.8ZM387 123.2C383.024 123.2 379.8 119.976 379.8 116H378.2C378.2 120.86 382.14 124.8 387 124.8V123.2ZM765.2 116C765.2 119.976 761.976 123.2 758 123.2V124.8C762.86 124.8 766.8 120.86 766.8 116H765.2ZM758 76.8C761.976 76.8 765.2 80.0236 765.2 84H766.8C766.8 79.1399 762.86 75.2 758 75.2V76.8ZM387 75.2C382.14 75.2 378.2 79.1399 378.2 84H379.8C379.8 80.0236 383.024 76.8 387 76.8V75.2Z" fill="#2D2D31" mask="url(#path-11-inside-1_8117_31723)"/>
+<path d="M387 76.8H758V75.2H387V76.8ZM765.2 84V116H766.8V84H765.2ZM758 123.2H387V124.8H758V123.2ZM379.8 116V84H378.2V116H379.8ZM387 123.2C383.024 123.2 379.8 119.976 379.8 116H378.2C378.2 120.86 382.14 124.8 387 124.8V123.2ZM765.2 116C765.2 119.976 761.976 123.2 758 123.2V124.8C762.86 124.8 766.8 120.86 766.8 116H765.2ZM758 76.8C761.976 76.8 765.2 80.0236 765.2 84H766.8C766.8 79.1399 762.86 75.2 758 75.2V76.8ZM387 75.2C382.14 75.2 378.2 79.1399 378.2 84H379.8C379.8 80.0236 383.024 76.8 387 76.8V75.2Z" fill="url(#paint8_linear_8117_31723)" fill-opacity="0.4" mask="url(#path-11-inside-1_8117_31723)"/>
+</g>
+<rect opacity="0.5" x="391" y="96" width="207" height="8" rx="4" fill="#2D2D31"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M739.6 92.7999C736.949 92.7999 734.8 94.9489 734.8 97.5999C734.8 100.251 736.949 102.4 739.6 102.4C742.251 102.4 744.4 100.251 744.4 97.5999C744.4 94.9489 742.251 92.7999 739.6 92.7999ZM732.4 97.5999C732.4 93.6235 735.624 90.3999 739.6 90.3999C743.577 90.3999 746.8 93.6235 746.8 97.5999C746.8 99.1549 746.307 100.595 745.469 101.772L751.249 107.551C751.718 108.02 751.718 108.78 751.249 109.248C750.78 109.717 750.02 109.717 749.552 109.248L743.772 103.469C742.595 104.307 741.155 104.8 739.6 104.8C735.624 104.8 732.4 101.576 732.4 97.5999Z" fill="#414146"/>
+<rect x="379.43" y="93" width="10" height="10" rx="2" transform="rotate(45 379.43 93)" fill="url(#paint9_linear_8117_31723)" fill-opacity="0.8"/>
+<foreignObject x="274.515" y="98.0147" width="97.9706" height="3.97062"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.74px);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="1.48531" d="M371 100H276" stroke="url(#paint10_linear_8117_31723)" stroke-dasharray="3 3"/>
+<path d="M263.5 92C263.5 88.9624 265.962 86.5 269 86.5H316C319.038 86.5 321.5 88.9624 321.5 92V107C321.5 110.038 319.038 112.5 316 112.5H269C265.962 112.5 263.5 110.038 263.5 107V92Z" fill="#2D2D31"/>
+<path d="M263.5 92C263.5 88.9624 265.962 86.5 269 86.5H316C319.038 86.5 321.5 88.9624 321.5 92V107C321.5 110.038 319.038 112.5 316 112.5H269C265.962 112.5 263.5 110.038 263.5 107V92Z" stroke="#414146"/>
+<path d="M263.5 92C263.5 88.9624 265.962 86.5 269 86.5H316C319.038 86.5 321.5 88.9624 321.5 92V107C321.5 110.038 319.038 112.5 316 112.5H269C265.962 112.5 263.5 110.038 263.5 107V92Z" stroke="url(#paint11_linear_8117_31723)" stroke-opacity="0.4"/>
+<path d="M276.547 97H275.314C275.241 96.6454 275.114 96.3338 274.931 96.0653C274.753 95.7969 274.534 95.5715 274.275 95.3892C274.02 95.2036 273.737 95.0644 273.425 94.9716C273.114 94.8788 272.789 94.8324 272.451 94.8324C271.834 94.8324 271.276 94.9882 270.775 95.2997C270.278 95.6113 269.882 96.0703 269.587 96.6768C269.295 97.2834 269.15 98.0275 269.15 98.9091C269.15 99.7907 269.295 100.535 269.587 101.141C269.882 101.748 270.278 102.207 270.775 102.518C271.276 102.83 271.834 102.986 272.451 102.986C272.789 102.986 273.114 102.939 273.425 102.847C273.737 102.754 274.02 102.616 274.275 102.434C274.534 102.248 274.753 102.021 274.931 101.753C275.114 101.481 275.241 101.17 275.314 100.818H276.547C276.454 101.339 276.285 101.804 276.04 102.215C275.795 102.626 275.49 102.976 275.125 103.264C274.761 103.549 274.351 103.766 273.897 103.915C273.447 104.065 272.964 104.139 272.451 104.139C271.582 104.139 270.81 103.927 270.134 103.503C269.458 103.079 268.926 102.475 268.538 101.693C268.15 100.911 267.956 99.983 267.956 98.9091C267.956 97.8352 268.15 96.9072 268.538 96.125C268.926 95.3428 269.458 94.7396 270.134 94.3153C270.81 93.8911 271.582 93.679 272.451 93.679C272.964 93.679 273.447 93.7536 273.897 93.9027C274.351 94.0518 274.761 94.2706 275.125 94.5589C275.49 94.844 275.795 95.192 276.04 95.603C276.285 96.0107 276.454 96.4763 276.547 97ZM286.55 93.8182V104H285.357L279.809 96.0057H279.71V104H278.477V93.8182H279.67L285.238 101.832H285.337V93.8182H286.55ZM289.372 104H288.08L291.818 93.8182H293.091L296.83 104H295.537L292.494 95.429H292.415L289.372 104ZM289.85 100.023H295.06V101.116H289.85V100.023ZM298.353 93.8182H299.824L303.284 102.27H303.404L306.864 93.8182H308.336V104H307.182V96.2642H307.083L303.901 104H302.787L299.605 96.2642H299.506V104H298.353V93.8182ZM310.745 104V93.8182H316.89V94.9119H311.978V98.3523H316.571V99.446H311.978V102.906H316.969V104H310.745Z" fill="#818186"/>
+<g opacity="0.4">
+<path d="M517.5 27C517.5 23.9624 519.962 21.5 523 21.5H552C555.038 21.5 557.5 23.9624 557.5 27V42C557.5 45.0376 555.038 47.5 552 47.5H523C519.962 47.5 517.5 45.0376 517.5 42V27Z" fill="#2D2D31" stroke="#414146"/>
+<path d="M527.546 28.8182H529.017L532.478 37.2699H532.597L536.057 28.8182H537.529V39H536.375V31.2642H536.276L533.094 39H531.98L528.799 31.2642H528.699V39H527.546V28.8182ZM540.534 28.8182L543.159 33.054H543.239L545.864 28.8182H547.316L544.114 33.9091L547.316 39H545.864L543.239 34.8438H543.159L540.534 39H539.083L542.364 33.9091L539.083 28.8182H540.534Z" fill="#818186"/>
+</g>
+<g opacity="0.8">
+<path d="M717.5 150C717.5 146.962 719.962 144.5 723 144.5H752C755.038 144.5 757.5 146.962 757.5 150V165C757.5 168.038 755.038 170.5 752 170.5H723C719.962 170.5 717.5 168.038 717.5 165V150Z" fill="#2D2D31" stroke="#414146"/>
+<path d="M724.766 152.912V151.818H732.402V152.912H729.2V162H727.967V152.912H724.766ZM734.838 151.818L737.463 156.054H737.543L740.168 151.818H741.62L738.418 156.909L741.62 162H740.168L737.543 157.844H737.463L734.838 162H733.387L736.668 156.909L733.387 151.818H734.838ZM742.604 152.912V151.818H750.241V152.912H747.039V162H745.806V152.912H742.604Z" fill="#818186"/>
+</g>
+<g opacity="0.5">
+<foreignObject x="801.9" y="59.9" width="63.2" height="59.2"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(8.05px);clip-path:url(#bgblur_2_8117_31723_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="16.1" d="M818.5 82C818.5 78.9624 820.962 76.5 824 76.5H843C846.038 76.5 848.5 78.9624 848.5 82V97C848.5 100.038 846.038 102.5 843 102.5H824C820.962 102.5 818.5 100.038 818.5 97V82Z" fill="#2D2D31" stroke="#414146"/>
+<path d="M829.92 94H828.627L832.366 83.8182H833.639L837.377 94H836.085L833.042 85.429H832.963L829.92 94ZM830.397 90.0227H835.608V91.1165H830.397V90.0227Z" fill="#818186"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_8117_31723" x="368.971" y="83.0278" width="130.529" height="82.4658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_8117_31723"/>
+</filter>
+<filter id="filter1_f_8117_31723" x="348.672" y="7.44824" width="336.73" height="189.197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_8117_31723"/>
+</filter>
+<filter id="filter2_f_8117_31723" x="336.136" y="20.374" width="109.77" height="140.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_8117_31723"/>
+</filter>
+<filter id="filter3_f_8117_31723" x="308.629" y="-6.96191" width="196.812" height="213.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8117_31723"/>
+</filter>
+<filter id="filter4_d_8117_31723" x="364.8" y="63.8" width="415.4" height="76.4" 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="2"/>
+<feGaussianBlur stdDeviation="3.1"/>
+<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.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8117_31723"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8117_31723" result="shape"/>
+</filter>
+<clipPath id="bgblur_1_8117_31723_clip_path" transform="translate(-364.8 -63.8)"><path d="M371 84C371 75.1634 378.163 68 387 68H758C766.837 68 774 75.1634 774 84V116C774 124.837 766.837 132 758 132H387C378.163 132 371 124.837 371 116V84Z"/>
+</clipPath><filter id="filter5_d_8117_31723" x="374" y="76" width="397" height="58" 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="5"/>
+<feGaussianBlur stdDeviation="2.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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8117_31723"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8117_31723" result="shape"/>
+</filter>
+<clipPath id="bgblur_2_8117_31723_clip_path" transform="translate(-801.9 -59.9)"><path d="M818.5 82C818.5 78.9624 820.962 76.5 824 76.5H843C846.038 76.5 848.5 78.9624 848.5 82V97C848.5 100.038 846.038 102.5 843 102.5H824C820.962 102.5 818.5 100.038 818.5 97V82Z"/>
+</clipPath><linearGradient id="paint0_linear_8117_31723" x1="371.5" y1="21" x2="371.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8117_31723" x1="1084" y1="67.5" x2="84" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8117_31723" x1="1084" y1="130.5" x2="84" y2="130.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_8117_31723" x1="772.5" y1="21" x2="772.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414146" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#414146"/>
+<stop offset="1" stop-color="#414146" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_8117_31723" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(404.704 124.213) rotate(17.2101) scale(55.7161 30.1745)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_8117_31723" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(517.038 102.047) rotate(-179.821) scale(160.866 87.0966)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_8117_31723" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(377.921 129.79) rotate(-128.298) scale(35.2087 15.5314)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_8117_31723" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(385.06 86.1864) rotate(69.532) scale(58.1223 54.8169)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_8117_31723" x1="408.06" y1="129.63" x2="426.148" y2="73.1294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<linearGradient id="paint9_linear_8117_31723" x1="384.43" y1="93" x2="384.43" y2="103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<linearGradient id="paint10_linear_8117_31723" x1="1.1571e+11" y1="1.8897e+27" x2="1.1571e+11" y2="1.8897e+27" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD596B" stop-opacity="0.51"/>
+<stop offset="0.465" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0.31"/>
+</linearGradient>
+<linearGradient id="paint11_linear_8117_31723" x1="258.786" y1="116" x2="329.092" y2="98.2155" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<clipPath id="clip0_8117_31723">
+<rect width="1136" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/images/domains/empty-records-light.svg b/static/images/domains/empty-records-light.svg
new file mode 100644
index 000000000..c18eca86e
--- /dev/null
+++ b/static/images/domains/empty-records-light.svg
@@ -0,0 +1,178 @@
+<svg width="1136" height="184" viewBox="0 0 1136 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7767_15243)">
+<line x1="372.5" y1="21" x2="372.5" y2="175" stroke="url(#paint0_linear_7767_15243)" stroke-dasharray="2 2"/>
+<line x1="1084" y1="68.5" x2="84" y2="68.5" stroke="url(#paint1_linear_7767_15243)" stroke-dasharray="2 2"/>
+<line x1="1084" y1="131.5" x2="84" y2="131.5" stroke="url(#paint2_linear_7767_15243)" stroke-dasharray="2 2"/>
+<line x1="773.5" y1="21" x2="773.5" y2="175" stroke="url(#paint3_linear_7767_15243)" stroke-dasharray="2 2"/>
+<g filter="url(#filter0_f_7767_15243)">
+<path d="M434.235 157.993C402.333 157.893 376.471 142.71 376.471 124.08C376.471 105.45 402.333 90.4284 434.235 90.5282C466.138 90.6281 492 105.812 492 124.441C492 143.071 466.138 158.093 434.235 157.993Z" fill="url(#paint4_radial_7767_15243)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_7767_15243)">
+<path d="M517.038 189.144C428.194 188.866 356.172 149.646 356.172 101.543C356.172 53.4411 428.194 14.6718 517.038 14.9498C605.881 15.2278 677.903 54.4478 677.903 102.55C677.903 150.653 605.881 189.422 517.038 189.144Z" fill="url(#paint5_radial_7767_15243)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_7767_15243)">
+<path d="M368.854 91.6665C369.718 112.51 435.054 125.512 430.697 132.158C426.339 138.805 365.038 154.884 355.827 139.04C346.615 123.196 353.068 42.6668 357.425 36.02C361.783 29.3732 359.642 75.8224 368.854 91.6665Z" fill="url(#paint6_radial_7767_15243)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_7767_15243)">
+<path d="M367.38 161.06C343.698 146.154 342.254 106.689 364.155 72.9128C386.055 39.1368 423.007 23.8399 446.69 38.7461C470.372 53.6524 471.816 93.1172 449.915 126.893C428.015 160.669 391.063 175.966 367.38 161.06Z" fill="url(#paint7_radial_7767_15243)" fill-opacity="0.08"/>
+</g>
+<foreignObject x="366.4" y="64" width="412.2" height="74.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_7767_15243_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_d_7767_15243)" data-figma-bg-blur-radius="4">
+<rect x="371" y="68" width="403" height="64" rx="16" fill="white" fill-opacity="0.4" shape-rendering="crispEdges"/>
+<rect x="371.5" y="68.5" width="402" height="63" rx="15.5" stroke="#19191C" stroke-opacity="0.03" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_d_7767_15243)">
+<mask id="path-11-inside-1_7767_15243" fill="white">
+<path d="M379 84C379 79.5817 382.582 76 387 76H758C762.418 76 766 79.5817 766 84V116C766 120.418 762.418 124 758 124H387C382.582 124 379 120.418 379 116V84Z"/>
+</mask>
+<path d="M379 84C379 79.5817 382.582 76 387 76H758C762.418 76 766 79.5817 766 84V116C766 120.418 762.418 124 758 124H387C382.582 124 379 120.418 379 116V84Z" fill="white"/>
+<path d="M387 76.8H758V75.2H387V76.8ZM765.2 84V116H766.8V84H765.2ZM758 123.2H387V124.8H758V123.2ZM379.8 116V84H378.2V116H379.8ZM387 123.2C383.024 123.2 379.8 119.976 379.8 116H378.2C378.2 120.86 382.14 124.8 387 124.8V123.2ZM765.2 116C765.2 119.976 761.976 123.2 758 123.2V124.8C762.86 124.8 766.8 120.86 766.8 116H765.2ZM758 76.8C761.976 76.8 765.2 80.0236 765.2 84H766.8C766.8 79.1399 762.86 75.2 758 75.2V76.8ZM387 75.2C382.14 75.2 378.2 79.1399 378.2 84H379.8C379.8 80.0236 383.024 76.8 387 76.8V75.2Z" fill="#EDEDF0" mask="url(#path-11-inside-1_7767_15243)"/>
+<path d="M387 76.8H758V75.2H387V76.8ZM765.2 84V116H766.8V84H765.2ZM758 123.2H387V124.8H758V123.2ZM379.8 116V84H378.2V116H379.8ZM387 123.2C383.024 123.2 379.8 119.976 379.8 116H378.2C378.2 120.86 382.14 124.8 387 124.8V123.2ZM765.2 116C765.2 119.976 761.976 123.2 758 123.2V124.8C762.86 124.8 766.8 120.86 766.8 116H765.2ZM758 76.8C761.976 76.8 765.2 80.0236 765.2 84H766.8C766.8 79.1399 762.86 75.2 758 75.2V76.8ZM387 75.2C382.14 75.2 378.2 79.1399 378.2 84H379.8C379.8 80.0236 383.024 76.8 387 76.8V75.2Z" fill="url(#paint8_linear_7767_15243)" fill-opacity="0.4" mask="url(#path-11-inside-1_7767_15243)"/>
+</g>
+<rect opacity="0.5" x="391" y="96" width="207" height="8" rx="4" fill="#EDEDF0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M739.6 92.7999C736.949 92.7999 734.8 94.9489 734.8 97.5999C734.8 100.251 736.949 102.4 739.6 102.4C742.251 102.4 744.4 100.251 744.4 97.5999C744.4 94.9489 742.251 92.7999 739.6 92.7999ZM732.4 97.5999C732.4 93.6235 735.624 90.3999 739.6 90.3999C743.577 90.3999 746.8 93.6235 746.8 97.5999C746.8 99.1549 746.307 100.595 745.469 101.772L751.249 107.551C751.718 108.02 751.718 108.78 751.249 109.248C750.78 109.717 750.02 109.717 749.552 109.248L743.772 103.469C742.595 104.307 741.155 104.8 739.6 104.8C735.624 104.8 732.4 101.576 732.4 97.5999Z" fill="#D8D8DB"/>
+<rect x="379.43" y="93" width="10" height="10" rx="2" transform="rotate(45 379.43 93)" fill="url(#paint9_linear_7767_15243)" fill-opacity="0.8"/>
+<foreignObject x="274.515" y="98.0147" width="97.9706" height="3.97062"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.74px);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="1.48531" d="M371 100H276" stroke="url(#paint10_linear_7767_15243)" stroke-dasharray="3 3"/>
+<rect x="263.5" y="86.5" width="58" height="26" rx="5.5" fill="url(#paint11_linear_7767_15243)" fill-opacity="0.1"/>
+<rect x="263.5" y="86.5" width="58" height="26" rx="5.5" fill="white"/>
+<rect x="263.5" y="86.5" width="58" height="26" rx="5.5" stroke="#EDEDF0"/>
+<rect x="263.5" y="86.5" width="58" height="26" rx="5.5" stroke="url(#paint12_linear_7767_15243)" stroke-opacity="0.4"/>
+<path d="M276.547 97H275.314C275.241 96.6454 275.114 96.3338 274.931 96.0653C274.753 95.7969 274.534 95.5715 274.275 95.3892C274.02 95.2036 273.737 95.0644 273.425 94.9716C273.114 94.8788 272.789 94.8324 272.451 94.8324C271.834 94.8324 271.276 94.9882 270.775 95.2997C270.278 95.6113 269.882 96.0703 269.587 96.6768C269.295 97.2834 269.15 98.0275 269.15 98.9091C269.15 99.7907 269.295 100.535 269.587 101.141C269.882 101.748 270.278 102.207 270.775 102.518C271.276 102.83 271.834 102.986 272.451 102.986C272.789 102.986 273.114 102.939 273.425 102.847C273.737 102.754 274.02 102.616 274.275 102.434C274.534 102.248 274.753 102.021 274.931 101.753C275.114 101.481 275.241 101.17 275.314 100.818H276.547C276.454 101.339 276.285 101.804 276.04 102.215C275.795 102.626 275.49 102.976 275.125 103.264C274.761 103.549 274.351 103.766 273.897 103.915C273.447 104.065 272.964 104.139 272.451 104.139C271.582 104.139 270.81 103.927 270.134 103.503C269.458 103.079 268.926 102.475 268.538 101.693C268.15 100.911 267.956 99.983 267.956 98.9091C267.956 97.8352 268.15 96.9072 268.538 96.125C268.926 95.3428 269.458 94.7396 270.134 94.3153C270.81 93.8911 271.582 93.679 272.451 93.679C272.964 93.679 273.447 93.7536 273.897 93.9027C274.351 94.0518 274.761 94.2706 275.125 94.5589C275.49 94.844 275.795 95.192 276.04 95.603C276.285 96.0107 276.454 96.4763 276.547 97ZM286.55 93.8182V104H285.357L279.809 96.0057H279.71V104H278.477V93.8182H279.67L285.238 101.832H285.337V93.8182H286.55ZM289.372 104H288.08L291.818 93.8182H293.091L296.83 104H295.537L292.494 95.429H292.415L289.372 104ZM289.85 100.023H295.06V101.116H289.85V100.023ZM298.353 93.8182H299.824L303.284 102.27H303.404L306.864 93.8182H308.336V104H307.182V96.2642H307.083L303.901 104H302.787L299.605 96.2642H299.506V104H298.353V93.8182ZM310.745 104V93.8182H316.89V94.9119H311.978V98.3523H316.571V99.446H311.978V102.906H316.969V104H310.745Z" fill="#97979B"/>
+<g opacity="0.4">
+<rect x="517.5" y="21.5" width="40" height="26" rx="5.5" fill="url(#paint13_linear_7767_15243)" fill-opacity="0.1"/>
+<rect x="517.5" y="21.5" width="40" height="26" rx="5.5" fill="white"/>
+<rect x="517.5" y="21.5" width="40" height="26" rx="5.5" stroke="#EDEDF0"/>
+<path d="M527.546 28.8182H529.017L532.478 37.2699H532.597L536.057 28.8182H537.529V39H536.375V31.2642H536.276L533.094 39H531.98L528.799 31.2642H528.699V39H527.546V28.8182ZM540.534 28.8182L543.159 33.054H543.239L545.864 28.8182H547.316L544.114 33.9091L547.316 39H545.864L543.239 34.8438H543.159L540.534 39H539.083L542.364 33.9091L539.083 28.8182H540.534Z" fill="#97979B"/>
+</g>
+<g opacity="0.8">
+<rect x="717.5" y="144.5" width="40" height="26" rx="5.5" fill="url(#paint14_linear_7767_15243)" fill-opacity="0.1"/>
+<rect x="717.5" y="144.5" width="40" height="26" rx="5.5" fill="white"/>
+<rect x="717.5" y="144.5" width="40" height="26" rx="5.5" stroke="#EDEDF0"/>
+<path d="M724.766 152.912V151.818H732.402V152.912H729.2V162H727.967V152.912H724.766ZM734.838 151.818L737.463 156.054H737.543L740.168 151.818H741.62L738.418 156.909L741.62 162H740.168L737.543 157.844H737.463L734.838 162H733.387L736.668 156.909L733.387 151.818H734.838ZM742.604 152.912V151.818H750.241V152.912H747.039V162H745.806V152.912H742.604Z" fill="#97979B"/>
+</g>
+<g opacity="0.5">
+<foreignObject x="802" y="60" width="63" height="59"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(8px);clip-path:url(#bgblur_2_7767_15243_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="16">
+<rect x="818.5" y="76.5" width="30" height="26" rx="5.5" fill="url(#paint15_linear_7767_15243)" fill-opacity="0.1"/>
+<rect x="818.5" y="76.5" width="30" height="26" rx="5.5" fill="white"/>
+<rect x="818.5" y="76.5" width="30" height="26" rx="5.5" stroke="#EDEDF0"/>
+</g>
+<path d="M829.92 94H828.627L832.366 83.8182H833.639L837.377 94H836.085L833.042 85.429H832.963L829.92 94ZM830.397 90.0227H835.608V91.1165H830.397V90.0227Z" fill="#97979B"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_7767_15243" x="368.971" y="83.0278" width="130.529" height="82.4658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_7767_15243"/>
+</filter>
+<filter id="filter1_f_7767_15243" x="348.672" y="7.44824" width="336.73" height="189.197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_7767_15243"/>
+</filter>
+<filter id="filter2_f_7767_15243" x="336.135" y="20.374" width="109.77" height="140.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_7767_15243"/>
+</filter>
+<filter id="filter3_f_7767_15243" x="308.629" y="-6.96191" width="196.812" height="213.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_7767_15243"/>
+</filter>
+<filter id="filter4_d_7767_15243" x="366.4" y="64" width="412.2" height="74.6" 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="2"/>
+<feGaussianBlur stdDeviation="2.3"/>
+<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.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7767_15243"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7767_15243" result="shape"/>
+</filter>
+<clipPath id="bgblur_1_7767_15243_clip_path" transform="translate(-366.4 -64)"><rect x="371" y="68" width="403" height="64" rx="16"/>
+</clipPath><filter id="filter5_d_7767_15243" x="374" y="76" width="397" height="58" 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="5"/>
+<feGaussianBlur stdDeviation="2.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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7767_15243"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7767_15243" result="shape"/>
+</filter>
+<clipPath id="bgblur_2_7767_15243_clip_path" transform="translate(-802 -60)"><rect x="818.5" y="76.5" width="30" height="26" rx="5.5"/>
+</clipPath><linearGradient id="paint0_linear_7767_15243" x1="371.5" y1="21" x2="371.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7767_15243" x1="1084" y1="67.5" x2="84" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7767_15243" x1="1084" y1="130.5" x2="84" y2="130.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_7767_15243" x1="772.5" y1="21" x2="772.5" y2="175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E7" stop-opacity="0"/>
+<stop offset="0.485" stop-color="#E4E4E7"/>
+<stop offset="1" stop-color="#E4E4E7" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_7767_15243" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(404.704 124.213) rotate(17.2101) scale(55.7161 30.1745)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_7767_15243" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(517.038 102.047) rotate(-179.821) scale(160.866 87.0966)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_7767_15243" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(377.92 129.79) rotate(-128.298) scale(35.2087 15.5314)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_7767_15243" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(385.06 86.1864) rotate(69.532) scale(58.1223 54.8169)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_7767_15243" x1="408.06" y1="129.63" x2="426.148" y2="73.1294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#EDEDF0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_7767_15243" x1="384.43" y1="93" x2="384.43" y2="103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<linearGradient id="paint10_linear_7767_15243" x1="1.1571e+11" y1="1.8897e+27" x2="1.1571e+11" y2="1.8897e+27" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD596B" stop-opacity="0.51"/>
+<stop offset="0.465" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0.31"/>
+</linearGradient>
+<linearGradient id="paint11_linear_7767_15243" x1="263" y1="99.5" x2="322" y2="99.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<linearGradient id="paint12_linear_7767_15243" x1="258.786" y1="116" x2="329.092" y2="98.2155" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD535C"/>
+</linearGradient>
+<linearGradient id="paint13_linear_7767_15243" x1="517" y1="34.5" x2="558" y2="34.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<linearGradient id="paint14_linear_7767_15243" x1="717" y1="157.5" x2="758" y2="157.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<linearGradient id="paint15_linear_7767_15243" x1="818" y1="89.5" x2="849" y2="89.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD535C" stop-opacity="0.48"/>
+</linearGradient>
+<clipPath id="clip0_7767_15243">
+<rect width="1136" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/images/empty-deployment-dark.svg b/static/images/empty-deployment-dark.svg
new file mode 100644
index 000000000..e26615ac5
--- /dev/null
+++ b/static/images/empty-deployment-dark.svg
@@ -0,0 +1,97 @@
+<svg width="1080" height="184" viewBox="0 0 1080 184" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g clip-path="url(#clip0_8117_31661)">
+<rect width="1080" height="184" fill="#1D1D21"/>
+<g filter="url(#filter0_f_8117_31661)">
+<path d="M507.122 174.584C458.098 174.463 418.356 162.669 418.356 148.241C418.356 133.812 458.098 122.214 507.122 122.335C556.147 122.456 595.889 134.25 595.889 148.678C595.889 163.107 556.147 174.705 507.122 174.584Z" fill="url(#paint0_radial_8117_31661)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_8117_31661)">
+<path d="M556.493 198.63C469.185 198.415 398.409 168.04 398.409 130.787C398.409 93.5328 469.185 63.5072 556.493 63.7225C643.8 63.9378 714.577 94.3124 714.577 131.566C714.577 168.82 643.8 198.846 556.493 198.63Z" fill="url(#paint1_radial_8117_31661)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_8117_31661)">
+<path d="M410.871 123.137C411.719 139.28 475.926 149.349 471.644 154.497C467.362 159.644 407.121 172.097 398.069 159.826C389.016 147.555 395.358 85.1883 399.64 80.0406C403.922 74.8928 401.819 110.866 410.871 123.137Z" fill="url(#paint2_radial_8117_31661)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_8117_31661)">
+<path d="M409.423 176.88C386.15 165.335 384.731 134.771 406.253 108.613C427.775 82.4542 464.088 70.6072 487.361 82.1517C510.633 93.6961 512.053 124.26 490.531 150.419C469.009 176.577 432.695 188.424 409.423 176.88Z" fill="url(#paint3_radial_8117_31661)" fill-opacity="0.08"/>
+</g>
+<foreignObject x="412" y="4" width="255" height="162"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_8117_31661_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="416" y="8" width="247" height="154" rx="12" fill="url(#pattern0_8117_31661)"/>
+<rect x="416.5" y="8.5" width="246" height="153" rx="11.5" stroke="white" stroke-opacity="0.08"/>
+</g>
+<g filter="url(#filter5_d_8117_31661)">
+<mask id="path-7-inside-1_8117_31661" fill="white">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z"/>
+</mask>
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="#1D1D21"/>
+<path d="M431 154.5C430.498 154.5 430.009 154.451 429.536 154.357L429.342 155.338C429.878 155.444 430.433 155.5 431 155.5V154.5ZM426.833 153.237C426.015 152.689 425.311 151.985 424.763 151.167L423.932 151.723C424.552 152.65 425.35 153.448 426.277 154.068L426.833 153.237ZM423.643 148.464C423.549 147.991 423.5 147.502 423.5 147H422.5C422.5 147.567 422.556 148.122 422.662 148.658L423.643 148.464ZM423.5 147V145.062H422.5V147H423.5ZM423.5 141.188V137.312H422.5V141.188H423.5ZM423.5 133.438V129.562H422.5V133.438H423.5ZM423.5 125.688V121.812H422.5V125.688H423.5ZM423.5 117.938V114.062H422.5V117.938H423.5ZM423.5 110.188V106.312H422.5V110.188H423.5ZM423.5 102.438V98.5625H422.5V102.438H423.5ZM423.5 94.6875V90.8125H422.5V94.6875H423.5ZM423.5 86.9375V83.0625H422.5V86.9375H423.5ZM423.5 79.1875V75.3125H422.5V79.1875H423.5ZM423.5 71.4375V67.5625H422.5V71.4375H423.5ZM423.5 63.6875V59.8125H422.5V63.6875H423.5ZM423.5 55.9375V52.0625H422.5V55.9375H423.5ZM423.5 48.1875V44.3125H422.5V48.1875H423.5ZM423.5 40.4375V36.5625H422.5V40.4375H423.5ZM423.5 32.6875V28.8125H422.5V32.6875H423.5ZM423.5 24.9375V23H422.5V24.9375H423.5ZM423.5 23C423.5 22.4985 423.549 22.0089 423.643 21.5357L422.662 21.3417C422.556 21.8784 422.5 22.433 422.5 23H423.5ZM424.763 18.8332C425.311 18.0151 426.015 17.3107 426.833 16.763L426.277 15.932C425.35 16.5524 424.552 17.3502 423.932 18.2769L424.763 18.8332ZM429.536 15.6428C430.009 15.5492 430.498 15.5 431 15.5V14.5C430.433 14.5 429.878 14.5556 429.342 14.6618L429.536 15.6428ZM431 15.5H433.009V14.5H431V15.5ZM437.028 15.5H441.046V14.5H437.028V15.5ZM445.065 15.5H449.083V14.5H445.065V15.5ZM453.102 15.5H457.12V14.5H453.102V15.5ZM461.139 15.5H465.157V14.5H461.139V15.5ZM469.176 15.5H473.194V14.5H469.176V15.5ZM477.213 15.5H481.231V14.5H477.213V15.5ZM485.25 15.5H489.269V14.5H485.25V15.5ZM493.287 15.5H497.306V14.5H493.287V15.5ZM501.324 15.5H505.343V14.5H501.324V15.5ZM509.361 15.5H513.38V14.5H509.361V15.5ZM517.398 15.5H521.417V14.5H517.398V15.5ZM525.435 15.5H529.454V14.5H525.435V15.5ZM533.472 15.5H537.491V14.5H533.472V15.5ZM541.509 15.5H545.528V14.5H541.509V15.5ZM549.546 15.5H553.565V14.5H549.546V15.5ZM557.583 15.5H561.602V14.5H557.583V15.5ZM565.62 15.5H569.639V14.5H565.62V15.5ZM573.657 15.5H577.676V14.5H573.657V15.5ZM581.694 15.5H585.713V14.5H581.694V15.5ZM589.731 15.5H593.75V14.5H589.731V15.5ZM597.769 15.5H601.787V14.5H597.769V15.5ZM605.806 15.5H609.824V14.5H605.806V15.5ZM613.843 15.5H617.861V14.5H613.843V15.5ZM621.88 15.5H625.898V14.5H621.88V15.5ZM629.917 15.5H633.935V14.5H629.917V15.5ZM637.954 15.5H641.972V14.5H637.954V15.5ZM645.991 15.5H648V14.5H645.991V15.5ZM648 15.5C648.502 15.5 648.991 15.5492 649.464 15.6428L649.658 14.6618C649.122 14.5556 648.567 14.5 648 14.5V15.5ZM652.167 16.763C652.985 17.3107 653.689 18.0151 654.237 18.8332L655.068 18.2769C654.448 17.3502 653.65 16.5524 652.723 15.932L652.167 16.763ZM655.357 21.5357C655.451 22.0089 655.5 22.4985 655.5 23H656.5C656.5 22.433 656.444 21.8784 656.338 21.3417L655.357 21.5357ZM655.5 23V24.9375H656.5V23H655.5ZM655.5 28.8125V32.6875H656.5V28.8125H655.5ZM655.5 36.5625V40.4375H656.5V36.5625H655.5ZM655.5 44.3125V48.1875H656.5V44.3125H655.5ZM655.5 52.0625V55.9375H656.5V52.0625H655.5ZM655.5 59.8125V63.6875H656.5V59.8125H655.5ZM655.5 67.5625V71.4375H656.5V67.5625H655.5ZM655.5 75.3125V79.1875H656.5V75.3125H655.5ZM655.5 83.0625V86.9375H656.5V83.0625H655.5ZM655.5 90.8125V94.6875H656.5V90.8125H655.5ZM655.5 98.5625V102.438H656.5V98.5625H655.5ZM655.5 106.312V110.188H656.5V106.312H655.5ZM655.5 114.062V117.938H656.5V114.062H655.5ZM655.5 121.812V125.688H656.5V121.812H655.5ZM655.5 129.562V133.438H656.5V129.562H655.5ZM655.5 137.312V141.188H656.5V137.312H655.5ZM655.5 145.062V147H656.5V145.062H655.5ZM655.5 147C655.5 147.502 655.451 147.991 655.357 148.464L656.338 148.658C656.444 148.122 656.5 147.567 656.5 147H655.5ZM654.237 151.167C653.689 151.985 652.985 152.689 652.167 153.237L652.723 154.068C653.65 153.448 654.448 152.65 655.068 151.723L654.237 151.167ZM649.464 154.357C648.991 154.451 648.502 154.5 648 154.5V155.5C648.567 155.5 649.122 155.444 649.658 155.338L649.464 154.357ZM648 154.5H645.991V155.5H648V154.5ZM641.972 154.5H637.954V155.5H641.972V154.5ZM633.935 154.5H629.917V155.5H633.935V154.5ZM625.898 154.5H621.88V155.5H625.898V154.5ZM617.861 154.5H613.843V155.5H617.861V154.5ZM609.824 154.5H605.806V155.5H609.824V154.5ZM601.787 154.5H597.769V155.5H601.787V154.5ZM593.75 154.5H589.731V155.5H593.75V154.5ZM585.713 154.5H581.694V155.5H585.713V154.5ZM577.676 154.5H573.657V155.5H577.676V154.5ZM569.639 154.5H565.62V155.5H569.639V154.5ZM561.602 154.5H557.583V155.5H561.602V154.5ZM553.565 154.5H549.546V155.5H553.565V154.5ZM545.528 154.5H541.509V155.5H545.528V154.5ZM537.491 154.5H533.472V155.5H537.491V154.5ZM529.454 154.5H525.435V155.5H529.454V154.5ZM521.417 154.5H517.398V155.5H521.417V154.5ZM513.38 154.5H509.361V155.5H513.38V154.5ZM505.343 154.5H501.324V155.5H505.343V154.5ZM497.306 154.5H493.287V155.5H497.306V154.5ZM489.269 154.5H485.25V155.5H489.269V154.5ZM481.231 154.5H477.213V155.5H481.231V154.5ZM473.194 154.5H469.176V155.5H473.194V154.5ZM465.157 154.5H461.139V155.5H465.157V154.5ZM457.12 154.5H453.102V155.5H457.12V154.5ZM449.083 154.5H445.065V155.5H449.083V154.5ZM441.046 154.5H437.028V155.5H441.046V154.5ZM433.009 154.5H431V155.5H433.009V154.5ZM431 154C430.531 154 430.074 153.954 429.633 153.867L429.245 155.829C429.813 155.941 430.4 156 431 156V154ZM427.111 152.822C426.348 152.31 425.69 151.652 425.178 150.889L423.517 152.001C424.173 152.982 425.018 153.827 425.999 154.483L427.111 152.822ZM424.133 148.367C424.046 147.926 424 147.469 424 147H422C422 147.6 422.059 148.187 422.171 148.755L424.133 148.367ZM424 147V145.062H422V147H424ZM424 141.188V137.312H422V141.188H424ZM424 133.438V129.562H422V133.438H424ZM424 125.688V121.812H422V125.688H424ZM424 117.938V114.062H422V117.938H424ZM424 110.188V106.312H422V110.188H424ZM424 102.438V98.5625H422V102.438H424ZM424 94.6875V90.8125H422V94.6875H424ZM424 86.9375V83.0625H422V86.9375H424ZM424 79.1875V75.3125H422V79.1875H424ZM424 71.4375V67.5625H422V71.4375H424ZM424 63.6875V59.8125H422V63.6875H424ZM424 55.9375V52.0625H422V55.9375H424ZM424 48.1875V44.3125H422V48.1875H424ZM424 40.4375V36.5625H422V40.4375H424ZM424 32.6875V28.8125H422V32.6875H424ZM424 24.9375V23H422V24.9375H424ZM424 23C424 22.5312 424.046 22.0742 424.133 21.6328L422.171 21.2446C422.059 21.8132 422 22.4002 422 23H424ZM425.178 19.1114C425.69 18.3476 426.348 17.6898 427.111 17.1784L425.999 15.5165C425.018 16.1733 424.173 17.0177 423.517 17.9988L425.178 19.1114ZM429.633 16.1333C430.074 16.0459 430.531 16 431 16V14C430.4 14 429.813 14.0588 429.245 14.1713L429.633 16.1333ZM431 16H433.009V14H431V16ZM437.028 16H441.046V14H437.028V16ZM445.065 16H449.083V14H445.065V16ZM453.102 16H457.12V14H453.102V16ZM461.139 16H465.157V14H461.139V16ZM469.176 16H473.194V14H469.176V16ZM477.213 16H481.231V14H477.213V16ZM485.25 16H489.269V14H485.25V16ZM493.287 16H497.306V14H493.287V16ZM501.324 16H505.343V14H501.324V16ZM509.361 16H513.38V14H509.361V16ZM517.398 16H521.417V14H517.398V16ZM525.435 16H529.454V14H525.435V16ZM533.472 16H537.491V14H533.472V16ZM541.509 16H545.528V14H541.509V16ZM549.546 16H553.565V14H549.546V16ZM557.583 16H561.602V14H557.583V16ZM565.62 16H569.639V14H565.62V16ZM573.657 16H577.676V14H573.657V16ZM581.694 16H585.713V14H581.694V16ZM589.731 16H593.75V14H589.731V16ZM597.769 16H601.787V14H597.769V16ZM605.806 16H609.824V14H605.806V16ZM613.843 16H617.861V14H613.843V16ZM621.88 16H625.898V14H621.88V16ZM629.917 16H633.935V14H629.917V16ZM637.954 16H641.972V14H637.954V16ZM645.991 16H648V14H645.991V16ZM648 16C648.469 16 648.926 16.0459 649.367 16.1333L649.755 14.1713C649.187 14.0588 648.6 14 648 14V16ZM651.889 17.1784C652.652 17.6898 653.31 18.3476 653.822 19.1114L655.483 17.9988C654.827 17.0177 653.982 16.1733 653.001 15.5165L651.889 17.1784ZM654.867 21.6328C654.954 22.0742 655 22.5312 655 23H657C657 22.4002 656.941 21.8132 656.829 21.2446L654.867 21.6328ZM655 23V24.9375H657V23H655ZM655 28.8125V32.6875H657V28.8125H655ZM655 36.5625V40.4375H657V36.5625H655ZM655 44.3125V48.1875H657V44.3125H655ZM655 52.0625V55.9375H657V52.0625H655ZM655 59.8125V63.6875H657V59.8125H655ZM655 67.5625V71.4375H657V67.5625H655ZM655 75.3125V79.1875H657V75.3125H655ZM655 83.0625V86.9375H657V83.0625H655ZM655 90.8125V94.6875H657V90.8125H655ZM655 98.5625V102.438H657V98.5625H655ZM655 106.312V110.188H657V106.312H655ZM655 114.062V117.938H657V114.062H655ZM655 121.812V125.688H657V121.812H655ZM655 129.562V133.438H657V129.562H655ZM655 137.312V141.188H657V137.312H655ZM655 145.062V147H657V145.062H655ZM655 147C655 147.469 654.954 147.926 654.867 148.367L656.829 148.755C656.941 148.187 657 147.6 657 147H655ZM653.822 150.889C653.31 151.652 652.652 152.31 651.889 152.822L653.001 154.483C653.982 153.827 654.827 152.982 655.483 152.001L653.822 150.889ZM649.367 153.867C648.926 153.954 648.469 154 648 154V156C648.6 156 649.187 155.941 649.755 155.829L649.367 153.867ZM648 154H645.991V156H648V154ZM641.972 154H637.954V156H641.972V154ZM633.935 154H629.917V156H633.935V154ZM625.898 154H621.88V156H625.898V154ZM617.861 154H613.843V156H617.861V154ZM609.824 154H605.806V156H609.824V154ZM601.787 154H597.769V156H601.787V154ZM593.75 154H589.731V156H593.75V154ZM585.713 154H581.694V156H585.713V154ZM577.676 154H573.657V156H577.676V154ZM569.639 154H565.62V156H569.639V154ZM561.602 154H557.583V156H561.602V154ZM553.565 154H549.546V156H553.565V154ZM545.528 154H541.509V156H545.528V154ZM537.491 154H533.472V156H537.491V154ZM529.454 154H525.435V156H529.454V154ZM521.417 154H517.398V156H521.417V154ZM513.38 154H509.361V156H513.38V154ZM505.343 154H501.324V156H505.343V154ZM497.306 154H493.287V156H497.306V154ZM489.269 154H485.25V156H489.269V154ZM481.231 154H477.213V156H481.231V154ZM473.194 154H469.176V156H473.194V154ZM465.157 154H461.139V156H465.157V154ZM457.12 154H453.102V156H457.12V154ZM449.083 154H445.065V156H449.083V154ZM441.046 154H437.028V156H441.046V154ZM433.009 154H431V156H433.009V154Z" fill="#2D2D31" mask="url(#path-7-inside-1_8117_31661)"/>
+<path d="M431 154.5C430.498 154.5 430.009 154.451 429.536 154.357L429.342 155.338C429.878 155.444 430.433 155.5 431 155.5V154.5ZM426.833 153.237C426.015 152.689 425.311 151.985 424.763 151.167L423.932 151.723C424.552 152.65 425.35 153.448 426.277 154.068L426.833 153.237ZM423.643 148.464C423.549 147.991 423.5 147.502 423.5 147H422.5C422.5 147.567 422.556 148.122 422.662 148.658L423.643 148.464ZM423.5 147V145.062H422.5V147H423.5ZM423.5 141.188V137.312H422.5V141.188H423.5ZM423.5 133.438V129.562H422.5V133.438H423.5ZM423.5 125.688V121.812H422.5V125.688H423.5ZM423.5 117.938V114.062H422.5V117.938H423.5ZM423.5 110.188V106.312H422.5V110.188H423.5ZM423.5 102.438V98.5625H422.5V102.438H423.5ZM423.5 94.6875V90.8125H422.5V94.6875H423.5ZM423.5 86.9375V83.0625H422.5V86.9375H423.5ZM423.5 79.1875V75.3125H422.5V79.1875H423.5ZM423.5 71.4375V67.5625H422.5V71.4375H423.5ZM423.5 63.6875V59.8125H422.5V63.6875H423.5ZM423.5 55.9375V52.0625H422.5V55.9375H423.5ZM423.5 48.1875V44.3125H422.5V48.1875H423.5ZM423.5 40.4375V36.5625H422.5V40.4375H423.5ZM423.5 32.6875V28.8125H422.5V32.6875H423.5ZM423.5 24.9375V23H422.5V24.9375H423.5ZM423.5 23C423.5 22.4985 423.549 22.0089 423.643 21.5357L422.662 21.3417C422.556 21.8784 422.5 22.433 422.5 23H423.5ZM424.763 18.8332C425.311 18.0151 426.015 17.3107 426.833 16.763L426.277 15.932C425.35 16.5524 424.552 17.3502 423.932 18.2769L424.763 18.8332ZM429.536 15.6428C430.009 15.5492 430.498 15.5 431 15.5V14.5C430.433 14.5 429.878 14.5556 429.342 14.6618L429.536 15.6428ZM431 15.5H433.009V14.5H431V15.5ZM437.028 15.5H441.046V14.5H437.028V15.5ZM445.065 15.5H449.083V14.5H445.065V15.5ZM453.102 15.5H457.12V14.5H453.102V15.5ZM461.139 15.5H465.157V14.5H461.139V15.5ZM469.176 15.5H473.194V14.5H469.176V15.5ZM477.213 15.5H481.231V14.5H477.213V15.5ZM485.25 15.5H489.269V14.5H485.25V15.5ZM493.287 15.5H497.306V14.5H493.287V15.5ZM501.324 15.5H505.343V14.5H501.324V15.5ZM509.361 15.5H513.38V14.5H509.361V15.5ZM517.398 15.5H521.417V14.5H517.398V15.5ZM525.435 15.5H529.454V14.5H525.435V15.5ZM533.472 15.5H537.491V14.5H533.472V15.5ZM541.509 15.5H545.528V14.5H541.509V15.5ZM549.546 15.5H553.565V14.5H549.546V15.5ZM557.583 15.5H561.602V14.5H557.583V15.5ZM565.62 15.5H569.639V14.5H565.62V15.5ZM573.657 15.5H577.676V14.5H573.657V15.5ZM581.694 15.5H585.713V14.5H581.694V15.5ZM589.731 15.5H593.75V14.5H589.731V15.5ZM597.769 15.5H601.787V14.5H597.769V15.5ZM605.806 15.5H609.824V14.5H605.806V15.5ZM613.843 15.5H617.861V14.5H613.843V15.5ZM621.88 15.5H625.898V14.5H621.88V15.5ZM629.917 15.5H633.935V14.5H629.917V15.5ZM637.954 15.5H641.972V14.5H637.954V15.5ZM645.991 15.5H648V14.5H645.991V15.5ZM648 15.5C648.502 15.5 648.991 15.5492 649.464 15.6428L649.658 14.6618C649.122 14.5556 648.567 14.5 648 14.5V15.5ZM652.167 16.763C652.985 17.3107 653.689 18.0151 654.237 18.8332L655.068 18.2769C654.448 17.3502 653.65 16.5524 652.723 15.932L652.167 16.763ZM655.357 21.5357C655.451 22.0089 655.5 22.4985 655.5 23H656.5C656.5 22.433 656.444 21.8784 656.338 21.3417L655.357 21.5357ZM655.5 23V24.9375H656.5V23H655.5ZM655.5 28.8125V32.6875H656.5V28.8125H655.5ZM655.5 36.5625V40.4375H656.5V36.5625H655.5ZM655.5 44.3125V48.1875H656.5V44.3125H655.5ZM655.5 52.0625V55.9375H656.5V52.0625H655.5ZM655.5 59.8125V63.6875H656.5V59.8125H655.5ZM655.5 67.5625V71.4375H656.5V67.5625H655.5ZM655.5 75.3125V79.1875H656.5V75.3125H655.5ZM655.5 83.0625V86.9375H656.5V83.0625H655.5ZM655.5 90.8125V94.6875H656.5V90.8125H655.5ZM655.5 98.5625V102.438H656.5V98.5625H655.5ZM655.5 106.312V110.188H656.5V106.312H655.5ZM655.5 114.062V117.938H656.5V114.062H655.5ZM655.5 121.812V125.688H656.5V121.812H655.5ZM655.5 129.562V133.438H656.5V129.562H655.5ZM655.5 137.312V141.188H656.5V137.312H655.5ZM655.5 145.062V147H656.5V145.062H655.5ZM655.5 147C655.5 147.502 655.451 147.991 655.357 148.464L656.338 148.658C656.444 148.122 656.5 147.567 656.5 147H655.5ZM654.237 151.167C653.689 151.985 652.985 152.689 652.167 153.237L652.723 154.068C653.65 153.448 654.448 152.65 655.068 151.723L654.237 151.167ZM649.464 154.357C648.991 154.451 648.502 154.5 648 154.5V155.5C648.567 155.5 649.122 155.444 649.658 155.338L649.464 154.357ZM648 154.5H645.991V155.5H648V154.5ZM641.972 154.5H637.954V155.5H641.972V154.5ZM633.935 154.5H629.917V155.5H633.935V154.5ZM625.898 154.5H621.88V155.5H625.898V154.5ZM617.861 154.5H613.843V155.5H617.861V154.5ZM609.824 154.5H605.806V155.5H609.824V154.5ZM601.787 154.5H597.769V155.5H601.787V154.5ZM593.75 154.5H589.731V155.5H593.75V154.5ZM585.713 154.5H581.694V155.5H585.713V154.5ZM577.676 154.5H573.657V155.5H577.676V154.5ZM569.639 154.5H565.62V155.5H569.639V154.5ZM561.602 154.5H557.583V155.5H561.602V154.5ZM553.565 154.5H549.546V155.5H553.565V154.5ZM545.528 154.5H541.509V155.5H545.528V154.5ZM537.491 154.5H533.472V155.5H537.491V154.5ZM529.454 154.5H525.435V155.5H529.454V154.5ZM521.417 154.5H517.398V155.5H521.417V154.5ZM513.38 154.5H509.361V155.5H513.38V154.5ZM505.343 154.5H501.324V155.5H505.343V154.5ZM497.306 154.5H493.287V155.5H497.306V154.5ZM489.269 154.5H485.25V155.5H489.269V154.5ZM481.231 154.5H477.213V155.5H481.231V154.5ZM473.194 154.5H469.176V155.5H473.194V154.5ZM465.157 154.5H461.139V155.5H465.157V154.5ZM457.12 154.5H453.102V155.5H457.12V154.5ZM449.083 154.5H445.065V155.5H449.083V154.5ZM441.046 154.5H437.028V155.5H441.046V154.5ZM433.009 154.5H431V155.5H433.009V154.5ZM431 154C430.531 154 430.074 153.954 429.633 153.867L429.245 155.829C429.813 155.941 430.4 156 431 156V154ZM427.111 152.822C426.348 152.31 425.69 151.652 425.178 150.889L423.517 152.001C424.173 152.982 425.018 153.827 425.999 154.483L427.111 152.822ZM424.133 148.367C424.046 147.926 424 147.469 424 147H422C422 147.6 422.059 148.187 422.171 148.755L424.133 148.367ZM424 147V145.062H422V147H424ZM424 141.188V137.312H422V141.188H424ZM424 133.438V129.562H422V133.438H424ZM424 125.688V121.812H422V125.688H424ZM424 117.938V114.062H422V117.938H424ZM424 110.188V106.312H422V110.188H424ZM424 102.438V98.5625H422V102.438H424ZM424 94.6875V90.8125H422V94.6875H424ZM424 86.9375V83.0625H422V86.9375H424ZM424 79.1875V75.3125H422V79.1875H424ZM424 71.4375V67.5625H422V71.4375H424ZM424 63.6875V59.8125H422V63.6875H424ZM424 55.9375V52.0625H422V55.9375H424ZM424 48.1875V44.3125H422V48.1875H424ZM424 40.4375V36.5625H422V40.4375H424ZM424 32.6875V28.8125H422V32.6875H424ZM424 24.9375V23H422V24.9375H424ZM424 23C424 22.5312 424.046 22.0742 424.133 21.6328L422.171 21.2446C422.059 21.8132 422 22.4002 422 23H424ZM425.178 19.1114C425.69 18.3476 426.348 17.6898 427.111 17.1784L425.999 15.5165C425.018 16.1733 424.173 17.0177 423.517 17.9988L425.178 19.1114ZM429.633 16.1333C430.074 16.0459 430.531 16 431 16V14C430.4 14 429.813 14.0588 429.245 14.1713L429.633 16.1333ZM431 16H433.009V14H431V16ZM437.028 16H441.046V14H437.028V16ZM445.065 16H449.083V14H445.065V16ZM453.102 16H457.12V14H453.102V16ZM461.139 16H465.157V14H461.139V16ZM469.176 16H473.194V14H469.176V16ZM477.213 16H481.231V14H477.213V16ZM485.25 16H489.269V14H485.25V16ZM493.287 16H497.306V14H493.287V16ZM501.324 16H505.343V14H501.324V16ZM509.361 16H513.38V14H509.361V16ZM517.398 16H521.417V14H517.398V16ZM525.435 16H529.454V14H525.435V16ZM533.472 16H537.491V14H533.472V16ZM541.509 16H545.528V14H541.509V16ZM549.546 16H553.565V14H549.546V16ZM557.583 16H561.602V14H557.583V16ZM565.62 16H569.639V14H565.62V16ZM573.657 16H577.676V14H573.657V16ZM581.694 16H585.713V14H581.694V16ZM589.731 16H593.75V14H589.731V16ZM597.769 16H601.787V14H597.769V16ZM605.806 16H609.824V14H605.806V16ZM613.843 16H617.861V14H613.843V16ZM621.88 16H625.898V14H621.88V16ZM629.917 16H633.935V14H629.917V16ZM637.954 16H641.972V14H637.954V16ZM645.991 16H648V14H645.991V16ZM648 16C648.469 16 648.926 16.0459 649.367 16.1333L649.755 14.1713C649.187 14.0588 648.6 14 648 14V16ZM651.889 17.1784C652.652 17.6898 653.31 18.3476 653.822 19.1114L655.483 17.9988C654.827 17.0177 653.982 16.1733 653.001 15.5165L651.889 17.1784ZM654.867 21.6328C654.954 22.0742 655 22.5312 655 23H657C657 22.4002 656.941 21.8132 656.829 21.2446L654.867 21.6328ZM655 23V24.9375H657V23H655ZM655 28.8125V32.6875H657V28.8125H655ZM655 36.5625V40.4375H657V36.5625H655ZM655 44.3125V48.1875H657V44.3125H655ZM655 52.0625V55.9375H657V52.0625H655ZM655 59.8125V63.6875H657V59.8125H655ZM655 67.5625V71.4375H657V67.5625H655ZM655 75.3125V79.1875H657V75.3125H655ZM655 83.0625V86.9375H657V83.0625H655ZM655 90.8125V94.6875H657V90.8125H655ZM655 98.5625V102.438H657V98.5625H655ZM655 106.312V110.188H657V106.312H655ZM655 114.062V117.938H657V114.062H655ZM655 121.812V125.688H657V121.812H655ZM655 129.562V133.438H657V129.562H655ZM655 137.312V141.188H657V137.312H655ZM655 145.062V147H657V145.062H655ZM655 147C655 147.469 654.954 147.926 654.867 148.367L656.829 148.755C656.941 148.187 657 147.6 657 147H655ZM653.822 150.889C653.31 151.652 652.652 152.31 651.889 152.822L653.001 154.483C653.982 153.827 654.827 152.982 655.483 152.001L653.822 150.889ZM649.367 153.867C648.926 153.954 648.469 154 648 154V156C648.6 156 649.187 155.941 649.755 155.829L649.367 153.867ZM648 154H645.991V156H648V154ZM641.972 154H637.954V156H641.972V154ZM633.935 154H629.917V156H633.935V154ZM625.898 154H621.88V156H625.898V154ZM617.861 154H613.843V156H617.861V154ZM609.824 154H605.806V156H609.824V154ZM601.787 154H597.769V156H601.787V154ZM593.75 154H589.731V156H593.75V154ZM585.713 154H581.694V156H585.713V154ZM577.676 154H573.657V156H577.676V154ZM569.639 154H565.62V156H569.639V154ZM561.602 154H557.583V156H561.602V154ZM553.565 154H549.546V156H553.565V154ZM545.528 154H541.509V156H545.528V154ZM537.491 154H533.472V156H537.491V154ZM529.454 154H525.435V156H529.454V154ZM521.417 154H517.398V156H521.417V154ZM513.38 154H509.361V156H513.38V154ZM505.343 154H501.324V156H505.343V154ZM497.306 154H493.287V156H497.306V154ZM489.269 154H485.25V156H489.269V154ZM481.231 154H477.213V156H481.231V154ZM473.194 154H469.176V156H473.194V154ZM465.157 154H461.139V156H465.157V154ZM457.12 154H453.102V156H457.12V154ZM449.083 154H445.065V156H449.083V154ZM441.046 154H437.028V156H441.046V154ZM433.009 154H431V156H433.009V154Z" fill="url(#paint4_linear_8117_31661)" fill-opacity="0.4" mask="url(#path-7-inside-1_8117_31661)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M537.273 65.6465C529.707 65.6465 527.241 71.5461 526.949 75.4726C526.926 75.7708 526.915 75.9199 526.864 76.0146C526.813 76.1073 526.759 76.1615 526.667 76.2127C526.573 76.265 526.422 76.2773 526.12 76.3019C524.028 76.473 519 77.5958 519 84.9641C519 91.9185 525.75 93.0131 529.124 92.6912H535.249C535.529 92.6912 535.669 92.6912 535.776 92.6367C535.87 92.5887 535.947 92.5122 535.995 92.4182C536.049 92.3112 536.049 92.1712 536.049 91.8912V87.6833C536.049 87.4033 536.049 87.2633 535.995 87.1563C535.947 87.0622 535.87 86.9857 535.776 86.9378C535.669 86.8833 535.529 86.8833 535.249 86.8833H534.412C533.879 86.8833 533.613 86.8833 533.476 86.7741C533.357 86.6791 533.288 86.5351 533.288 86.3829C533.288 86.2078 533.454 85.9998 533.787 85.5838L536.049 82.7541C536.049 82.7537 536.049 82.7532 536.049 82.7526V82.752C536.049 82.751 536.05 82.7502 536.051 82.7502C536.052 82.7502 536.052 82.75 536.052 82.7496L538.905 79.1813C539.119 78.9141 539.225 78.7805 539.354 78.7321C539.468 78.6897 539.592 78.6897 539.705 78.7321C539.834 78.7805 539.941 78.9141 540.155 79.1813L543.007 82.7496C543.008 82.75 543.008 82.7502 543.009 82.7502C543.01 82.7502 543.01 82.751 543.01 82.7519V82.7526C543.01 82.7531 543.011 82.7536 543.011 82.754L545.273 85.5838C545.606 85.9998 545.772 86.2078 545.772 86.3829C545.772 86.5351 545.703 86.6791 545.584 86.7741C545.447 86.8833 545.181 86.8833 544.648 86.8833H543.81C543.53 86.8833 543.39 86.8833 543.283 86.9378C543.189 86.9857 543.113 87.0622 543.065 87.1563C543.01 87.2633 543.01 87.4033 543.01 87.6833V91.8912C543.01 92.1712 543.01 92.3112 543.065 92.4182C543.113 92.5122 543.189 92.5887 543.283 92.6367C543.39 92.6912 543.53 92.6912 543.81 92.6912H550.294C553.668 93.0131 560.418 91.9185 560.418 84.9641C560.418 81.3075 557.815 79.0928 554.855 77.8147C554.64 77.7216 554.532 77.6751 554.466 77.6121C554.402 77.5499 554.368 77.4967 554.34 77.4118C554.311 77.3257 554.315 77.1993 554.323 76.9463C554.326 76.8747 554.327 76.8027 554.327 76.7304C554.327 73.3296 551.6 70.5726 548.236 70.5726C547.753 70.5726 547.284 70.6294 546.833 70.7368C546.557 70.8027 546.418 70.8357 546.323 70.8214C546.226 70.807 546.168 70.7823 546.091 70.7226C546.014 70.6635 545.947 70.5485 545.812 70.3184C544.329 67.7958 541.734 65.6465 537.273 65.6465Z" fill="#2D2D31"/>
+<path d="M489 107C489 105.895 489.895 105 491 105H587C588.105 105 589 105.895 589 107C589 108.105 588.105 109 587 109H491C489.895 109 489 108.105 489 107Z" fill="#2D2D31"/>
+<path d="M489 107C489 105.895 489.895 105 491 105H507C508.105 105 509 105.895 509 107C509 108.105 508.105 109 507 109H491C489.895 109 489 108.105 489 107Z" fill="#414146"/>
+<circle cx="433.5" cy="25.5" r="2.5" fill="#2D2D31"/>
+<circle cx="441.5" cy="25.5" r="2.5" fill="#2D2D31"/>
+<circle cx="449.5" cy="25.5" r="2.5" fill="#2D2D31"/>
+<rect opacity="0.5" x="458" y="23" width="190" height="5" rx="2.5" fill="#2D2D31"/>
+</g>
+<defs>
+<filter id="filter0_f_8117_31661" x="410.856" y="114.834" width="192.533" height="67.251" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_8117_31661"/>
+</filter>
+<filter id="filter1_f_8117_31661" x="390.908" y="56.2217" width="331.168" height="149.91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_8117_31661"/>
+</filter>
+<filter id="filter2_f_8117_31661" x="378.458" y="64.54" width="108.391" height="115.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_8117_31661"/>
+</filter>
+<filter id="filter3_f_8117_31661" x="350.996" y="37.7314" width="194.792" height="183.568" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8117_31661"/>
+</filter>
+<clipPath id="bgblur_1_8117_31661_clip_path" transform="translate(-412 -4)"><rect x="416" y="8" width="247" height="154" rx="12"/>
+</clipPath><pattern id="pattern0_8117_31661" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_8117_31661" transform="scale(0.00202429 0.00324675)"/>
+</pattern>
+<filter id="filter5_d_8117_31661" x="416.75" y="15" width="245.5" height="152.5" 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="6.25"/>
+<feGaussianBlur stdDeviation="3.125"/>
+<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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8117_31661"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8117_31661" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_8117_31661" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(461.741 148.383) rotate(8.92235) scale(82.7867 24.1685)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_8117_31661" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(556.493 131.176) rotate(-180) scale(131.493 56.107)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_8117_31661" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419.781 152.662) rotate(-135.059) scale(30.2949 13.738)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_8117_31661" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(426.796 118.893) rotate(64.3713) scale(32.8381 36.5701)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint4_linear_8117_31661" x1="440.496" y1="171.42" x2="523.242" y2="118.063" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#2D2D31"/>
+</linearGradient>
+<clipPath id="clip0_8117_31661">
+<rect width="1080" height="184" fill="white"/>
+</clipPath>
+<image id="image0_8117_31661" width="494" height="308" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAe4AAAE0CAYAAADqstAfAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAVMpSURBVHgB7P290mzbkh2GZdbtbkikgaYiSEpBgx2yQEaIaD6BIFkyYcpT6AnAN6D0BvAU8iRPHvUGEl9A0bToMWBCQQd0GEA3cJK7as3MOcbInOvb5/b92bux1jnfrqq15sz/kZlz1qoqt9/B8Zd/+Zd//jd/Y//Y7Jd/GOF/8T7lbn8eEX/+vu7fXnx7fkfifdEPr3OinyYv+p8570d/n1g01uucP9GKiwTJGJv0Rfv9BB9RvnXO7ngumQzGTTLd2YHsmM9TpsnGaovhfOMz0cmhqTfaW+Y3+xx8jyd8eE1jgWbKYaIXPSbPwacthkAXUz/ad8TeoJNPfpIxNsWRdVvc8Vbdr5Mr9sBGX+Gv5H7Pfb1eLmOb3QQTSF/jwL6D/8TjwX+3w4P/Lf/PhP9/9u3h21/81bfHv/rTP33913/1V3/1z+xveXyPQOPxF3/xl3/+7/w7v/yTbwL+o2/C/aOvxn9H8vDD+MngJ0NjkH0eJLk0kA5yjQ7+QubvcTAFpwAPxx0TwiEg67oCcho3JB7VRW3YaN2A8beJp1MSnOQ+xtEEUkmgLabQnmZGxegg49HPQzLTAhfIy3q8jvZTHUSeSXcb4mRKsspDE9/Jn7827kcZb2jq+Af/D/7/ruH/v/n28E//NkX8Vxv6vbr+67/+5Z98Y/xffJPj79tlIPvll1/s3/ybf/MR/P38fWRgahd/FwQ3ANdARvnJ+QGrjYmO2b584mXWVw5fHRgY0hWirHdzj0F8sFNLHl8kMxoDNFK+KcFTMEqiadfxdY49gC5E/++2s8xrsXSTWJrM77Hf4rUSnvv3rw6/KC66sqGVw5BAW1E58P0qnu6uTz4lu6S8WPiWfZDOqQkYm4IH/yTr3dwH/7/y+JHxb8uHywbxm9/8xr9hAW3yfv7//NM/9f/rry3gv/k1g//T//Q/+y+/yfn/+vb3f/j28n/2TWH/m2975P/6X//rT+F+y5FF+yN19K2aO9DmuZxuHAAUhJoQmQR3nZmLcMDJOWlUs/tVis5BWd6038kqLxsnCt1GUx3z3F3iRd7ER4rFXVL1gUZtQyUAzMbu0ie/KrmDHE0W4YfXQ+StpAs8Uu4QEc3mE6M+N/K1RJQ2cuiohUTK6QZJHOzpk16gzxRvDrF5WwSELr528SnKadZNgTK5jKXxIFsdD/6vy/bg/99K/KfMWBu/1cq3rhkj77H/+bf17j/59//9/9D++//+//9f23ce35MA3qvsv/ibv4n/6huzv3wL8m1lbd8KNgU/dtbuX26rnMa0DtLEaMYBH8CfwAxzp46QrqUD7GugHrst1F8cbNYBZXbuVE/nDQNF7Zz80xYqd/KWeV922GgbfZ58kYbIdtzu02QcfevPcLzaYpg3+TwkLk4rF6I/+KqtHE9xLcekc7HOMctGLUmp7SYbpCywKj7FLfHM4nIX9xLDGDONz4P/B//24F+PW/y/n//Jn/xJ/Om3Jfd1zf7Zt+3z//33rL6/LNz/4B/8Z/+n3/zG/uk3vn//Tfuv//qvba2qSSgVFp4XHwwYdCg8b9esA+zEx4f5Ta4h4I4ghYTaEuUQ+NPRkhzGQ5xXG3dJUhO8HWSb5k/J8FRA7pJH8yVuNwEfw4RhPeH+KkDZTbJLn0uCt5s5NtigeMP1I68vZJsO4qU0DsngSH8ofpPvaHzy/c7EM8nxlcwP/pmn2YP/B/9r7IT/9/b5n/3Zn7230d/n/sW3FuH//N/+t3/1/74jdLtV/t4a/8bmn357+ve+rbI/RVuOUkTP2VaigsTsu7ZRmh3zpNDwr+aso8lykBO7M3QOBcAh4REt51UVBirJIDKrrDq/7ICPXxwuQx3ofzrIxJXQvwWtnCeRAAhHOjb7YzrCBhuYnVdUU2yc5gwA19dTbLaiELG3RlP/g3vGQoNxZ7NNypZYeJRPJtQUFEU80J3Ox938AWcP/h/819QH/78e/++F8PttZ7t88j//xuH/+NXW+bFwv4v2t4f/y/v5e1/+29b4qcOtQJcAUYOWY98vwcGaKE7v0VDywgQmW35kNJALATTSR74a0Dj2EJyzpzg4SEftMHXMDe0pYRrOmzrJgQbRsx7UOo54HPTw7+Cn59qKCa+rLnrdpejJa/XVWMRgjPKo17r6giJ0m1DhVNpWC1iLDwMfTiZFvBgnIbfviyG7GefDuQf/KeCD/wf/9rvH/yre9pvf/OY97n93V7zHwv2f/Cf/m3/8jd7/7U3wfePZ+wa05CGBWLLJawoCOVcKzr4YjfuVwS8Ga8UhxtNAUPBjp93I51g84MYT1LPGg2zYoao+eFDSSR0yKckY+wJUa4g3EKa+Q5KcksS4hTTwPvl5EooEnPQ2cWnqMiQiTbL1WrfLDoGmcurKovn04Au1292xA+7AG8eJrGa9eOD4CXN5TXmZzfHYkrY+f/D/4F/GPfiXcTfHl/h/r77fNNeNa//oP/gP/sN/9q14/zcjITyuG9F++f99I/3vvVfZ76KdHe0yIAZkoDAIxji/B3B6D8qWIWzqRONww8V3jh2vCy99T6tWAnF+D09ft6BFWw32O8oHwfNVQJzeNz2Oz62dmN9HI5/KR3marrhyAltVwtA4QSEyXjC2cIjZudtHG57seZhr4ocG0Du5J14y3uzGZzlWV5wG2PgQkpi500nHaOKa5hj7UccWBiBWHvyzPtPrB/8P/s1+B/j/tuq2P/3TP32//h/+9E/9P9cb1l5K+K//+pf/z7tof1tpv+8edwzmVDK4iyxj5EkB0+cSgBo/y4qsw2zb0aEbTkVV1vcNETD3M0bmE32kMzjAgR7qV/RVZ9Ubry0+AUm0+MUcZSRfiim8DfjW05w32C6I+BYZQXICcEtsxgFZftV5toFfdNMeScvRwVsGu9E1RK5Q1cSuMTyi7gGJMe3c4ltjVGMuxwOtk3/Jnqt7J+yIX5pdxIZFNpPQIHSzBxR0pKV6VhJ58L/pq86qtz34Rzs8+B/0+F78v+vv+ujYn//1X8d/pbRoq3y9r/2P35PfH/eCOwX9oIiZdArLmU1QnZOKDgmj5spr6trXKQwaDaw8UIcao3q85VnGnAKxvcbAA9lKN7Wb8J1WO0e+QG881FbG9lFb0TykvQqABhQGN9GvF9HeZ/ycxoA0BkixtO5z3Y6b+KM9KUYg/tolkR1pNh5JR4uQ9ZhMXamTF9nH2Ex6nMNIvxj4aRzacMQwVnVFPtMxxvGDf5Lnwb89+LffE/7fJ95f2vLt8v/y2/vd/m3L/P+LAz7HP/gHf/kXr9cv/9373L/6V/+qPvKVwgwHdevY0ckYMobQ0q3BctqB3ldd4FcHGjIN/T182rkbOdQu09jiNwQHbdMIaEt+ANmk3/EcTslOcfh+6ibnIN/Ib0gGBVSx9Uhf5YZ5d36mOJVk2hL2KZ4l1pH/JI/K/r1bt5ooSb+vYgbPa0JH2Q7xUXq0kzF/teqD//ncg/+Z34P/3y3+31vmf/Znf/a+/i/+7M9e/+tvW+b/4j2utsp/85v4L98E31+ust4g/9AZAs5AaMob8Dr83CAm7QrMCNrSwW2icj7GAecqumEi6Qby8d6F+aALyhzgrPpTOXW+iR0gkFA24q9BFNx1TaC1VGSwcTn/EPBl7oAtm0MgV9cHclNbOB14GfiH+tTMpve0UrccqwUI/TGyT51ABwrSEmSIz/S58kcaEp9EdvKlFKQW80CrYuyQHEke1Uv0IZXz8RD7GS+OMfXg/8G/Pfj/o+P//TXi77esvz39995fNZ60P1vl7xvSvl3/f7wnvFfbyNsl4gdD+eH1Cbl4ncYPyYZ4A2hbp7PG0RwxiiY5vWuTaMCj2xAAQjNkvsk4E73bammgSzd9TDSGOZa0QXY8KqmIrZuN8nVuH0qCRltPdmi+rckg0hBaJ/s2HWCM2dexduzABzmmOJxo0dz3P/C+laNsCERggEXOQa+TzjV28B0+x+KLr0fZiImfV8QP/h/8I+8H/zz3/c/vC//vj4n9yZ/8yfvpP/yP/qP/1f/9n//zf/4vPyvuv/mbf/OP3gTeH/06dYBD13jsXGxIHgaB5L1DXix2dwNB22jL3OoKoZvSG3bI0dnsDHdMmnRC2GH60GW359KRYiCnaPmkeE76HUBnQtumsfC6OlTkmw3fAvCUDNoW5qGbjBu+o//QL8LjpK+CB+NuAtAU/JTENQFD/JSMgxwks+qTMWc7HksOWUW58PnqrnGyKXTxk+01dlM/pDW9/63jSD98tAf/kxwP/u3B/+8L/+/r66a496r7v3ifXFvlr88S/L1NbuzkyXjYofiURETYfF0Gl6BRYwcExfTh/jgpZ91QbZzMwSQ0BvAXRs25ygNBVX8qm9pXx4kNFASVBCVJ4djSaTk+bVvzMHFhohsSdekj8mPSItmSDiaNTBzJf5C58TRIQItmhKy+Bnn9QOdua3BcMU1FEeRp9h+S8m0QpT2GsWOSAnnV9qhzPh+T2CBvyf3gv4l9dzz4z4EP/g1o/E7x/77DfI39337OvbfJv1Xx/+7N/F/+y3/pAzMfXlNCEMatcwNwezoOxmAATjybJScZQYavxqcBpi+Nr04R6byvDd/F69Mj6Ks617nlaJ9k8p0VFeSn1yjr9JzOCW/SfZDLRB+1VZ0yPr7yWzswASVtkIfsKmOVlH4e9yiPxsCviKG0y+mmmBp3I0NMtk0ZJn3N7M7mdkiGLnEyxVsMNB/8J/EH/zaNx1PGx4P/3zH+38ff+3t/73Ptf/wfX/+L19om9/y6tTxSAAFTGXEYS4FuRltPFJw5DJNRQMeMpMFQpATKmM9FrhAZ6bwaTRzN7SsENDhW3zdBnZIPgTbn6vfaokyLrsqFdkyQacSWHBLQlJjFZp/H1Y07fKQj56GPiD/4HO1CcogNQ8aRDNFXIg42n3w1ddlmQ/HpobH5BK84XObTKsi2T3VbDHmpHFNRzLnTSqnJgL5XWigfJB7igXOmeDPwI9B98L+vPfh/8F+6/THw/z7yJ7P/3X/33/zjb1vl/g/fL/B3tB26TwwsPSR4EJwGc10UJIegbJOCkEAay+jdiunR88+4qkjZNfGFPBJpTTZiD5ck07aIMAAErDQG5D4lTiLwnosf8Dfr23cpbgam7y528jeB1CTpwlycg3fzljxf+Sx1PwFc9clQQsISu6eufKJJRcd6jkTbUEEaZMzxp6SRDGw6xL5k+ymxQ0HRZG8cGhyz0/Hgf7zeSD/4f/Bvf0D8r7eyv+nqf/ku3O/f2K7CnU4QgsUcpRCJqMMAhVtkYsAYGNg4YMIA0JiYjAF2TCzJC9ijc5CeTzrI2JG8gvPAv9SQb2cKGZcyxMQnA3LioYgAECYfH3jV8+gdL9LUYEVZUUcFk9J31cmsdaqjjBhLA28bYihO9MzGbyTbF4dkiddORUYSbqMP+jZ3SXyPOqYsktianbEwYqE4HK0IPPh/8I9C24P/Hwr/3x7+4/fNaX+hzEH4MAEQAFIFIuKifAoMJIKCehA8Ae0TT1UQg4CVNJyXDGkVYl1/7SyPR5wHxAAK/PhJG29mx4D4nHT3IWFV9hNaU1Dna+Vx5DfwcKGD9NJfJYPKNPDR4LRBVrTLREd9W3Fj5yPUPli0JCG7zGm2zvl54Fcjph1h7ph8J5rW9XWJ3ZOdMUGo/ervlDAf/F804sH/g/8fBP9rcf2m9pevbxP+Y5+3JUKZgIMCFQru1vASntcL7c5HOygjc1yu5dhQOYZAh+naxVxk5FHlIBD6ZpCBg7QcAttTniGW0PE+XKubGAYdM0mSXDg35UcADMCqsTCu6aHzMJfDOUo+S28CB8hff9Mhvkve+PwzBj9rerDxSF4LTwwrEeuxkrJp3HKwOf3Kk30lS/LS+cZ4K9kGmTAO0E42PKeiqD548P/g3x78Dyr9cfEPAv35aylA73FD10KEoYtoyQTnmmgL5z+n4eaMFDbUiMOBTsMOiQIFzmv3FCCXMvHhceqYKKBjI4lsNQXC8Bo7sKKH102SjSa9vKnk8OMImFSmjlZldkkAeQEfW1JQQKKMqeM206YJyejUbX++0D91gyA+FochIWE3TkkZkklgHIp+moyL5rrL2JBmiKLvMVMiQ1I+d/aKHypWoFNLaMP3bWtMGdIy4y3NvPbg/8H/uoCPD/7th8D/33/pZDECKuHivBqH8wcgtfeBJNg/QYZ3WtqcbEgvBKdxEgmVPRMROl90a3IadHCpvwBtRzsklehRSMBBG67gpQTh0qVb1z9liQHQKB/kwj0PZSIhg98n821MtLPjH8TpmHRALpQpTmAd7O8+ORWKwJSckdaajwnQhJ7KSHpKzHzmvGNVEpQK/nmAIqqy28DTMMlpkjdIDvJtVqG+kmMqKuQrf/Df5LQH/w/+f2D854p7AordKETCok3BYHYSzqxtT21PQFDkfN8dLAb855x8+5FP8jp34A2gBmBQWRGs5UXoqCcwCx0EI65mkCaB+/10dWtIL8A+mvj0OPknr9HrTKaY3CT55SMlVU1CcM5AXj0meSc5zQ/d6ERHgTjFtMSef49sUkjcdiHAFah5Lwqkj/tRbRYADjyXvCGGDJImbq3ddvWDSx78P/h/8D/QBDo/HP5zxT2Ma0cIgzxHQWqkL90NGQfaCVQ6iTdxwHYJOiUECCpn63Lew/KzimBoBUGQAnPw2cBPdarrKX+SggRkS48WlKBr0nPrYD1Fg4JIx5afDBJ/RLsxo2yjCUqOAN2Qh9/IQPPN+kc0UBb04eFAneq1gJ8nsJ4aN/VFCJhc8znIhvapL3+YdFEZ4jpaoTU+YipMGpZQRJSOfl4a4z3t/uB/y/Lg/8G/2Q+O/3qP+yY+yRDy/OQcBUCdO/CpBALSboLbWNpV4UqDuiLrjqx9mmVcMrzvrtjlkeiDDKFy4nkE5fa9qbNRTjvQq0uiJz4P4fsVLRM1RYRK9BqwBucyEd8CNG66aHwtiWrSoew9BFHJCIKgfwhc+Vres/3ohf6PaNuEgc8nfWwnQ7Vj00d01pu14iZZhsQlxcFhnucc9dWD/wf/LMKD/x8d/y8fqv3g8HLW5lVd9AhGMCIa0vH6wANlQH5NjiQBBpoSSz3HBFIWhQ4Yn6McMJ4c+oUeJZPwCjEWjfXdXU7gpK/AEyejnjhHaYSxyDGMH0E4JB4CmgIMn4O8J2DijT50GWTB2CE+mNgB2JhQSP+cpx/NmQwD80pOtMEAOkxw+NhoiT7albfCg6JGjHeWU9GU+VS0zNpKu8bGg/+Swx78P/j/AfH/AsdhcNKgTZ++6cdtcCoAuwmK4waFmwzgBBxTDhE/o3OmANAgJ8cfwNBkx8N3V90uDePyPPIiWcBxYxICmyDaUUcbjjC2nXaRjc/0WgA6BdM0T/lNsuHY9v4gFojPiaHQrPMajyG8UX+yd9LKsRKT+bz4BHfNJrQw/k7Fx4SxWceexn2bJvTiJqFj0arzYpsH/w/+jzo8+N98fgT8vwzAkBNPzgEjNmPkORRiGYGum3Q/6igwegZ4CS60YjAw6XJz3Dlx6p6oOwfZLR8FjARMTI6+VwmB9jyADuX9DNffD47dXdodHbFju4znDyBLOWg8+C8G/WOYr2CjYJUumOwMsrkd/APylX3u4sikYOQcPUfEIUaBXwEei+Mg2+fUIVYIQyI7zR/otM+lssiu+o6YefD/4P/B/4+P/5fZ2FmhULpd4ayD2yFhaFCW0yHYCqDAn4CMgSE86M5TkCtEBjObt39Et7vO0GB84wVgRFoIzJqHQMtz2cWlo6ILoUFKNskxScNmWyQdSsD5GvhOYMP5mLz1mgHNNh6cEDgdYw5JArC/TEx5TXXAZOTX0aaZjasNH+LZQG4X2UsfSOIY52Sr4bO32pm3FVRwkFXcAE+KI5lrOA90evC/eT/4f/Bf535k/L/s60M/GkBGQefJOLeh+zDrnYo42YexRQsMVfPFSAroMuqN0wqAC0Sn4NUAos8ywriPLPA5vmYHjIoETp6Tz7SSDBKALjYgGfF6V2knXSgAGtlTEkD/zEjg1d1eRgV9FOaMwJwc8+9G92H75wAHsDny17neV6JMGOikGMO1JR77AE60RNAqifefgzSO+fT72QhA7iDj58gv7rDv8IE9+G/8gOeD/wf/fxT8v6RDIUNPhpKAQ0fQMKCnOHDhVc+Ng98GumHWVgmJHJ9kxPPqOOGN8iAvlAuTVNkqgn71J+QR6RVfSEChMiJtlXfHIPtt4KX6jODOWHDoTJFl0pOE1oIc5gbOUeGGBIq6xiHmaq4Ed8koiQcTC/HUxJ/XpjgW4NnNNU0MkbL6sJr0YTWc/oSEbNNY4InFKFIXpEmZ5JA0Hvw/+H/w//Ph/4UCg6GRT9F/D8EvT8exyUBjzQalJ0FuL/poz5C5GkwKvBYwmHhS19gdrcqer9v7Dg6dK8g3JqGICAgel3H0vh0mkQTOEKCBNNTxp6CVgCI/DmD39RV/CAjVT/n4KXFNySFlkGAfATDQoPEYHwHduA7GvIKXD0kMz1MC814AyP4myWmSXbBXfCTR0JQcf/AryYOFYijiD/4f/Js9+LdBj+n8Hx3/L1GgBTvSTgbeuwIKfKBpopR2fXFwQAkuY1S5SMCgDCizBgHKAIbBLvgYFElTDBoA9DxX72WpU9N5zpHosH1ZYEG9AbClS47zOWnWIe+njAlfdUM+yUTBbpKc4BzZyzbQ6UDbYDIUvUPO4VgqGACMCTw+2cB60pu6elNboG7oG7XTFtknOUp2vJbJE/7Izkof8Rg9yeFclFfnP/h/8P/g334O/L98dyPJ0dWgeqjDF3h0zOe6fEl86FwJ7KatWCEAxRQQCWAz7ohj6DJjd3GU1NJQOUZkGx1SQgXd5ao/ZN/mRfSfjht4twMdHNBNLp1imquCe0/sqWdYT441R3yHfkhw6Y1MRTcOCXoAK9IejT4AW8frnEAZhb/SjWnuBB59Dn4gnkC76B9iTQ99D1V5omxm1ld4w3NTOg/+i92D/wf/PwX+8z3u7FRoEgo2CIo2nT4SgYPobkq8hp2mEG2dljItS8CYNFxwh4ad0WcYgBIDL/9CEtq6TG0vyvdB3UGOpvcgdwU3fD3iFEA0/v2n3fRgf7xYpMWMY3AgvQxGYND8AB/lmIAUwgztSbGjIMkxNwfdxAFgxuSCtE1kORW5lF1XPNNRCS2T3GFwYS1gtYePGr9y7XMkbsjhy25K907WB/8P/u3B/0+Hf/w4mIMyhs+VkATX9NnEppBfB50L7mqpK1pAiEHpmj9ciwOwS04Y68Mc9Y6DnDUe5QJUk27vQ35ikeQRW6AsKCPSc3lOiRHlAPkmf6BNKAlDstJxxTcBjOPyXAnursmu5DGjj9TgFmvR1KBPIByOUzLEhIEJGt/H06JhNwcVEgQdiI5FiubJ85Y8Iub32Wz5JoJuohlBnnY76THEFj5/8P/g/8H/+fih8P8ya1sfBEpkAJ1B5Y9UApyhRzEGB2sQmhl/pR8+Wgcq8tmRJB2sjgfliVZEf79oCGCkhUEx8QuRBwNFO7GKcLFhTAE72GY6UjYXEOFcV/qTfQ5+dRljkjhQDv2jeSAYJSqNhXU+DqCgc2hr60Xq+HnXiLHotDs9Uf6koz5dhSefK83bw4cEir6CZN3iIKSQ2445C8y6W/8H/w/+S8cH/3T8sPh/AbEC0PufqVsM7o5q3uDoYpbjhY+Ct+amIVJplAnHO3dMeINInsvnzfACcJWRVB744WvdAjQbAtSGIAL7WcoPz5N2AzkmX5sTZUs4Ysvbzi7Hge+ULuqSCct17GDOkw2QFiaaIgTyN4BYP7wRsXHVo5NwXEBy80MSobgewBmgQp6r2NDiIXNJFkmGhMOkJYU2jH2DNszfE1Z5H/z348H/g/8fEv8v4yCfwKYE9SMDIUQDFFPB2qP3biaBqHxpHABc5WwgmpKePhdHk5GRn851WIUArXwdAvAkRQFvHPj00R0TINocrCp3joub66gH+iuGQC2+3pGuoD3xnlY7cnlvuSqtm3l6VKAjnSHxakLEcWNwy68JYYy48MPcoTE/rQ5VAXx5tGWOjb7iLbk0IQH9qcg9+N88H/w/+P9h8f+SASbdASkDAanfTnRimrRCXk/jAx/R5urM93MABiao4ue8Cqh5KI90dvjog/w+0Cr6AgDtmg1lRJlVbqCpyVf1cQlGfcSxZmfQIoMak8Fvg7/UngK0cWtpApMcAbbXYNUvf1Agom80bos/zOcMBeNBJwPanxdypzDFnCYliVmMyfZRIBhDumiywedDnBrQNxl3ot3kePD/4D+vPfgv2j8c/l82O9qRWQowGN5RThBq6mYIAGbtvQik6QI8h+29zxfRT4nLJPAgwJCfBkYLvtQZxwst6rQxiWVyw3ERLU7QnnqN+MhzSmpiA+KJ8qJPb5L76WhAkKD2w0dfKDmCQym2QF6/STL42gfdVVcTXigPxh/F73KCn3gfYs5ENi1oRXMqClhE1SeSyE68QxMoxK4mbqR9l+gf/D/4L3PYVk7HP/gHmewPiH96swuCzAZmFJw6Z/goAAIhg5/YTYpsuSMmRQAo1IkgCFJeeG1DQkHearQWydE7NpfzBfiQ7ht4YWJDHRzlS91zLtpMXlPySRrodAhISriaDIyB1uwPqmDCLR2DV0glK8438QUmLZGH9HQRBOXUcwneSWdQQpN3vu87FgLnIogxyoMjtJvOyQ0Tefm9/QYy05hB7UrKKAvETmKM7tad9LVt4wf/D/7r8cF/k/mHxP8rdhcdU8DinJwY0k1mopiML3qdaAcmGnWsGa0Wxq5+eO7GIFb98Lp2fA4JguS0nmhQNpXFDskKLxvqlifTrnhex9lNQs2hcBJtFgcZSj5Y1WCw2/CYRExfY/IB/iEJCeNqDFoBI7GB5wEfUxrHgKIhr2n1Y2BToBdCj2hlXCoG0HYKYoeVRiZKlUmPxCuEivNlDvPkibae6NmD/wf/D/7z2g+Pf/zKU5+EgetKzAVs1PmDcQyEnoTJrqYOpClyEd8cCoaYgrdoqONMklFwh47yoaMpiAWs1FllrhDHH4Mig93YNqirgshALgzsEBol30He2wQvGW233rzC0QJicoTNCb0mgP8DCorKoeDExFV6ubdMXEXGzNRepbsPQZTnJ6XskMhsY8AhidH1bcYokE88cj7Gu7h8+vyvrQGGA8E+NiTQB/8P/s0e/P/w+H+BQVQRBRsRXGMroGPuVuIucciBY7HrJOFRjsF5JdcJAKifQRDgeDAyOWXnsT02twgl4H0IAJ9AgUBEO0IQoa5tK8aMbxQCegRYERyDHZMWbV+tcXTjBQS/bvuR3CDzFNgab7Rqg8SsCUfpmM3FBvmj3M3XMpf441zRpeaQILJ6SvlzO+ygOya9sqfQIhnALuXnSW6Qyw3MCdhSnD/4twf/9uCfL/6A+H/lBYOggEnayZOhgSF17QpSkwMcU4pIQIYIXYfZsWMjemBo5R/wmMmFDKsBNfGC56EEZEwI+EgGeG8QkyEGMdLF5It0cADqRpPk4wxNFyQDj67qYRCDzREwU2JGUU5yTMBH+nHQtWIXb2LSOZCU4ib2jsCW5K5JsWLw/YdbjVMMneI95RKMlG3MNCQaBpvswcUzpsRkD/5LlQf/D/7l+OHw/zIxlhBr78nY4ZBARcCgU0lJCFQEk+lYSBJoLOpYsmOzQ9AKfZVHAe7OHabZAJLUVXmIsR0CpTq75IPOBl1wpUG0IfjwMgURguB9wA89fJXkk0bY/RHAK0CXKYeh4LH0JQC7dJfCp0SexkJsFJvpPDxmrMSB5+3hUjw1yUTQe9AV3xgTQjJU/hNrTJiAHeSjyQxFLDrTuAf/D/6BxoP/w/Gj4P+VAQ+Mjt0qCH10boJADIePIa8/hpQvy6+xKJewmZzSulo0xJAA3IbEkvMEJS0BYAAoGPU5ekTAaJP90x7yIwz6GACImivJpCE0E+dwBAZHjh1e20QfCoX6Bm0fEtwEfkxa1mPQB4GVhipD/jBO+JQ0/dBp5zVJCsgjhjlko0mGIa7G5KTnpJglDTcGdxWFKfQw8Tz4f/AP9GjOg/8t14+Ef/wCFrNumKnbS8e0LbH36cOdfalQdjx4DrvaGifGPDrMjLc7MrnYYJBDwpmAsRXtTi2Qo+EHp2/mm5ACVu13BxBMUBR878f8ikrf2ZX0jQNSQddit4I0ZBq+HhMSspAA1+Ra9hU9EtAlk9pEEqCJLRAUasMaJ3YhmeXc6C8xpfqfEpTdJD2Irw9ZKKqqY8MTJjsbjmEeFgI7zH3wv889+H/w/8Pi/6XARjltDhJk1KIVgBb90g4qoFmAhnN6k8RJxn3hDEqVtww9yaqJIrogFAQiv4Krgl0CPJOTY6JJVhKwU3JrQXmwEwaIq0qoK9BH+2jya0lXgEVTlCbQOGc5o9UEdZwCBEqcw/yJ7ghyGiQ2dlhl4vuRKUMOTZsKv/GA4omx4RgXhgNEvvc5tbVJUoyep7UCTYlZ6T34f/BvQOvBPx9/NPzXN6cpoEE5OyiHQWvcJHDwoxBDsiE+ct3hnAb6RMeEVlnduiwGxkZDJS9TeiIXJkLlXeeirwxojgJOZK6E8D4fvTv8KvGa0CIZ4b0vk1ihREJEz4kU46AJB377noJRcvrQhcL1U+FIOhovGmeTD+qQm3mmjyG58NZkS4k8E1kmW9VxkVA+VGgWDf28qNIaFTrY8MH/g/8H/8PxI+P/ZXbsWGJ4HXmYAH4xbM6z7vhTV6LBEhJQeHejK0novjBgzTYIT3e7usga6gCbnYQ8Th1/ZprpzlKbaIsuPsjYzqdNhqRXwDSx2fscflUhJDI3Dnj1UUs+wM9QkDd9+e3msgkI6ygTXFPQmx1A7tLlwzgIV5nYYyFEvwKKJiB431FvOmqYuEnU6tNJLtSlVjAnDIGfx4SGZh/sr/Qe/D/4f/D/g+L/hSdTsC2j47lyqMMhfNSRLZBtSCrCr4IWgqnGgGIFsiEQxoA6PA+gq3xdZMvxk/D42NEZ7e7U5jTrYDvyEZ4I4BZsdkiQqbMkuKIB8uSfA307HQiewS8h4MJ5obSDkzXKUza4keUz57DFleBC2pSIEXhi95SD7vScEs7gC5t0sHPMuHv70oux2CqG3Vs+qKKrIj34f/D/4P/nwT/dnIYDjMFOwwIOZSjnEEQasKpAkdTgRP7ghARZHGh/XnvvtkP4Jp+GFOduCjthkgmcX4b13v3eBjwmTJuTW9Fw7t7RHk0mEIQSBVw3sFHpPADfhTbSRJnGwiD6IRgwKUyJtRWpATjUJRuD3IY4dZEXeUaCFkEnwFEHB8bpgBtX/gbxO/kR7ShJtPSNnhRwDvkQY9Tm+HrwL8eDfxtlevD/x8f/CzvF4M6mjIMCKmMD57+55N2NZmO3jdsIeM6AFr1/pxGQwTUEQjOmAWDhWvHB+TKveIF8+PlUShQxoHE4RzedJC0NCJlPWzEq13C0rDHQb7SGZE3baGJvDUhig/4N7pyJvxYDvGZmRwVzrvr6fQ6+oQjjFJNC2RQToOiYgGrFTrBStjHjb68S3snTJ11aht+xVrQ01tMGw/xKfvKjCSpfS7gP/mle8QL5HvzLGHvw/0fDf91VHrv0n4wWAyGYtoWAYNGbUaaA9oFvmI1dGHUhSDvPgVCobAOagjKvu7uLQ2k7ZMmL101kNNE5RM+SdxiLczKJxUBrejz5jRLmeq1ucEl8DjZun/Md5GmyH67XNQgcLTypewpGj0lnAj7Yy6eEB5NLBJNiOPioJRNMHANgj3KJLhhzdX6Nc4zDiNs8dlCRMFCFQuP1wf+Df3vwX+d/FvzjVnmOnARQBfFzlm6iZHJdX/uGnYmJ8qigoyB2NgQqFDCeDJF/yDKNMRilBazt2GrA0QAHR6AtUFdMRKH62KSot/c1VE6ih8EEY0P4K52Av9YVu7esMsmLsYHBPI0tmfR9J7ShO207oWwhdFpE3wBKPw5E8sVeMVBhAtmwaAXIM/rPGOgx6EK+1ETWQ89M4npK6LpyNtHPpnjeUx/8P/i3Sc87eR/8z8fvFf+vQcB8XUYchNObUkLPA2NPmSfwDjRCA0hka4E8jKf3J+BcgHxEX/hgcGGQT8FGoJFktE65Jqapk1RZ9+SdaDA5EVjer4OaxR0EHX+bj50B9jmGb7Qax4EOLokUr33maJAa5OATDwSzsexfyiZJGhNdmwSJu3gg7jCm7Vzkij/EhmIGx1OMDPEUKBvWK8BnDDZigyweQ4w++Gc+D/7X8eD/x8T/CwQINQwYa/r8pQrZPr5hXYmTskiDnJ40AYgxyKFJ7dR9lpzGiQmTRhkS7eHdy2SvlG+QUWWtBIL2BRnRtpQIDZIByGXD3AaeQ5I8HR9ay/aYuKZ5fnN+SmSGmciMVioVoE2gHcwtIXyRmI7fFha7AprIdqQF/KakReff43LVKba0w1wD2ew01qHrxyQDsT/SPxStB/8P/idZH/wPtOwHwT9tlSezNFBEu4PxpMznOQAnndwCCgV16fAlsRRNlGsC0Lruw3XiZxsMU7KiZKH6gi1QN8M5wBttaXouaQ+/1oPyu3NnrkAwkV87UNL5MJ8So1n7NqXAc4fAC5E/zwUIp8m2YgvAePr8rMqrYkx+IPmGuKiYsW7DO9DUGOeEP/pn53H6ViSSAWkOR9oJxdf3XFsiM64zYT2J3ibaB/8P/oH4g38RIfnYHxH/L2S2HAiNo5kkCRISBVBjgkMooCAwIrjb/MzJ7kSlD9iuGPjYECQUuCiHAkyvRffcyBx1H7rFgERGqggYNWEE8Cu6b5APCWVKYiE6nZG+/f25BLpTYkqZg1cgNh0YLzBHiwLStqEQtQQ4yKs8lZ6qjclEk3soH52v/BQX4v8xuZvRdlnhY4grw/nBK0km2IXF5EN3s56S/IP/B//24P+nwv8rJ0LQ7PbK+SaPjhFrigutz3jpQlIonK/0XObOUQJ8U7aUG6+rHIMMZHggUA4AOVqAaXCa9eTm3LViIiPwxpAoc/7q0EknGadAnQKiDITfAGQ7qDS46lzaGOTEMZMslIj04xp5zb13q9ZtQgknHw++1nOVxCQWCWABK6EhZosnzNM4jj3MfZCBbpxyDIqeLOicxO4o23Dcva9Gn3F+8P/g/8H/z4P/3CrH7Tet9IXBoTMqsGdXIBK4Wf+SBAjeuyAsnkBy6mAC+OJ23ZjkwNkInpq/HHPiZwOA9bob5IE8lyfw+4FBRgf5TklKnW34qM8P8qPPSlbleZLhlFQGXpjwylaQpPD1lLhJptRb/BpvWw7bjSoT0ZFxDczJW8Fq2wYhNy0RP/Ar2Tivxz70xwY20OBkf0oy6fvK0xHyWHpjnD/4f/AvOrTjwf+Pg//XAPwMvMkgqIxDIMXAzwVwFXNIGwLQD7K0bQLnLgvHYJJycRQCCunQOTSWsU5hBwMnLbjEkcA8SQ6hpV1lAK0pKflBdqWXgiFwNKmMH4UwO3bwdzeF6FG2Q37qs0PCjKW32uYTMMPXGeY15J2EWnKTRJ28T7opqCkRCY/CkSbxfJBE5pqskD7qAzK3jy+BHBoLPl178P/g/8H/z4f/FwYDTvCzVypxgEAK0swkNFG6o8o2OfYgSxeAHY5H+3yjGd9FmvNRB00ECHhxVJ5SA0/d8tEuZrxVNiUySAC4ldT4qv7DtQDZKBEIH81iX6FSba12Jh1NknTKNsiFsRNCpwlxioXpvIBoilE6L76z4XzpD7qrDSmeJGnl+ejiB/GD4jW+D2w9LokvnMdr9uD/wb89+K8h9pPg/3WaYDMwPnM1kJOBnluMipYEdgvGVMq5ex27JJCloUpkcAEBGgJXL+WEkC42A0/FNUgOqgPQak7RuYeusZLsIQhtoIsyYGJScNB4tAkEJsk+5I5TEmj0cbwELIJfx2oCxiTTjptEVhfke66TD86n8TrGlv4hXXXqNSTYinsFs9A/vl4fJykZ016D/08yY1JRW7Z5D/4f/D/4b7LAsB8D/1q4CVvJDM9p4IJAAYIqI51HnWrSSYCs5yQGAiyFz4AT/mRokXvcbpKx2A3ma5U5+beP5gDImww2Bx3e+EEHyqpz1Z42B6MPiaz5BJN1BjdMJT/HvMpqIAZWLaHIoQkuE2Tzi9ifeGNwD7ZR2c2s/aiCyqTxUTRcOmDb+qF8sU/H9FEX0t8OyQo/g7rd5hMdOrDwQXIcEzfK8uD/wT/MTXoP/n8w/L80YAA05HdUEBOBD4MFeGiEei1KuHvrxl3Bi9dMAhYAMwJ6cLZNna4EaI4lQRYvIgk2IScAPQKU6KDJpOQeknRYtwclK7FlAwskyHxdQfF+hLs/MQm1BIRA8L4qKr9AwKm9U0fJMTPGp3OqK8RnnUh/oezOq5kxKeqjddufChNiY/JFPTp3+pqkaEtcEq37XMCrqMCg0l9x4A/+m/4i74P/zQd5Pvi3Px7+X4MxXBSvP0kGJCw4OwWZPr6A+o7nZRDRgzH6mUPtpkwSTNKgj5eADAqqyC2KQdcpkFGeKaHR/JBuzeeVCY7FiDaQdUoYNpt2yyqP1SEmb/xlIORldlyl+YEmyYW8kEB2lZqMML465i1XlZS0cP77Eb4vuwEcZUaQaq5Fv8Icrp6cmJVJyYNzIGZUx8DYOx2HpIMixQ2GKHkjiQf/D/7twf8Pjf+XCgKMUIjSBGnha3EeGiMTRDtnknQOBwXF4oMBjbTx4yEFQpPA/wKE2IkFPDZnw2NzBE6QeWUH5JGyQgJy4VPggmCpraG0ix3sNwAGfeyg81QQKOBS/lIqYiwikshsye/GgewDXQWaT37DQB8eG6BUH3wu45R/mwv+InCmHSHOUYcWi/DaBx8h3X3C6fPVJDcWrAPupzh58I8MH/ybPfj/ofH/gotNUIg9JG5A3Idgrrm2HRQYbDkEQJ+PU0IxnD8c9b7Mmyc8p0EaaNM1h+YJDE/vW6Ve6gTV03ZAomMraENWE2IvCg6gRbqljJJUSCfjJGrAIzLxAvDsZGb184CHFvggP8YR8myBivGmPEDJ4xaTPJr12B6L0IknXKNYxMKB4yT5KT/yvRZB1QdjBOxV9NFWGAt2r4vG+6RHyfTg/8E/8rQH/z8E/l8okIlybxBIAFDHJ8yLGQaZ9YQQGPzLiaWc0oXgNO06UCkcJ/qgEXygETF0mhBUtJ149abj51cd6GtAYsJFwOe48SMfCGYFesorCUam2mSLSkQQgHdH0f1ibNlDk7uoVXpCnJC9EKAnXsLDFk07Cue8rbh07xnvTK/knoC3YkJJYDxTvAjrei8T4kfnlwzIH7CDfHCO6WvR+cH/g/+748G/yP0j4P9l7Mxi4twV6RYVBj0FIgJOnBUam2AESkhorAGIpXieS1l1Lr0Ygi8OHZ1zN2diTAzMxmMAGAWuANuVhtjXN2mWQfhR8haamkBHsKa/kD8mekxkKWqOg9efFyvhFyBzuhQZ9J9v9ekOTOIFCTbkuh74sZ9QulMitp6EMTFuwhiQwT/CMYxX/2JMoW4n37iwVQyQ/FkIB7pEI30TvAp68P/g/8E/0P2R8Y9feUoCiXJk7HRCghkIFriVRtIVgUgYTB4IzFRuuAHGVTY7HFOwqizo2HT6KZhhTvEWQIfhyaELlddEe0/r3yMtY0Z1bdYxeDr5HBM7vkbZpmDrzKNv43pfpVQQy9iJLl2bbp4BOmbWV3/Cu8aJnq3wBCfSNi7m5H90jHGcYqyobWpMyi62abpkIdQCqS+GWHrwbw/+H/z/PPh/HQYbKIDGJ7CA413ngXJ3YAo7+AqSQtHHrbuD4TCw4sBSz8dBNlwRfGhLMvOtwthJ4euAaQ2wyBN1ywkicsifiETPMUCUH35dIHW5GMjDvDgk2Ck51NzhW7PQF0rDDrROuoQ8D4nPU3LALcrPAyRM+rEBjXdJxIE04LnKnfFOcmjMgLzIq3XjggHVtSUV5+SLMuX5B/974IP/B/8/LP5fQlgdUt0TdmTYyax5NF4SxMkZxU+NoEqLA5TP6UjaBFaJ7ho3HC2JiUwFSonju8SQ18tuU3JDce0skxuok8lUnt/6AEH3fq5J0WbbTHd4UvALHwpWnANJzO0L0K7CUfxNQCNFRAFBNE/+BF7jfL+O8pkkYbR/KyCAF1xNGTyhGAfax3gCP+RnYZO/TfoFrwjNuq8e/Hc5H/zz8eD/B8B/vsedClMHlxNFj1EZJIrgMnZezsH5yM9A+MYjgzGNh4E6yDXxOvKQA5MYgpFyiHz+EAOwAQx0bDKIHKGOFHkc58TQjcVZMU0cFORCUw8EJ47BrvRoUNFFwXNKYpwRgac8utxItQlsmhWDN4kxeSkfFEPju/kc/FPXtIAgTTvErlXoV6LQ1QIl6EMiaLY68H7wD5fswb8eD/5/IPy3rzw1CbobhwYIdOyyIXALdZJs2pYaAMFUoTQ8GmKQi7a4SnNOJHpMAVPBLfoF0MWshsYlEZWXs3cw0TgmZ5AhhFfNxbHIX6+JnMjjaHOVO3q3618EpIKjbEMnnX/DeaCHib/F2RLOBoGRryHwDOwi8lRCgNg+ymMdfBrTGUN+Q8dlfImleMlJiB01J9L1obAJH3z94P/B/+l48D/IY38E/L8mQoua4UAQEMf5IABtdaHhQAjqKlAwG0ACYDXkhzcpAO9mHHD4JHfqNXrHOLAbzXUtA1F1nBJZ6hzTa7F3+eJOLzwFyWICVCWAOHTVGIwT8Ae90HYUD/A8hJ4LjdPnIpFvMxHGyRBXbXUwxEgNzlgaErQNOhGIjEGHwpKDBjCXfDCe4kJo6nMffB0igx51x+3hePDfrz34f/Bv9gPh/zUQRmI6uQkIQoZaVhxPPA5JhQRUwAJAkAY6Tr99huSJ3plPquD8CjA0+vscGNsOP6w+Ak1lAFs5PpqALGL8aAKe12BUQE3gIj8JfZXfBx3CBOymk+YCoe6PgbfKOyW/RiNdLTIg0DRG/EYwBah26wg0LWJ5TRNP0dSYMmvbbRNfTSrKvxUloXVaIT34f/CP5B/8/8D4x688bdacjD4YJoX0fA6GQgWVxejRHLec0D5fOo0dnh+djnIPdLKL99XlloGjJzHcEmt0NJmZzbZbf5EAVFDA82n10xISmsu6fvrcMwnZTvA1aH38pt1xenCJJmuTpOQafM6rrmMil+P02V76KBTyX+P0YxVlW/EvJYj1V/EA9BweexBAURkSm/LETh/lKiiBoXVVUGNQbrhwAZ1/UMOHWHrw/+D/wf9Pgn9dcbsY3uQYlUbB1kE0v3DKdC2d0ACXxgd5p04H6aZA6MSpu6xkk0ZdN5/cvc+Rc0N4lmyYMAeemmjscM51DiaSTDBw3lJxO8usQ1rA5hcpBKx4kNc0f/L9JMb7JP5knehONCHGQh6b3bT22AbXKQ4pEWARzBjIhAYfD/GhyGncKf1K0jl2SlxpY2N7tlhRnDqDEB+zgJjKpbI++H/wn/Qe/P/Y+H9hZxAHK7uPH6A3mIOdjsv1qQvEQJ8Qcdz2CGji0qAoy0CrbWPYBvN45KUpGQqbOPFKu4h8OC86iw3GgS7xxoT5Ppd3VaKqcqelC+/R9glMkb2MLgm1gdWsr/xsSEaQdLdDJXlgwk3bYDK1njCnR5fnJ4CZWfsMKxUmBJSCTxJYwDi1QXXjU5KRQhcTjfSNxAASC7OxAEz6PvhX5g/+H/z/4PjXe+hdJpZQ4MjWLcCYW+B471rHwBGlXK4Zghp5ZmAZG85RDJFb5T0lP7zmA416DMwsh+CAP7RZ0xNfp7MPyaTsf0gUJL9JAL8PtY331QEFqQaXjs1xAMjik5fVj8gT56IeeEOS+Lr4gPxjEkQ541CoYO4Yi0te/VKOaZzysy9kCtUjuGM3lGFIGCrziSfGKajw4B+eP/gH2R78/zj4H3/W0zvCtPKTMDfzlqzBT86AvT2ADvFcc1FGMjA+hYBAcBu+BhlzXFh3RhyCY7TdpA6MJ/srKBK0QmtKDHXOofEfxtN5h9VLxNcrEaCfdFNWlUnzagU6JHOXa7f2AltgvNEcCHY6PQg1ftGB2mCKzUleTUw2yH/CFjyvhLFoqhFJDDhHMeqchW3g6fL6wf+D/wf/9nPgv30cDIWBLkxBrtsY+RzfI6AvbvAvOqAFqJPR6Ft9lF5Ak3tyGARK46FzUh/g0fQf5rVEeYMBpBXGSUKDuulgDHqTYFGbaML5nMevO7Qh4ccmgInNFPA2vdj+p6RqnDhQnlO+0ESVj0jPhffJVxqjejjEBvE6JBRKiL5XiieAqoxT4m6JT2iNsqTMA/YmfiXLZIcH/w/+19gH/z8w/l8g9OQ8gw6plALlPozg4xB0DcBIgUDacFCQgj50gu/3OOTHBmgsGIGOvBbDtkOSEJkosJSegojxUcAf74AcopScGLyyKMHhdfFOvQ/B2FpeOF+PwQii4cAXAzRkrAKs/A/x0ECIIYcBj8nBcNJO3pjI4hRbMLQ6e6Qp9oxlR/xiE2KntM36qksT3yS/9URGq0Dg35LU4vlVUvCbAlYnJAk/+GeZHvw/+Cd2Stt+T/gXujDWC/+vIUjpuVxHg9WQGDrPiW4qJMmjzZFr9DnJj9DDnZqTDGbjVpIdriHgFdin5/ma8IHzNdjyObz276Ev47fQDHI9cCvI7NDNpT3BN5pI0zYkgwBvpG8CWkkSoXIuGZR+DLq2RJDyS8KzQX+MY7UrffTi/Y/e/YqJRQpCQBJFu6HceW3C0Ie1JC892l3OgoHTvLLHkJQe/D/4f/DPstT4PwT+8xHnrlwAf3vASzqu7BQnIZOyIdHhICNPwp2cTNHvfux8B8d8z6H8KqDAWOg8mntKKmt+BdqQcJuRZNz3KOAHW2NHOY3zQ0LL52R3KBgEtlOAH3w8dYsamJM8+lGjOm/z0b6A4f1afoVI5VK9RrqLmHb2dpjX7DUBdBlLBc5LgTqAfposlcdYjO3+CJ374P/Bf05+8P+Hx7/tONR4bPhP3i8RzMF52p0gs/Fba0SY6WhdUgoHwpaeGhjYCUlXNNHNOaaKgwOzy1MZNbn4DdDoxwbkiy5KtuAVTfLOvyk53h0t0esjXhxQHwLQ0TZD4kT+Y0Iytl3S0ADMc7jFifIqX1SBigzq8La9/tgAJLZ2B+iU9L2vOD5PDwlH9Wq+HBRAoPp6KB3QBqiIJkOXznzyEeJ4ivFBtgf/D/4f/P8B8Z+H6KJ80Lb1BSwctTMw7xQLHT8EytQRBg4fOkMFSshq5HsCnJJOzpOkcJJV5UUFgoeTUz6PknhbcpFsQfPTOTjnYF8XfiZ6NMAmLfhYhYNMtHWJc+Ro+qbcOkf0VJ2pgK3nJzrKuwI+i80heeFj6Ruy0sznkNDMjG46wSRAsgygbrHrfVWnNqH4imE1AXqXXqm7xott+xTdgwwP/mdZVd4H/wd57cG/TXrBfLxR09NX4mMf7FJq5Ov06QsUyeD6DMrOMRnECcnWOihV2tJQ8BjGjhrpQqLJEzY8b8kQgxhBioaHRIZHu6EE/DkBrSUyTHwHIHwOAM4UzD4BCHXCeSkzym096EuXDHQRiTOnjz/sEMo3n0rA+83z0Y5A55hwUAmTnJBzxNcKALo2JWhIBiWPjG3HTXLK1wp8vQGtjTdOihMGsHg6PGpMnbBLCePBf8n84N8e/P9t8Q++mt6z97dp87lcy7vxkw7uLlVsv3DwIuIIVA0+cRDZYwlN3QuCRQRLxWyyRV6DxEHX12Hj5C2zTgIV7Ksx6IDjVxeiDLJNVrruaTRvBI46GQLQJSh9IIXB4HoOfGwwrnx6SmTIMwN7knuab5v5xEfNEDAuQA9XeeBcWx3egOxz4fDtSzRJaFJijGjvC6tNXeSveE39INkinSaHGa/OIO61QGL8tEJmkLgHPg/++5gH/w/+DXl8L/6h+KO9AtjEO6xR53wcirTDteL7moROxZCAKm9mE2oQ/J7JaSkbYIQRdDgGT2GiEz6ouMp5l2DyOr6m1YD+4k9+T20MHbxtAJjqgo/DPOTv1pNKS5ToPNGVdEOg0MBuY+1WA547yN7Oo9wqCyaXnJ5xfCc/xJ7f6GeH+QYyEn8YF/ATfsVHCslU+HTF1vjKa4wzlwJUYJZEFBpTZrQNOuGS7khHOYSWw6A4yPo5Hvw/+H/wDwp+gf987dfqmHib8e4S9DlH/EsBJ/zn+ZfZeAelo2ATyOxsxLQV+Qc7Bxucgt2FzBl5oYE02FUWFErPIS10pNDUxHHiU4BxON4XcesRgmNMIs5FoSVVsZMGH3bJLcm6OBtlV345VD6OU/QkCYSA3ZCOAD9p1DzxAfkJ9Km5h2SNsuE5jKNpG3JKJsVHc7AkF/VFDHMN+KpcqCtt03pf2anMdnhdPpBiHhJ7YQ/+H/w/+P9V+B/8e8R/nkYdVFf1W5/f8f9ailDyQD1wsrt/tdrAc2OSWYTREsQP5y0DjTwqSoY4BLptKwuulZ3SITYckFDonHVfY7J0d/7iiXwugZt/yCJQfhj7eVwJBP2l731NOhB95Y8JC3WcEiIGkNjF7XxQIQB+qfvpYysOoKcYwTt5zVp3G4OupcIQU0gDz08fXXIfgm46lQC3+Sj9bZZb3zfUIjwmMpNCBfKP+tmD/wf/D/6RBp4n/Gcs3GAaVfBd4PUKbYHTI/LGLX30xZtu/TqYcyfsk3JJYGPGFdgNLCJwAkYdf0xuEe0zqioryeje3icggDp0akobgguT32ll0/Q3CJqATl0ZoC6bJHWv1Z2BHXRbpcZJkm1bkTE7pGhAMsX3UkxkqNeYuCSJ2Ok5ghV1zeSMMiC/6KsTA3oTP+za3XvipVWtmY1ZWFg0/iBfrcZ6WI9zqPCsQ3Hn0/kpkeZ1KXzj9vqN3g/+H/w/+DdrZPzrYk33AeTQ9xk5n3+Ff+95wkVGehsM8f9CJ1jvUMb3z8Rxk0FGBYvJFwOHifVUXhP/U8AN7CLO3eRnug1i6OQM3BN44XlMtL4qDJBYpk574meLrgsPl8SAdCghgE8nHwUkhZZcgGazgdi2JTMAtoJbZSnZTzlRg139rxgEH2rSxvM2YXf5Bfme4jtpa9EivpAMWwLL85kcDnp9eEwJD5Ju+erB/4P/B/+Mf2xOruujLahJFJr4XjXKfcR/2vUt6vsbfe2A/yWr43eVk0wxd5l4DR1FwmVigdfFBBOHO98pp8ojKKakqecRtDe5wa3rezoC5KwJcoepDwCmDs9mGRAAI7DNdhAO84+vF2GH+VO3X8+nZDfMpyCVRIAya0EyKDSaeDQRFw0J+CaXcTKKleS+x6kBhRFB58g7bYj2P8RUDEVNE2fyQlsF8rSezFA2vOMUV1QK7kD5ows8bYsDSxpnQluvPfi3B//2k+P/0uu16LbP3i99x+a36ME5xOkR/7GPjB249suHX16D8ZY03i/qPe4hQMLnFQYJbWxkFG4Nd1r2I0iTb6Gck1HN9blz0tykwa7nA59HR/YUeHUeZZsSxJKVkrgEd4gME2DtIEOdFx77gretv5IXZcbx1gF8zHboK+XjvasnPdJ3aSPjgkVdO4IKx6jsUgAoyYjOWhQc/hrpnJfg+6pwqMwhq7ZDkdMEqAkt5Q/hYUumjB1NklUQHKrkoCPRePBP4x78D8ffNfxT0HrSZHt43SXeVs8qQzWsk+7wfMR/nodHUCGQR+rj+pWnZB90RA4R42CisO84arJ+5ERo9pPf6MvnJPXr7UbA2Va6ksqapF0gJVdwSkvGxSD6t+kgkCV3TgXDBwC1A5MBJEJKSOj0IspOOSWuUGFsTtqfE/qF+yJnYchmf+hNVC1QT7FIhIK286aiFzI3bpI50lcajpgakibOV1ur38zm+MG5dP19bbB38y26278GYul1iJMi++D/wT+K8f7nZ8Z/FluHLzcR+miLD9zfbN5hAvJh0UZc+4G/NuCkQ8YiFniUXRNXjnkJ4XFQMjocCgAToZVedRs2G358zMR5c+7uQD3GIAeZsFPCbRCTcRR0AhiTux71qOQAxeCoB+fPEVCOvANWKTKO5sDzqk5LHj8AGwXwLV5o4kIfJw206yTTJjYnMowV0iP6SkzjgkC1dIhBTp/mYCKc/Cn+CxCk0Vpy0V2keW6iAb5w1VH5SAK0L46AeQ/+7cH/31X8Q0OBshD+Uzfw97sxtHeveGiEDOiPGMribFywycYZZ9YbqyKfU5Le+0V+jludMa0W9HyTX0A0JiJ4PXWgi0X/TCfIh47VDi2UzufkEPniSB1WAfR+SBAmwOKYozqIB7lSD+IBupnMi4mJ2Ed526HAKI/qBNdzh2RSpkLe3jvmCZAG59B2iCDXhAV2OyUxH/z2eY7FWH9sAJOvJCUFHYlvkpzNbLoRiZKVzTFNK7H1Wj9vm3+YWFA35atFBWXFbemY9AN7Pfi3NuzB/98h/CsNlEllyPMmts9zJ/yvvPJ+7u+P2kss4SP5HuhkE/Iht4dQvBffF5xEA9vAeFKOxqrRp4QwvKbg8d65aUeFc/XWfjo0WYLMrUsz61uDmOwNMIPnTjqhozFJiognGpMNaYwkBxe+pnQmngly4+Aomx9sZMIT+Zwep6SOPr67qQMfx1VsFuN8FKBg59vmq54ipwtg6f09n1diU/cdA/CnGCRy1kHbYkWxJ0XWjZNlnUZ8Ie0H/yX7g/+fHP9Apx3UAQw4dOqpGf80OMK6rS4ZQJYYMOSmMzht3OI/fx2sBsjsGBhQRzckq2KoStp2GCa0BsTBkNrp6fOm4NQ1DfKkvJ/B+IPyJvKDnPm5QzoH8wzmoj6YJI90QSb6fPBUJDIYZN4xEDXoM9Bh3J2tVXYFe8kl5zWZj3Jzzmxd+cS/aKCts9OuLMsJwAa6MflAkzVmA0Aj0QaeDXSKYNRhkEk7csRixXQmB5ClbXHGBMIBX/bg/8H/30H84zj4I/znHIevLFX877c+dpGd8A++bjGJj7ELvqSNTctu8J8rbjQuMsWJLQmdDlGIggGC8KSYHhWMABjkY6q09YCa3vOLLnYLqLRqQKKiVRfyQR3veOE4tBU+Rz6HIFGQGNBAuSYwtzE+CG3drnqhkkKeFtvcAR/HcKbhIolzY7geEvCVVKdkJ3S1GLpcL57G8p/GKY4QgDr/VDArucgYH4pjKx4iizowhucP/kvsB/967WfEP8hHvoB+oMQdcEZ0sLCuUCgCUHw/L9EmJvgPfo/6b43/l+2DEotzx6pGJwWBEU6uxLGCMIC5JgulGRO/TMhiKJRjSqhmxl9dJ/xURxzrqEvKJmCiwBXe5WnQKSAocJ5PNAAIKY+ZEBoSyVZyd5/jNpokQeQdImPRAdbo85rD7Dm5gJ/Gm65yngZyPkWitgNa55N/bE5eepPamLhs0HFOBjYmUkliWrzzfEBca4Gm4iMyT3z9UMxN5hzxZw/+8/yD/58M/5MdJDYtVX4vtO2Afyiwer7ZBcab2Vj8zX7H+H+JgiZM3U8RcXO4dKwikJv19wycO/IC9Xpt8ryMcBew+RRPp1ApH54HPs1hMH7aAsTrU/CWHeER50zPS1cNiByLtIZkh4GPQKnTi/g4Z+CHdsHETl1pvrT5iMH2cZDlLpErqBtgTwBD+jF08ye5M1kDzZDEM75nDa4vvsNzLGItQWPym2JhSiIDL6Q1xtSD/wf/el3k+aHx3xuTkxuvqTsuOV9ws9JzyQn/OD8QQL8H/ON73CkUvg59nYQUnCDM5/UEHIzfYY7SQkO0Ltd251cyscH5IwH4XH9sAOfYTQJvHnDNA30lAXJjYMQAGHWYBgbywo9skA0G+Uh+55UUddFTwkKADnJQMhIb5EAVIem1oFX7HubRSkt+W7eKMCb/4bFoTbzkNdInuQd5x4/2DH5Ufuh7N8lV0Y1I/KbXii8h5XLtwb89+P+7hP8l+mLuEy5j+yGyQH9W2RG4BR5f4h/G/8Hw/wJnfa6L8xy7OttgomAdDH7qSjXICaRmY4tUAd9x49X9CaCxcy9lQYjWxaPBT0lJeWy8tI8VlDMQaCg46mGo7AbSJHsBBQK1bCbytRt9wG9FEH6yz4F36/YH25dcB1+r7EhIC0fFGCYSHINxAy9C4nPKEgHyjgkGgRVdGfehCKFOSAMxdHb5niu8T3xKDxmnxcwhgUyJQnWMB/8P/u0nx/9gf4jXNxY6/oO+ZjSxayZ8TWTF+YSDPzT+XzdGxwsYgHUdnEtj0alf0P2eg4yF58BoRBuBPCRdCooI/sUjGYdJaZKbEvcNIO9o2JQc8TwG6vRa+YkcLRnBeHFdSwIqN+mrSWHiA4Nu+YHs03kfHlEmTEiaaCuxn2J9imm4HMu3eh7lQZsTmAXYjcZKwsRPnofyQpsecOanuTruwf+Df6HxU+KfzzvSa/gXuZHMZNdSNHWOocD+ofE/3ZyWg9GBmgw/4w/OTYEz8FGIqYs0nGfWb6KICO2MlUagwxG00ROTw58m5HSQJgOSwXaHWDbKLjjinAmRB8qfdpQgH1cZ1nXpDKTzRh6H5ELBcvBNjd95pv9ABNh+ks3B3hGKmhUz9kWSBNldZMoO/BRnKGvYHOs6N2OK4neQLTTxDs+RhsO8uzlTEm5JYjjSDmjnthId+D74f/B/ovnD4h9k/7gpZZrwv1WKEf/vh5Qs1sr8R8P/C4SnfZED4PQRg3BkiDSTFjjcBYgIvIDTDp1LXVvvb1QXJCBU0IY8GsinerXEAiCdkosGbCC/94GJRa6fVgU11+YEON2QQVuANidVG46eKYfrSftt90yKIJgDeI/Ja0gA+RprLm3boQw4Dx5dkifxw9cSewoM4jUlQI0xlH+Q+USXErRxEjHrhQSxoDIpP4ydnLMnRQv/B/8P/n9q/MO1drNjxob8fVxi1gqjpXvfrH9k/L/IWutI5YD4FGTI2AGgNgk7PP8cd19aL0fRJ3lt/9gABkVN2h6qxGFbl5ZgmvBrjND3qSDgo21Hu3ejYIK666wL6DAmQTt2+PlaZEPiU4DQcxg/fkbyfYDfmt1SNrNj5xzTa9Dn9B5tykE6Cq9RJ+Rhc2EmvUGXGm+9SOyTa7gxXhQT+JEOPFzixFGeZc+PXcDuLo+0Erqz34nvz4h/+w78G+vx4P/vGP5F1lv8p3xKT2Lnh8f/Z6scvhAfK78LU1IIpfwI9B5qVChpfOT3/V6MLMfj3XHwpw7/0AcD7W7z/bcc7gRuW3+epqmVhO/mGb+asCXANSjH4rXjEX11184rHff5S+pFFgJvcIe/7bSdXbQE3OAeFmmNx/c9XeV6012JshWOwUZTDPn0J3MocOsCLXq6/MMFBJGLbUps6/aoeUKy5n+RmI55J3hlSLYF7OGK5jMgbyLCpDrQDjvbZ5LzM/C3xb+cn5xTz7FAB6+6/ECv0U/xhmKFtmvYgkfnaQ/+5fxPh3+cN+E/uCiPN+zZT4j/F3QAITV0UuTakjQJvBzvnzcXHCzlBh2Uz4CcFbdaOezmgIOFEkTKjmgrGdY09njrvMuIJ8dmECAorDsYxxvwwDl3wcOZMlp3h/SQJ12faJZfRBZ4TnawbvPabgL+FWgqQ86D5De+f4aJC5/HkKDXGBf+SMtRJhlrAojA8yoW6meDzDYnGPT9EI58TeYX/tQGU1JK+RIn1hMLHjHR+G3wnzxUFigqFU8B+LdfgX+QzUBPwv9wrWd226tlib8H/33+T4//VeAa/mOINKT/s+H/pURVONYNHP524Oz81r1eCCQeUa+9ngtzIosIjnHE5JkaEJ8/MXAlojTkCixKCqjzDoJ6aTre2I+UDLCoAM3U5ZjUonfxAQDFOUjfRf7yiwYOjEP5M4DM7Ngd5uC7rbE8/zGeJDib5AE7YcyR37E4gK/oYzJqI/A18vxMfq8IM7FksZlkS56aU/BRk8CQFJpceskOcSRjSpahWGqC9vwu7vSv4luFuMP/4O97/DOPqVCMx+BP0tt3U/4Vjfz8Nsr74B/oivw/Df5xHthZ3opQW/3c+H8NE4Dutq1PlFGh3dZgiY5PaU6yG77LG5HguSwL12AtZMYKKPhtNsvFAMaqdVwnYuKHZOgTC+iEMGA+14bf4vXhNZ3zc2MyFigbgI+AW0mlBYUPKyUz3mbKwEUw41jRSeVImWPgYyC3D+OmQpHP/UQzbT/peihiNRUTtPrxfUAH3w5JHhWbEXHS6ZS0DXmkrlhUjBOx6RxJ7hpvY7I/JIxBvWNCbknTuq994IN2yoLZaE7yKU7ipmAbJ7wYihwL9eAfdfvh8e9fFMQ32xiqNb7+WfH/clYKL7rvGZdgEfncZB7JWSPcutIQC7tbfV3F3S1b0xPt2VOclD/NQmwPlF7bgtf78J/CHqFNSb4eu+6A7l3FUH9JZCkgQXyf5pqOB0dikJS/JFEjX6TRbuKQAKrTKlPK5bIK0eKYHS92jAqyA0BpbBYbsI/LGCpcEw93d7FlDDpigm+HCihxQech2Y+k8m/5QWXDAuvIO8eL/9EeOh/HnbKcJjXCv8gd0Quz0tDXbmebFv5xJSxF/Pvwz2OxGWD8dz+TsfTa1CQ9+P9x8B9MxPqRq2/Ff6iOPx3+P195+nHGLtRZoFOa2uexg1ZrHwIE8BVlWyBt2CLwbtKzF4cjOxav5++vqUN5Ph2D7gC47wK/TjG/z81tbtB2GGwEXEcVdUyQCn4JXE2O9FxAWwlZzulBCVE65Ol9JLQXbiflfJNkqQmnks577Po4SCVz2YKsFRQmmaD4sJTTM9gxgKnycCHCMWQHtSOAv61G0T6QtBxkcwCMDfxVl5Ip7TLoVbKBvFpkQwpC2JAgbY6t1Buge8YSFk7nxB1ir0oaBzoutlfZsBloq1JlCMmpyQtjGf/GK//ULTjZa/EmYQdaKgdi7sH/D4Z/wWl0FQz47/e8f1b8v0ZhkFn0351lMcLACteYiKqdFsm8VruWglwvHA22n26DRpNPDHZ1HYVsuzkAxG4BsU/dRSYZa1bfhUJlMNPgT68UYL5IqggYVMJPObNkhyDDxxsaDQwCLAKrPCJQK2lnIOZYBO0aaMaJL0ERIpDmcRJzeKSEigUbiaFt8rkkTeJxACteoyTeBkYo2LT31Thu401ixnpxrdiS6yiDjYrE8ctCiGV8gX+1J8oGPg/1AyQ4ssNgoxBdPBM+jDHFwOEgOw3FkXA8AM+t46LNswf/fzT869ATNlOmnxX/1+9xb0G2thH79bv+5gr5s6Bdf11aU2FsAxMM7G0SvC4RrJHnTqxEfv//C8jX58Yk7HuLPtCLbMohGBYAu8FVvN5cmGmgGj4KLwpG6NzGRIs0EkQQlMckJ3zxr8bK8xa4oseU6EoJeO3w3pFLJsZrKiu+pDte4ccGKAFKskRCqMeIUjk0SZT8ctMX8kJZ6gcRllzIG22JPFqSaEIN8ZP+v0tMoEO7ASkU/9Y/bz0VE40BKPqEf2kMYqChcpYMqZPKk6+lgBxpvc/Bj42cMKFzw+aEq6o8+Bcav2/8w+vi8zb3hP+rfP3c+H+JUNuY+8vn7VoXv3ws1nhQQc/da2K8al4lBd/nzDDexSl5Dlg5DtYV91Y+V+7Fcn/ce+0mAGHA29YlaZET1nH9IjoARABGTjCz45ajCTjgeSVXnTt0cBWQCmZ53ZsRTrAlB+hUOio//you9sTLAUIDCkXxhUacZIXg9qk1Rz5wreYOBU11dmTUVZgTcj6uJEv+gkJapyTRtTumlTc8BsiiN8+gPVOW5kOgG6K3JqMaq8mpm6fFQkvyKTc0BW6gy4BvktdhdYf4h9ct+Z18ZhtTzU/Yy9sX+EeeD/7Px+8L/3AV/RrYIGXM5XNx40+J/5dxQO6uIuWmYmyTh/KN4PxttGEsezbj3K7iDpPCvjgc2e5+JabJ+733ZB/8B97df5DvgS57OxMNCOVAx2eAb9vOiiqfFmEaS5mYL5EcaShdPTChYPA12Q6gD3g+JnE9MFAZpywzBH2O77HJehSdU0EW3nfyVmGZEizIdTzkRitKGutcfDUPWcJjxRDoGZIAdC7JAkrWUzvgf4i18o3ywcYoBvwfilVhYYojlXdImjp2TLR3PkO++CfJteH/hp4d/PHg//eEf3AFFeprbDicc8kP0/HT4P/aKgfB5REKmhDchZ1vAtuFPKeH5gbuptESvun3AApWuhkwI9jawUGyJ0ALtPXiYWLMEHrzLsQKFwm+bltrWyLlaJDxc1kCps27SeAa7HReV0guKxk5KLkgyEBmtbE+d5tz+c7+hwE4bjo/FY3D8Ykv0T2LCPLWcVMBpFgVYGphnZJ36f2FzvkXh+LIE1C5aFBKWYiGzTFqAx2MTx90bPycV+oVP3ZuOijG83vJbxLnKWZHuZN/w7/NDQT42hie56bgwf8fHv/uO7TyL6dIHPzU+Meb01onxattEsj52qJ9nSPmlzAO851pfXjlmCZoyjWBzETe6y/J8XOkS3NNOz/MJf65w27LuZuVzSNf42NQQoutaWiypPfYYIXgMEfH5fwKAkwqpSh34rfBDjL50F3TeHyRyQkTswHmDkGcL4gUi+46KWzQQXRsj3cH+KcVEPUTAh55rHE01xiYWlincepTSgR2Tgokj/qgDyW++Ih8CP878dV1paF+nBKuJmSlFcO0Ef+DXg3/YIcQm5gN+A/Fvwo/xDLYBXXSIvXg/w+A/1Oc74Zmkz/Fws+I/1cVIYjG1a7YWm2DEodkAHU3zhmjBDWjjsZk7yRuaBgpdMnLNymk3FuHgPEGfHuC0ZyD3k/nsl2cdiSwN1kPS7ZMTpQ43i/xPcqhe1VHGyQDBX8DFY5XEB0e8XnJi75BHiqrJhD9mMj3AvLqkS65D4WjxsEjJVHUNxPMRB/ppCziJ3zpAw2UT1dZJdMhpB2ujT7PhJ50kJcZvc8fN8lwel00118xwiJyiMVjc4Q3iSkr1RFlzxvP7Ab/KSvERsM/Fj+JT40l7+Sp8BrIW8ld7ILfvDb6+MH/7xf/Q5wW/Sttf9Lyaafmp8X/qwrPWxD4sQFDw5Yso6O7JH1MpE3EwFfXgNJxgJ+Szyqa1/BNy6zkFmesa/2c4aq5Lx+Arh3p8hwMfe2gT6uiDJgsMpjkdF4mAbpsfAQk4Zzvw/hJB0okMDdMgtHRPnv8abWn+vgXctR55XNI8JVEtVC/5+NdyPBZyR4Hk+CHlYIP2SC4O9chmMUMdTjQCmkyHP6KlDzi+fBhJYSxBDb7nh8b+W78HwqFy93gpc/7AFOM+N9iVdOSNOox5Y4Bp3GDfyxCzrilghlf4F+L/4P/LRMx+R3hX2RMOQJN+BZ1iDvl+1Phn7bKF3jws5Wu7GJ3d5OiDWg50bbDLxqrvK5ZJ1rfmaSu+p854PPkarWgKIuTnHiE1UDoLsEJMNbMbjrWT5tXz68AWp3h1Rpw9ypBEYOOY1e4g3PsJqf3nvAImeeTnkgfG6uUJ3kIXdSnyfQdR4gsBquxRbbAuomLDTRZnorBxH+wp8o2natYzZwZvSsvGw6FodGWBF41UWiRHFh8zOYv8hh+GvRz/Yh/ECljFPlcsY2xUiT1J3VVp44f1qfZdJDb4Hpecy3ENidpLUYI0YjfAv+KZyjeJkQf/M/Hb4X/gecR/3d5w34S/OvHwebO+h0Av8T6elA/ggc6g+wKe4G1rKpEY7LUCWhz6qIrXlDcK2CfaO8dANjxqTHf8hgUfTIiNQM7WwWTt7ozfbVWYYeEC3LdBYd27JlEJ1ohSbjOy7kCiEuLiPTz5qCUYcpu1hOb6jDdBRvWbYBB7augKA/SS5II7ezAtRjGNrprbuTjMMampAfJ2WxI5spzAHX6f7JjaNM8JZjcTYDEblU8F7/XcrPvayP+398cfH2P0loJfjtfczNUQkL+I6NHxVIxXzBZLw+PJK/v8fltjgEyIz3T6+u1u4/blA3/h/gatz6twnPHqqPdOA7THVr883jw/7fEv89YXvJdfy74H46fCv8vYT49v0CTGNlXBzRAp85Xp4Dl62Gn7tAMnYUFGv+9obvHON3x/jnjDnfgDCrFui3e3aBAV8KSwu841bBQ2KJg9wcAB9sTt7noKNCnZIPjC4jOK5JM9pMPcIyDDAgglB/PheoRbDcf9M3rRFMAPx4xF+TUlRKT6pk8MFl578wbGEF2B/vpHaLkO5FxSsr5mm1rpsseLL5eBe4Cq/g+4VtuXLy9Rl1Xr9mLgpuD/zH+bTf1W17j23iRj2d/YFMmiKzO7oIUxB3Gym4avsD/NWYJFc4NSzYxGRTGNts+lbg2ieN87Y0/X/sK/g/+88WvwP9UNgI2NjJU0NVW/IJ4/Mj4N7D161PMrBFKK9HgTA1rFBdn3O7uBZUCDPegk5OlsrsHC6IdbfwEA+QDekAn07uo7GUmO7x1Pn4U43MZv1tWinqO9ynazFrgZ4GRuTrepMOm+WZf/thABlF13qeOcJPt+kMAYjAH0Cn6AwAm+VyCGjvYgGRD00WGyqPWk1pIYiK5IEHjap2SFep/OtSmdVr0GQBMzZ+nnbddXHhABFWRc6AT1iJdMtxVxVb1z1KfRXaPMpHyfN4HXkk88bQcgbJfUsT1Y0ONDz/HnMTFPfVfTfbSw8te9/jf9rap2Jcmxqv++mIag9h+8J+y/8HwH9zEDfcJRI3h5mLf8Pj7xL8N+NdDmj/qqxT/L+GKEzkAr7ZlBT+KYxkSLlAuAep1Qdn3p6x+CS7QOF8hJo3CZ66TFJsEylMpg+ejbL0T28CanGAZtJfH18zkTWDDVUp1ZPJagzJB1r6OUo4KTugWtZix1ntO22LDwMnOE86r3PRjA+9z3/FjA6HXl7wO8uv1slP0zrrdoOQaw9YAMSVAM6Mbetw7ssonzt1/uMlK2CDJ71CvrWrfBSR5oQJX0d5M8MvAL1QEFEU33PVZcYlFzIwKe6aiOCQgPzbFaIN5Jr8UPDkmSl8yLtnLgnGm10jvbE74x0EgwrYn6lJvhfnG6bW9KE5eS7asWEf8SxxQvKTQ9uC/rtvvGP94HtMyQPoUV781/r+gqbKa6DbNRZohun9e6Oe48zHSZ5Yr8hUexEqLagzsrfr4WP8GXNOO0mnGPibltnFh/8+zu9/yHAJ+D4/PmLJO06458WpizIbCPBx0k5sGBbwneY0t+czU6RAozTYAonrvCzo8DUYn+Qb7wvAWYA4d9QB2m8Bp1pujIaG1Tx0ASFRmfEQ6tRrA56LbdE4/d4tykQiDnlcMfRgabvfuYpF/WSx8qHPuUQKCPixsVvYrZksw5Hdx4ZWzethtSkz5OD2fqHzPgdUTc8vn3Ij/Gt9oEF2J50q6PBd2FKmBccy8WVRwf7TeViv7DhIALaSfbrpctQt63iNQFeTBvxnM/Vvjn2W8VMuZSPp3jX/L+DF6H981B1Hn0mMqiJGZLjrq+WsL+43JL6v7hQYmYrBNh9SuTL/IhF2q3To483WfQ4AHCiLOxxDRko2dU5bvor0y4GUo1+A4JZFNpqRdNtwRgl7dUifIIUAo+c8dcDlzCiI7ndjn7YtD7RxbnGpkUBftcr9MsLaBneN9oue74TWUYeq0YaBevEIi9ncGTzE8gM6mwx02bvLbu5ZNMO98PCvf7212ahrpMcc1PRb/4WaZWrX6KobKQbe7TzzIJ5MRTnaZZF3j43Dt+/FvB/xPjMsmx2Tuh9dYiK5NwF+D/34tMb7P7+Zgr+IX/j3HRyBAaq4b4//14F9pNvwH59XFZ3/ccRYvx57xnwfcoKcx+zmH3++/Fg6144D1Oh8l3496zPhf92YkAWgEq1359raTRMhixG4TENjRRo2OQZLZ7sSy6zRauNINcZuKT2OPR9y+Rkdtx/XC7LRV3pOAfrysSSQd8Snpuzt/xAQ7a5QXAyaLmdDT91rQc+Rh7BqRp0GgDh10V2DunHNKiKy00tAkFDMafWIlXa+dxPLUxyiZhieNFXI1bt+QZeLW+6ja5wLY0QpFhPMBn2ZzgTklVcqISfsW/3PmPxZHv68Uk03ufIjyjHTSNibFYBr7Wx4z/tnW9zpog3lttXtboW9lPuO9EcrM0vGPsWr/luIf4rdYYWyfInM1waQP8Cg5pbFo8Zayoq2lOGsjFUsvjOGKMfBvHsXvhZJsarG7SA7JvXoOCmQzk6476hwYlihtQwXR/tbaCP8aWFl1FULpeuY0tUd3x2F3edBmg8A0sF0gVXKEGcYtX9vf+GbjEYcA0RsxCJToZHw00GgADQJjSo5UUBCL+PEQ4yQRIgeCOjSQ4UDbqh4FDJmHKmEyN2CmyaAdmfTcLD8+kR2YyQ1TVlEy14s5AoHNwJozpx8LZYD+caCX1+94Nj4+ZMSBFr7WQsZjef732OBuvh3mhFy/G3u6zvi/4TXifz6OhGwq/A5TVthW4w8NogH+V6waPhomefu3E//qwzv8H/zd7g9otXEd7v3tNpQB5UY6yDersciCChHbfP7+ewnjrIscnHMocuZybFmqw3TVSXRdzqnnW+uhxFf2+hjO3PyLpBDCK9qV0rPtLPDRe5tPei8VWY658/R1LSe8s3wWbwqoBBN+289ysH4jUks8+og6SmQXnQxE1A+BPwFbAhNpGREK3KoyBLELzRj+8PxY0FBPd88sS4sYWhSL0M78l08zX1L3lUizkyyDPtMY++L8SVcHm/uB1mTTX3NU9i+eN2PdsJcGvj7gHyqf8vP9nLJezqQZiX/7rsbIDtc7/v3X4v9IuyV6OK+YiayLeSp07grkAtfu0C85pNAYNvO2onYRj8tuyfzvJP6HIliyifwjIQnTUJ1TdtQJxrrSE16BjYw2OxOdQZfP3+dnPcPG9mMnerfTtuRmFmRo62MvnWOVPCrMIQJHDH7eoH7/8xbazwLhTsF0/6yP4+1Gqw7OaKvsesWd5/u9Uen2qjqs4g2Z8noGN5vknHqcFks3XaBN52He5yUaHF+btYIfwyOjR3iY8ZcTKLhxSv5Jphy3kNdzvHN70Zul3b1efU5o/+1Sv0bH5mDF4JhAhvPeJRjnmalOqevW2chojMXPGC103ulOlaP4qFFTjmI04F8i/h7/TtW8yWuK/5y13UkZYeHmjP99rWVym/B/Q8f6HLeebGcZVsM94R/oNMxgk765uj5WEacib+r4VSyAqf0dw/9XR0TcXs9GRBZEyGf0CYz3mWStNdH/9RTpw/PWwGj8XFvlYx8MBo2bL3v3IrBrD4yj1jnqgmcdMg1erEwr3CumgEHGYXQjb5rZduyki4/4nFO9Jun86JlqXtvvfn4D5R1Yr9da+CXO4PlHPi/wZX6DPEeJTTu1BB5ESeNfArvrRzR0TDWeQsOH5/hYW2k7l3B8R+9kNZHRtQHcdX0lIf4qRopPKFH1OWUzqNt2yPirVavFpGZBTdidQHcA2UkGN2Pa1RAuab3mOWdEM05kHhLL8AKzREhA7cRvw7E7Zm5SRTm3G/wbKrb57lTwBf73PPfOs/DvzOZDMwZ54gb/Oc6ZzvU82l65w9g5mpKeq/u4KNXAjYMj/pU2kIQodRv9tfC/4gd1+enwD4/4pS5mcz1oehwKeYgsam9qYnzeYciETDyzMUBZD/YqTMP8z41vOPZlU9D9UtSTEAgwJC8xTRgU1hi7a7OTgcBBsKdyOdMKkbQSHkCLr0N4jKCpcW4Oz3IUA2O/X+5SVm3Qg+wbU8Tsbhe/w3YCqh7kzKloJ83F2/A10jk8ZpHXBIKPRgW0VIqQLp5ksrNuDm+1hMjiXrcguqscE7OcnzrEtHrYXPTtFxt4TNcxKY9zReE0TE4OKEAbX9XpkgMuabcNcd4keGKoHqRAdYHjBv/W8a/GCePC+jvHv7AEgb4b/4PugXKbUaOw36RlnXxWgumYEZeO/2JIOeO78H9/1aNV0NfLByIuIlT6/mPg37b+WtCx+M34t1oUwuto+PfauKHQcx8AbF8X/4b/LMxLX7qW9PA1rsDyOuTtQHrvYS/hl7uGn8nX+75BSSF98X6GiJE0WjzNajUAuNs89pQWEKzlTq2fqCokw3z37ky/iusRLDB+WRzk4Gexnl1j40ClnoNhdgJe8oTOoK12CcyrVzl0ldUiR9z+2ID8Os4otQTWR0/8fGgCdOfT3h3DC8cgFpk0cAvJEOTXumGV8W2Er3LZfIAOkl9NUyyu0HlcxUBMSazFLb6WAS5jL9mMix6kUW9ZglfcWAVJNhC8VpIwYPsKaSf+L76M/xwW1/Y6Ko0FtDD5Hfg3kRuLKqYY27x8qCThNuM/xBY0YL9MPxVZsVP9Jf+7Q+1SB4Cnq0DHiP9h/PfQmJaw+ZcfVdvYu1T+/C7FJ6+8i312zQf8M0ZT0+/Hv82yE1ybEeAlw7qbIvGPK9c2beABsiRhbP6/C/9ZdIdC7yhb6gSwL5vrSv9lVd1TbmT4adgZYJUwnDqbnA9S640QnKXb0wJqc6LLJ3lwFe+bSOu0bAPMxz7KUFdKhGZzApb8JKO2MGgvpJH9RhZqyNXtLvMQynjOYQHgoAMRyDHvA3/390CL9t1NGUHXB52kmxa1u2SxTmdBtqjv1d7zSSOMIMYwqmm//oib85oBApYPVVBFQrLDjR/rUKMNA7FDy7vdM2D0C6t9oF+FyJmlykx8sLkAPhWshX/I3or59Uf4X3803tXDIPdhXIKUf2xkDRP7uSP+7fZwG/Av0C52YdQYTMEYPlwzjCee3ocydhr+4bXLOT2uZuPcKHk7B92yQwLAXOaLZvpmXf0u/NvCfy4qUM42mOoVjQVR7KaIMx1YfZvOswP+tTY44r/D4PYrslM+7ytzlTXwuTYw+Otg5vRxrUziq0pzQiLlYLXuEJC1DwHWUMNcIHR6DQ/VVMRe6ReflUB2tkH53Ee0xgnBVIScidmwkrdDoNkMxA2SFew2rY5Hkei93KK7VtCOK247A1O/5KABDLtoWfGjMIQi7aS9IyYDvQp0LaGTNf7EJJfmQRcnuofEAOPH1xM4u9BQqJ2XGXeovHyy54cPvNRRU+Z1VpYuuRTBVcjSaQ7PqRDqI/zVz28WzbWifm2eWKwIst7lRPLNPsYXpo9FxvSYfF8bB3HQx/U88pqEyyJkME+aGJQnn7esHzsGAs4XKd85QA8+tceEmzX8V3wGLbmO+BceJwwcv4pzmadXxxWNnjCxrlPDP/CVn5htMkG+QraEf+U65AW6R0tlkLGmORJrg6o4FX5oDo4/NjI1GvLocJ1C9f2X73E7yuBes6+7ty/UsuWhC4Gd4AJasYL2wff73gaSfb6xTWxPgeb4UTO/5hM4NSxtF3uH12ZjIrF2jiGAd70nn/0+S14DRmlAU31S+ByH1wa5Dl0iBVB+ZeKrf2sXgrSOLPhm9P6V33TH+HxHf98uovdkWnLM/TSJ2LUNZ7VTsX056VIJO6eLDHcF+3T4GBTQqATwhAQ+OdCBqmS6Lf+peHz4yH4aKN7ixHcRJKR7I3vcBQhgw3wT/3uuw3lsFD1Q/vUU4E8F3/rhv0TElPBN9DMW1MfBXUd8rVk0BtCo/SPPg8/0LYTxrnwQwNXI0YY3WXX1wgU1sztn+0EMaS52QxrT65vVon4bHycyxyixI/4lz2BPrPygzOychwsUiUWaj6tWeN2eC3/LnQDr7gqhO+UWR7pmdvyxEXQb5s29uWcqL8lZK27n9Q4no1UAsyZ9AEpdiKHe14o4QANH/nkakOT5davbSIfwofANuxqLnJv64yRAq8MYBKg6QAO+8kIxfzN+rcS+R0dZICayfEyFMqPQuUA5OLqBixtuw3Eqf3a+Sfujz2vfrIKBajrXWCa8hmC6VmlYjKsgS1vZj7A5idEYBPIg5+mxjfXNs2U2gUHLQYaawUy7kZuSPk8KYMRZRBOnvA5JdIFNMpz/XDM6Ks2CfCfHuFZ5M36bxIWuwxxQaNz7XfD/Vrx7kjQ4YUIDiuMb/ujHMOGGuiItb+Rx+A3+7frKSTMq/KH+PTlyyTfHCxbS9RySbJzoSsCP+L/IbPzDayuefHwH/qmY7gqD+M+3XD91ZK29Y4NqDtt+nHYDzDruddW65us5LMbFAyB4xD/woNx8Eh1pKj+ke4d/HLu+Oe1a9WINkIzxOXUZuQSHrnoXwohd4A2uGxR5oLPetKLPx11Gcp6Oxddw4Pp2jUV3B705yWQVVLZfdIdcwffpDgHAFaIgReoUEsgbEtbS+zZMSJu3FeT0+QEFrJKvydt/LVhw7KFzo9ZtaCB8oD3k4R3k9ZvGCdj7BGA3vO/GtKbFbsDimFSjf/RlGcmFxkeHmGm3YhI2btXm56KpINtZTsLSJW5lmJYs6LV2//PSZdqKpiL35rPhb5NTigfgJiZaOXDIPgsVjueu8UE3lhasjWU0G+zoy2fg20s2iMPodAx5iagRu3n+nJuqQeoUiI2BKMQFNT7WEh4kSNsMcxmGQ4iO8RMdezgG97RrI/5xbvBS0A9zzfSTGlv4IE8PBxTSCetxNw+e56KF5kATg6f8QDtOPCSNpb+++rGR4oljka4UcbL96xpoBoGON2og/i24+PHdml6L6EuSX2JUHJuCkmIwFhTbzL07GfqmU9nmarsJHxLBDnTHZOr4UaONjv6Na/ga7xmiEpPKRhGvc9pVXeMw0OCHLFy7MOtyYw8wD3femsEiiME7zQ1KjLG/kfF9g2Ztgf+6QwMTclGTu+QbOuZjAgJXhCCWKoLGQRNEEAbnPkOjJzhfqzGH2IsvLORUaBPcdsX9Zlt2uPhfAbvjz5oRqwBBZo11vnS/4O81PmQHBQRcPFrcWH6Er4SJ9pZApFZy3l77rgewU+ScDIDIW2iQcT7+ElC051jCGDA7NAFmK9HuAeQboYHf4BYqkzJ34APPYR8vCQQ2IG4TKIX2ftGz/fCo02MiBawQp8pqUrcf6PDl3C2ql58v4OxctYrer8Z/jg9YFK7XAuOxFNgXdAv/NuH/+35sBA/6wREs7tKAFP7riz7dwaxO22CrrO9ztcLGfefYM6kq+I0xwGSXcjsj4GVY57o7FXWr62mZLffH75GZghcSUeiJ/f566WC7SQDxoIkAx8VN0DuEI66S2XmIqcvWa/vaz8WM5lKidfrcZYD89QiBHEpTu0f3TOQ7UHYOTP2IV8l1c/jpNcheJ0DGCSj5iMnwI1kWZh+E8xuhApPVNlY2VLXBk3yULCI6doFXmfE1Fknft/KsXwGy9V8N8NQLv0HM1WZD/GSCrEuQT92hcPmG3VWc6NynX40VAZZf7YBybyyPoRB67W3el7nM2a+XbP6CUNmy+6f4W9CWf+oTlbXZDqva7ky+s9mO50wNdsB/3BQ9jLMb/5e8ZvWJC4otF1rwmPEWKaPja2tNQSrRxBq9JMVJc4M8/+3xX8HtV3P60WPlzAH/kP8I/xMPLNr7tI+iQA5EepqbcIfBbMJ/tB8b0V8Cw4Nyt6X/lyz58TXs3z6Lptyqlkag/L00gEX50qHwXTZZpKhrDl05Lw1rH7sYeX28rLJOVrhaaQAhAGgEvr9sMLbag515rmHXe/BLKQ/6xHZVKQdIOhQN/e5e73Ybjp32KDHoKLAAJQ5iIlukEEgaROn0ejQo4jh+AmUu6LwqhU83sakdTro1+tN4AUWeULQ1+X0TqWQFhiYeAbZVxIsBaZsUE0bs4jhmKUgTdNmHBLMiYzUa8Ps9sfLY+s9AL9vFHnG1ZaU6NLHfmqtPa+4Ok1iFGdQLwEQOjIVZKHfWYs2suj3QKTuBTQ8CNSAfpZUc6xbEK+FmF79vB9yJW58DX6trwv8SkPKV4j/RDHmoLDYdECdf4x9oga91QPo/dcQAvV6baQMA6x7Bf6eN7MqG9vvE/1vAl5NJoYmsk1P+moq5nNsxFL9k3rSr9BBdLJIo54x/HzdEkBYDsA/OQt2+VS2uo16jfq8lORiKaH7+uZAYWSDTYLlb/XleHfZ+hAQS1AZri2sw58KkgVFSkLpTufbaohTn3KumSUEDMjs2IaRwFjc8/0u1N3ZzZEbZrzGE+yrbj5Rk4aFgRRqKpUlGcb4bBL0Yb9k4A6m3dJIc7PDcvzAWj8ehazWDxSnOc1tiy3MBycg5iU2C613B6ptg0jvIKCNYC5Lg4MLn+R9diQxvW5hCmVMPPjUnSRfTeAErTEXGZDIY90LsVYQJ/2Z7S9d30DpIcGFp8k4TtwK+2fhzDj+xUtOqXjP+D9BSX6jvM2U5uBWAf71NZEfg0g1+Phfbgf188XC95Mo4cLsfPExO/VznheQWrRifC78H/Ev+oqxpHds+JHtilwsrXKwb5Lt8hEJ5akZKLDjP+A/6RrOOf10R9+ag0cihU5HPv9WEBhrqGsDbBWGwl7EoZDK8uv58Dxpn2UJVWhIiZkVdfvtaQLT2j2j4UsI5C3gPnWW8logpAK5sYmqQhusdor5vgXMCHdptMjKcXcKzL87vD29YQXJsR2gnZpr0Qt5T3K4wXEHBdmQm5Kk7LPrAeMoPt3PbHBy7VjPZlNU/OBzoZfMYEjdQ1U5ysgSdNsq8ClBhwn2OGQUb5UUsFC4sdhH/YK3ogQw8gWXL5zk3Yvl0T1AI+C6U3Zcein/PhFwkwMSf1fJqsjjX7v2ajDeCCn3UkpsKelrL/cvhzANX7ut1iIV5Ahy+len4ryde6xC3Gf8ONvU93dgHfDOj2e2NgxAPLdZq6GCs+vz9KetbxxU2A9tWA4YLTwEboxOtX4F/ahwdQjPNre3rfpZvDyT2OkOJbVzVIn8/5eET/nO5DmrYV/iXVfzQbOD1W/zD9yskMQNlrB+6/ZAZP9/gkjkhjpXLWUVcgpQShxoZJ78cQOCYSGx3FvupHphFeBG1dim2p9eoX6gj7GqdUixyEP3hui19w3I377Kq8qOO0USPRUO5h4gR5Z1MrSs9gZynrk8/BbCZ3DbazV4xyRh8rd3lDdvUlYDcuNgbJKNBUE1cLADwhrF501kGWRjz59QSvJX+sv2e+8Vgqx5wn4TvGhKTiPxuNxHKXLYxxMEoSX5tO6f/94UlyD38VwcPNxXt/bENo7VQX3JXPaAGwq4sYjDJ1vdHACkoh57U3GjfIlf9i0ZooTq5e+N/n1ublHvHacPfbvAf4A5OG2uQiyAkUxkhsglqRZty3y3+93kcgzGKQYZzMObpG/KQNSQRJ0Z7YTcdrqraIUcZ1pdrBu60LiZUC647t61W2vjFNSxErV4OUg74N4GENLadgGylu9PvUNiwy6A8ZvwvWq+cakZoqsjZp4y2TTLVa6bDCWYbfGHHgy6hlfK6KAMC9eBz2Ha/kGc7FToRad0uxZzvN3gvGRJ1sGQFmtf0+6plYX0IbxOjvvkXEYTccvxUPHEraMm/KDnvKObrnWWXCOPubsgf5hj23w0avD+XPMbDtnSBd53Wd2jnGB/o48vgR0zMZczgoWWZk3Agz8gzN4hABlht8Sz3XLHS1+qvEKcQqTc9bFdBh7EM9q14FYBrMCxr3KiLKBuDEDAKdgt8R08x4e/Pcbu+73qH2M7CYDsq22m1yybp7zJl7KRzQQNIUBhkt9sqGgps4wlM6rWyKkDS7sFggPujJQjAdZ1S/GciS1+ks0f88yNBDoPEOL6nW62rKNsN/hc2kYuYGS7Np/xmGMKzeH6KII5ZyTkT80p3nO/2EXBA/2H4OMk1yX48t+vzfr8aczNN8nbnfNLScyV4/qynI79V62rw7q1W6TJAuY2/5Tsly3ycjFTPY76+dVxP1pcuTF/2v3/8JPYd4whzoJtxq2QwYC4+F3b261x5R8nqd0Wr6B6Cicbsc0XX10IrZhui0PVojFEDnbpc6VLWAfTHvL7nDVtGONdUIbkYxgQxATlyMaFN3e9Miw5J7P5CwX2s/TGdBJYx2BJ902y1M18PbSchqrxVLqoyG1sXWGHuj31FMcrIvGLourbGx9rzjipGWRSM8nnqtIupQb39/Bs7v3szRT2miyL5p2RLp/Tdfm90v90l6cUXpUzmHFVu11sEazch9tq8BenWZfMEMoL/LXjiQXF4wD9B2518Xn+IFVr5e4bGJh5xg3/8TWIbMHGH/xVsnPutPiKIIu/GwF0/EpmMb/F/OOXTc7/DP6aBSvaDGwT/mVRBr8v2QM+/WJH/avwH3WvEwvkYPi7XSoeXmYQ+1/gsWrtqbxFjcTSRfFLm8+igTERQwnYei0IazM+Crb9X2+ct9+Sq24YsEI39JVnR2SrXuUIemyMzQwj5/qHVnSLQ8U5zBCRr69xUR8fWvAdtfFXwgCfKMJ3DzxY2//rWLAUPo1Dhw2FeTtRkEfs5JTZrdmGy48DhfCZiH2SrMtUPAibV/oGl97kTrwydCK0cFvR++Gf7GDJmWOT9JUnPG+2s/rkcxsXpfNfEVYyz+L/HR9R7uKrPEE1H/BtsUkTsyVcceEmUmbXT2R91dDfBP6q+3sGrlXoY2gQGbi1Kyiri0M+Az/fqBXdlfK3wG/5xOx9SxMK/zfgvmhUGQUJsQ9LSHAlZNhMsULxu8A90PudeKFd5iFYEZr8D/Js1uUOmfjf+v/tYq+B+utT7dfjfhbXlTJhLB17PHYCBn8r1OdaKmwe6Y6dv++tQ9c92N1rCmGzIrtEZpb6E9K7VVEBQo+sGJJgHwU3x6cp8IIw2I36S/9E2H2Pwe9wmVJz+xf26MPxSmsxNGhyXuM4xTzrn8jsLqUEHdG2XhA2/w2tzMJ4ClIBoYEaV2a1+VMOA1iXJqFwxpUxbCXknw8/DXlk1uVEWYg6D1I/1qzpvO72WGPX+KYtqSy1MHkf7RU/a+dOzlYhx4oZPvl6bKobsd2KA3Fl58vMk1ol9ayj6DEtD32Euqd2qUBvY1aGv+ngUTLDHe9FZI1nNtdiHfEjvX5fFqjldprloxu5oPgJ40b8gxPUmJQOzDQf9+tGAf7d8f5Ryx7WSjwP+rw5nCbNv+9lXDRvwhf8WcskWpynmOG+2RmnvEgiIp48OtgILxsWV/W5SXFcsvz3+sfjj7gZO+TX4Hw49X98TnrXEtVptUZXGPf656saSHd/r9iYcF2qBXZ2Q8nrx+3wcTBwU+WSFUhkHnFVENJCzRtnhCBCsIcaaZfK3Yq/fhbXWQfbKYpDpMKgBpBmVS8fPS1iwMnhcyLuIUI6B8ehiiovliKkTG/wqKi18qLfh9ryLn1sPsHYAIIju0MUSLTf5TPmWnxKAXRk6BiL6OeQ1+3PDRZN7iHcDudH9GHcNsDjJsw5tMRYRH9QyBE+QOlDs7GDzWqjAoK2/mrfYrGI17hX1mN71NWPUVCEp6igJ7t35em3GA23dVIEiXQRiwFlYv4l9RzBoonxCcVA3GOWuX4fEAWwm+gL+EaMrp0Q1+S7+NbveYogsXOywXThPCSB1rsYrvMvZoyC+F/8Kfq9uZieD1k1ZBNyNbd+Pf7P5zngt6HbAfyQ/xe81X3n9KvzbF/i3Sz/D5/gaFkQB51adLzon0B7wvwgOq2lcgMG2Pb8JP9nfPT81kPYN/ZYFlMgHq9SNFEodHQXjcrrrONs8AoS3Ci53l8zD2lgFRWYVjdeWROnNorLZpgdP8N8NwIWTzGeOmN15RcX2ti9SCZGZ0pxtBx1wCla9LrYgaWGXhbs8iLqiE0xbg/jzFzaCWbOsH7RueWZExZrmMi8TF8UCEmNTgcyBMqINUo06v1ZtFfsHHa1fS/8pZGo19pmmBYLIahbgqK0MEL8Yfme34xB005rdi2PsgF90+Twmspa21+uVHUufkJhxNC3Injl1ZTRP/jGFOYadO+zD6+cxnNDYg++00S9ZITHiy08KfBeZMJbWO0F0F6Iz4w6EEf/OowPFxzTuW+ZNd+E8nf3quyybP+DfvxP/yUODGOa3Qo1qC6Ynpw/TKLdMj9m06DrjcsoKPW88veEfyNEOqHWbDGsaW7gLKta6sWqzjp+xeXPa52NVL6dvxopxFjrGepHP8z322uuKahSIJHfXj/jUSlGJijwRyk2YAQEtJiWbvBEfQqe+ca3nMxHLmxROhRMT5LzyxlovGZKyBXAJTll2kE344LVFGH8JTol6MnPQwLYWIYQ5oLusRznhpx8bcJK/GmYNCRQ+bOzn1J4GvffmtyJf74isBrCQseb1u7V9ucqJYAoaVLxLFjFnZvo9T4lVE1axdbnSMdd70c/W2/O759Vt7HVKzDym2LtRrrdBp8LYJonFLN87CKaxt83HDLBplxq+0rJJ5IyJlnPT9bYTjMPLV1cCr83m+qKgXvhfK307NnmXSfJTewP+ITeCDtfZX7Yfva8drmnwNn0WVR5g34f/+AL/QNBVz0xuJkeoLDf4/yJ/tDjG1a1ZK5Keu7x2kK0xkJX7Pi1NGyyOvOd5l+J9yWKCs3X+5Ss2fond4NouKC0ifdt9XMc3rigA02px2hdoHQmOLeceg3mzOqd1FbfBk3Gc2rv1ugyWvjbr+foAVNYQXy+ibSM+R1UEtKQy/djIbbBOkXEjacrSMjSMoyQTUCztarDu7sJuncYiWgVgrGTw93JYCWihTkBsGqhi3RHsdbNSE8m8vX8RKix+vSQMW7IEFOcgfznnWlc1twy8LS/jQdQYEiIk1739QxXF99qr4LuKp13fT7BDr+IO5i9xkI/ZFGbXZHrXHt0EMSaTfSxyPMTZzW64ERdZbm3DNZtv52IdtwlgJ0wslpyc44zA+wRgXKttSZvoD2yH9u7ejH+pOHWt34TmTcZ1c2PFbXTBkRel+1+wi/B9Z7kEzMgdntM2u93g34CHtbcLbmNmO8H3x8hc/NmMy7tNSFeGxcTv46/f8sdGCP/OTUbRfyVRLNgVWUP2jx0wiEKJ6OviL9jW2JSqjO6atVNGG+YZK0JFB3+diYgHiYeJFmkm9DNQOJHuLkqSTKgudmhRdkVw+nNwBPthBtIBCzKQo0S/vatlloFQpT0EDoYG0Cp7uZBjIzJtOJfWyDVSXYLlBhRE0bXs5sDAreZVVaqkb3hz8k4Uuzr4Bt5V9nH5gskUgq2SQra29fxoXlTB4R0dd9Cj5KX7TtbYtE8WnfWKmVyL7vdNkmhDp4UX5TBQL0lsPmE7Ikil1QBcv9hXphqSVT8xnOsHlMzdTy1bvBH0ukKo5fPd0MMFx59HXSTRcRy64H/euol9BznxtLQdhjpkzc9fOctXPorMCKt18x2bl2BulHyGPJ1QTZkvHXdsXa1VLuiN6eNf4d8G/AuWf2v8Aw9Hq2yvwWL/gH9rvjUhbyl+BnqeKPJuafjLzgb4/4yHVTQ2U1IpaxtcCnX7qWXX9YLR2rTGc3nYP7bjOAjDahkNTtcWqhqFnP9+gT82D9c0CPFaBQqcNthyCDxPTwZkXAq0xth1BS7zfYVLFc/cNDFOagJq559m3GP0cPg37sZEp4H6a6Kh+ZR5t9AEQqCPbkCbVpIKvO79LRXvso+6XT52TED4HGMMZb3bjQnWmxekYfm53stQZtgsBqrVSadmYbX1qm35TuR+SCVRkrHbnHlZZqRLfq8lcyzB6z/CQug+diEWhly0rei5fD+0B1Uc2LGKnRMiYCPqktHxI9ircK3k8klar50qMomh8xcx1F/XCiA0xJMj/vfTKlZrlV27xbpioQQQzIt5um/If5zyOuHf6ZvqoEAqCPhTsWY3OSLk3zjh3ypgF76qSXXP7yzY0F4GCLmnw2wGQigWpQv7LfBf4zW3JS2fePp34b8dI4/Pi10VaTbWQe1Pvi2jd43b719kIe/MofBOR+iq3/mz5bb5ZAPw4Ydfads+aoUUcdwh0igS1ZEpAMpc//BYuut4yZXXZtDA5GVQo8JlNiZVqOki1175Bto2VirYKyjm7xWwDhUKwa28UKdRl8N1Bpu2ezZng5yYlcabq+oaA2hFDApLq7LNT5Oux3AnGI6BVYqjSfPz+sFiq5r8gqvYqkZXP+BZFsis7gdyBcW2PQphZpsC3jiFlXPPu2xIJfea6FRUo0+nG0aLv/z3WQA7jbmeODQAxneyIm2/7p12KKjdl9fwXczXyjrHh+39Xk4li9kv2C1YFXQ4he/z7VB9kcZ4jY4aEAuA7/9f7n7o0K+YLl5bDCtOK1Wuy79wqzbxj9pmqQIaWi8W7xTlEIO7ZBGTLODXjeqf6+42ZTcI1Kl2rR9kO+eXkg8KVNH03Uk3/MP59rYO5J9L9i2AY95eb8Vhfo6hVugLUlTzp4O9fS3J1iqaUsEasDrUCf+fybnNX7IH4Z9rXcRYNnEVbUqj9BiwiJ/j3vZnLtqhuJ5fL8YbhBy5iQDORiXOfggozLoqRBadayXQnSkNlUHAu41QNPCNZfN9Pb64mVkoNxiPdlV0xkEv1QXpDHc70vB6zlV9D3A5Hwy0ogN8VnHys3g7VoZEum2MVcb26i2gWKE/MhuRGj0gHAW6tg93Mj6JjL1AtFSyK5GMLxPWTptlbuZ7MT9jfCq2i86VLGyUExe+sEpCGaYjYodQAO3IQribozAAR/kmdiJPejbwjLU6N6uldq3fIrencJGyzzn9mDagCZNX+SZPuXN8gk1gIwwUz9X26klqp9gyphwWWu64Y2D9wLT1/gwOZgDB/959cIrLKBsXzauzQT5B5W+dkpCs+BvkFCNwBsjpDpZcTtypjdPpr8B/GVDeKsyOkvGfabvyPTLFbg/w7wf8Owv0UTqGXApj9sNaklV0YPJeMQl0c95K85Hf8JNxECLWWGyTDse66arbZNyIf/3mtDWUag8ZE/b4XYhNzsUXLVFJmJYlrAdnReEpcznrgJbZ2ldPMBbO4gEZAXGP/g1dSXINSe92I4GMAC02zHYdrTpRbm9j+/SgBgz3dNpAw1YSZULfI0/AJ07ZWXCPxcSR3NqciL4s0B8X8VZlcU8ptkCL2loFW/SWUlXxISLAeztJhxmtcKL2Y9cetPXOOpMfdecOW+Gw04n+9f5evCbBfThC47W++5wyZVRCCt9FldlapsuqTpxvr8G+qvzSYAu51YUCss6t5Tl7oIrr9bxK+Yx/X47C8lPGKjGxddiFtLYgL90mHwH+K6IQMlFu3vCejliDI5sHkKX08f0vPqGXtbavvOVDrnWVtBjGknjTmjNAvpHkdiw2N/i3hn8rjQMGbDP6TtGA/7jFv8NYKxv3Iu07T9T8M/pbQ1JiwQLSvOF/WCLLo+jS8J+caMcpgvHfQ8yT1ssmLguNaky3qqyfEr60oSIEZNzIaO7CX2cFImNdvexGotXzmKgt69Z1tviau3fULr3W61QkMN4qxszh5TUSm5gQRSSziqbBGeGUqZz0j/0v5NHtA5y7UpRrNlJZJKjVxjh2JZFas5mqAIDO+5eJV1AOjC2ZORZDYVuXsjSWSz96Ux7yQWwJzSuwbafE9eKK6K3aYrkz/nh4FfWMKC5zxbW2kHOKz9TWe8ktie1cdTnhCuMt5lVLS/n1hSK+IjPAvxeJKnNm8IxyYm5XGtDEUp6GmjRJRQPKKXRrQFVli1ZZMNQNnscQrnkp3PRmsbpRaO9OrJpW0Vf4Dw3d8nCtIy/LbvyTJNHO+ZQBuLERVWq16uTlDZukZC2gctPHbScv1/yLopeNQnPBr8G/NV/1pZrD8FTOjcJD2IKmEVgTsDiTVnaHf4OowbcA16J078Yu47ufP26WqQvCG4o8sYQav3egWr/mPqyvml3fY15wAid8SOLNZRvcQ7CGKTNf/2Rvb/T+XQm3k1Fl3V1Ck1AGkAO2/FUNv7UCDvw/F+EzwCMg0ZEZFUgnqLOCjPGqXLkYrKUU8NAIvzTtrR6CRYwZ8BbFXufA3F19ts6CICCwiVo/IPahDMI5AAaaKl/j5zntck6Af3xgucfg9e3rAvm2a9SiMXLIVaIgnsjCYCFuEaoW2UoK1a/tzTw0p3fhA7sQYLhtZhWPCwf1BkFY13s3a1UrNqHPbrMnoBavF+yQOVdFSrxuWXoSVmFsoI21NI4Z3lw64T8O+PeF//yK9N8O/8Z2LPq5EAjCP5rKdrCst08yEdfKY0PGKJegwp74T2EhXt3qEymw6CjZkCSGiHvPAGBba74B/G8McIYw3JjTvb5abUPKzjaYeRXkxQmF645/x9eQO8rrX+C/FD5e3bW0NnlSQ7y7XlfoNB+CyJWmeb8hrLY7Img31rpokQ2uy3nf/GhelpMpBXsPDlpzZX/wAoE0+druVzOFcidZjlDEbOGNx6584BTcq4nf35LWpvLxAeH+sZEdMFi88OszP18sYxq6AwOXhOG2l0jcla+WxuhjNWnWiEn3tCd9eVOA7OY93pKqD/LiFlDmItMqI8FdtPG3pZUfnKBEzhSwSrYbQXIZK/R6XlyP5cYdc4S3ABLB66PxCNNNDYckBf7BlXCW1EuhWHr5BFZ8XEswcVHQmBL+QxMU4EmXRMAiTMjUZk7F/fVjIwYDnTepvEQkmg6YdAkhN0T/Pf4dcIM0oZCY4n+lgMV7z/qc67WB5FD8u+B/x1Ru1V74D8smouR3oU5grvirXQbG2yXLa/cBK6l5a4o7/gPhUw2Bu38X/uV6cvZ2+oN+a7t/227kTsZ/WAWsA5A3wKPktp471lsJM/63dGkXKAbW7I/0P+DI3ssoFmn+3lNLfZkg4R96CxbwyhuaAhr+qbIufXARQYKaxbDSNpAHwydKRpD3Pf6FhB3FEflBhhJxchpGU5jXTRtBCcnyTDk/aO7wVvbOqtd2InUNhK01HD7gSWT4WNdDL4mx9xIyg2Dt24Rt8O8EkBHrQM9L70/x6VhgGEEwY0dHKWxQy/s5De5lwzafSPp+IMdVcoMkx4AuWkt+J9kwhWWhZhzB2w9bGo+dd53CaNKDResjDMpFLCC5WSvSWIdsKsVWNLAX2BeIbyy+/MUP1uxSRcHIDRte1QCYSwReY4OWYytaaY43XOyRNpyt58IH9M0VMIwNTphUyMPMWobaHAf8r68oSbq+ZfmUZnuB/y4bEOboOfIqe1F+6ngr9SKX4RO9K9fTjgnO3/hPN0CMreJdamVCP+yOAd2I7rjYfXKIgN3EjLcMqZ0+K0Ffy1Ozl8mysLjGEf8sdX3sMUGb05eNOfBo15HlRhmQ926obJKgCHDoMTaxJi/8D6EZvcRosxV7S95v3Im7MewToP2e/zJ9H9s1B5dR6/xOGIbXIQpzHH220VWOsY9c9kc6tsyV3TUn2KD/MNuDU6YEX0/SyYs5CqsiKqxYEFbCjOXZr73ey+SL8xFTJ75WiucImOO1Hb9sQOSERZ8KP8Q5y5FjajA0VMsfUCOIVAylYliMXtPde/ycVKSPHRmw2w7xSPZue+vad7x7cS7RtYi7rfh2qYPpLl9PM4u/cj9mWzNyngM32GCEghIayw4PK9m98pyjrXexzmIKn7qAPcIsiFVHbKtuhP8XGf6Mf2+329OfY2Grx8/T1zb3+lhQEP6RjhH+ixLcYayreAt25F5WOdlsh/M29tLJMW2UD+QI0u3X4j92zDb8Z6DEIQ8butBJByDptrfhWY/KLbnvCLwrT8S2y8a/Q7B0/O+WPQKaJoPpJYiDzC8/VIvhuMmLhJ3CeGgzZ7CBUT6EEs5NhPuqNRyUZma4KbXKZruPIAt9kYZt9LBewz6Pw6cc8yK62aQ9Y2PDtsleRNv1/dJME95r3slvaUgHFvwrxa82V6/JtLyiDqrg8f2aolGsQ3uUkFSQBnA1JWeY5bdLcL6nPoF0JCvr46U/3lAB+nznQTYfviSnghHPv4y7VwYk62Dk6xWXoxxkXj12fJSVPpEAH6WhGMnx/FGsaxdx4cZrC/t6Cvl8C5NuCkhknB3dsArVm+PF4yrm3EX6ynSLJvQhHkbRbquULC4O/qpz9l5hQvb4nIxvHQvEyUeX5STxL9x05s7fwgTzwTSy48NflZnJyNbmzOJb8njZ1UIbezQrHIJ/LNoVN3SAbKW3C/4X7iwbj2vDEa2fMVFfKVBhFSmWMbZB9iP+i9SX+G8xuXl4xU11xJV4aomWtTZonpOd9ljPuZEx/9HVgWYgk0EgwMwe7YSZjX8y0PaxaFpHNRQwIBximQbvYjp+qyPGA1ZFJAB8rwKbpjI1qIuchddUtfKCoSCbTHX7F06iNw/am5I6dkVw8IW2ohZbOQoMTPBaEj+Lzn7kCs8751NjXojywe/O2401MXVFD2FQEAkUJ7jh0LQRw1xUIQP0xQv0yHOZ6HLyy3o0BxTti8vGAiCkZbTTduR+7ea1crjsqrzXb7+iueoNzIQ1KWpA0HwDu0RUSS7PyJYTgSzP7fZnF+olSD7nmBBQYP7BRbyveRyfsXUJk2LVbto8dfr1TlD2QtdKlD4WAypXgia1M6YdDIO8DZ7vMRVTFM/OzYDxrtj4vv4B/+vEEf+vAf8x0Qkp1IJ/H/Afvxr/wK4C1mttb2hPMN+1Re8t9RhQhO2bHS6m+Pfvxn9u/PuuhFGLllA3D6szQztxW9ifr7a2JmzxFtm1UjT0WW3U+CpDOZhlm/Cve/cZgyP+Id1mkduCIf7dRUbguAe/OgPCCrCs76l34FNTBqyf8B/wRsNKt77s6oMcnznemgOjJfYrmsPpZpfPiVpG70eD4h68RVWMyIv5EtGbSXD9Fc9Xb1fbIV1moG3f537pRnTg2bOPjdnKF6u210a6Tu76+tBEVvSWQ3aEBvx2bi4fZ3rtwsv7e1GYqBaHdc2xAKZvVMIgWdGX3q6nOpO8IWMWb1caniVry7dorpIISXqnNDFs3vTx2aKrXFKFeceejbbFs1E81qWsPA45KrC58KwAmaRku7q025hYsgXHaoNVvrl5NZd7FQQ+JHtm8i+8hqz6LIsDvs7KsB8NitAN/ndckTxUvasBBfy/fgv8I/M3/n8Z8Z8yeM8Aro3PKqpeuyg7V2EioEjz9uyoxg3+VxmzqEHl2w0FkzSQe0uGSmBRDphumF/YT+gL2BjY8oH2uysOsIeqMxjBjb4xCDobVxqOyKCdl4XpIgOFcCiilVcdltJm+y3VTPabYH9WAOdFvQH+bNf8LLipQEFzNzLbTyir32wKfP552fZC6hVssG3QNIv7BjduvRgnlTp+2as1X/+j9MkUDabJpEW3NX7gwCUjSPw5j8klBprBvCI44ak8+YdZoPifAAubB0ibh+zHD/2X9583PcwdUZOZfQv+/hxgJvl9g5gkbKa32mJHGSJ0GeG91msh9PbEMi42R3xRBXft6IVpvXOmF1lZIIll/ppWuTtOKo6JPMsLwK6VtEHTgQkmbfFeMb+2dkyw0iociK0wLjrVxuTb07mVHJwkpwAEjFU4CP5twP/imRlo8/ou/MdVRDcovPipHClb2bVOTUrM/AJkHvEfx1gnHSIoRc34XznXsZRBFIB4qPrn77vxD2+/iF2jNSwrFgx0MMBN6Z6xlcW8bFJZ2rnGpDyefW5ZR3C8fbtO3eK/6hb4xhT/+WBBO3/OqxiIn32vhjL2JtDG/2UwwP/VCtmuJ4ZOzcEVb0TVFVeo0nRsY3rllAH/S2P8HHfZcPcDO9cHdwtFLAZMubE3XxjYRh+8R2Hpz3pA4BZ6ACuT4Z5GiPlxTC7D+fz+6bINMvNSZ1rZQ42sk74hdE2sNGgt2JHW/t7uLWmgrJpQLuLF9Xr24jdN8ialjxpD8tQoK35BHqCPvgQ8aCKN/Sx2WTLs/qOP51Aqlb7IXwVE6VqjGpTIwuBrVNQK2EiQKNswz8/XkGWY6je8yZFxGgaraghWP8ziHxspXW3/lwsHWEBobsENkVC7gRz5kcEVEOTS5Y/8PHa9z+iI5xR7pTmjHYT6fuAdrpmsb3IA5pJyqK8IcuLHeWMHL+PffjX+a/ICKuTPrX4LvqSXcqbuZchNw8DsYWSJLQu+dZBJNwVytwAj5Ne9Bvoh5YLXGQ+ecWaC/7g+E9Twb1TYdoAZYvyEfyEFugbE0S3+Ffw+JBwgigxLyfoo4XX6wr93/K/8b2Z7hyy1dJHLGv4nMX24qGGYpy/jSkMQ+X74a+QiWWpfD8n9Az8jy+v7pWAUUlQdXTdg4TxQIf1FW7X7otO80goeJ8CbGn837VlybDHN/clKKT7ngfLvjucAYF+WAjDRZBADA9iqm8wll3GC20kv6U9H+O6DPOwYQZakMorzS2auZOA+BSEkoZXjNcFFbgamayGpyEiRJabV0pZg/3LVPnfpmzGzVsf4PjM4QHcMPi1K3m8eKcFF56h73URDjjNse3JwUBsz6Ip0Ffm42PNhTgXcNa6aZvpYmDX8OzbVu0ndzxtWtgCUAaKps5kFFnEcZJbb8xxPKdWOb4O9Uqd/t54bG8rL+ZHAWWQ2fMuuAXtAO7g6fFivUFtD9+2DDbZ0Hf+rMImjFf8m+IdG9FP7qwE84F/jCP5q/bm2YlTjjv8eC/hYYeVmHl/gfziHNqjnw+XP/LRnKuKEfxvwXwZCMNLWPI/fFV8uNfzvcYK0vBgd/+9/XuBh2x3x+r4S7qYCWAUWIJE6xbAuhmE29dn823AHT69ogMAxCjLTLa9cWW0hym/E1Bi8ogqEZ3p+7YdexJIn5QW44aXF2zpJP6AVTuLwIXLxdxrua+gzn0N5h7iTynsFDP67ClHuFr27wB1+QYbfdl/zIB9gjdibDOszsbClR2Nz+OoUkgJ3ob7k+/COckF0SG6KS879xVfsnWszahVT2qnwtHtwYcCbjBwNTAFBRRayoqspp09O4Nchlo8Dt5WhiV1WhZVBSGxGnXNKtNfgZZQD/mlL/gamLQW44GM4MMkfU0vqAj2G5lqU3WmAg87opE/RuMX/wsx+66Aap+gpq/KUhDPHUuHkckp9M56hdCA16LP7GFJ8xD/tgBjuiNR9lnDWslHCxHUNh8ira7hDEwf859xEzLV3EhmpBgh8ue6k7H/NWlC56Kw+Fd05bvMtglzJlit8jNP0GeoPMiUufMT/Pu8Yw6AC5r8QHSw/vfEZSCvuHXx7p8UHoMH+SoCUwwpjOCSshisfFvA5zkuiqJtDZLhyJHkRVPsmO04uUOC3Y5lXZbkan8/DTolrfSTGqqtdHEnetdwbg2RH2HZYyidJDMNaA6Z8WnpgkMBOYL2WqM399EunXjT384tsqu1lNbJSvobkD/FkfHzG4Ja1eX4Bj2N6+/hW6rvtO48N9owdEmeyfzW7DzHMAceOzAK6doooroBAjH7K83Ul6uNWmAHwW7owRnd74jt+r9eOScqHQniIlUs36QuJLrxthTyEfD7Gge00AWsGXKTFutlgXj0gHSX+CcKToIJ/RwKIoYrHm90fil3G/5bR99pjsUXhFyZzg29f+p3h34xuWCP8cx9oF/TczvivR8G/+j9Cmz8PO+Pfiljm1LaT60Lvmjzg30pbB/+6swpCvGTJ0LB8bz0rcFSXsneKh7gglcFekoOj7h7ALBOfd5zWfy+I5BCClvrq1sUleSUQDKJJ0v3o1sJqXd0aDUtnc+ys+b05a7VzAuWl7f7McopNWFVQNcujd9eMsoFbNjGU0emu4K3SqoK60rRZE9kqWxmjTOp50tteSwczF+X8T787ICYf5L9Vjg2r/1Ys32IrWTMN0nH5dOsh24Ei91YREvyKww9ceNP6g4XA3RiHaprZK5Pv+w7kfGtmfaY5dMXrRj82MIWGpx6Q8EzkJ187/Gc7MelKJxl4o9UL0YBBx/Mof+YcE17CJ0wSwKqspfN34p8jbBinMuJz702IqdwnuiWee376lYvn+FSmQ4bwLKrrea2E9rWJf54AaOWW+5Dy8tUnJqFI2Nop3FXc/9b4Vz0p49f3FNBPv+KfyeuO/+h+ry32XaO+G/9DBEV7awzu8kb8g8jL9pb3pn/+96pCHNYXrfHmj6XOgqi7/PYeyW/n1JFpleKUkwXQqq9asl1rGhiW0qf3q0/RjgBz25pGuTdt56tj2m/AbJm2+I2f701UMxvfZypnQefrOVdE3t+0xpk3zLJrg23JSziu/JwIwab7LV7c8Nk9XzuQv0Zc5nZHhkvHsAZ8J75hnPd20CILQLOD70CvrFKlJxXeit0dU3RTC1rWQK7Ue7QJ7TOlArnDZRAXe7vc8bRhUwVJ9nPX/svpRh3vTRzdKFJ9AL4JZRz7n8eBH0il+U+zro+GWNfWyjeoOAFBCRuin/L7YKiGf3Pe2ts9UIYCaRb7EUO4dN0Y2Vv/044LO2/ON2ijsCP+Ua1aXXkfG1kU1afL2b+AjBCvXjf0ot99+3zCv32J/+lc0V27IQEbgb8W/7lJbIJ/R/wbbrB+TFN+gWbbsfH2/KKaA/7Np9CMSgJ2wL/1i1Fll/BvI3SwTTaDfOJpU7e6i0dluO5nKtA48OdB+bjjY5D7oB4tP/xmjr9il9KcnhNiQHVIyg27l2SQbceS5wJ19RlqWZmqZ1ckVTGVH1vouMwAjIPYLpnJSuSFePdTSxvSMeICz1YkEIgWdPC9MfKBZDzkdXP4UHAqcQTok5LEoFPnx1knEWy1ZVAnKjMu9dI3jKKMdfyK0T33YgFFtm70sh5vrnuNeA0AlGEGKvUmAeNHV0ZKvOy5FzyV8NwymK/X43y++WqL3EXsrPcDrjTC8j22MyoDk3Y6SQBR+E9X+o7e2LFUuwIjYHH15wB8cJfbfo84E8DRnRP+L4mymOqK6BASDDW9vgrSmGuoOAHBSxa+luIK/vN5ZYAR//YVHg1zCFi2WoGN8o1/yi/5rOR24edQORLlsBO0om0X2wD8J4s44F8WrlabBhsyW0pM2LywM8+c7H7n7LJRMLmO//V+rJgL3mbb/0bmpCV7AE+KcTPBlxezSWg4gKS385/PceuKeopMYyp3PJ2ZChVNE+kKVHH3LUHjgs59atpn76ZcQAarYb6JHwC9ElLEHapFksteURGr+4n4XrHDVAQwva+uWQE+8oLJuR1APKi1XTEYa+9KojtdHid6bTB6rgztBBBfW2ppo8r4rsFXlvH18tqLyuuBq7FVJHwXi8W2tg3bR52s4mCPk7j2rmQlPgZ9ddoXSCFhpt98N2U748B0pLcK/gsLzeFwIjSKzJkuheCAy6OWE1SMSz5v05lIWC6npRFjNhcsDL/ga4+KtUXJZ3dDQI01NDzRmdWyLr19/diIr5NooOI25jirJuDX4d8MPw6pvlxhekPmhP/1FwyxIkqH047Dzp5I59LPoKjniJg+GuRCf8XIyr5yYb239OvxvycYrGYZ/wH4X1te+5xBvYivdoMPeZOjwWufe8J/wSuEQPku03s2CKDioregsWjG17EG/Da838crO5HVY9R7l65K92Jrxk4OMAQmr5Ch2IynnvVlwEBvRZoE7f63+G2rZWLC7BkSSElgl3sz3Nthp5laTDw4dOE7+DhXT4fvoNn2yOSzZ5cdu713pgPjY9eN1kZRVSZpg2FvzGiy62R6rqvLa/sJknFVimqnMPFVp7O2Yxyv7WYI741MELA+ORGELv2oyzb6FjHT3sRFzzTAmgGdz+hjjSN8lOftsm+Wq6bt1+ZM372R7ofDe35b0/1Jv6h9lE9snQIFJHaSBQo/BskS+rXFgDh02zdxmirgPhStxEL+YnrmdTNdE1i1Kpb5AjFF+P/kjR1z34X/a84Z/zemQ1r8ZOc1l4XmgP8FOLnRa9P0Jj/bfk+JzTcQ4/ANlFdSSvg5GmHL9CX+L77l1xovOniuw9bFS8gq8FUkzXZco+Ur0Be9sL193fGfNoCVY9suj8L/zl3wGdMtDuhJ1yC14ZDjgf5Eu37keuVNOStiqaSarICNV8B45TJO7z5jn4eh5KOYxTUnUrFyi1enUXY56CzfDgjBcoUuvqeZWG3QD/jT89pOj8DpQKkECaSQB5pu0uwKyY+78s0dR51OYicYEYd4bSWs2AG2AOBESFZz2Fk5LxpWudmxiyG7kz0HKAgFCWuHJQgSm9VO5ra+17tsBLK5JsSoXygyvPFs802gF4tm0BL1ECubrtqbV3eXJhgG9P3Y5drdTHgRcuRTuw/7+rJF6UtM6g4BhxSwxXeWHN+zD4P3R8z2dy/EXtleRXnhf8WopJG8Uooa8oTV92WTncznL5IApS9a1y8Xb2ykFBv/G/32Jf59n3f2ace/mVhvazXlk5j08Hau/FefYNia3e6ELMa0sNnWqIYF8G9me7VY4/1/Yu2NkqZZdu0gqc+9N2AINgFEMAIi4JkAJkAwJM8AZgAz8BDMCDiOgDBvtt/Mk+8jEdzT8t+V0tJaUvb372O79v7+7q7KypSUWktSVnV1zz+N6X8F/rnFwL/qG9RG4wHLVBPnhmuPHpyRk9z2B/BvQFLoOAP/JDi7DxLKTIND1TXqfP9cc480xhLjPTcs9gehZ7N5639KI23MyOlcV6jw6j5jHMlfESUGblz6jhF5fffhs18zWQoGRXBWEVMMylLrtdEWv/mxEV1qyx8QbhKjZUGehEwCkOm7LnfrtEZXnxW0qUG0HbctwuRS8WwSpn4Qd15E4lnCg/cp0OY1v/5OnzNtpn9DfMr8D6ief24urdbvFpIiJQFo5TSqadkeekdgNHk19WF6MIizHeZf2aGL3BPn0tDBc94q8cT4+s2A1PrMU0wGg4HzvMf1zurNR7tuE2ojN6PVD9jQbSY+C2RlANyD8M2G+mMj8kCgQNiJqvZ7JcCYEPPyd0A+eA2WgXFWMz5VrQz2aHOaev5P+DfMfbUd0zPwb1VumPO4FByNhm/8K/Ym2aHqCUweYXFwkJkSoGBWm8REW6j6jVwz5ZyScuGfl2BI5Uj3NKt0sZs1/u0iI30KM3VHbMc2I0OM1QOf4HCgiXsD/l+e/BRt9sa8018F7Oo4alrwTy0duA+5Ziy9TdSz5bPKhd/qnQ8Drh8bIITlIAQB7c1ovuNi8PMdNSbb0s2mP9lQxydWzTRxm3PG2YXPAnIkamh3Tvz5x0a8j9GpaxlwkJgvMHHQoSWe50NXk5TIUJdeCww9HKs7RaM/C6z8djYX5n45t/TN86w4y4yXY3kkm6susEBETG5plEc5BQfnVzMB+yP5oX37SpYM/cpAxo5sZsSF041KtJGho8kk7nOGVaDpH88oXqHvzUQ3hqbmdjHayG7ll8pKIi2Uon8Di7iUX/MIz9EIIBf89/nPYBfsBMvrwD9Jn+EmH4sK8GZfWEzaM4E+gH8n29MMInvvCWlsuFrqC/6d8B/oPhTSgfkwNqmN4adPCn/xvgJ9nxwh+F+CGvDHNQ4RgbNOt7nyPlZzscxP7Y9UNY+Hwc8wUdRR2uVF6wkr3g+/dnINOKwbLwbkKOmPTRywTVQzHZIskN9t+5LQr3BECUpfVjLT4En495qiY0B3BH9Dz7fvzaoUdiNN018564YdlotHUhQfvMqP/RrYCjozEIMCOGKuPBdCCqLdT1w4S18N3AD5yY7tdI7Dxo+Whp01CGmfQYFhb12Fu8r+bS4Kxec/MkOMU9nXMlDfomhyZuvHelm602OLXBilSBkqUm3vGOQ6xLOTUVP2b2QO/GqJG93I5e5KFOVaHDhcXq35Kjjwz6WtsaLDCedyIAKyf5tStd/amSQu559jnWiu5bFJEP3DGwur+sAZQ3VZ1Wn27VitYFkYQnlBMp3rnf19d+UkG7adBoEakaaMfoXLS08TPLbK76XzIZTzgzfHbV6SNYZ0Qv40J+c63tnhRAIZU3B447/mjMcq/MdtCM6inBLm75njwCpaxRK9Dx4/ODc0itMwb7mZxLyyYS0J1/MKKliOJKWdOefUxwFKvDKBuPEiboTNdvBJ9+mjXj7a/Y+EopWpQvUMYZztN7EcM4Xd8c/s4nmaCu+sBnogxw5zRoEMzHfoRzNxB/7O6+umxp0Q+fZhzuzKF37hhKZ8SN8RIIjJThDIYx4gwIgyMJ9L1F1+5aZysJi9hiLxtl59Jd5lVuch+qQWu04JLSLyXxCH250EECimVFmFw0mpa0k4+UhPYYAoSGEKmnB0cIitbCaoSZSk6rBVvqW34fM5JzpFJtmbP5d7PzrEwsRaayPHDApbQ/6im5fFmCxnQPjseSXTQV36FKBRM13om0xrcwWa3xoDmYPkYzpjPWRBq1EjlR6b+EWVnOgz17mL+5YOfetggxwvbXgcC64keKnWcm6orxjnSr/adh42YWe/eJ2jikEHV6zyPl30U/w77Px7/CfvkVxFZ82FU1gRow887UuHxr8t/Etvp536UJ6rjnmgNjmqYs7LHfNwCof9pD+aJ3E6lmdSTHwtW1NIuCX8SFumDLK63c9ivDALktLhUJTY4BuP9skaiYKWD96pKTropjJf/cxaqRHYjl7e+pD8TeZfOoZDOrj4+MiLBRynlQD8l+eWo9UNocOXSrDgwJVihAZSAxfgfG+ZotbfsvkSFH4Q0c4hh2mgIxcDKsZhgCC8vcXh6xk5rcWpmbUGIntZBUZzJUqHDbtyjCvX0oe4OCop3KC+5HEX2yDL8uIk/jWgIKeN7SDtoBRnYC+rEjBI37JGvWsp6t2n2qJH3U7OGPquz4JGYrpT+ediVeNKuMCVYDk2WSvYw8Tc27zETtduJ4zR1ZhMqMloJI7pNU8THLeQ7T9BMrznuRUgMUBPpEyzGOoyH3WMyZYM6uzMtUpgYYuqgkznNVRXKqiG0w81YKCP6IBPMrAuZx+SfxrDbPYZrEcnjlxZWPMR7eGE4+h7cDtYAf7Q90wATAu9rcNP+Lev+HfFBJoL/gchtm3aT/rUcxMoj+SSeToPe8H/9vm+VMSYNJ7EC9/FV/yzkmaU/IdiugSuCd6SVfOFDagJRpgJRuC0/N5qOfKO1zGH0/0x2vnL9plpoPB+3xm9Bi79iF7iyEYrR77SFa+VpUwqkECZ0fvwxSfiwGVo98Gg2n7aYZLyrb3aqoIJeWWXpVL9saMzIObdnI4+SnACSRCRkqAiM/P79kbx++hlVdpPxffx6fyGjQ+buFKBOmcrSr4Spv5LmZn3smUdJlIPVUeB7JvUeMeMHkHz5V/F3adz98Z2jDFsAeWo2+S8gkfkdbfa40jcEmgYo/AkS7dUCZL/itDJiVOHmK/Sfnfk1Saozcd55DoFrBIx7jLXSwRtD2siwB/+cz2vj9t5QMjUSvBPEMw5YSIDfgb+DSNJvOk27FbRLQ9jIblEWeqdcRBmmWziy7iUSFAWIPcB/Rb/EZdoNBUVX4YMgv8v58p+nw5uDIXCv3bFuD4gZiaK3+J/zrHAa9uJPjMvs2l+wv/tWMkHqZxOqUVvyMakVC2bu54GnAbIDc/ZArG2hI8hFP8ed8sowK4CFFkTMylHKD4PGlFBGVIwI0ylrEig6it3pYOKFwqr4cw+1OA+sHMIstgt3y8flhm99DEdx8ipL4FjtkwQRdmY45CPcQDx85kyPU1QEyyGh1vEZemQBkp5m5DsEOdy4ro5rm56Iq+8XYZ0MkTLxyReGbcslVmTr6tr5Vj9pgbVwTHdIbv33BrMt/YWRi9XAqBS62dmMhhViTFS/qIvBjHhrnfVIHv4jh+a1JQ4/JW5Jg9NLCyPYU8lO534hPmrL+C5tCw3MyRJDHL6OKvlhp0rUIKODp36Vpg2zgV2ui38S9HcHdyEy5M0OE3c2AX/3qBc+A+7Bgbg3wb+fY0T0hEVDnb3bTNbFerp6op/4hK/9Oe2bhp1uOKFs20k3HV9vZoWtov3uINsG+Ch4boXPPZrz/axGec3Ehr8a3eI0XHHf/Ig78Y6zPlgGP3gpQNbTRhJ5SnlsBeCAPbTr4NVpld7fNhPCdUarCXHTwh6Vrw8M2i/PMkqx7TikEv5UFINbNMQ37FHPOA2lsu9J40nkvw5X2lNjzLl3nVkdgJq8P7RnfgYZPcbUnQgtx+a5DUr6YYWRm4o9AqcCZDSrwI7AIDuXL7+OOIOOWwPd9EfROEXkeZ+ZwUGkXKjPYi561zVqXOXEnihZC4pxxR1yd4yaEHWOlTLBiwTWClX6A8EC5bPZH0Ty555v0IgkLYjOgncXwkjmeVmwpeSbcQX/FO3P+LfMEb7yDTei+ddq3k4vncBoddxzaS90TGTOXWekGc35snm9rTqpWSCKK2fo3GErFZ0J3lzGPmuop/n15lSlzxuIufN5Fn/jfMjpskdynRSrJf1OsDaFBknmAR+aif4X8kBt78o2sVAzU0A/y745/12JRn3xallIoJ8xEzgzugRF/wvla/6YH2gVmQei7jO/+rECCCGwDAzLrmrXP3wrHXPvuVHzgcfTsLSAH8CAf/8GhdCOdkBt/SX70no/sZ+8eebN5dPxQ1XI3h6y2cSlJ7MIybmnrfeisdqw6l0jyWURDwqascaquUMrM2evbBLVdcpNXWHHqIqcap2w0FSF8C61VViD0VRG8j6622n3UkGG4SqywhO2J3JB3c8NvmqUOsd04ANtbsbfUZ5GXTJd8cmGLmCYNroLtNpGQicDjkx1zH8FMPec1TIggDcqxuehEvXVIMqllqLj5a9zotmIlq+77HaOuMBMPm6b+6y1eYSm5wIuPE/5r988rPRd7/nIAv/Y8VBQNy6FXCUMtn/hbFXUHJMFren/KmS+fUrck5LE9ZYo/86eR5KI2DQ1qzpfsW/SXWN6EEdMA86DSPFGppXv5hDXppvevHckdmFZ9RzSiQEV4R/GTBld7vIYpVMUO5VvrMJtGu5UNi5SfVNyrUqwn95QTdA9IsA7Dg0BzauvM0wuZw06kh7a8P1OckFLdy58w6HYOUZvKxIiIOwmVE2QeCuZcSIXm13yzQEs96442zIh3XczFb1hBK9WJptEXYnlz58PQa8kfdkReMTW3J6pI2GE8zNb9NeovfSDvim+pY+fQ8vn/IkBHBXlGGu4ng9TY4JKxqxQxpGE7g8AvKtoV8DXGZyPddUJ+zjAMLBY4Lb5kZ2v2BBAk5svqvxnZwnTWeaWfjtNYxXKxyUTKYcy6tr/FE9QEI6HtKhUSXiPvzeaLq9RAR8ZkX9+eeNrwE5960g8Z43DsIstzAGXXum+RV/5PfVjoP42Bb+SfaFf7cNxukm6aRU4VXoaT+sFQ1b+BdxoqpxqH/RocY64x+RK2hHJgw5gZ+mtEpRMeSP418jVEUOmfrkG04uugP+g/+5z2+V2L4cZfLdfCP7nP6bL+2C//ak9irmgi/J7gX/gTNs7Rxv1+mE/+twdFZ0bECJ7dLpFf+3URcw+z0+nsBdpdRLwL8h0iK46f0kJdgcP861AQV0Xm0dx865fB3AZkUunbTXB83vIAU3qjwJsDFFZyXbKxCEnHNYTFX/sePGd9MrYOr04fQUYZUzCUIkic/OK92qr3nVx6DKlr8rnIYpXup+3W5kd7oj7KMCtAZifL7KROc5j2sDeD039P0NaCrfE4a97e7nxvvarj4n+0r+lidJJ9RBkVCaK6gNHLkCCNkXcgph3pmnAuKYhzHHC3k416VdD7WccNj/mb4Xfge4xzY5UeQQKZzFt7YVD00VdvkjGTDxb/smpS+EJ/hn4zL+44KVsC/Lu9Uq1sqKmxIAjy/4j9Voi846nnPfPJ47Z0eQopLBKf83/GP1h+QdZabwzYTT7Nd5wvlX6ZySFQ7QXrBoDmH8d9fl4+0fvfW3BS74dxWUNkx0Kjja0C0dScEU38UXTGCe+CdnR4eViWRcIndp/LOoIcCQdzwTA+p4+0J1m3+BYRFA2yG+pB3uo1pzl/1MYDLhtOTg+YzpWEWFmUkSK8TSRNpCGpEm2hRZGAgO8x86XqSFfQgANggRIX1qzIp9WVLnPjGGlMK7MctqdiOGVrh18SY0Cp6YJ7/6uwl4hl1HYGigpqVlXgIJTCdO6Ct6bhxtxjQ05vwSI2p829emaHK4YNJ54FUaMyYy8rM+KLbiRDG0G6MlPJhKHakU8FZgKBY+4Er4qZRXXYn6xinGd7IOBehjEWZIOJUg1PgHpkReo3HqM9uiyV7HPoQfgmvXfMjQD1dbzz/NEzF9+YZ/0kccLS74n3CuJ/XVJYjWu6byPO5VjL39cm6DCOe88B3FQVrd8H/cwtiBPR8P29cc1am+4F9hJC418G9sVz4R+OcE5byvnhT/gUDT3QZMgxUay0QA8OEE2kzvn4CUBo6QQPs5SBztvZfbpJy885da9HwaVdzMtNhmKcZ7V/6iyQkxLl5ThzzhZZxplJV62cSHTHOf8eAzQ/68UvLotSgzz6v+ZxXGr+UI8GFvkI+sViaSAHx0sJl9AX+2ua9G5okHDi4PHfAvgfzWtzqTm0/HuglTbX06KSeVt0SGj3E16L0UZylnyiV2IwL0YGpm/sE/JzA6iy1VwsqAaWVM99N7XZZtUK3gVG0m0RglLElqSpiMYu/JjAs+WcD55DbTmZCAE4rirlReYsd2jXR1iHXxX/QlH02rTd5oPy0uHXy9iHjoNUEi1RP3GNf++z6Z88CHzDgaDUJaV8W4LSrIwGUYs/8I+Hdz9o3SgbQTrJbP4EdVjDDi1hVoO9+1b8G/8Vxo0gVdei4m/n3g/2UUi2w+1Z9gMWW4yIW2wBX1pO7c+nESBvVq5NfCi7MyRva0S5+INQ82XuoHlKht/HdIfTCmOY1KwDtH5awAX3Ol0d9ZBXWrBHQVn9gntmklvKfenqVyZBX1m6dGMp6JOnH8y4qVzk7K0sbkzPjlPoHUJ8r+dmLys0wu2E7sZJXZ8URiXxAR8psOTGKm4EDqTtxFJD6WTILesk3ANiZge/ZTh/VwHU8dggHvX4Ixn289wCYGBCet8FIGMSHG63F8+luv8+eJg1C8xhpVn2TFvUgQMnjbiS8/KAjbGHG9Dv7oFrs6adtEC3WGCppksf11XBLW4TMm3mSKDScHCiMff5lfK02WG6tYqTQLRW4YGiJwYOIEwQd95DWqC29EmjJUHWnD713mnPEvPzZitf+242bLKgSc6JbvhCcfPPMYCBaFpxY3vvgG+ScTtQ9ZE//w09Nlc4z4YVgnLCb4b/wa+Z3ZvIuaKMhavPanaBa3b/hvG5oZi+ctivN+226DrqrEnwf/MP7dWMQYAyAGHN8j/LtJMtnFYQGj7bbu+qT160lnWn3DZYt70VDfiLjXG1eHrUE3snTyMVrE7ppnRGbolyIv7TycFCtjeV6MZnE4CqZ2mLCgG9H6DBikHd61yjztvAnlQSbA5MxJ5Ww+9eSs1TSQqeyu9h2EPrN46rJOZUcOluV2KmPWqYrFMVpZYPNGLe8Fk2qYkjAZiMdsYnbaCWJT0bojKLcDooAQbd0m2DAW++ezK8nUL8TM85Fz14gUxUrhp8mrErTKA051VwIYnF27sF57ctilxxpEvsY3ChhmVzcOb33N9ObJGvJmo/tGhKPJ5iRnjBNdAfLEdWaesg1y2fh/EgUuHWhFrcVo/BP02iDdtwGWN8O1D+qpZjxB8xWEQF2GbxNZVcmNA/0RqZ8SKBV0mL1fF/59yCn+e8E/D9P4r3s9Hs/KgFbfI3aZ4xrKR99npyZPPiWVym3iv3V1+/fHv4k9nOwiPuz6yF+WEhA6Qc9kRaR+R4EM7NPTjo5lWqtJ4bEqOfI7nTMHjwbRL1iVjRv+DUQUv/e47vpj19eIsHWgbUiD+cw9GF5vvV6YN54NpKYh3nUwplW8Lq8LUWxiI9JM/wy59sSOoHcyeldItjcOqqx/vRbhof2QB8PgvFHZj/PxtZCRCWOStXo5+s4gQ/2KrpR5432mBXXRIjgZ6cl60RpaEzIHjBo9704+N7vFIj3nHITADrmMZJTzxAxScbQO51P5QBX8l2zQ0nuJwJJWnOb8FqhlrrDEEtGkSAZKcHIf+NGMmS+l6Br8VOSlghAfc6h0Dbnoxr5qiAY9Fxv/wqFCNjn/rq9HF/2xkTGvQ+93EDz5kN9hGVd7kGx2WQ4k+VvzjHEykO9zfsT/fQzad8H/VXzv73fzDWo0Fs0DKkj/es3S9PviDbBeZwQnBEUtK6FrUf3lImcFusuIzvMYYcS7x2HSCrHuJ1Femt16HoPKA/9W10wyUfdq5LvoqiA+Lif6ehsxXN8XV5cyBBx0mrKEJkrZo9O6QLcvZVy8K+ybv+Pr1C/BRJJbxAJdWBs/RmeBgNiGqUmpc9ubna4teH4mImBy7PM8A0cJ5IOcY1xndPxnRAayUBBto1tQ5eCMfgK6OY9iRs4SA3DIEoI/GtnHcinUVeYpn1NfPLHOwvYlgeNcda2ZkpozWxVIkDiQwGPVokZBP9ZJhQDvyXS1GusJ9EWEIzC0hBFDP/r2mc9ApYkn9y/+WV7VZ3aSQ18lsivP5khB61l7WPi/LHtf+hM82ADz2Bdz1yDVaI7vec/G69r76DIa2q2CNmzsWTEz2ZWv/eVPFhrUbj9eBrgsmYuOKuitnz3nW1enc5dL2Lx3jDxq+ooXZogXF/4hSNtf8H/daGHylc+mm/0NlcqnxKZ0XbG57iQCtfrEOD4NB/6NeOaGf0v8036nafkPxn8zdvMZzcnAPwm17bvx7yiOqBGtIr3Lr11G0le+fHHBf2vobQ5TLya5JIeYm2/81466P0DuEzgzvNqyI3rL3YlV5N3wfPkU1RkuBCEQR2dSp3++uY1iUJ63ySuGdR3k4llJavCtRCwd2SrRMPtmLwFlByfd0XoEfUUoW/D5ZEfuH31wt92oA5Tslc7gKk4uH0AkwMWnN+FXwGZPHxnwxYGEoyJ15fnGK7dVGew2BnY7JmjCVk7aDp8j8xtvnVcX8Mn2ZYN/TKGsSeQ4sdjpZi8KcIGpHQFDgvgCmXGZPofqAGKs/JcHl8x2TfK+D2VXPU6uaIw/3yvx49z0xIo36M+mHnMf9RED/577pO+iyNDKW6aFxhnlF5H03WgH5eBmVKv5HwUrugx4xT+tWpa8VrVY1UXltz9NYHbi2SfmqmRpn3b2qW6X2kIHE/79in+74J/mQfBP9vzD+Ocl7t4ZF0Hu5mlBDBVKxBf81/0xMBGpovAOOZ/w7yS2sW78Ozl0cX2+LE3ioott9L9Kxxr9Qri3bmMu7YZNRopulwbMyDKTJC+GahdrAiUzus6/7Cg5C1tStKVbdudj08Do4tC5TxmFslXjgE4KFKRVXBlTqt1sW3epii3ZXkF95azRjR4X1SzmHap16lgm0+MUPGR/JhqYnoiwkYj1yMZV//JBV3WKV3uailzgPCTvFfVLAiOyvp6yfLsIjBu4cWXka+XFDg3LciDZ3J/vR6dKXHoMciY5F035Dj5sPwl+EqBUv0m6TnP8BRpf8G/qcLuEHfu9E1FnhFsnAqZ/xsdDTXXjMxf8X/BAHcdFTX5dtmDy8HqwSOEfq2WUZ/0O/8Uajzv1JRP+Fg7GvWyJ/2e4+Immb/hPg4cWNrv/y5Gk3LJ1BbDpDobrWKmD+w/4n3yrA5ZdFf8i0joH40RV1oHLCMIl856oMpmN0ELVAOOfocxGOGvHFRVer05eNWG8T9pCfw+EMV5UDJwD0QHclBwg9+V90oKzMGEjkJ2D8i0qTFwNdbkVoG6yMe7cJnH27gFyISweVraUixMQoyDObFJtQnsk3t99c1/YFxbycHjrSwBlSM8gRUB9JMhx+M5S9bDnvBxq6mQ0Bulj80Bptp5bTfM3HLEUqcjVE3uxuZkAUm1XRQBQAvuKv1a0cjrR+8iMAqFKVAgpQL/M8dkGPXjLwYNRA6l87BrIfAKqZbA7d5rZuD7IuHZxFZAJV7kewwxRwlYnJM+8M3bj//5+ntPyjUjkZqsknrYeW/j9MOHfaWh9xKYZQ2r+rf6u+LVld8EfPOOH84kIE5RnwYOrwSNs+22+Oj7DB6nit8bXwL/9VfiPm6zWk6g4/Rn/Rz+ZgPgSlGdAD6rRWUczwb9NWTbHB5wviw08CrqDXMmBtMvx+at3xxf8NwbN+Or1aqOS0jB+GS172/jnZ5U/BzIziduyd3Zyfd+ZLo3dnAvrc8XdARlxx7yeyIxOjofb8b7y1OV9PCzIPgrck0Q7kNanI5faS3tFe33gbtqHkhb4fLNp/3frm8dkRw4T/8KgFCGYKMT+nzevnhPAOfqSRekFmYXeyT4xTdHn96qD8RzrZ2OSmAs1aJKq1SDOsb9kc57cK6F7mpv4ZAHn9H/kduM7X2v9u695K1em3mEja13zmbLPfbKR7rFUYLOdsWayyKQ3X230h87q1W8DW5IsA2bKHV/eX/Hfzdg3ZMVhNmAfrDZnUmI2+/1G1/tJFhpjceVPc4p2HVydOskC2gCo8e0JGeg7/pffxrQHX98cNonf4N8E/4WpiaP2dFdSGfrafQpjfmab1LK3kyyUgHQFnPjnWPAi/EfflCpSG/CPfUHkxoHFvF0r6pLHwwfv4JWiHIzNrPjX+YRdLtMukubYNtdlXNF/xhqcqkvl1S76a3Zx+g7JTiwjgEnHx16DQ9oHUhb/ijlvA6ZONHatz7KxZkcx9n97rnhQbOmHAlgR+ZkHJ8B7yFPB0qnU8aKvWsDmoc5rHCzDrr9+BGHdOiFwVXEbTkkZbcNi7LNpRsulb+rKWCftztbHzvpDrhgMx0W/rgGvnAnnDfSHpK0EcHJEsdskAn5dQaps0Td8Feqw7AoP7hQTeYOMQQlMHQf+aq7NRLCLC89NQ6NJZSn+1X1qCeeXYorGl89oExigKrvfj5PKXjFpxvj/YWOjaQDQH9SwpQvGEia/LtQJV4ZZhzAd2ihIqO9Q3hzaLVSYPjd8z/MXw5TQbDbyLm18dEOKpV/MywnFT3HBv7aiIE6DrFIjGqUcg5IiQ0PNH8G/N97stjH+SyKcsyp95q7eYRwPQsaqMtvqUoeZPBXRsULqnEAU/lkF5wWsPB5n+dht/+hUnngFQ1zfHpXJS15fTuWAi+qhiGzkaBHzQkehmzLDyp4649u+6i5EXr5UTWPIeBM9FPsAXQyce83b6YxyEGoCLaUM1spnsYlXwJ0kw46lj9nV8BwlUIRypoxrAKyJvrbG5S3mu6ic6iQufT1MwWnf0EVCn358i+qTCOc22a0IhDPuodz5uoIuIdWru/8cHz7by9h0YuNeBwp5uAO1aIX4QE7Iua7fGVJQsuTqPyMXwraQQce/q+YUrFK780CliCHp7a3sQ7piRBgyBx27eIUlbk6f+x0y2RctVPYat2S44n8osPBfyUdREkYyBaVjN4asZkkKZ1/zyX3ze7LgOocxzwG86qan0iXiO/7djCsxH2ORPnurxLuCU3Gzj+TQCP8Tp+0EzSMXUX+D/1Eg2B3/etz42QjW7lEJ9xelHXojlkX0Arrd8N8zw5otPSiR/7hu3ctSS7nIvwT/A5Zi8W0p8owM3KKMmY0L2QhzqIdjTYTqFx2gwLT5n39Lur3Ho+US8ZILUZvIUJJYB0OXyoz5hx2mfT7o8w1lmZ3dwJnOj2tGocdL/5KjA2SIk0sDnH++cL+y5YBqPBAP+T06iPxVnXeFG6vNly0fAmHM7xKEiOxACn4JTkReeHgJBiGHrwWPXp5dAXjJaGaUBJwk+IJv76HwuXx/kmYeWTcQyXw4iCsqEajjxHLsl0dbDiBfIsHT95h4pw7aN9byq27TiXgir47eY0dNvOdE5zG5Vu77PPvW/3AeNVJg5cJ9N6FlErKeVnh4+dFbVNNgDVwvgPrlBHbGi5jdFaSm8o1kHH50wz99h9mI2MBcayHW5uIB7efVRuvXq47aZYLX/zD+dWtjNv7tD+LfjYPF7lFkbCjkSvuUw6/4Px1cVq6oypZK/uTu9QE/UPUN/4Vl6j/M7tio7VXLMe5Y/fJL1jdXi8gYLLO8rw/D4Y4KHbCeLhrxRs83n1FGliwk6kZf8yjWQpKBgDQ14Goubgr84GyzJRme03ZCEbnNuLJBwZt4SmSAPrx/AvlSJeNfJDImGwcwv/Zh8wQs8V1u098O/8z1kLL0Ybmd90msQlJJfnT165+2E1csuPIKrjpIgV7jMUExvM+V953OpfbLj6wTjRNS+rXaU7ihT9UhJ5LlQKFtAspemMz3n792Q9aH/+YWNsaZKx2lmA9SCqMHPFhPcpn8NfaRVZj1QHhJG41VXpsE/vfGDhSXfdaB8cvZU91lZjMNYtO2rWUo/hlA55/f419pxxBeztu/Hv/fCKAk7vbnT6I1nXD1iiF3sUJKjGmIC/7npTC3b/1PPkrZHTHj2ema2DpbCngOTvyN+Rtz6jTGz/jvBn4xSPlc5RZ1sTjIY1542yEjEHB7DUcs29ddnh+oCDqvHKaIsZyOv9dYnhU6v/1HFX2ajJuFfChg6gVJMoKzM65gKWgxu8R2OkYkHjxBcQm0ZTQ3mXCWyqGCOtjgYvZj3Qh0YabP9E0d0U8Dv50UDsKZLTAvTkaS653v1lkq7yY7Adm9P9PddiqV69bB5RBvcfH/yK5ruYuXrM1NrmvBRnCjru6yvZjJ64qmNlmuFK2C2MVG32g7ibXfXS8LSCM3KQVvCZbzOGMVoYYJ6qtZmYa6oHa+L74pI7BehP/7NpgvLseykxj4z2PM/J1siRz1eQwQUwZSKkzwz2JKVR7DbG5XbuZgovj3fhX+mJvi//TlOd459/Uj/g1zcce/2+XraF1mEv6DlmF/h/+4JLctl28fsyHbFf8+WlqrfKUSd7gMPzQGK74XbEyeNjwtEKKzTzzDFdaw+t7jd8dYBWA9Rvu52vyqt7PaKQV4InAFPihWExMGufiRB+RP3OTlFBfuQoPq5mh/MWJ3dE2I2dl9GjyD3HP6mY24ydF6wyQrw33O5UoQDB2S95c+dlu6uG0z6I5jeN/ZZ6nhDMizI7iqDEESuhz9E4CNs7dxbpBr0ByPfs81E7fSyXG/g2nw7oA6IgaI0q8FUC6d9Rmhh1CdoJ9RwTSbRVSyR6yrCVF2S/EA0uLSFvXrzf9tAyCljVgRgAfiX7oZc/QzydFu+BG9nrvHaVmZhnE+iSfVl3HFHbqvCqaDwajhz/ivD/E7/PsP+F99Q/7a8XqIoKsEkul+M+GeA7GLDL2CU+3+Y/i3b/h3dQWpPgOyKx9JEnod/iv+beB/bEFUX0UAd8jgLl+JxghPd5DejpP/GP6N8E+ddQeK/zDONVpOS/wfq/XEjYwH+5PGOqLVP+JGnt2KDbh6biNujoEXDd97RStQDJxUFZV4dCCIXWFQFhRffHQkG2k3MirGpT1OvtAVK2PwvlEgiHEOCdUKv1yqMAVCe9ccI7mH/aqPDiiFSaa1RHcJxJ0UsRyqg3HmPylqf3+/dJxLwjyu26yAi3CDZHsPzhb5Yo7LTZeUzyMZ9alwZ79UIJDD1N9E3q6cDQTDiUrp4TJnxuc+DV1c1b9rsLZI2yAOMyBZfupPOpWsZzjNvCSxgkqM1QFTA2JeGL4Oe/Y4RoKmMkFJRe1rUtbLJl3NoijLOGObptGPLq8JwIF/rPDpqbeNZv0KIL5WGjnGpTNeVbrgH2ZqRftYvsGhC/6/+5YW9Q0y/IVMZEzBzNTxc0x3iURQnU69459pnZ+nzqunLuP5Tli4FeH/Zt6J//ir8B+mYxcS14Oj4JgvZOBOVWqsHM07j2rpUtSPyM9jk6P25iL3GTS59oJ/mRLtulkkv6fsfORU3KJtxmvYhsvf3Gcj1tUbnnUfmdFw/qKFhWUEJc6GvC96TxDFxEZft2yBSoNSyI0DmdvuU977WKIhPo7LOZ9fWpfJIt5y+5IxwhHvBYS2q7eXvtyFS1YAOwJmVvlxNr6HoS5pYCickL8cL6Qjuoet1RXj43J91roz48GIrOcheZ+XFwDikr1lya4y/TMQ9fIf46pbUhuZ0vHZhJSPL+mzuu3so1UGuxsG77tKnYf5+qxcc80Bb5XztlnU8/DFQWSccdLITls+OLb7dW4+71+aMV/1t7xZh0HC1aEPOWLxiF3mEy9LT5LZzWyh/zLGzXdvUZPBUJWQ28I/hlEN6f3v8G9/Ff6bL0LCTS4J4wvLP+P/fcF/jPD1rF4SHgJdBBIAG8mE3bTbvLBWT5izSpZMXuuuMLgNR9ywuQpCjun6LBlU3tn/QbsEPeaaRvtQxmjuF/4latQln96Vb3FzW42XCcelBDQX/slg7dDhY6Rw0tv7V4soa+HB0bYnP4XwNpRrrgAUbr4t0WDZEU0JbGXs4zxEQkz4RjI761WNTBEW1MZqzYQEK0+9sP1wYONr7Xd+G21HX6H8X2Y2WrvWsvZx5s+u/GED74y8vl/uxoKQSy4AQjQLttGYtCOuD9tVS1U4oOtsZ4DPJt+XubsTSfq2Pb1K5dUHIuLqbAtyuXNBlfaLzO1UtX+Ok/iK0YmbCM/ZEUobXKOj4GImlbn7PVEawbmPsTKf17NqQysJjr5rsjKwZ5IddPxOXsEsXYzkP0Qu33/OTG6DTG3gT+zfjYN3Zp9xfMrwPFKaVPcxrzzhaPEF/z2UfAwS66v+04yxsRghYiFYLfxb4r++rXLDv57Q+PcL/uNH/EO5K/53M2vx+1Pjv8QdMpLeYwwf+K9Lls7TvzgB1T1mvo+YQjPPRytENWuMDCXVPhVfe2m8+U2bnTNfvMe5aB6qHz2t1xXGt9ltgMWFqEmGgn4xc2jwNLOYQZD67QfDl0wJGzKtuxyc/tMeNG1zyzZtuQgfR1wPXV7qdv4TDi9OooPM2Y6Lw8NjgwCobbzU0P2yDG600mK8SlHt1c+knxiglbxBybkO2g8bJygkt4AvduGjBowfbc9fy+BuKcD9KOLqj3qZZP38TQNqbR2cCVxBhZZzQJMnaTkFmTIaGHfOKacd17UZbnzgTuPkq5kNg7GIfsahZoVOl+imQ7q6EvcXKTdvjjW0TkTM9Hffb7M5J/rGOpXW3s5xkj9U5y39fYvr2y1GtbkFPNj9gqv2y0sqHxRpjPDP1XQP/A3/1RHfV8WDLRz+Fv9t2XJfdjPEja/4zzP87tFnxzkoMlu7kdklN0AcnkQj85L37lbIr64neevcxpxLzeC5Ye5/Rbscs3hq7n8koPCkyh2swcEz6sv+TyD3EuoRwqXw96q+DTlE9J2WWS1yEKplQJbtY3cSbHldehwCVA4W9jOC+Lh3XOSMDk7mZJtAvKH+MsMtcU0UMkxJXOSg9xHDsdFNVz87ueiqemHoNt6N06BnpoEXIPlSgPVK9rAtgCZnoZi0sVTkREjSrpbQWh6xP68sxI6JMd5P0y87nJYRHIi5pRo6p7gM6H2+GGRYZwX2KfAIdDXwVOAEweDJgh+pVj+hASJLvyBOs0zeS1d3TfJS1pcGx4F/lBHoL4LVPC0qeem0y30md8N2646tUB+5aRymEcXGe876Ev/dvy38wzW4O/KBO/6HP+FbQIOrG/+Jg16Y6UW0mZT44HDTVyPMZHC0Wm+ZQT5t5V/xbxZ2X01lX+wpEZt/TwxKPMK/a0cD/ymzzBEXlOhCJveO/wwh0TuBhpGt8Nw680fsZuQoXvxnXgGaH3i/bhxioo8OWCpPi8vRKGrpXWXo7nM1Sr2udPd2wJQ5vwPaOcmRvxieZPs6uU5I0QmoqpUFnI5cyw6BteoO+CNQjNk9yyE2DTC2mYTM92bsFNjDjnmIWZev+DUayiTOlmS8fmmWQqel1FTaWczepZxJcFFCYzZID4isIc04TjIRxfgMGfYKAU8x75r79q5hoaDS5oRwa/Q7vaaXbcbhCPZl1NiCc3XpyPO5ma9TEejL3fqaYVa9wXL1K362xG0t6VEhXfr12kfg6XKHDmo9/Uf8e/jw3eyq8Z9Y7JSpZPMhFjo5zho2QmapxAaSTXQdy/M/4r/mxuxy96gpyXtjabW4f+JA2WP/iP/epBMdw+X1NLq4kBkT7BehmfuI1y74T5rXQRj/eC88PTkTODOW0lDBDDkrkzGC8DZzFp/fuDvq7PLqpID21/bQ3f+wh08Ja5DIJz/i+jJnve0MZZwgI9U+owD6aNXyNbC+qOgY00kTkuN5H1zOOmtMjpDc5SayGQKqR9h1mUneVlISFuwYMeybFX9NdfFQyQ8Ts5OUTNNhpvOJUDFilQxkDXP5WDJScKJrVDWm6yqFMaGSzjPzX9gsspjgO43u6bRdzuFtXmfzShALiH09SKamiPPbOETiFZbYx4Vjd+arbXRQs28kX3/9KFL3OY3owr/07SZRAYHCVcf2s8Cn4NWI2PLBSQV3ZvJ7w+WA7BEYOeS70Xh6Wqj4e/s1xa9Kkxk0lDof/AfPuxFbDPwrz9GqZqS7L/y7mcy+QyU6vuelv73gfq6DWwd8p5WgI0FwVI06H52xQDrEaLI9rHCb7zkHUfyzVCljrlr6Hid19p7tigWXQC74T3kI/zeeRb9+d4wTkRSPPL0oFuMHzmw9rvg3Pp/mut5mIukmxYF/k/imAlziyOq9FPwd/6N7TkKJAB6bv7B+EjdkS+Xn1wqQ47gRqjTjjzWDbsi0uennDsa8i1FW72alb4YqI8mFI2ZP+uQf8rEpF/eNifX2RfkG27weFHM9N9/6fbZBrbWck8EpZ7SvsDRYvm7X2MGVT4qHZCRMnTCUvgh/E9gh41DSEnbLz6BFDnOwwJNxRLuQUkgcorKgqoSTx9zughUykS4NfsJz5WSCENHpvBpgYmuSuv18PMafnDN3TAHSmehPcHn0KKKpIEEJiA81aun6eEqssV8UyXN4YT+WTd5ygM1jG/+Oywo8JpWBiX8SIXt57t8POOgGtxQgz3lz6m4rEN0B8E992CVKkNNPO+dfJYn2xQ/Ax9zGBXjTG9b2x/DPS5ixHvcbdU6Je5JixX/8iP+mEUYkecxzOmPvZtchUr4R9ynw/2H8c6S6FGM814L/o9gARjar9oMmMJTP41Gff8A/B2p6Jc/CUoxcXA7mbyLMXkLjdZUoCcuANYFU9QB0PipDFlvAVjk4tZuZXlAlGqbzksfRqDId4Gz0VQPNPlrO8XkQED7yT+1FmWWvpzDJtud4LQ3H6Pr4lC+nE6JQ4r7ITOPd8otQ5YOb24UwvKa9M6uvyQk9lOcTU14+OgQzuy15eY5K8UPWTjO2K2yzCTOqPvgSi+rk67zeV353JZkvxNMBxdXPzt/mgzV/LOjdwCGvpnN6cJml03SE0kgSS5Wp11Gjd3TTkHESwIp/Z/zbwD/aDPyjbbULXoGj7nPVZBM0OXLLV3aBo8l8Sx80V7zNzz/gH/adhNLDc3/j8siIPGH63eiFfxv493HAfoP//IS569WXa5WJe4y+YMmo34F/zWFcftHsNh+LK4PVOhL+MfwrhwgkjCZApt2FhrSAaIHiW0hgwTxT7SJLh9l5uIn/C7PUrlfoSjeZrI18y87m565AjRLzRSwprIuoVXmPpc9zqtdzxrvKtdsEBe8L/knPstqRD0tXWunfPM9VdwbFzpZ6eeD5551LLRZUNqSY1YfvMcYWLYaJHWMkXDOI13lBKypMcqhqXLhqJg68+e39AFTtLDtEd1ir03oeJZVhtgJXyASz8OSr1Okqbo4guj7tdk009visVp40lxUmqUBAO752/KA7b8NWuatGB7kMBqMB/UamPLax4uOSyNab2WEsp1I397H4c6AKYrDloY1/r9eDfcL/GMvPbbrZplS7EXQdfJTmSSasODlaXBfDXN/61FPfMznIvoN/hy9chtCVBvtm2ClGnivCb/w74toX/PcFldN/VJVNtg4CKrGU/wb/rBb4UuQ9LhItb3zH3/V9EC7/EP6tD7hLHnn6DoGokVKOvp9LjBrTLvjXR09HrR5XoIOfpnPEBf+74GuF0rHxyFNLZrwFkby0Lo75LWO9fOzpd+rvW2Rgu32PaBOw19+T1PUPMFqDeMhxPmgz+syBiWc+VJTzBmVhLSlGxG5vpOpXL537pnOuYBfsIHRtlQGHJbEf+WF2T2FUsywCYF2jrjNiVT1DWnCbaz82VkcggGdAspiOFlc7b/KFfb4AxOmvER27PyC9ZhoBKeX0zrK54w7eA0NMsIDLHDPiNv6zvWiZ2jN3pBr1KyFYkewlmIUmGDkpLaJzkCT983P43n/Ff7EW5MF6/BJ74//SLzOhT/kjxk+smgwlYcbOd7pJpy/4ty37F/z7PjFo3w/4dx+TtILdxD98UfEqvogqe/YWfT8PjUD6lNcgAD8ByZuS5WvBceErQqoz5gY06A0EZZx8xb8Mlxayewy6nRLthB0bdkGHGsRuPEui+jjnK/6lf7Z/5F3lH018pdWhmcwqu688xmPVGwcc1KQHOC36Y0jyd7efTYvx85qNcAek7mUmMQZdHxSvOCA9tmWVL0syML7nqwVPSMuUVRLNnNfPdNo3ner9jVzsSnrd1+w3r2tdq1p2uC995/ghfc8l2HOsnTD6tQL5bZygvkh5vYJaF8euld9QlqurrcNkAubfSU9rqzkpBK+5Gm3XiTywrXlI3zsKzBvPCDpavLz61Crird4vEeICpjT9uVzTW9B118+x18R5l7/bZjHxXxMZfDzx74UE4L/GbH4lfXihKfeErXmv7EVMD32aZ3zyXo0VNsiSOjdm8WZkj2ETZ7Yey+HcfVyGgQ9c8R8XfxtInIc797rin+KwPro6WZiSa5xo+76Wga9yIfxMr5nJV3DH5MpU2QwYNkMQ7cTAv8F/46/WrhzqOB+WIc7OAP7JMdPHYsOZjJFu2DmX2+aMPJy82gSY89MiPRU3lfyViVA/579ZdY5q24YQxLbnXZ4XophbBbumYLZYSH+cRMCLsNzruFeFZIkApje3zCUPk+t3hms4dqsALe+La9vy93HrF2GOytkmhnIRds0MvQjTmozZEZlwjPbbuJmLeFXIXoi0ZLNhG5YJvAlfwPfx2V1pcU11al+JtEMlNRUp2TJ1qopUlUDNt2Sl6ifPUcoyKbHwC1h4LIkD2U+qAF0grAg9g9okXIzATsakvpWeD3wWuXP5Wzs6B6RNTMwdyBXrnDFDXKFuIDQruJ8VvbOjqzcDBW35Suc2rN/wnxTQHDghUkJDTmpw8F/B3nAzVctywBvmZCrGTK9GcJ/duVXwZvy3/Df9i3Rjzvucv5Z7jovMq8jLBv5peKP9oxvFv33B/9kx8B9E+O2Vh9kShk7uUmeN1cuBfweoarm5qk0OnF/cnffnGIR/kvwYXy6BshzCe67qWQj+c425IfpsL8r9QiZgZMlt61jAHUrR5PFRb/fHcernrKxpGmKsGK/9mwQ0m6HVyvi5h5YBwy7XZEMV/YRw98GIahTI8Do3OcVYhjCzeXPmua8rliPYcrKuiN0ulXYCMrprktAMDxkIu6mgG02+8IFrZe57JO9kRWOA6OLYrB2IZXGl/Qv/OnG3L/ljlUHqhA6+PTZr2AURxTHDO3hlZ+lS5/EciY+mlO273pFG+xNbXzbhs6cj+gQQuM2x11bCmqldpi1x06Ftn2FB+h8nn4jg8zmNZHuKUmkaCTpDF53QDqrFu1aBPDRS1ACtG83VzDSKGY3Pc/7ip/ExLb8ieLVH7TZvzj5BaCwA4I3i34yTkhY0GP9bvsGsfyX+MUdHU2MesttYTrJL1CQxGv4X/J/BOYPpiaHVGvib76WbxteX6pY5u4u++jRj2ZscrHTwuStE/LW1yV4uD95BP4Nrd0RAm7KB+XTxJ/YgQtwfTmZNV9mNiOmtXg/mP+I/zxydve4uss68eayPZVMY5+BdjU3Y7QeqpCTn61+Op6iYGFh4vQwYNjDjY7LbmUcgjqr6ZrbXhqSERdWl8azikJqqOHURA15D5JXtLCmXLEnMUt04By/Yo2K0i07or3QFiYY4ZNRekjnQQ/UWLfoZKuSrGHWWV0YtBqn37vh+cP1wQSZhZhrE5FT4V8Dpy/FYB+vVGGTX3NcFZWuoMLuHD25QgxLhzWD5vP3iB9zuBr7Q/UR8Jggu8pd+x1PIpK/o5e8mDL/jf2x+2YFzMeCs3vtcR9DvgGviktVmjhcX/IfcfFYY6Pe0n46Vp0QvHLiNc5EcKH1V4+B+gX+ayD+A/1CCM3GEOoYVEe4339zxL4cNInawc5INqxeNf6qYi6sz0e73PBcX/NsF/+MonqLXP1y08S/OYeyk0z8U/2bO/P4j/o/+S/7E/83dqwFoHKuq/KuJBCi6h+pAdV7VIwWWDPab7aXEwHpCEO5Q3rMSZpjIcK8iWs8l4k2vOecf8h4xQ8fGRNAyPRODaTCim8NavtPY952BHJB4hUEgYL2EOBKWCozG+ylQsg6IoGNpqdv0JXktjOuUqB9jUTTSMr4Rg3qBFHNEDMTjNvg7HB18ysbGmY+UdMpCaXwlrrINJXu43yC4nfnFBPAJEKyPIEfqTecnA+WUsbPxWmuTKzqabCnjulq/3lbhEj3+xa8uPsAfBEUB8qfqW4JFbqZDpDyEvgbHHN5Mgrl/xz/OrUDVAVACo7R3X2NIVXdv02ZHjmqa1AYHo7nCB9kOxtuMzy4NSM/49OAZaZtSOb8pZ8IPP0i5O5MRl2zzOvflX24rCg9W72HYvUOSppDTa7VijvuiKjvlxtPzeEmcRib8+xX/hnk7rlkDnElEMA7idAh6DKtFl6mJbMMpmN+/4j/7BTfmqTBtrwI2dJ0k6nEb2d6xpvaRXlGxZYGNkukp5/nA2tHKyqvlPodaxCPMzp7uRqlMq51NSJ+AyR6WzTK/RDCLKWci1tCm9rFMOU4FzYxyyM5ZL5yEh7fU7vzMKSyd09OTwDqzEkiQTwvKahvd6oQFzOESnUOk+LRKxOTGhln7nAJQbW5EXaZnd4WwqgreeqWEgKnJWQn/wv7YxBfDp3gSAR6694CqHzOLm/9Nd7xuFzKj1XBaMSRyHZnTtb/uiOdF5ZREJmY2R326+0JrypdS+jc5hntbtUfJZT9ttSQ+g/bkmviC/66mEADiXkG3D0V+26v9PPGf71l3iij2fetsry8lBJ6+NjQxQzIpMrq+xweIoBwI6T9/r+5bzvGbrDTTxElJ8iTgkCmu+GyQuG/8G/HykKFCffCKWJ4vA/QSRcspaSXw738Y//EF/308LHbO+B+Ef74EDFamXKuVCpdQrbJwePMvl49d21bNtv0jm319eho3/9gSN6XWEiMr9fnnlQFlTtJ8revfv9naF/sLXHVXKFewZpcJtJ7Y53Vcc0bfAc49nQYCa29ula6WLy6Kji2KOnId7OWeIxpX+75YuDApVBK9S2zcRCrBmoO4Gelq3Lf3j/aRIrHA4byWiHaDzYwfvNBJDq9EQGaaistyZJ7LKkCJHgw+SdtxlAIa7RU/GJtfJjHj5xhzt2tN2Gik7zKkAbLQF5/K4dyHqvT+WabM8WVSiAB9OiTZIrHaYnMF+21zfE3HRxDVeVPflNdaXrXecRupHUMf3Z68Sfh3pxVSkclNp2P1bR2oPIMgkgDyHYw1Ja3ghSSqcwHYi07zF3WYA4MBXMfAvOgEWiwPjpjtBJymW9OZyeriH8M/ZjkYnK4C0eXOVagaqx8SGAf+/Qf81z818K1CXSj8Df79in+8jhNitWtdyn9c+uWwrh9kLCeNOa/h8U6fDdeJsfMhDoG8ary5hFJVq2aXORk9srspolviYM5jIRfgjrvF0P+6ecu2DxHSS65E77V9XPyfAmrZY0pzky1YT3rvYeJ85Zs+JjhBF97XAr2pq1exvVIuozGsWb36siZiAKp2iwJzbkAYY3fwUtCwSISiqf3TnOeb34euptBJEKziBu06bhXUYugT2hbiWfSqgrUxtRQJlsVNEb88pQeadwfjNAc+KljlvGCNSUHJwqcHwABCgO48+Z6Vq3kxdY3tnMxJ98x21a/6ZEaq4Aq7AxrEonNvavwh/J+uGyrw8RgQMQrqLY8Nmbkd69b9CH6kH34oy0n4g+4+V/yRAulbbesgRNKDlnJebd2bAIQDtJT9Tz8EAFr+heOIfz/8R8Vd7HSxy0kcFf92x/hX/B8LvnXg80orDTEjXB4i/Mcd/05+F1/xf+a3uyjHoahRbkRDzBVovS9pqiM00ZmAYeCF/zCbOWa9Gr++bE1eE/TwJ270tGB1HMOC6NlfWcjjzAWqBv9DQT02j+fynlcEWh70Ht6XS6eBmEzctuH88jkUKJdhmSyar218nqCRsXzCKYq7OFbRe3NOJqcudWc3eWbMUSRgkSBuxuvGrVs59eU61qXPZL3GYexmy3njp6TNu4Qoab41Zr+zrBQOYdJ1opHa8ldxOHv5Mci6ra9upR5LdrQ3MyrILttlvs8s9PO9vwYf5vAOfhzA3co/3Fsv8WGrQFXY3AQTO25Q1R1W8/Ub/Bvhv8aZ1fuC09SdZJa5qqW2Fjaokm3MaLCWz+ilYkDICpORIA1GTWTYBl/xH1/e8+fhhCQl478CbQamH/B/G47AdQ6SXxT8fsI/i/pH8U/6hQbJaopA6gydLwnjEfUr/ns4ZrkDLk+B023qdKEDFt8TRAM7dosrCA9Qxuw72aGjuL4+17jHXYBcQB3Ba9Sd4chZFG5WIElh+xklSOVdlqEIMTyBneXJ5QFjE9JOtpJzswpKL55xkoPcwvkSwbF8fsY5GMhxJWQ9kASDJ+HqlAtP9n4zEODLX9WW4pajrak85WBp/6E+Ay6vjRjJA1tkBuXLF89f91je1zhHd/3H0k95zQaZSUXvlwAhHjzxYbE9wsjOumzo05c7Qjn1sNuRvW/s5XDD5trQlQwOGOJLNPcmPMu6N5H69EfbggYF+qr0jn8cqLoEe+qr8xhxIP8+lPH11BjXuH1Vs/Yd/9rzVT3/YWe658Q/5DirGdm7V6JQfzsBqXOfZC/Y3t54RYQf8wTjXOb62wbZuq1UQmMb+D/86z5DW+M/ZLEJI2JOkj3ozNAigqT0Lce/F/594D+dVGTYVGdDwe/494X/EfgP5RvJfW9nncn1dX3tifj0RlhMM1+x+8N2bucu8q0xfXQK1EOayloxP4GTMizcRqNJwXKbXLo1dZTbueQRIYf3jIV1yRLWood1eeF9QmivULk3QjDSUgVjW26CywlF7b4h+vAMoLoFFwRdOrLex6fYlWBFFCdSS5nLMLnzZX0tm29WnBrVMPxK40dXaUH/lbgmifbsNeRIkagTsYqrNBnN7si8a6gVDua8ha2v+qxKmvuaE2Bta36uQSCfjKEpwnDDzr9VnsW9QochAcXy7mgzeViJUfDuiCn1mxIs+xl9Dkok5bj9noyu+B/KzR0m1D8e9CbZWe2LiJkwIZGpXqgTrxY9vsiYHwj/3fCbHpUMOI31xUgLRNhJetA5QdzTZShO8yv+67Ov7JAoMaK4Jzjo7a2+sVLdUglLTLXxT6fZut6Pdu1UiX9EAMWxfcG/D/zHwr/OwOS5sJWlxCiU/Vtfowo/5JrGdesFgVBVVTyzlTLU9ur1skAHZDC3zFPAQfhc50Tr3L+e3STVgqt4tez0A3hrvKPsNuQklOxX93WAMrfOwJ0AdTozG4FUIl8nY3rN6nNjysukikOUIETUTUOUNdNYLAfFNEr1XLLFqO/rnuOvypCtH0ox5fDET1z1a0jU57R5K71964tLZVCASs5+QGQHMvvWT3eYzWvlM/cFxqIKo8da4F7y08CLPFLWYwj9nI4+m66x+rTn0c1kAqpc3Cqnc1n+rrkO3pdSg0zbV2q5yEeVDhwyiYnekhkwAbYMrlFdZMu/gXf3nnenflm0c+43/IuOK35BN3zljhhQ8O/NA7C08b56X3xkio214mMrM1QokYqZZFLxcPd1V3l5ABjBSVZy+nkOw7vlaPFvAcJuEhVVhCYy2mi+YRlcbPItYj6yfjUMOgxgLv6j4h+jxgusXGJlExrT22Hk9xgM8+A8lujIw/LKAeV0cl5jjPe1VK+wWJ6nNI5ongtumP8zWDBWbAB4zwc73BFsAYPSxwogrzKM9OejAimFvT6H9GMVLK3wfRjnXBN3zSmrnfNY/lm6bul4bLd+5N7TPmDHPIHPG+cHu0v0voAsh3gPsTxkxdVwEb6gu/Xwts1Mr3MKJVWNPnyN1ts5x74al2wN1aCV36BEfaIfyvi9kYVIddR/M/Z99ydzFqy0pW3DuhpzlUXIkQzlF3+xIYcglPo8fxWET9BoInSbpk89s8Lp4GUs94qMPfa0ybKVFuuyfM0BKyp4epNN0HlO+83n7PU+RM8YNaTn+BTU45ZAXOSO0SZmtMCfWQwbhe2uu50V/j1uMhjZYZKhXQH/ZRDbrE8fyw/X5Tr2Y9ub4F9PSVhe8M+8IZ35xr9d8H+T3fpy6lXB/RbcYgTDkuMP4z/Xhbj/LGICx5GCTodMCs0VSPznoNalxR3/0sjJ53yeZ0UJYoaUpo69EGisQr9LAKkJ/Bx4ynMY4UDMNJAFXTtZAjtFzhl027srTDmLOhUXhfJc6tGLAOo4CCQqwGHRIytw9E3BuvpPUZ4JZhexqPbwIjwJTNc4Bb1Oe70tXg88WLNP3QVKhrB5bRK2IAYPOubjcz2xzqQKMeuY5sPQZJe2ucORYU8iAifHzy6T36XLmBgot4rA94b4IE5jYpf+RFcEupAKNY8DnSke0QqNtIlJCZd0ZkdEg152RI1dp+mybz1MvAJRnUJhMH2b0nWrmFmQMXJvrRRHPAseZ5mSArGL5NZzifQ0E3sfoC1sNf7JW8r32QFG0B7V3rqxrd77YDzfMDrzeDrnqOM4pvYp41fSJDevRfMF+qDf5fZLlSrb4IPr/KggdL+R2e0nZrMV6rQf8d9PLxv4B0gmKmksWAbd5sx63QAqY5E47TLd37wEBc8IZI1TlZL09/hHuA0unnuovDQI/yYngn6aFRMr1GDp+6Nz5ThwYAIARe8N/yFc0mnK2V4oye16AxgG4tATmClv6VOCFwVL0yCYpH4UCOPZh3iipuLuTON5854TTSTRATnPEgJ8ZbkKeco4gVkzbo/yJ4d/zgvjMcpzgaWUIVhyi0uUpf1pm2JHq5woMiO07udws7mYxhtv+ctjOMxzBS9MshXHwgwPJHfQhaPR/sAY1rwoREBz4D2WzKBPX6hV8QpQrKskBguzaGmKm8xwKwGSeVtsWTLc0HodzDvnBeBGMHRMdSLT+BcDS8Z8dXYbobjo13lZ6BYpZpvWu8bDOE7dMPdLxRLUZ2GjGg4I2TBr4183fQ6Ci55jRe6w3NYzZlub7OrkXzECU3L1kyS0UNU+jeOy0kHnF8+F1SMjilJVwD03rRPLezvu1M/KLNRiNkExmwcla9d2GlOZC0+6k0la8tMxPctAwUL6bmwf/Cu2XMYOcSgfuv5x/DNywNbNqYR/MRNRLcz/A/69/vEEZsaAxH++VuJSXmT+bfGkV0+np9fn/B53nRU3XOHYOfGNh7H0koFVN5GB5gzeB0iITlehNIW3YR4m/5r4XDp/fhqzHvru3RcmM8oAVQ2URzhPAuglntupxFGOliegsZe5a2hsmna2MLfIE46jxKV8dPTSDwYPOIXCysrwv2b+Wegvx2qHztOE0NOZKuH9Zbvnyg6uv/MIDJbu0sWD348vyC6ZPd++Th6qvJaZc2XQz67z7zvkbGg3x3TpP+1RTamIOMfCpB8OmDjZvxMgD0zRr5TBuht04z5cT8d778IV/lCoQjBlkSipEYL/EsAIF+JRp1EuBd5iP/FCRya3adNq6n6bC3LDcdR5KJf96pONoYl39bsr/iUTIPwfPeLgUvqqxDnPk/7nkAajWPUnc0Uobi9O2Yeh2K2QMnG+ZKaBEr6sK10w0Eh0KK9uO5lNsDKVEf6ppwf/fsO/W7HI2GCWhX+LDOb5vWiA5y1RbeB2jPkN/xbEG88rLWwO/HdAcMlW128OPacWVdN5j89El/dxWQFlWfq9m7jqzNd5Fl/TtMvUNCCWxAwB/HTSU8SI9tLA+lh5eDgrcUrIVLkaly7cTq9XhIazvgM4aunWnTinPCzzxXy8HCcQTAsQqVHK/Z8lXFgrvAUtwHmY9WMXe2yr6XGjyQnwcxkL/NPeQ9mCOmJW0K+m8tbLfaelfIMEH8tq/IjDSVURezWCjhHX1Y9P+3eDji2rY2Ka8dSwfKBI/QLcqy8JuOurDhtLF369VYJJdE6+YaZMQJvzG+4sH4ZQAHVpUlxX10ddvonARB4FzvLbGHl0+Z7In3G0hWMkigp+uYzVDiycYjZId+Pf3hx8jPrL39kGY66xwHfVeeI/LvivdljqtI6t1XewTfozZIlLgvGMVAVSHazPtN8iFn4+/b01GFbSSbaSQDptgMsxEzvUMNPX4DHgp6H9gXN8RbA7/u0L/oMUF4Gd8E+BPL6sfnzO+wn/ByDynXiqSBX/c337khDYN/xHT/DCf/T80LzAdS826/F9vK+F+GDChGSZCLRXM5H2X+HfMfXTtujyRUuHcF4fUvPyhXfs6Z+Y7EnWiXJCGfsT59WtSsD1Uury01fLA8gWYZpYVcCOgFmj03ScuAgr53Xq5A9ns+Y7skp9LQGxPhOASJn8JTIJuHD1nqtXp8B+1hKwOlAkjo7YmprQG01/91u2cp7jWHbJGrwnwNtc+t1z9OMlg5vxPQowmVasu1owSpyKeGy0d2Jyo6rpoN7EselkGyoY5VXUNkuPYiqRsqQYBM1vQne624Uj82c0zfAkrgAsuvQxm4FzsNOlwjNU3Il2SFx8lUu8Je6oWJ36XUGYOcNNy/zal7iPDNTdD2V5eu7GP1FZOLFF4d9tUJFJ4DA10ca/za3o6/EgmU5HUqSvdvMBZ9W8v8PtGie5NJcg4YCi0YsJsVeWco2MJoZxGiC0i5in2SUgECRJqYoNlZQQVpnBrZ9dTjIq/iO2HIOvZT6bxsSlgo79Afzj1W9tXfDX/YXmgFd66BCB7DpnfooBUsgb4HJa84h1gjtOms6th18cIVPU049XLoElcZsDlEDeFOyUibh1kKoZcJnwh8QzG/FGJZana8gOVhSUogxAQVVdugizHvyf1hvBiINpK/BKTvl8eDkdT10/AfZ12uU96bEY5uk7pNqm+dKl+yaslIHiFSvFnsZbw82p1SUBT1vft3Ug9k70yYfI+d3VppXmYJagR1XrTHUxyRbc+Q4EqjPVfpff64TY3fy44Rm40f5RokmiE6ow4nfqxMP13cpUBVq1C46XTg58qVIJl/i7kmFaqBKDrlI3o5jXytEk2PCFf19DAeNdjmnQssHlF/yDhNtMEdNfG8+yvxaHONlfKtoQXOen5cIZ7qqeKmXwPimp8HsLuKRRfYfMJRQx9hHTCOZ2/dLFz/gfr938r8E/b1EgmjfZqfTnPWzMseA0bvzL+WbIip3zlTtu46zwrnkY23f8/4FNfMWFqtkHHcpRRMdrhnHZRwM0/vWwY4UhpSeZeE8U9F9mxJnksmaVRcfFKfQzFXkn0+omQT7oprle3jFKd2V6K8FED+KnhDy/ItYOctgKV3zrrrt6RtpLbE2hLSnQihSDlvHrfZ71Ks40c9HjCM/Bvfuu2gr2sHJOyF+uzg1HyA14kFhQPSGPdx+GOWKnJPLiM5ddzIbN7pt0XaajZULhYWb9Buw5JdbswCDnMoAFdedoaF1V5pBKFNwpE0PYChC9vQexRp76A6HKbRAoTINqldQntk1H1/nthRpfp6fO4OZul7UCPidozdiIZGyTlVEgtvjd9I9+IqaHdjYdF/xXwDfC/2tVrQkSrV6BH6o9MB5WjjRg3JRxI/zT8mnZMPqaIwDKd6WX8j2Q81tngIBXYI+Gq03lYKhoTr2DaTjr2qMgjYV/Hn3i+WcHcM7jjZa7cxk41LU1kGm1uSItS8JL5qMJ9f17/MeP+G8bhMXAf2WUfRpxpOUK1JTLjwFiHrjgnx1v4J90KAo8N4Gnq6NOynskEeYNS26T2G0Hq4k49WOjIJQlTipu50ar4v5MXehzhblo9Dw9cSXdlW9ZmEBHKHKuKLwgGSFIy3ZIIigN4UcGQcH2HJoDclpHGLJK5TJVsLZHjRFi65Ktz3Vys8YOLbETifX1/3Aq/GVOjq2CTK0gM53zvY0WYkZpxGaJ2dvIqkFyxD+lHbl2MbdQHyvJmNDhUm/bJ6+GCAZjv5kYq0h/9hVcjkXiQOzspkjBW5qqQq7fb5zqJKbxW75v5FLl0RSj89piVo1nsag0mkSjBoh+75MxvbVywv8RG5Mqo6SK0VdGAjvd5XkdGH30BVcGZ2rg94sf5L0VWtU5JRGQI4M823eMGUMus5oTGrHswRHCLu99KG3f3wedSxzEr5wnwGZhSLlIdNPNewWiB4zJFC1zGd00EeAtbifShxKIguI3c038I6DWjljdp+5xwb/2hyjBfRq/p1WpsA7vUWGnPRiYPTfj6aXNO/597bO/MZNsFe7EHuDHqQmerGC94qM6R1+w78paLAdq3ZCvf3jk+iZoS+F9yOZyCpbcO2s9KlrYmKyMpDycO6MvDZPXbjiJqqB6VK9VfFOsBkB6dOrzI20TNSYsBrVBxE+7Igz0Pu7wP5zCaPE20/V7j7f9YkfTOVxOkO/jcphFjcuxfu/jjHrn7VmGtTj3zic7Q6WpScCvDb6Zw2nhb+JP+ByjrLuoP/v/Nq4NIxMLktyJooP2NA9DCwtiwq9lGudkpHOFDALRC3pFOFX9pUFSEASm28xU+7bB6Y9tguNnJe4kD9c8gGJm+3LrmoJY4Pe80fbmp/y5+uj3wz52n0ezgX+vinzgv3cF7Eufq4+B/x7FyLfc7G6d9uUfnl0kvnvDMuFcmS7OHeKu2ncSkHpF6QsahY7RDnPFPxnETlZGw3EGkSc4ycH+uBKP3LesMgL+zRZ5sou/kw0D4wQis9tYQfgR/9RAQFS+Rcqp3IL/PNAwOPd3yY0EEZcsymtcR0Z/0vgW1MUesED+ddDku7/HCHbWI3o1ImCjYCmcRsF7L++odm5Orb0FdgoTqYsVNYHc4JRGBq2svomQ0ZvI7uZlbo4LLP7YJ5cYoANluZXEfva83E3SMlOPY9tbv9adjWnd/lHkgko5AQmJybcxbX0uPhMj1MqIrG1wN1zMpF1n3/2e8+yuZ87dEPGFns1G4sALCpRmT38UgGFnl1Xk6dONz/z43o1xqVKOuFJws1lcrkdSxS3ibzx6jUcqOAdxxMUOqgm5MF3vZvidZrTm4z0cnSIfxjcwlPxItVwxDCQsIfKOccb9NqTR/mxsqwg+FvKejw38x8A/s2QFbf5cJ3mPc8e/r7uzGVMivH35zPsHexNyoCuse9R5x7ArIU+G8tlrcJos+DeCVwwn6RUg0uFyE17Qu6nS1Vy884L/jiy6fK2WdKUiauRWlbJB3T6/YrvbHf9RHI8AuzHgv8N/dkTf444o7HutN/tsbnC1Up/mpo4mW/cyRypXd0znjNFiigje+aDeFGag3Od44FxeKm97HtAF/xmCVwVGkySiIztzX7GieVFVBlGETi+CLGvUL3qda+5tM9tOQq6LlZa8yAelvcniSXdPnwBDGFdUQTZGx3h10tMpKfCXwgrivfJzuWMTt+Hc+tzM1gAmbUN791p5JFKGOYTGyvMgn++/PD6Mq6SfGqYajhb5R29Nz2u/OSS7G2BXfY+rRqQ+MCWwjZCljE8BgVyEURyDrKo0D0S9M1T08jIVdmvj4OqXoq6drNwsiOCNq3qGUPJB0bbj3OcJg243ecQvVYijY1V4vAByL6iXTb/PMeDZDiXYJJ8h9Dj68b4xbVaSBYtlVOvo4qQM47dAQ0IH7U8moLGw+zrPrJh3bjeZeH4/mToYNv8YJbLCIc/3Fq0CwwpW0fvrJAS90MSx9RbNeaj2vT4vJv7R2C8JYAf1eulxBv6DzhQcEEYC81hzCvnAmSRDD/od/7S9UiAydKt1BG1NZ0AzInHak3MeeeebUnebwUTEz/5Xr6VB/xwfAfLFcgRO5QrzVL94kqWK9umLHhfnZNHoH/sM6+QBUS6TBcd8VR3f0pK1bXp9QHuqQb2eaW4V5EuhJl+ihzD4diUn0V+bmYRhaVNrQ/SNd4ZHU2bPkTq1vbujznj7uMvnMxZZg/a76TzZWYXAAgLGG+qin5puSE5CY90XPNdEoOQ6Nx9v2n1IXtNjizaGyPy4VGYo7MtUH4HUhq26+1wQ8GYxuV5br11pX8TCoM9LBTRXAEfrHVM9EmhlmHYby4D/3U9QiCkrSIYG1j4cFrqycOy4q1q3L/rawH+0KnPfaZ+YKrZcKyIVlCtCPz0AQX0DGfAvgJTK+zq+6Ydp2HlOkJIkyehLaD9PkQWnFPkNwmFfxJKn2kICX8UGn7QB/GMOiXs4U6r5XRoHnx/7EMt9wf+L539u0585hJC8wcdIMbdNIaTjyGorogdW/ZAAFMdxwHLSSbOY3Orx40TIloHPjDJfiJXJQpjh+6hHWOdBEfofISehp6BQ/UVhoMLy67SJjlNuMwN3UdQgfZ6DQHH6++w7/5ZJPuO+NhGEzAKxw5EZhYLnNIXXfbBpcY4AJUc+hvQcCp1Xp/SmKnSHLeAv5yso7Oc11x0WjHVmTyOdsgfKs8sJ2o7srfK97Ukn4r5rDDnW4KqSiSleW2VJgIDe8+iiF+Tu4gEJAfp2Mg7PbdpqZblD3qlfo+22Xb6EQee3D4xge4KSNiUdVI4Tfft9BzgkBQ94ZpAIvvyd0prAqsxdEuAvyERv5B+w/7zznZ3l23fJzK4Gkg/UfuN/9sDVoJWvzUZPC+7W2z0okeKlbpYBXVXCFFFPZ2tv1XGKhxSWX5ZlpgK0a7ZH3A49L+69GZ3OtizTEbHoSnEGljIT4lI3iFiBXSWAXXNOeJkwYrZ1+DvgT7pL1yQ3IEJ6STIVl/MfG76RRto85vscchJkp87y+9rZpgaBs5dnT2PFsD3TLi7ykjE7MOQPXvQtTU3gs2rNAJ5B6rP3CY/12ThnBnOd5epfnb2ekjAr3AgOOs4/pHGkiv6josEzWL9a1PxKmNUxqIH+w+nrXxwmKTwbVbL1FyUrWv2S8dc1okeuwy+ppwO5l5TuxSHY1t3sz86q8A/MnIIYnrp2Vm6sDeztzKf12Rc9jWYSMsPI284nJG5meGSkk/9UJ/lTeOcc0xx0elpZ79hLqn0jB2U88Cd0pwUanT/X1hhT3q06x6mfLZWuJvKf7a1rblO1xZQBsluizvP08aAdL9GRkY5p6JPXdfVdAaQ+FsNyoPNJvCyXVP4pTwV4DvIUPdgdz/yM4Y1gazfV0/u8FKu9PXm4gYHmzC7L0T1a6yS62N0tq8IOZSjz5sHWyRPEQcs95SfvzGNyhcDrrFgzSkJywWCETZKPBGc7RnR1z9brrgHRnNiQ+qO6QJynJKJ5IT+X5rgqSkJnKQL8ixB72r3646UUaouJF3eY+F/qousBz6a8YtA0BXeEuMCyfMe/2NC+yBTc8BtnoK1t/JdAzDrDg/xl7eSN8hci1vlMQRn7rD2k9/kUIRP/CgLn9fXqQCqBWTpPWU7gCixT1Xe1M3C+OuGHQzulOGIkdn+U3j8ZtSSvPVEPiQ32FWezRp1RSQBdU+/e9HOinkm8PbXFdhMnS7+oFO5CLuI7oqfQq+cer/1EPlmJFJNiDM4NvDIgOKxWe2RB1/l5HmTzNM7LJN4+ZXabRBaeTNTgZjwdW7SOFIT4V5zYvjJOtn2yo1iPdr06zkfsujzBsdU4IrlT5QIZfOgj8ybxtpK1rhIxc9KQ3vcS3drGOHqTVe0z4F9UAWmFtg1qVbODJkw1M5EYn0uvoGAd1tPKMZGC0XVqJgM2juaYIcGMAgnNJc0hz91Y9Sr8xZCD+64oeltKXxMWCZ/ovnPiOWTlEBmsjriu+GeuGTapg6cqoGu4jTLjBA3txGYxdab+k/YqkIND8pDJBJJZvk0v5zg6bfKscxKPfVB6MsTdDOH+VMIROzm5uVkVWdUX+iFMVxlEk+s+yvYQarDpolFPE40x83SawzU4SSuc0ySTFEq81fWr4BtBv9LlFOhYCw+qgT3J7iF6pwr2tH9lLKkonuEBceh4BAj6yMbX5vE9Zwt9mleRFSrsSmKsQhC/GlKcSlFdrAE8VDZ+uAC5q1TejiBp6iL02bP6zuBfult4P4ymBLDxJwLJahRVFZgQ2JV8xGpZ66yG9s2EfWOGD5lj6BNdFdSQSczl5DRH1SmqNfTN5mk9HCxHyuHmnricw+0AAdjoS2Mf+zheWgcUHxEcZEOy8I82wHel+4oLMih49XTtuZqkJ/tFVKjKSTlX2qz2rr4DxNvMFNK5WX4lJ4N/EryZ1yMgAzzVpYpLF55cGLwszYopCOGnsWHDkyNXITMYxruiAPGal+5tFx8Jk8rscpf4Fb4VrEu9Yxvx5eVwF4cFj6SFZeXMtP91rjGNcJ/lT13EwkdEnprTyLupR3JwGdNmxRwoq2vMN2NGTmw2rCTUfxrLUzW/JRGxsrU+dk7G5aHCodsaqgNzHebAb5ibqMykp6eMJjJZLeN8x38KUfdjeVGlX8SrHVSIJa+d1xrleQyoG5N2ZQbB3lih+vXCz/mBrp7b3N/9ZH/+7hZVSf0Vq6wIM9RbndJAT3JcqXzvf1GGiac2ZYUCRI1TMVVRt/g3+VJik3u42jncRTEn2mJmWjFVP16grGTGa7XB23SPUT+9vfrHRjoNMCKWnAgC+WlRiVK2dbor/jy5LHWv6RdThuhc8+8VP3OsgexKTmDrV+VLJlsusVt5nddn8SvvMaBxB8ivWTZ3gQGHbWif3Qg1WDcibcq9UPVCPvcmv2xfeUwH0WXoxP0UIsqZzPjnQjWAr0mzHperWgniOkzwua73aqBnp3hSHzBcBW+ej9AxcSt8jclBgrAc8pmDamO4HP+O/xO0OWlGklACiw22fWJEmphGC8F/GaW4Kq4+NmQO9h0zScTb6tF3J+zDs3uy9TINAltN2KmqO0DbJa7GBVYxaqw1B8Tjxw51Q5kPub0TRAov3JUtjuvPfxD/DJRAXxyUjz/v0zOJlZPNtGJrP/DkXzemGKdATuFg499wV3l9jzsuIWrcsU3S5PO6vaXDTU3PHdqvCgV+QswL097Yzp/mDKezn7PaDcJH6CzeruTbcaE85U0zHQSe81/ny2ifXqPDUy61B+4WtTLw8Pp62lsFssMtmJ22O6p848BBsmK3swOEvrKfR/WdiMGgB9nvoOvQlVJFoj4q9OMSAoJyGGbHwihAg5igAiXSUSmE81X+WqoKgLdjnBs80q3TE/yFIDuTU23biaKBI4v2sgnKPXfFFfVjZDnMA4jDjG+wEv5cMdLu2xuT5deeMKtZOY5kUnyAyF7F90t7X0QSI5jludQwQ5S1XZ36lOp6dj6CO6sL2TufPC3CzIdzm40x2BzBWBy/szEJmPyjg10G7fysPjTsFRnoeUxRNPH/WVwon3wHszO70srz5zc1xnwmWZEd2CiwmYNmpYNazVkzgTge3C8FEKjItkPvbnf8UxU+fTcvJzH+OW45f476i/aRtEMYy3qKMityTvy/B1ZKz0rUxMQTHOo7xYeK1KDTBv5lAS+FIL+JtClNnpjDEOT5GyjdKH6D/9xerGVNUD6TO/I1fRbmx41RVqCIOh4IzuwqfDOZiwn0fXFuBina29TPhu4w1Dc7fap4BDE719OLop7jxomGVZaNO+k/vb3ay6wqGc7m83Tykqjr2M8pr2LFTF5exQqdNXuvHvDsQt8nMGbCg0a9WuNwJwaem+Hiw6NrLqjQHOPyg45I8xF1HdvbCBRMecqKRXKyKvsxm+RcFVCP4/Sny/nlcDlC2r6+meDezmHeF0XavRLa6RYIyMfmQGu0AvDxcx1L3bTMw0QxeLl1MmpkfSLIfqP0CN5lR57WO/mSSloLXdGTcUPtVSQPF6MgXsvoVCiLXD1XFJe83mSTYz4qNutc2G3GPg4pwwa3TXOfcXtBz6vzZ8eJQDwCtvjtbaCRqJxzCrJZbX5gPlYcjq4myY/5htV85CWC8A8JUrwAv3ujdGJwkY1McCY4Zigi7NuW15uJa0RGmpRl0/wOruI/vsJFsAV7cd5dO6KdsnhVm3Q9JA5ay+7VdhZKp9oLAI6q5oH/IPxLJkzvJLvJAXPVt8JFXGbPVqWRtFthKS6cE3Eqbscd2XhNS/AycF0zRbvnrwJ7UizHlucvOsCeYPKpcl/IGLQKNSOyKdPA6V7T4boN/n0UfVPFTCYvncRVxM9QMeM6aOEenuZAHc1Ucn/a8Zwf/fOghrszEaDOaqBV4uB1l/n4qVLYwJNsczZBotQ0IFWaAo5SkSkNVK4/+sD7fJI9MkDIC6PLMlqBoCiayeHoXrK7kMa5FksWNEPgbT1TgwjOC8hGlP94+1Rh3hOdqXn6Z7DFsjIhV3J+0/ZN+eKy857qv7vqe7YXHU/Gic7noBCZGLqk3x4+2iPlVsd3tQ0M2blTm4/3V2Zq/BzYDHeX13zfWJgliS0SYgq65cCBqdLPEizgSz8EHE5S0qinX9Sy6dplx0SihjoIAL8s3xWdsmXvCHa7HI3J3soP4FojK/LbjMLglJ2zcCS8g1D6zFB68BatJxmiRJ9ofd+BGVWA9TFGMOFBbIhX3JcN2GRS5SJghsXouILLHM4uw+Y4mi2S4jqRFQjevX7ifHTC1Tie6JalNlcQfpZlrJIZFwcppcY1cRmddBGf/Hx84idf43WiYHxlyfO9Y1XWuN8Kd14VXtraa+my/S99JmWgr4IZuVL+zWuG3tVgPezjOB4RdZqHJbQOZOQLm4ZYgJNy9MpBr+hUh5yMOGf+4JjOChGxreXIZpHfV7fnK2UpmQSrGiMYX9bBDY6SIn2yzLBhybIhsWJIHzQFIRj2FcOeXspnsNLBcrwywHIWmgEAxXCypsGhnz34JfNoUvGALwQYshMRw3QWAoKDuBVbOnmBlz2slt29G9QElglGYnOIvFGevskJlw2+5YrQMJ1hFECEJcKIYUYAw1SRVExHw61j7MJihXViBcALbrjSzGPRt56ITPlmEBPGn5cEZkViX7YZAGogjJyNcI3amMZaQksYE/5xS4/ZELnwYNlvTNyZYoFEyerqOOCrO3Y+5UvQQ5JnPFd0ch6UbMAIAwhSSJRYwqg9RUHAeAwjdHYIvae6hRbPjug5WCZSdcYlOcAzF+51P8bprip9EriaXuzlS6wILii22D4nurgig0ro7qCpYCgGoq320/TC/nLsFJ8HH9i4zasCdkYREtgHuluFdOXnhJfnTXdN8amLGVxHc+TMopxqrKSnMmct8J4Q+jpBxSQAWWeyFAT9fPefgiLf4X3GjSbk5/ORepQtoyJsz3LsK7Mb3Pa8j54Mtlm+BqMRkiRUEIDQd93xbU32veFh/w4LmQjqJGOdC9vX56hvpuUNerjfkKbwOYcuITS1HT2BJ6fwVcJ5zkPNk1vnXd5EU9WbV/J/bPOqm9pyEf911ha8o9bx1KEq5IG7wq/z1Do9dLJSSeIIQxBGb3XTuxPJd7VqTSjGM1NJTHp1Gq8DCG+sEBLj965c8Z12a3ZtAndcKsPXj+IS6T69v/XcdtOGrsxT1CTpTbcB23LnLjeKsfxUvMO/mS3KPF7H6IAE8HyzYnw1D0uMcwUd/az9UJkI/119gzpIaAtdvYo+7l104rLEc7drqC6RSYAEozCUpk8vb8K/GcdiExvE/mODHPz3B18TgSSM+Su9H5TQPuG9vC0ByJGPt20Y/zVYR/jEv2H5uT4PcB+2g41FzjX3lSCwLmSdpp/K3WonXSpm+Uq/GleJNzUbuVr6DL5C6sXbYbGSk7Idxk/qLWHaIdMna1UuZNqT50Xhgubz/mVBtuX32ZLcCXcIZyV+7gLOFi94pI98JOQu2rRE3SyFMEB1e37t59gnnWV8DcTZ8YsUyBnTwDkz2G8g75Lfy+bVLjs9x51l7TZsoTZYBu12d7UlM1gpTFvFkPwHiUsfp/koYkLCdc7LhPDMR5+fd2QHnWcCf+oDI7U1CUyPfv2cO0AxM7cax2neh+pFsXL5pMgzAG3bAfW+pe9YlYIeIfmwRtXSnib7LUuMZ/eLfM/aZ62TGBEoxitvMnzq3L3mvwXeTMS8Gkf3q18vYhT4MdFrBGiwQC0OlNc74FI+8SP+6S9Ip2MCso8RziIkhiob74KQW3O/jI9aFXEaS/FfPm7runbb0SltPdf62yfV31oOW4HzkAMFuxo/Gg91vahPJBAMXtK+TWeAG5CjnamVs49UY6NAgFOi2s1FWk5GAHEaJXM9alTEicspHLCIuxr/edb8UZPTB4sCK/+Ef16AOLM6HM7VjZI0pYf3ml+UOO1eRtblRID7i17UC9a5begNxM4bDoKbGvg+EYzHlHNkLA8CrrNK/Hzu74p5FGpe3g9bcyvCdvSYUlXQawfNyyavYZJH2tbr5tBqd7Il7XfnE0NfGMVw5TQGncbB5hgyRB5OR1iA6p9+BMNZrvLJMCwOW7qaTe0672qOgM/kPBHzkt2N7NrBpnKg6oipNl781PYkvmI1slpL+kgSLas1O1XikQ3aM5P40yM7mQoznZdatqfPLjeLhfFc4F4Sh+xtC2vrNHSbxCprdT83K4bEOlS2XS+xTHSLMzrup7Ch8rTr5hlMOXw18pUlbVJzqlP0J+O0W5+PSoxZFXKfnBCpjumrokHbXjwois1bhph5DZyoAqRNm/Q718/Syo2qShN5yg1ZLtK9P1TRngkL61UpZeHB6+dP4eId0dXYMV6nbjUOR05xZtpiHHvOZx3Kz3ydfhXDR1MGdbjJza9OgdmHfmVkTAEFLE9zURbU9B4mwZe+9jilb/zWZ9dgpfjXgNZNtw99O8eq4MnDjX+rJdyBKquvY5esTQAPEWVRYlMCkiV75r4pe4qw7xsCwmd70cSRKp2+5U1oFeQAeCHs4wQckE97FJDSawZF+bm7tSzAwk5oD4KPjCflMV4CZLsicQbQ6s8MvsfgAFhp3zFCGA+jUkYYB1EOWKWzpzSqD895jKP5Puoudwsoa8wQkoX2272dQB3BthFy7BShUNgehuHaj61Yzm3oBvvy4PKe7megoBOGewyQpRS5BNMb+/D5jACagcXZRIYga0X4L5RiBn9lOTNgh2bP9dbFiVQY0TWqDTmN+/ahYrqgLp8Pbyjgzktn5KNeatuwCV4pseTxaN+8+Mz+UT7ipTAH79GeB3IEX5c18cD5O5kQTFn1QfpEnluJVgXaIhXMqvvGv96t7uVX0bq1LDWv53iIrfJ92IVg5KXt7bZRGd8SDuIeBD68nSoVYiQbs7l50hu5j5xHlRDHJ5bNW4/Av+7qCDrk109MLFS5AqehZ8wxshk+eQvb/W38Mzw0FJgvh37wFjGDtrbBgVH3k3ouxj1EO/xD51AsWt2+UInlTJaPQwt8J2wEYes7oE+LM3kld36Hm5bJh8YuU6ycTt5U/dvF2ZNk+7ryWARORcNETgM5vwiLkHOYmIWrY6+Wvatts+BvNn86wHfEe+z2DJYqJf9Ytn7P5pWEyAkNcNSBbW2UMOTKB69wnLHcCYtpA5IPjAhdgIiafxMDW2Psi1TWaV7JmETqrZRRgmUUqxI0gS+6FbXk+L7IMWI95cmc7HJeRc4sSbuj0O8PR4QuR0fx+WCNy8YQ/vzzlqg1m5A9lLg4uBV5QuCQ9Gltfb22Ns2UXc79FuQdCKKTo/u/JXZshgqAlSzuBKL6Uh066BrGaWD3k77YJtkWpg7Ob6x4DD1m8G8jUuLgZPfP9vJhr+pjbMMAoqMaBi7txENc3LQGo6M1JqaObMbQaMyfINl5pnP3hbdq2Id0dF3KDvsZCUT4lviH2GAbp2mEWS6JiMpLqn/uEv9mJOeSzxg0PYWOz4R/U/xXTY7lmEASZK56skkSqREKkfHV/4rH7aDq13bCMu7aJT6vCHy+WuUV1Jl4T0NytCiqGXdUzokcXz9R4isiRwfwYsxq21Inx+sr3FQUFQBgDUCDjJlqsROXSPgRhAWggOz4IqAld5SNsjosqRFMODHirxTD8yhQ1tiif+VtKU7zKdSGbvNt5gP0BLa4zs+nu8/1n5HuRdNcrpwYsuH66pwbvhJW30T16C9/lNR1F71jTFksCL5jXXzq3FvhkozIlpUTsVX0rHV150nIYchspS/nyNyFpbohB2+zDbAlWw5EAUU4nH2nbVquEtwPHCtthyUSCmD+RYTDBu4IdnkCL+XX09T0Wq+6CxEbBX3/Af/dHwfTSQAtdwcZqWgp6KBlrZqMuO+1sgL8a5BOzoh+GmOplDgZ/eFjyhQNUVvGYfTcJoO1ZCeqvTPw0yBE6s0mdsV/SM8nsJWvbPzXue+B/14+pogTHYEKKabUnmKaheRU7zyvfYsq+nrxNoUEMbu5dmhb+KCuRUfeQFewBTn46NNt5DOlaoBMy51d8C96Ljp4hvFauAltQHN5PhOni3Cv3O2d8xSh+3noxevxnvxqFNJrEBCFFvEacqXnwMs4BsvNaYV13IFNHSHXiG0B3hf1OUQabZ0cjTvXLejrVp+q7i2/TsYzGUbt3KiSpdTWvULtGc0A/kZZvsp1d6CLvTv0EsVUB0E+0X3RPYRx+r1LhIoWeeiMQqe4zpVg2gJmHLygUiaWhcPi3Bwrv8kfdFPbxqJ05yQXAp+XzxQBVLz1lYhZTR8F8eT6g+BaX+akTqU4xWr1591xEMovZAgt6sCLjOvt8vTV/yJGJgELPljB9p3OZzCJ+i2/9w6s7R9lgtb2+F1OLQfy01PYSBKU9Vj9WqKpV+6HAlPUyj9CQ7m1FdCXTd9j4SKM3GI4U+Ug9UteHLwrr39HbJalCal9LIvb8nvBf9goVEpOo8nUfUFt0d9tQtt9MBSJ0f4sH3Jti7IP16pZ8c9d2NB14H7j34LnUNUFOI/1w74Wyd2dcZTRLL90pJPi8np0p3BR0ceMRLU7/g1B5DRyudhL9rnEqtajIWdm44FP4OLTi6+HI8GGr4ITmMMpaMV5Qsurl8mRzHTQPfUNndd9XLy6lkMKi1KsUClP2VuplLzmPQnqNGF8qZz4jowzbput3cco/aAxOaDNYfi2ZjYuo55Ex62ZMAh7TkrmOWlLJDZDCG/MkT2FG40Gs+NUJjnFZjJIFFELBoFJqFWYk7RVD2yVPLWGC+8gjHhGKwysVtJkdeBkjuR4ejVnQnEgow9ztKmH685VRgDFOIGx4+Mltwjp3U9qE0ZB3hoFsPdp38qZDfKYrOI8pfGpQSq8QD5hM6kkCOqlFgUDWeohfTMyctw5NggUHt3+vaNg5YkYzyqQuQvdFctmstzyccCPgM2MwgorbF3SHc51wr8N/NOcRycXIUnGxEG7Bb7uY2yvbxyc20geThCKkDvbaT7N9H3iX/ZNnFKWGuNPuqPzsILkBssine+zDrzBiXp/zBOY3C4B3eDPHTCbP9Ai2lXdyR8rgCLYTYXHVt36GB4IiNbHOzKZcy3BOtJ8eCc9JnipfrqOgkm50zqWXzB1AJsFNStbsCnhwsWEBX7WN8Z8QcZ6onuRV+GNkmS06L+Euxl9xcpq5c3YvmJxFBmGn3E82YMGLuuKKuRLS5/8oH/E5OjbCQPChIjgPYunhcPWCegoPtGlSHUnH/uc/sEsGJFth+d2pzNyZU10cEbh0i0lnV/1ObMVct83HzdxQFtzhz/W1TmCdjiA2cI4WJWp6yuBeBRkJdIviTKUYLekQZ5v7Q1uMg/nQBirL0yYd6xTXD7L8P0VFct4pcmnbDlvhLgMcNT29EGC0Mk+3oM5nEXNc9tR8Iqs4EWJAel6fCZ0VSJGjcE2luqRp3X4cO0PjgaEJHedj1GBYdLr/ArSVh/UTtxXV+vOcCL8Tx34fobpT50liqwfJ2uqlrnMsJT4N5c7nYeH9InjMyXHmNbBRALesL40mcd8hmDxsXLcipUkf58V843Iy7oUp2fQxj4Tdy1ayZUW6Zjdk+e/Qgeuo4un+mCqCnYso6SeJPHcYbIdu3RKH+dSQI1R+G8NfJxbfQYH+oqhnITHtDPTVL/rKXSYlMbk71D1dPa0CDm1WhSbP1vdC4W7al9E894zekiaWOnVPmBCC+7rMafkjE0GmC8tAUpGr6LraYKqGQSchO0tRDQzeB3MDkFYmBvN7AfgrDkn5C/IQaJL0cJfZmlH9JwXddcO2BhWUhuzXkQrmXBCOHndS6YYtvacy8L6xG1YED4+B1/02C6eqIfN09DRTwUXMqXe4QdK8qdFra64kbtA+ZYMfb6MF08q2DqcQ8IZa3gSwXOLX6dM+ZpFJQcLDWanSpPla6OAnzo1eWsQsxGnznitLLQLOjRQjKXVAQjMTFOROvFIRsB2UcG0ZfRFjQYbewXqgv4I1DxCnVajELR59vbG+NdFBjOK10VCFezycF/mMnJ8o2QhDCVnylJ44MCvIpnJkna8ta8Inc5hDPO1kmP9DYB3t6s5pyd16cbQTC5zchXBhNkysrMImdxzYgBzR2rzwcoJz3braz0rOzSJXlsI2QX8vfjaGP8x2xI1KGRoatpEsaUQ/HdHROzWzkVqkuxe92o57TOq2GtQuXaeQBvShJnuS1fmA831eXxORpCX4yy5j6zOJuuiOsA16i/M62yXwmUDNAMf0JWm8WDvG0uMVRE/PErhXZJN/uCZOpgZx+V6IDR69grivaRV7YiPiM66BClH+PxHWYBBD3THPonZ6ZUFi3k9vapyuhzgbQC2cgeVhqi3ePZ+V7WIcIvA3maCdMFzjWEc3zAgd8DZViERQT0w12ecCE406ksHxgldQWoXS4lLyJju0zPDVj6Jcc6vl585cUgYLgY+RCbsEs12Se5mNHfn++JSILgSaFmMA1LLZo1K0/N92B3TdKPEQjUG692pRlBO4iIbBeEQvTI3e0cvZb8LZDke9eU3sUbajRGQYBD+kQ0j6HbOmIMwe+FOb09sVtf1ZOnTaZO4Cf77lhzODRDQ41wKYDorNeBfHR1rktU3+D07wrBRmaO7Z0v1Ttd+i0Dj0utoqvHr3PgVe8688O+dYbVhVoT5vGYQdGeaRixh16Z7Egw3vYltAyLUXuYCU9UVMilrjY/B0S0H0bBbsoFVJTfTlMFFmoH/QxfkfSZl+B/Bf6fR6JPoGPPr/TcmAyMYbkR+VTfV2u3+x8pU+3IA9tiqN3P53arosWJ7KGLGz9/2xqCharXL13o2eMpJKkE+Y5LbEODiqHlePu1iV01AeJoVLDOsmWorXiMkozs8QTM1SPU2P5I6mKgxsVUNOo5lOCV9z5+MmyZIwVz1Oec9yRINkugVt6yLilhGd3gDAMKB+iCmV9FezR4Z7EUzR1hu9zluklZyMlKO4ywqUY1Tor0eTYuqQqJOyUJAxphKNRg7UFUEycJUcMzlrOY9UNOmT1CzT3BtYmXRrH3Y6DUw2dD/kVWfl66uP/uwVXlXRJ3wZPcOvMsJNMG/Qb4M1sXMuZ3lbG8n5hHYJkGJQXLO8bMhVc5xrUB8ZvPdHbUcNtxc52H2Ke9jeI+ZBBpfXEoNh353y1b7cfVTGraDRhT+kz4yoYkwWknyrUNlVXqNlxULAk4p6j70luXnOo8G5Ae0fNM3SEtiIIawMQ/7vS/C//AhxI+ha+rfY4Qzx0G6qmU6UdR5Z6ZW2YJk8yGw8zklVD27weQHt5LIe0mcHMDcTTjeO95/+nuZLNyhP3MKBmZGTAtQY7jkuZzMCsosH01cj/M5AsxnD7vN+qAVSIrR2cXZv5Y/9jYq55bx8wbL1kRWHV3AarANxWBMVhGc+0UXxLLqta/5OhFG/lJNlJtmAGdr6tPuKLChaZhQhI/4WP6HerxKqmz2eX15fx3tIVcan7KIGMgLskgvSx7t3AWXmUYEgpSOAZ9NHYbTXhLFoDBktMqV34IISUbQUc/BjfX0Y+j3dWdLl27xoZRtjYLueOYFtJq8PPXMiWEyG0XPP1JlI5glMUQ2jBo/lsyPYd4QBGQYazAO6nCnquIT/yGsJ3d0k0n4wiGV/TY3p93oK5Q5yZ/jD+F/fHjsHqKYTeIqMvOvkqYAxrNLojVUepq3GK3T296V3CB48pK5Jf6qvSwDs9iighdlZMOYvppALD87/5UvxNV0e0xj/IO3peq3i7xicrKzx2rGb3wK0DfpmlnZz0CJF/z71Ce2qvwpNuZ7zjGTki+8IJwreqyWCKvKSPzm2jpfLMYgo28cHU5l7TEalc3kruQ2vFLWPBx2dTJn3XHc2wJYJi8K8W6MWa0Ka1bS9MoOIgGzVM03tCskIFe38T6P5jj8mXEku3pRlUjHjUoikrsdjXiy3OnzO+tCiPWd6HgvB4qXKwNQ8G4w+TiLjZ5xrox03pcu7R3lYpTPRvqDk196+aMZSZVGced4YLykpShtOqwYRtZcWV9X60f5Rw34TtkuqzgdBz5z1NekgB+RS9c8j5VUQbYmzNhOFxQp0qzRnsDnYohzznG2fj2nROpJtjjydzANjGv2/PhRiaCoZmdgM2LxOghoBBYac2+u5hj5gY2j9J7Hi7FM7npKlFCVXA+/4Orcgz7zvIVdFWg79liVcMR3Xd21N9zoQd20/4VPYxYo8jnBnBBlQvaO91wtCJ9Oa4Xb55mLETZu6pKXskFNDlfXS1UnUxzFgryaioTPLZw3xyBdW1QrnPO451DEWBlDGk5dBVXShm9oCf5T2Fa0w4Tix6YpK9S2PRIUUawo3R1OK17GTU8zPDYjWQW348N8x/Dn70XrB58D+R0z3BXNiloR2ImGBv+NMLNV7gC8XQWQDlwuIb/AaTq3iDZYJtKxxEmGhSP6R1Q6MAf9OhbOG0uKjsqSzn29+pltTtWcd/QactW3YkCYjxrDWOANV/W7f+u4SPLgd2M/YkXoNVei6CC01U1z8C6al8a2tY88hBEMvzzu5OMINmXqDm18HBmq2rr1pUEfCHj/NAp5IRIIo0SOcVArIM5OV9+eq2ULWbWxVcGTlD5c0mPbI4lykWUsHekNDRTD851+QqHmXfzBsKoz8C+kZ0Y5dfha+im2iHSyErv89hqc5LGsmheLzHLALzI+792GZ3UkCz0ArIU2/o5/M+GLKDvoq13GB7jDiL2F7TtlYi5AJ5r5l62iq1bjpCRXYNgtjft0DcTnbd6F7S97+UjWvC4rWs+j1Zqd0WxTug29bSiiplEZxr6NfxLgUrHLyQTIIiPnBag66t4rC9F+3d9aiY3/vMKaP7msj+4NiH5VzMfUesvT/XsLi1PnNfvPwC8eoRWqOxLrxyAbPINSxPd5wGdG8xdFnJzTeEKq63z4QiUg5AY4HUk+Damx1qrqMZnSTjRpD250xhQVxnwnmMvi1c8km1mtQc2SI1cwUNogeRl5RKZd7L2OGXay87GUSxWaw7yEBJQQ2CY5Oz0VICPrvzOCddp+go7p3cMF4bQcXRNoUmp2sZFeFffT0hO1G5TTKwo16HCM8r8yex87/woga4CMxd7BKuJ7FYjKqYz22nT1DPKiqOJiK5uQHGIW8VxPrXbshBIc3yOLDKMk4tuWE1u/D+3Td0g6BlWlSDSIk9wSELwsTuQWq1rBB7dhD5VC34PcI5imtYq6n3bRE8H/Nk39gxnWWvA4vmXULpjmTKTHmYRrh4w7cTI3xX/eVHbFvxeKKXAUJ96Shxqg5QQ4w6l7Xmt8AqH1Ml8COr6YeHymmSMhxoco0Uz9q4DpTVfvOR6vvFYvDh0M4SFzpD2uJVMZubHf8M+zvA4ZpSM86yosVhvzxE+H9WNdGLjupJ8tKfmhKRRJnQfrWxeSwLlt8JKoFGyFz/KqNM66aZMCLH97pqVuLzbWXQ52cckACpLjOhm8SaD3C0F3cnjm4LMczuencMe3DTKuajoDWa6OTOqOClbtjiGgVyRIIItie6upqvPIZfu1vmqXgkdHBLg4rHzjobIV/ML09nej4g2sWzpaUNDPIBE3Xfn1oC34RPNhg5GAcGapz0nGEkp3DXv2GJQUBK7XnoS44wpv4wlKZSBMpYkq0lBvIgxrW/iFhWP/9aNEcw7S1HPcHg+m3PiPAtAoFSWxNNlqVLuJGuStJGuYyr9OprKfPpmQiAnuVYfbJM2TbOJ0TaLo8hyKcliIfHfXfX7dVLa7p3uCmNu+4j9Cqle0bwEK/zEPsuAPjgLjI5B1MK2LKDh1Ehe7t2+Vh4ZjZ0dYI866GJTbGWTrw9GrmtJXNnat+nyuSmAoTK25CTR0aSB9WiwT7JoxjBLDNz6fX8bh0xom7lmY8jc0qnwJHqNIisK8YdkRHG9k0EAik9hsiAsRFJ2fFlHwvqGpQ43BKd24eTQH5DIH0W6vBI0q2r+B10gZm/RVnDEJ/WOX1+sbgRF3apbCc9JVPDgZJE29BqvuM/uQXKmkpjnskmmM0dVS+Wb1RB1cb1jC5wndTosHvdTxc5SINzYxUl58MHhkiSazFdbzHpmyd+RY5SXurzaOQ+3I1YAhZQsHWNISWq82BJttaKAfAeVtx0EJcbezFbhMtTbi7GnLhj/8C0STCuGV3o+BvYxEOETXn9f3lz7CKIkAaZpcbI87IP1iK+fPYRp0ttiqw+nUf3Mt9fT7JeQQ6ltbXRlbp/E89QGJKD6GR7rrNLgsKI4Eq08ZO1oQigFmdK+IEL01FaC/CnRbu+3Htcu/Hs7eY/uv9tLZkB1MOwXcaVJ8Drri7pnonPAW82azZo9eiFIlzEyIjG4XKPtRWm/X5Ev7jNV/D/P8HHE+rhJz4kyWwsm0JIvv+I5KpYK49ze/z1aXdV1KZfG5izIkqbVMz5tgiBVXqiwpEINRk8mQAMi8pVaMLiUlCFckxXX8Ew4mXtwr5LlUestj1Zqlb359qRZuuvnrrIfPH0IgHswfHW5HhHMPYBU/G3y+CWnkBPQVlkMb50SH49Z3DXMK8Lfm97JH/JVWMBh17T9+SCOfN+aY8y8cIIiJzqRrHPYpXXkzTW81ePdrzjOQlEL9LvmzZkAhAeRoynDC8CZ4gtw9M9x/v0fOVYHHlzCwNVT3Hi947BVxVqbYc8hzSf0N328BRnfh4shiE8GG00slAmEribCyQSUVPLQGXpOsx/PFzeaPugzRDsm02RnuJsN89rAAAKWfJ5NVudM6JhebW9gF/yhTg01hl+oV5nBKP1sP+mam8QpIfSbDx7yxstEgu/WYzS20rdtQhOVNHsz/3fdC4Xz/fPYuQb0cyOoz4z8WjoL9VfHPTOEGg9oUXLeyDQ2EtVM3nRvLihs3IIiSDRacbLXMS5UY4Q5aVh+wvRLKr0Gz6sQ+zpiEd0moTHWqJC3UhKyBKPEiODtlbWdZhPi7Verij5ffDV8HkszO6KlPTqg4ntQ4YZ9UAo9Z3WvqATkr+YhBYPZ+5qN+HKUHwnWBSrL22DxuneJlUBFKeRU28SJ88Dnar/jCSVVB2NsLe9oEv49aQc/LhliJD8kFwtTHyIyho7TfoqrM8+BAvJKo2TLs8Nk6UW3fion4/uxbx1wib6S1X2oKrsZvndjWHDN50q7sxdEiLo3cFsPyNXMiE93IyHHZ/3TwUmfKqYtrf91BsL7MaGLfKQcdgHOInbNJGq3d/ob/pPdSvRmmuOf5o+Em5n7GfwVAsgtDrPEfJ1jXTWX1iM+hsmcikM4SUyKZ3yQAC7t1ZRzQRbmuupoAtE2YSR5grRbBDEYh/d/5H/rvSi87mVfjpvkKR+tqUp3uaMJ8ZcIZPs32oPod0dH5C/7fJmUcO3A16TR/4F8Ju+ISdHrVyUSorZ+3bbw5eXqfjVXaeb0ujIO7141vVguvHGSMiNaMx3Mltc+h57uiUddXsm+T8BeVFfRypyQkNamGdVPS3rxXGMz2zWhSccOzY6MVQ9nzkNnA12F9Ps3KW7wXhzYb9sfDKcz4a20VjFhcPa/Vm1KW5VLdno/+4zzSeq0pvWR+F9kpqNPsisZro1lK6+eeCKr009GsZZu5E5a6nXPfdkxizRUMWEfKetN14Us8376UaJ8W4I8o47zz0FtEXbqBxQep1I9hFOpc2GPRIR8TpOabyyzIThDYFf+mysdIVFI+bN5jst2dgnmMMdSLqc8TEoLbgAsqagTjx3q+yXZB4/KgRBRPN4J/mh0vcAz9VX6aeVR6hP84PIxklN7jRHw+S7sL/xgAutdCGOP/WM2WkHSd3BosQf+54MLyO7JBNkJvOZYLttI8lym20czKPN5ON5bAyFWYfkl+a6N1jdG+kf3VxWAdvPXkgiEXV/KmV1ddlxrn+eE+8e+7ZQXkI1WAbrtJ4//EPn9hqbj7G5g1WvtrQU4gKdGZB0pqzJkq1c4fjRmZiRMUhsMWEGsGasjzFSbRck3AKSSj/gaQYFj6FS5EGWOwOi0vFGlk5OoxXb8AaxQwqqJ1StWcqyIu1j7VdIW/9HYKEpP45hbNSXKpt724T+sb3zjUjjkNE06EOvXZpfIOmG+LVgHvLjWfQZY5dnKW2nRJPPAQbs+54RWztm8DiWtTa768BqIAZWZv6VMx1Lr5ejuhmeq33lS0F8YqtRN3/VDAMo2YYQgRtgLS3HwGu3l8vJ/+J4ThvtzRL+ND/KBIQv7NAQ3nv4kT6j7hDH7cL08EPkM/ifQiS//oicpqmFznbrlXmspkG5P+XYaihO7ID1tA23ifB9E+XFEVYNjP+G937+MV2mib8xteMRhpcz3RrI6f10BI6XVKOu7oOiDGcjeG8NwmXVxWEfWwsc6aMI6KFXPuZL+LKGsfrW4ZVmLTVPK19yv++WV71VAlu2kCqPbOMTGtnBU3O9cX2y6r5qS5BeVVJ78JG7iLAN9UAWX05BsNfM/LeeDIGfIvVB0RueChEZxx0nITJgvhOC0SZ5kgu+T5PENkJXcclGcOY8hrXGzlNHbgTnIkeVG3b1drJ2o5Vqh9WEtoErq8ju2czjdY2SLg9uUqtKGokybV9jTxLwN2OtQ8JvEqd+jpOk6IhilLJ4esWb2/9lZrglmrM2/6aOylYY/fnBQUQstP+ne0Y3SVbufNzipgL3+w0mV6ate0x21oLCEsPXV/LMyAgZKhGUcsqQvh3wMeB4igYblf6v8JuLnPZx/DryF4BjQj0QX/7MBKAFzB2jJcBcoONkXi/Xni/25tEXduxEefLt5CFZ3w5SWwS1DiipfFH/37F2FArDeZaLoP/hNoYYsA8rhZEa2OFCkh2ygIXAvyV/ooP+q6sPb3fXG04mxfNkd+066vocW+buG88nrGAf6NiyvgvxeSTw+J/yoMhlff5D+ZWKxUoc7If+NtMq9P87zG3Q1vSq0R1dFlcshaTOWe40iR0jndQYhbr++Sb1cmwd7hQG1KEBgIGay3AKdyxjXTzNLTWfHYSNGzGB8QkqqgRs+q3LhkCZxeVWxnK+cI7tWHbYT9bnPxOLb7PMiyFIf1jviBcKqIWJwRlPv0PFJD4k9khr0YYWU19EZjmlJUGC9G3HHVbXpl3FAB10mQkeQkCidwRTPTQ6hOwSPksgNuMadVl+D3p9UQu344I5YdW6iuVJyBIkRgslCyrEJ5QbEV3pckRh8wQ9vQfnOotcvlF0HgCz7HgQtYVAh02jfHyr8zM643Z2Egx7VawX/IYOKn4YL/MY7JQzpIfmICWUHqJjf8X+3FQdlhJiuGjDKQKbPGDzzMy8Glj6leK/DtTdVLOemcnLUf8O89deWFfl8ChrjXQ6Hy+E3mWMwoVWEdKvdx56QkeCUG9w03/vveIK9qmojMseLKmBf82w2dYjcer/VJ/Ltgp2/Wzs9v9scxxusyqO0lCwiSd6BLIRrt/nROkygEYas6/y6lG5zZpjOGCMcApuoevWCiSLgkaUogauKRJBhWVhWYR+XMuhHqIqTgokkhGXOCeazcz4Y7SUYvCRzrD+NCJ6ra3GWSW/+Ac/Ih0sk4wY/LyuEM5hpOwIs9XsUpGkPeM7uHjITPdb184xYhsnXNlWPM+sFrme3MooFUsm2Q/hj/pV858G2YoVNfW8y1o3IhZOcfLmhwm4xXfelx60szLbW13RcY0142KnGoEXTEW/bEb+PMTUsvM2Vs6gP4r+YwNAFriAn8U98ux9cpJEpDgPtOj2k8Mj76ZElGnPrzozbEt8KbqkZyYEzkEG6C/pX5Jkcl/pG9Vd45U9nmiur6tsybfTVVIOCYhBAKunbp49HD26ni0t79xyAsT14eXdvsi9GFXWFG0a3tNPR+GvuCz5GQJoygWKtKiA/kI2HG94eF5U8al/H8j+H/KZEPW1ijk1dwyw/5OVOmfU38s2Uuu/f2rKX+fdb9EeWcyjn0fcz+wfQngFWwLabpMoB4GAY4DlNNKlo6xuj5bIbjCXLr+aYrScthYir7oFwfa+WhzODkW06d9NiylNQaRU+aaf8tDPkD4gPvq3GQECgZUKDp7xlGR/GW1a/fhGqMNIlZjOBh4HiaLh4+gl9jD4G2QqB1Ckbz7j00TOdRTsOMjc6uZumRlFL7mcWAA4WJuE9SXeQWohM6PHapwExjcpD14vmwvkwUbVM24nlP0+kTyGkIZ+P1uVnKkKD7HQDe8Fv+kwawgYFSG2mA8wnaLtmR3lv5shEwyxyQMqZDcRYwl6zDWIVKdtEGyxUZfOpo0nW/xpgGuhyVOpHvOa6nzClgGy+MG3E0GrPfd6uBfxCO6E4ViDv1R7dEu01e9RYtvixaCf4//9DNzleeYYU1qGR3M73W7dInz4UItvA/AqZTzSvEUCZry1h6f/BKFEeQiHK3UHuzisEu1tNJHGzePme90BCEpoH/74nQ+ahz0f10A2R2OOv1a7nw700p1TpgTmMHZpwyNWfNg0jo5ANOZBBsrQMmjSCooo18h1jFRZImKTaU2zJOjBzbana65Ax0EPQcv14Caq6vufnlZM/VByy7C0F3EPU3nfRp847eDMHhCrpWwM69EPQAF5Yfk/6tH9frNOtwydBTcjOpx2xPBHh5/Ol2IM92aTLMINrTWn8k4XaySOjV1ZwJQu9ge/JRp1TP1QDFhI6aLODnVy3okoVjzw+rIJetb+JCogDI9CpERfQ9qc1a3uzSed9oaGP9kIJbFA6te/pStdXp/F3Jx7hhezy8d0m1rGcqMcTIwxWQc8yAwyA1gvRw4wTLrvi/1HFGy5TB49cbzOOyZC3rRNvLa1i9ntpcT/as71xn6v0z/sfgz/S+fODfGP8y7uyNbr5bbu1GGoDkbTkB0FenBfP5dv0QBUyCGnBIMgfpZ8AghYiAnwz8q6RuXEF6jtWKKf5PMwfkRyK7LLXwXwhyWc6waQQas3UOmY8wxnM+DRNXuWD2f/n5sa8/806qcr0BBvE95rVu58kTh2AZLDpo1F3Xbu3xDYFRhdFED2o2qrcEZDcemf7cN7l0gE06UzMnp1u3l8oFblBxuJR+a2DGA+wr0IZhQh7Gf0evQIyl8qHfuVZf8jAOUn44VJDNhFA1Mj9KOsaNAcAaA+DBhxjZMb9QehxkJ7kpCpQZ1skaYyQnxzXjFYVMBDikaIljjaNRSx2TX5Sgo/cNMm03qQS4D8XEgAT3aW97kjnR4AGp+uiqoIrwq4/HF9vDrT5HWKw40BTiw4qujWLuF/w/+B298kkiruyKEJQz/vW04VPsJTwkH/sZ/05lqWkn4y74WPg37bR/iMIYXwjGpMXAfwYaDrTdV+I/sRcLoOqjGiy7DVXi0G9ow8FehO2Egm/qC7MZa2Veb/jnc+XSprn6HezFRSDb0MvXOssdQN1bhNJJj3b6q+KkhdYEIMVwE3Fl8CgkkBhpeA5IhH/7Gf8Vc6cBL8lcBZl//Xly2r822CZs4i3OwEaTKA56fgqu/6N2jpCcXJaMyk8LYeU9jcOWLesPx8VM48aydBAEx+jjKC1s2QFBOJrS3GN4NpNlu/CJKcCbEsmZ/ecaypGpvjkQxOxtrSTtvMjlr7EaABkClWrOaZMw+6IBDJ/+PIhWmAxyuFPVBrDlytUIyGVGnguqbDlACmQ6bSrZx3yuzS/vW9Peos1UiQeDstCbc0qZQjdht7KGoaFjK6Sqz1Y1TAGbZmASTtqVkkSfkcTxm/IlQQeIGJ1cthgJL/ZCFWp7fpv5Mgdh+7N8PT9sxYLiZXb94v+4zeSyJXh96G0L/xgn9HyXthTYiNSuBODUxtLCco+A9cniLH2NGXzoYgT/wPgF2UODn0SFTx8o2ewQx7Nfs4iUATdhsfw2lt5bIQPv2tQ9l7DwZLYUwEPtzHMhY1piy9bGEa51Tapx+wH/4kUW9mUVg1tTzh9yj1wVMTmnAEEwv2kmoAShCZLiH1SI6EVU6HOOXajSzHyvn7tAVObubM+vSj5E5//89UuCT8Udrz+9rFHpt+WvHjKVLycyBiCFkUCkZ/05EFjCkYBGJb8BrHX2qTi8A41ZVzttxS/XiCfltH9lP5Z0Q7JXS/pKy7O9a9HA64aFOoiwH+0o3X/BLc49g9UlwPVpdfqOQpbB1TLkfQ6+o6uvQCKG/+JminGtHaiqcu1iJEdTl+uC7E/YFTBAkpGzk9+6txYjV+mvcHYKB/l5fyp1fRJLcVN2FBjz2ZGZkO1U3JwD7xIJ61ZpvOjCmgkXh4OFXAaoXBOY/3nz6s3bh50+Vy4p+mzZe1wSxUof5ewwPVZ/A/862oDRPHY+hq6cxaWtDUFc94Xs8y/4Xy7rDQOhHBI8VC5hnXPAccNi1RONg5iyQyT6DXORnfA79TCqaaKqY4hjVDYVAeU5fL61PtbG6sw6vs6V+1BsGNOsTXnaUMAO1m/ELPhcmIVmP+dflk2CLsnYDPkT/gFBnBuM/wqnlUNJ4m2ykdF6Umg62lGrQ67wZraAFWm+50Pf/Nr+9Kc/1dh/ftn7/U8/71+fx7xUpldUQnOTTub9ncTyvDTEneNAxTvjI0jQuiK/an9NCtEi4XMF9Xw/GYMrcxN6zaXvkVtVesQZT33O34ys3izvU0Wg8rpGHpCxR+8VtOOnz9hGtSCI23GzWRxC9z63AxQtjdUBNloe9X5fQvN8Nczx/eO2duryXGCnlLKXaGiqvLsyqSBrPkgAkxFANXpwiDEPzL1UfYNAuhovGVleq9V1GrsWHXBK/kOXk4TAKHia5Vx1n9yR1zROqUHSfIzOnODpjIq4ktUSc7s5NYzF29bzasb9ybDHQRj/bQ3qc+D/MklLF/9dm9mn0AUuvwyBg9vMfqKm0WtVrP4No5UNv+hylhIlC8ZqT7KZl1xB43myavSCIbF6NqNKWpY6KkHo6t6bj2gsVrTcUhcwj+p97LzSIuZF7TPvUMwxPutnB0ynt8Ory38w2hygVwVpRdq6HFmXjeLecQTuQ7ziX/phCkXSXSLFMEfbBYExOnmiuQ6j5LZiaY7tpvdF4pTp1NV9kIrlcn/6i/2z1z/7858/N6f9szghFtIGGzT5yfjsgX6uqql1kjmnOe3vRUylfYjgn37yym9PNcitzFzfyy4ZYNPUlaxJq5pwlIeGouQsOcKWaa19Bd87qCrcE8mf428QXAKTg0iiKGx54nPHGuT1/H55eycvZacJwmyuyDjd8AiLh9mb5l++04wZyF2Bpf8T/DyIKoirkEMreIO5Q4gVTMibBDxfe0rv0F1WyXDevNVumcVDHBLl5EXk6vdH9b75kbNykiRKZSjd2ZXR3JQMQapgvK66d5ByvUczc6fMaRHYgprPDvAPuQy/CXrv27uPj/JKjZn5dRAvyWiAynSebZ4++WjKdUFa9QRiLEwbEougJn0dIqYU6gY4D+GKkiinLOkqE/mzBN9wde/EfyXUrqSeCe+AQz1vnA0r9xJQwLZoKnn2demn4oIKMtlK7YTXSZfsovig5i0t1vNOag782x3/KeP2e/KNakT9HL2j4hGRQpIRJ4y1z/tK6R/Dv2eRD7CVSNNvg2yRB3MJpHzNSwqbw51jFRlvSAmSy2EP1Ov+q9qu1bg///n/+fO/er7H/Xb7Pz7H/+Zv/oaBTdxcUT1gVkZ5VpvGqLdMxPEA/E4QqW9jE44NogvyBGlm7sy2qAJz/Tcj7LvCTy5nRQnvxaaPuL2qkW0ywPd4NBeFys/ru+TKGXtOePUD/qv9eT1id+B1BEYksR049sZOWH0Uw73TuaRwsm7/vOspxgQna6fiVRloBw4AdBxLY1dXnz4Inoz8+JIMtVVD9vWSeQXCpiGM7IYVB3Ind9sVHE6IGMZ1rkdaP5In74T3ETzpenW7YIQkRNYrUQgKOd3eEEf+see8v5w6j7bVgrpa9s9W32vaTqypynRxj7nVitZ5Xxjh4VrhvJ5uIxAQCShBCl4yFaIJxk+CmuX9KVit2/gPkvXgtYxUIdybtGu0DurmKptfjEhsARvkjacv8Zd5XoxJyaAD3f1qd/godMuAkGx7eE4r7DRHQ8BmUNHGtsijmo15F/w/+yJu37suali6sC30uNxK5JMc3gaXcrNxsl+TBBiC4gdOMF9tbbhkwFf4vB4yG/YKAZmnjlVHMXsI+0r3dYnW/nRi82cG/9fP6xO4X//wD//Lrx3/9tfFb0MgqdLO1Gxdu/GDfKQ6NK65M7jhISbZf/mPv2UJlqzQAVVkiCFXRYVgAYntjiaZNQQZr4MybkYJCvSfYd7ReM/YHC1jhbEEkpsuDUetwJxI0bPY2tA0V9NfVy46CIbqyZ7UqvPtiZoVO15QEFWQLz/svkPOuc9G2s2/tLXXq4ms+u6kkdzoJDn0y1/0l32Hup3RymRbUNr3nOc8hcu9YJbwI4lKFjpuNrwx/1BVE68NA2QDD1oBcRNcoM8I9lGXl3Jh44E6F6tTkXp6nXPKDdPUdgyeb9P/jVcnYtCn2zBDMzugjQYB+nGSOnk0Ha9PzWOPsd6JQfRNl8LMJuHzEnXro9wTNy43WrpV8uKL05Z+hLusrZFSkCx9cY7lDPGoHUbJv4bLVOvCMxc6jKGJfxPqe3Mg8Bk4NQHoan2KEhFLPqM5LhPR/Gz811e5goOTL/wXPoN++av+o0FjihLGNuMrd6nYwL91AtDJPziS0UagHn7df1XeK1HRVmbJZ7+X7sEHq09wu9l2Dj5W+eifXs89aPaXX8vkn93P1e5/9W/+zf/3X/5n//g//fX2v/883/r96+gN+9RXYKnSDMsWG/T52D+UF4SRBES0bjj3KfvQfwdq11Ty4mQWdgG2gZKdbeSXc+pX0HA5p8feDpjJnV/GOvtOINsNPkZ4LV1SluUdelyCiXVgTOfNE6qdhAYydfdFer4cN4hwnsuuQOFOr8vm9IKQKZzY2nIdHpnxkabHSQbCDjdNxLivwm/sQUzmi+57gS/mk8S8xboNQnbw2yiUxR/HQULiPs4rm19cwibHUocEGKtHj7rd5DGnfuC9LSw9o8DgOTLi77ezwtYViFs9/5+kMGLDWkHsPOarCtXXJwjQONKv/YD/S7VlkPML/uUaUOF/qGCUgJAn/oh/uqtcG6R+9fHxwYLnGdnjB/w7BRMrXlLvCRPfbz6mz9mmIWtpe7Z5/BX4B5mU/U50FaGyp0R4Gbkvpxp8x52HlURMrzYdyO04zzYrRRuXniI5bGB2A6DaYeM/ZW8uPoxQ44BP0Y3dfOLadyn3t3/3d5/nd3w+/W//4l/8+X//7McjT0/VbX//+tMrPo2CagIyOKStJ3x//n0f6bw+l0VkWUery76uSL1WRWwYs2/OevZ1GuKG/OvUgkH3WWffLHtOU8JDsebMilWm0Xel81RU6/iKV2CviZmOYEEJvhXMKq91OqmyRUwqFg2OHOic+oFWoqg3GnPuZPVvVGJePla73xTmKWjeHE35lII25MEANv/oPLJX4rHWbqremIV2hJSwIa9WvuLWUkQRnIF8095uptUdB5/Ilv7Dnd6Oy6rQDVaHlX3GEk1xreeVKTKC7SB0UEmNb1fmDvkT+CTXOhMpIYwor1GAZXVbJQlsT0esM3WUgxt1F9A2qFMz13zHTOOHqSg6TC4kxRha23eC6dwDXbZqOtKvuZrR+9STZ2TjP/nThu2i7EeCeilgWBk4h3Jhb4QTV4czAr+xTqCCtH9Co83h6nSnrzmNhGHpn/HPQZttZs5cOfHfFXOwAkyog1HrP4W7mXDC6RjHekz4a11CndcUKvzSrrx32O74l1UZXoqj0kWcLYLl+nHDktqvWPw3f/rT08Ovevqf1PE/1ZtP1f1f/KN//J/8kvN/eP1q+CsQ8pVGEvZw/fEGgl4zvWvrnpj5ahQxs5+yhEsHqrmXpYJJoEMU+TW+ckZE2rI+lX07XP4ggN1UTjG7PYAOBzifgx8B3e4ddguAQfJn47Oakc7u1ElZWs4hndAlAGvjOOvf7wWj8jpERWVwzG+5MlLjCAfIvI59VPPVEwgdUtFiBw8NSf2sxAyJ8xPiGqX8aNf+iW45oo7Ac77bml+ZRUAxF5nCmgyH1CH+0dpiDI66rn5BhMufWzpCPl3fDiKYmEErmDhR7V1rfGpz9QRj0ktfECdimw6dvr5mc1/7xiuOUSA8tm3PYX+BS3QfvTt6TixIl8ApPfYYrz57rT5SW55jkvua2Ah/1RhOWabtFQfizuv8BJ1Fc3GbaxGJOOPsj0u/xvYNZpJzKLQtnx46IE0P95urYTQazrskEVf/PaacmUWsU9QmNAGGu/g9X/PMqz/XsYFhwSLm2PqAfdEDdvg8zuPv/u7vkov8n/yqtv/p7YRn++/+m//2//wl6H/9D///P8Q//MNfeJDTYURXIHGjQ6BCtJT3wyPOSXlaiOGMHfRSqHhlSW5yF+ZvtmSdqK9wOQqSeuPtyDUcOSMTVadYXSVWPMcHS/HSFc84Hlfg0XiDPFxsoIQeOGc7Qf+DooNdL7idb9CFmo7iIVHgPLjBG0ZLazZDi1nZLcpzhWDdPWLPcC29EggzrARNqFlPsEmSMXusuTPHinf7HyduHbxV55pvpGw6YdDH7NLP9bPs21On8FxzUU5zXi5zAoamwBVTxjVA4pMH43Zz39fN286ib+G/A+rSDHyUUBWwxLfxRNBcHvEzYsAc74UB2/5cPYrdhgRP/3ulAf7xk40WQlSvHbgp6f8m8/jMchqCVulzPqslWU/Vedk8+2xscFVuo1e0jrtPfcP/7NuM6soPj78kUUif+SlaNMJi2kbt+8X+7nwo7MZZsS7PWH+Av//t3/7t56a0z8F/+X/93//8v+I+5q+D2esv//A//3Lbf/u5i+1vfp1UaI/or4OFGV/TfvbXb4YGHYgWBBbQXbT+YVjxjVb4cETQOtjnH/w0ZwcDXPbIfvAd6JS5ZIu0b9SiV0lRS9KpL92RWhpRAHhGOV8kq37e1XWNc8aUnw894x2u+PhaPVvqGV/CWbU5mabNGFB71TcCc8/uBLv0QnANFBOlZ/pqqb7+dDGV/DAM5okexYJJCTMdaDqZoOftHEI1T0rxl5/hdjVlTw4UsJFzeBFpW8fHm9+GUjq7zOtV8IK0c/X2ue7K8aO7l2eP0yiQObrNDIiyXF/SeIvF9tpG4K38wZmYElvRElNBwmUVSLXcwlTRFPv45fsetO1CVOo1o5Aby9vggXf3JPj/bO+oBCrTUJcnvB5bk1jk3OzaOBLBILo6DuxB152Ip4TkjRYN+e5xp9VTr8+jioMreLuAfwkBbg2x5xUNZ7PuX/0FfeLOfbQBK4/+SJ/Gyliqbn/p3RHNp1O+vIwC/Ocft1v4LyydEzLJO1zqdboPbXF+/p5WxIRR02P7R+eML9f8keeOLxa0bURmhCjfqygWA/+foP03J2j/21/18/9oY/vT3PFryfzv//N/9I/+31/n/0+fu8w/g/zlL3+5XGB3HRQBykEb5aZy6UCIyulaTJLumXAXhD/gfBU8P9fgPaOQFyO1zVGp+XBTDihehiQ6r9z7Ge4hh9erbho5FTVbtvriEg0go+ooB0m35BljCosEK7qfvltXEdxtrmG5jTENC8VJABAtut52uy+ULnCPI2EsWoa2Vz097t+VdjU5liQ12H7d1Wu2A0j0DSgxG4SE1EeALRuOgMQF6CMAK3ZwBG7AsGNZSNPDLFsg0UtAM7uaeiYzw/b32RH5umcmoedV/kSE7bC/z+HMfC/rFx6nXEVEKT4JF8mQl7eAXDN4TtElGb85gocZPEdQQRieQi0o1ChuOl0zmGH8GI+wAxaKZJJEkzZPoZeSz0hTeNVW5s2kOUTo6Z98arKpMRIPRURjjnIup+cBujyU20atEx2WIShJVCm1H9a1LBxHEfwSx8aDa64lHBFTnM2kmkVb/LMpaO09nMbyAbJJHupd09fpuiCS7AsEqIK/6lyk/WwZ/3ndeXwqymljCrzLmA7vMB6Y0rM151n/orP7OTZe2AbC85pBr2WOI5RSZtzfcoyv08d9cXVDq1QeTeVmmlofk4RPX+SlWfQrfd4gf7eHh4zEBOqizWn8Q5yxE6S9b9er/uLzzx/+Jm2biHvf/vXu3cMPPvre3uer48eodH9t6xqRUudlqC2CkrCQocIUToCIaeuK4D8UgQSNYM0sjwu+zCJAiI0fJB5Dd2OKMGAgqBMJVXVSBtmYdETUZA1jAC/j+9Py5HnqAa/5veZO0AGYSvYOz60EF5YfeggeZVRaGQUc+GqfVOhUDCUI9aNLlg2qh9LFxilr2jSt4lUb0oGuJb+B0CIEY7a4Nq5HhcOYLAy+GDoOfM6x+QfihUYST4JCHENOxtcrvUFhwAhVbe5TA5qJM+yhFER9U/onBYz8nyNgW8kqj8/+2xIZoUVIn8tCTtB65K3lV50IwCzlQ/zz+LaOyZIN1ZP5CpmQfB7/eTdmin8tZuOxIs0JkbM/6f5g5QPOVWxB/sF2wN/JTmCeFCAe+jC63wbMXIxZYlcJ44Lprllng/2k2qH2ESA2z2n4TuIAZMpVicKm4cPjkCcLobJafwx0yJ/2G0AWMKBafFNuxL8fMhOUYQr2D3MPvytrHfXj0nXGiqPjZRViH/OitQivzRek2j7nOE7ePX9uz+/uhkzbfe3P/vHwB1lsS+Let3+++/cn3//ou7sQr473uxPmRizk8sU8+FKFkEgz006Hd2y3roEx2+2fF3bAvIuVmWshH7IgWVcqeOT/VTMFq4ZUqambKj9MFxczqIYTC43Hn2MM5eSGqUIk3MXScvQtUH4+VAwvC5uQxFlzyM6wgeIAEGiPeClgGuwa4M96p9BNXy0fLvrAnkguEryW/SBow251gobfWfYkRQaR0hwH2W6hPE5qmfGIedJLTbJIUX4Zij4TZLXoMgergwMBuipFTqy+lyuhFaBI91p3DasraIxVbEONzKzw93rLCbYSS4vXAtf9FBBciJBc1V6jakS51EVJ2xL/AvJmjKTzEQclSS3x33XI6MNtIZavyMWLlXGuPdeX3Qr5NxirjNvlaPG0mLrpwblGPiJ1TvKPfQ6uXa683q8NO+AgQsD/ByKOeBLU5yn+FVjB57Iv1xSlm4pBR9c+HVUZnf3EoDe3V4L7uFa5Wfgd2kuJc9XlHCH+676/dhtWUHuxEfadk/b+MNqbzx5ey8l2FqS5/fTjj3+25bd/3P78zn5b9/HxUa5P1yZhvncp5bDLmgRO5+uKACWTKH0fL+dnScwKcjHbmhklPE5ClnFFhJPVP5HGudmInTochWwVzlUipGZMg2AtKuQEFHzz5QTUROIhjLwwE49YyWEVLsn2RLLdWaypmO9oD9GTPNyA5k8wlgfswnxUWDHKurUghpE+FIwxPxLt3GklEvdNCYBMllQK6Unoj5f/w73oWcKwg4tlVFNnvazaHXYEWEn6DGG69a8sVaXr64SKSGEKS9UYEHLiGgjLxFh+jA9jnoGSKp3mqU3ItRv/iu+fXhKDE/q02pk697JyuyaJGgn8sg8CNly7y7bos2weY+Trk6yrWFseZ2QKuROlHBGYiKghO0jGPyPSLOd5/EsSyPp4zAlJy357Gv+tv9J/AEJgy/V0vqyQMa1qT/Tx+Gc0RccKvHfbEVYa7mRm/PtkNB2i8r8a/3xbxn9J3qA77BOQLDe8cpajxH/x97G/f7nK3YsX/mOS8t/NYL9+8+bhT7c6vqlcbD++v3950Wd/2f58uTfY7nnLV4+PjImCxVlCKIQ0Ftjg7ANA4ewEWMWitJfAB8tb02fIoKXPNGBDPaygw4mMyp05X5wZK+Xw3qv1OKnMT+8pgUigW33FLIlHk2OZ/HQB6oceGnZOYodQWR4hPvL/ghCLFUuxJORrJFinSJB48LVCF0iU2RNjyIkvismMZAj2IgeQk83BxNFyeUkjb5Y7NReRW2RR5qjHD9lyV+Wi8f3587zxMT5Ou9oHWUkVty5i7hvwp1pMnlPZ0fc7KciJTMeO2er99mLHhfgFJC2x4JTQisz7dhW+3+7z4H5siBHx/iP8arINgQhEwyYG2aL3RguQaezxJS0uRRZ2LjIUmyt0Kj58TvqGD239Tb5N4y/0bmIxlkbSIMZ6rOM/sKJr77vFtiyHghrCoMv4X20wfSQTp9da1XkZ/7e3xPVJJu5oJLP+0B/NMTQfz1AdT44/y8L3w92T/nz/LnL5ACk+ePvJ/Y9ebzWU38To233v41vWnr56qmKjtEI8RaBCWaqT5QBVN0fPahuveLviQGPIi5YkIUjNwyCmtwNFPy+C+S1Zydp8lsAhUh7KkxhPkS7iKBMdMozmQBNH95WjtUNxTChACrDrKamJTFa2Sd65WQuuff8ajmoTTMEtbNlfXfWyILmKoXaucAgCt3MfstKJH3cwUi1f+HGlRKR1iySFfaETuJKLx1i+b6f+U2RS0nZ5jRPW6VzgXPU1m7lf183hd27uU6DtYnTQIvLg00kul/JLhBOBtPg3oyKT1jGxZFBfofNMWNd5in/L9R+GlvcRmxS7RTyu5xC4V46lOjrRm9xKhiD6chXPGYW3jzl8T2LWlOq7to7/iQTz+ZK5WmJJ0LGinobluJwxyHODHJwDdfJpK8PiQMfHKRGpc+4YXxMfHsDPzYG59BrdbwSrbPexZXzF+NHmP9vx33/66XlpfOpGvua2r75Vn73eGv6SJbxen44SegCgHdtVEm6lrPcyowMOavysSwRQOoKg9hRnJgevgdKCu668MTuJg+ERGk+rg5A0JjKy9haAQcqWTleJUuMrHP2c0ENnkrq7Xlb2keswDrVAdbMyaVO/9BrFXDWIXfJYIQ9e3tunJmnAOEfTOkC0iJM7SvpCmNG0r29qLFClBlZoiYy24CNfCVULGbsi5CMFD2RltNJWhZMyq3ID0XS6nRGwYVIfitKu+BIApCOLiyj84FCQwulKy1ixFZDpe4eWM9GLfDc+Y0xl8IRflcsK+IpXaq3K0oB0IrgcEtOejEA3OLXYQ7B6L4YoCXL6WJIx4R7wbybQPtPdHWrlwChKFglPxkPYNApYLDi3a6NmJtPHZ72pCebMGO1L1cJj1+3e4h/Jf39sSHq1wzzgMXRJmCc5JQ5KQYxeMahtF7YpvmgljpbxmSG/74xnxDbW3N/Sulzw86hbWXw7/rvnX8pvH94ev9L5wZvKN9yO8rlcXm0A/atNlXtZCF72RCg3pijzvSi9Gd1DjLIHg2qBHxM2Yg0KLvbSrco+50VeeGwcjHuxVJFEkCbCW9yH9vHmbfEQG5orkm6yzZrke7/Lo8zL1O8EIXF5XTWPHgQsxuXlIL2SGaMPOPSCHJuO5pOSCY2cs4TyX2aTvp11Dh2vlCgJse4Yk9ryYGkfq2P31baEBon8SThpEJFYLWoj9wmAV0rPKi4PLMCq8JPU0kMBpRsr6mHq2rcDHhJa5THHxZfjmovo2f3pSd64pw08ywtLbBeWyElvEZ0BBSKG25+tnqk0UtLGZLySOSe2MOBj3DOdoe75RiRodSEgpwTBoqbIXGDsiULeGpl7y5iMA7CZ8v5iRd2TPUqkrfgdOgPB+zGFdbKKYZMPUpTh2CKi2YZCpThOKrRCC9GGuRSkT7aZDM/jphwkaX/S/JPt7F+/3Aj77dckbOrj229B4lvJ/n5bZP9wU/DlJtjL4yThFcOeBel6CPTVovBqwURWZRfrVzseJa7MWwH3mClQRnaSDsg5gEvBD5mNRh1AGzOWFXRTQSUZK5IUyFV1YBBzLZJhdGJjtOFNF+I5qYO809mpTRlXJrKfV7GLa9BHXsYYzJHj+nlHVxrZEAi0ZFKSNHuwivPoWSTL7uhnBeikAyUs3XhkM25ohi8tAhClBdgV3e4SX/xTDbSWTIqtzy6xdr0tV3u2dBSrf7dJA8p791GxirK2TsJ4dwsQ5/MSDt3irsjG2mGC6zgyb4tzmarJrXvAS+Lp4pzOx6Sij9y/QQsZ/KI/h7X1uGf3qn2c0SAzo5q8tfaHH47bXdM4tO/zkvgJokY4l6oXZG8R25ID+Am4loaOREmk4p9MdrPZv9jWrmq1x7xBG7fJ0q8idvnY9u9/uj9spvKwNX27rbz//sUX8udvSta8/R9FRXTIWZHhYQAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/static/images/empty-deployment-light.svg b/static/images/empty-deployment-light.svg
new file mode 100644
index 000000000..f23e04aad
--- /dev/null
+++ b/static/images/empty-deployment-light.svg
@@ -0,0 +1,93 @@
+<svg width="1080" height="184" viewBox="0 0 1080 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7992_286)">
+<rect width="1080" height="184" fill="white"/>
+<g filter="url(#filter0_f_7992_286)">
+<path d="M507.122 174.584C458.098 174.463 418.356 162.669 418.356 148.241C418.356 133.812 458.098 122.214 507.122 122.335C556.147 122.456 595.889 134.25 595.889 148.678C595.889 163.107 556.147 174.705 507.122 174.584Z" fill="url(#paint0_radial_7992_286)" fill-opacity="0.16"/>
+</g>
+<g filter="url(#filter1_f_7992_286)">
+<path d="M556.493 198.63C469.185 198.415 398.409 168.04 398.409 130.787C398.409 93.5328 469.185 63.5072 556.493 63.7225C643.8 63.9378 714.577 94.3124 714.577 131.566C714.577 168.82 643.8 198.846 556.493 198.63Z" fill="url(#paint1_radial_7992_286)" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter2_f_7992_286)">
+<path d="M410.871 123.137C411.719 139.28 475.926 149.349 471.644 154.497C467.362 159.644 407.121 172.097 398.069 159.826C389.016 147.555 395.358 85.1883 399.64 80.0406C403.922 74.8928 401.819 110.866 410.871 123.137Z" fill="url(#paint2_radial_7992_286)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f_7992_286)">
+<path d="M409.423 176.88C386.15 165.335 384.731 134.771 406.253 108.613C427.775 82.4542 464.088 70.6072 487.361 82.1517C510.633 93.6961 512.053 124.26 490.531 150.419C469.009 176.577 432.695 188.424 409.423 176.88Z" fill="url(#paint3_radial_7992_286)" fill-opacity="0.08"/>
+</g>
+<foreignObject x="412" y="4" width="255" height="162"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_7992_286_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="416" y="8" width="247" height="154" rx="12" fill="white" fill-opacity="0.32"/>
+<rect x="416.5" y="8.5" width="246" height="153" rx="11.5" stroke="#19191C" stroke-opacity="0.04"/>
+</g>
+<g filter="url(#filter5_d_7992_286)">
+<mask id="path-7-inside-1_7992_286" fill="white">
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z"/>
+</mask>
+<path d="M423 23C423 18.5817 426.582 15 431 15H648C652.418 15 656 18.5817 656 23V147C656 151.418 652.418 155 648 155H431C426.582 155 423 151.418 423 147V23Z" fill="white"/>
+<path d="M431 154.5C430.498 154.5 430.009 154.451 429.536 154.357L429.342 155.338C429.878 155.444 430.433 155.5 431 155.5V154.5ZM426.833 153.237C426.015 152.689 425.311 151.985 424.763 151.167L423.932 151.723C424.552 152.65 425.35 153.448 426.277 154.068L426.833 153.237ZM423.643 148.464C423.549 147.991 423.5 147.502 423.5 147H422.5C422.5 147.567 422.556 148.122 422.662 148.658L423.643 148.464ZM423.5 147V145.062H422.5V147H423.5ZM423.5 141.188V137.312H422.5V141.188H423.5ZM423.5 133.438V129.562H422.5V133.438H423.5ZM423.5 125.688V121.812H422.5V125.688H423.5ZM423.5 117.938V114.062H422.5V117.938H423.5ZM423.5 110.188V106.312H422.5V110.188H423.5ZM423.5 102.438V98.5625H422.5V102.438H423.5ZM423.5 94.6875V90.8125H422.5V94.6875H423.5ZM423.5 86.9375V83.0625H422.5V86.9375H423.5ZM423.5 79.1875V75.3125H422.5V79.1875H423.5ZM423.5 71.4375V67.5625H422.5V71.4375H423.5ZM423.5 63.6875V59.8125H422.5V63.6875H423.5ZM423.5 55.9375V52.0625H422.5V55.9375H423.5ZM423.5 48.1875V44.3125H422.5V48.1875H423.5ZM423.5 40.4375V36.5625H422.5V40.4375H423.5ZM423.5 32.6875V28.8125H422.5V32.6875H423.5ZM423.5 24.9375V23H422.5V24.9375H423.5ZM423.5 23C423.5 22.4985 423.549 22.0089 423.643 21.5357L422.662 21.3417C422.556 21.8784 422.5 22.433 422.5 23H423.5ZM424.763 18.8332C425.311 18.0151 426.015 17.3107 426.833 16.763L426.277 15.932C425.35 16.5524 424.552 17.3502 423.932 18.2769L424.763 18.8332ZM429.536 15.6428C430.009 15.5492 430.498 15.5 431 15.5V14.5C430.433 14.5 429.878 14.5556 429.342 14.6618L429.536 15.6428ZM431 15.5H433.009V14.5H431V15.5ZM437.028 15.5H441.046V14.5H437.028V15.5ZM445.065 15.5H449.083V14.5H445.065V15.5ZM453.102 15.5H457.12V14.5H453.102V15.5ZM461.139 15.5H465.157V14.5H461.139V15.5ZM469.176 15.5H473.194V14.5H469.176V15.5ZM477.213 15.5H481.231V14.5H477.213V15.5ZM485.25 15.5H489.269V14.5H485.25V15.5ZM493.287 15.5H497.306V14.5H493.287V15.5ZM501.324 15.5H505.343V14.5H501.324V15.5ZM509.361 15.5H513.38V14.5H509.361V15.5ZM517.398 15.5H521.417V14.5H517.398V15.5ZM525.435 15.5H529.454V14.5H525.435V15.5ZM533.472 15.5H537.491V14.5H533.472V15.5ZM541.509 15.5H545.528V14.5H541.509V15.5ZM549.546 15.5H553.565V14.5H549.546V15.5ZM557.583 15.5H561.602V14.5H557.583V15.5ZM565.62 15.5H569.639V14.5H565.62V15.5ZM573.657 15.5H577.676V14.5H573.657V15.5ZM581.694 15.5H585.713V14.5H581.694V15.5ZM589.731 15.5H593.75V14.5H589.731V15.5ZM597.769 15.5H601.787V14.5H597.769V15.5ZM605.806 15.5H609.824V14.5H605.806V15.5ZM613.843 15.5H617.861V14.5H613.843V15.5ZM621.88 15.5H625.898V14.5H621.88V15.5ZM629.917 15.5H633.935V14.5H629.917V15.5ZM637.954 15.5H641.972V14.5H637.954V15.5ZM645.991 15.5H648V14.5H645.991V15.5ZM648 15.5C648.502 15.5 648.991 15.5492 649.464 15.6428L649.658 14.6618C649.122 14.5556 648.567 14.5 648 14.5V15.5ZM652.167 16.763C652.985 17.3107 653.689 18.0151 654.237 18.8332L655.068 18.2769C654.448 17.3502 653.65 16.5524 652.723 15.932L652.167 16.763ZM655.357 21.5357C655.451 22.0089 655.5 22.4985 655.5 23H656.5C656.5 22.433 656.444 21.8784 656.338 21.3417L655.357 21.5357ZM655.5 23V24.9375H656.5V23H655.5ZM655.5 28.8125V32.6875H656.5V28.8125H655.5ZM655.5 36.5625V40.4375H656.5V36.5625H655.5ZM655.5 44.3125V48.1875H656.5V44.3125H655.5ZM655.5 52.0625V55.9375H656.5V52.0625H655.5ZM655.5 59.8125V63.6875H656.5V59.8125H655.5ZM655.5 67.5625V71.4375H656.5V67.5625H655.5ZM655.5 75.3125V79.1875H656.5V75.3125H655.5ZM655.5 83.0625V86.9375H656.5V83.0625H655.5ZM655.5 90.8125V94.6875H656.5V90.8125H655.5ZM655.5 98.5625V102.438H656.5V98.5625H655.5ZM655.5 106.312V110.188H656.5V106.312H655.5ZM655.5 114.062V117.938H656.5V114.062H655.5ZM655.5 121.812V125.688H656.5V121.812H655.5ZM655.5 129.562V133.438H656.5V129.562H655.5ZM655.5 137.312V141.188H656.5V137.312H655.5ZM655.5 145.062V147H656.5V145.062H655.5ZM655.5 147C655.5 147.502 655.451 147.991 655.357 148.464L656.338 148.658C656.444 148.122 656.5 147.567 656.5 147H655.5ZM654.237 151.167C653.689 151.985 652.985 152.689 652.167 153.237L652.723 154.068C653.65 153.448 654.448 152.65 655.068 151.723L654.237 151.167ZM649.464 154.357C648.991 154.451 648.502 154.5 648 154.5V155.5C648.567 155.5 649.122 155.444 649.658 155.338L649.464 154.357ZM648 154.5H645.991V155.5H648V154.5ZM641.972 154.5H637.954V155.5H641.972V154.5ZM633.935 154.5H629.917V155.5H633.935V154.5ZM625.898 154.5H621.88V155.5H625.898V154.5ZM617.861 154.5H613.843V155.5H617.861V154.5ZM609.824 154.5H605.806V155.5H609.824V154.5ZM601.787 154.5H597.769V155.5H601.787V154.5ZM593.75 154.5H589.731V155.5H593.75V154.5ZM585.713 154.5H581.694V155.5H585.713V154.5ZM577.676 154.5H573.657V155.5H577.676V154.5ZM569.639 154.5H565.62V155.5H569.639V154.5ZM561.602 154.5H557.583V155.5H561.602V154.5ZM553.565 154.5H549.546V155.5H553.565V154.5ZM545.528 154.5H541.509V155.5H545.528V154.5ZM537.491 154.5H533.472V155.5H537.491V154.5ZM529.454 154.5H525.435V155.5H529.454V154.5ZM521.417 154.5H517.398V155.5H521.417V154.5ZM513.38 154.5H509.361V155.5H513.38V154.5ZM505.343 154.5H501.324V155.5H505.343V154.5ZM497.306 154.5H493.287V155.5H497.306V154.5ZM489.269 154.5H485.25V155.5H489.269V154.5ZM481.231 154.5H477.213V155.5H481.231V154.5ZM473.194 154.5H469.176V155.5H473.194V154.5ZM465.157 154.5H461.139V155.5H465.157V154.5ZM457.12 154.5H453.102V155.5H457.12V154.5ZM449.083 154.5H445.065V155.5H449.083V154.5ZM441.046 154.5H437.028V155.5H441.046V154.5ZM433.009 154.5H431V155.5H433.009V154.5ZM431 154C430.531 154 430.074 153.954 429.633 153.867L429.245 155.829C429.813 155.941 430.4 156 431 156V154ZM427.111 152.822C426.348 152.31 425.69 151.652 425.178 150.889L423.517 152.001C424.173 152.982 425.018 153.827 425.999 154.483L427.111 152.822ZM424.133 148.367C424.046 147.926 424 147.469 424 147H422C422 147.6 422.059 148.187 422.171 148.755L424.133 148.367ZM424 147V145.062H422V147H424ZM424 141.188V137.312H422V141.188H424ZM424 133.438V129.562H422V133.438H424ZM424 125.688V121.812H422V125.688H424ZM424 117.938V114.062H422V117.938H424ZM424 110.188V106.312H422V110.188H424ZM424 102.438V98.5625H422V102.438H424ZM424 94.6875V90.8125H422V94.6875H424ZM424 86.9375V83.0625H422V86.9375H424ZM424 79.1875V75.3125H422V79.1875H424ZM424 71.4375V67.5625H422V71.4375H424ZM424 63.6875V59.8125H422V63.6875H424ZM424 55.9375V52.0625H422V55.9375H424ZM424 48.1875V44.3125H422V48.1875H424ZM424 40.4375V36.5625H422V40.4375H424ZM424 32.6875V28.8125H422V32.6875H424ZM424 24.9375V23H422V24.9375H424ZM424 23C424 22.5312 424.046 22.0742 424.133 21.6328L422.171 21.2446C422.059 21.8132 422 22.4002 422 23H424ZM425.178 19.1114C425.69 18.3476 426.348 17.6898 427.111 17.1784L425.999 15.5165C425.018 16.1733 424.173 17.0177 423.517 17.9988L425.178 19.1114ZM429.633 16.1333C430.074 16.0459 430.531 16 431 16V14C430.4 14 429.813 14.0588 429.245 14.1713L429.633 16.1333ZM431 16H433.009V14H431V16ZM437.028 16H441.046V14H437.028V16ZM445.065 16H449.083V14H445.065V16ZM453.102 16H457.12V14H453.102V16ZM461.139 16H465.157V14H461.139V16ZM469.176 16H473.194V14H469.176V16ZM477.213 16H481.231V14H477.213V16ZM485.25 16H489.269V14H485.25V16ZM493.287 16H497.306V14H493.287V16ZM501.324 16H505.343V14H501.324V16ZM509.361 16H513.38V14H509.361V16ZM517.398 16H521.417V14H517.398V16ZM525.435 16H529.454V14H525.435V16ZM533.472 16H537.491V14H533.472V16ZM541.509 16H545.528V14H541.509V16ZM549.546 16H553.565V14H549.546V16ZM557.583 16H561.602V14H557.583V16ZM565.62 16H569.639V14H565.62V16ZM573.657 16H577.676V14H573.657V16ZM581.694 16H585.713V14H581.694V16ZM589.731 16H593.75V14H589.731V16ZM597.769 16H601.787V14H597.769V16ZM605.806 16H609.824V14H605.806V16ZM613.843 16H617.861V14H613.843V16ZM621.88 16H625.898V14H621.88V16ZM629.917 16H633.935V14H629.917V16ZM637.954 16H641.972V14H637.954V16ZM645.991 16H648V14H645.991V16ZM648 16C648.469 16 648.926 16.0459 649.367 16.1333L649.755 14.1713C649.187 14.0588 648.6 14 648 14V16ZM651.889 17.1784C652.652 17.6898 653.31 18.3476 653.822 19.1114L655.483 17.9988C654.827 17.0177 653.982 16.1733 653.001 15.5165L651.889 17.1784ZM654.867 21.6328C654.954 22.0742 655 22.5312 655 23H657C657 22.4002 656.941 21.8132 656.829 21.2446L654.867 21.6328ZM655 23V24.9375H657V23H655ZM655 28.8125V32.6875H657V28.8125H655ZM655 36.5625V40.4375H657V36.5625H655ZM655 44.3125V48.1875H657V44.3125H655ZM655 52.0625V55.9375H657V52.0625H655ZM655 59.8125V63.6875H657V59.8125H655ZM655 67.5625V71.4375H657V67.5625H655ZM655 75.3125V79.1875H657V75.3125H655ZM655 83.0625V86.9375H657V83.0625H655ZM655 90.8125V94.6875H657V90.8125H655ZM655 98.5625V102.438H657V98.5625H655ZM655 106.312V110.188H657V106.312H655ZM655 114.062V117.938H657V114.062H655ZM655 121.812V125.688H657V121.812H655ZM655 129.562V133.438H657V129.562H655ZM655 137.312V141.188H657V137.312H655ZM655 145.062V147H657V145.062H655ZM655 147C655 147.469 654.954 147.926 654.867 148.367L656.829 148.755C656.941 148.187 657 147.6 657 147H655ZM653.822 150.889C653.31 151.652 652.652 152.31 651.889 152.822L653.001 154.483C653.982 153.827 654.827 152.982 655.483 152.001L653.822 150.889ZM649.367 153.867C648.926 153.954 648.469 154 648 154V156C648.6 156 649.187 155.941 649.755 155.829L649.367 153.867ZM648 154H645.991V156H648V154ZM641.972 154H637.954V156H641.972V154ZM633.935 154H629.917V156H633.935V154ZM625.898 154H621.88V156H625.898V154ZM617.861 154H613.843V156H617.861V154ZM609.824 154H605.806V156H609.824V154ZM601.787 154H597.769V156H601.787V154ZM593.75 154H589.731V156H593.75V154ZM585.713 154H581.694V156H585.713V154ZM577.676 154H573.657V156H577.676V154ZM569.639 154H565.62V156H569.639V154ZM561.602 154H557.583V156H561.602V154ZM553.565 154H549.546V156H553.565V154ZM545.528 154H541.509V156H545.528V154ZM537.491 154H533.472V156H537.491V154ZM529.454 154H525.435V156H529.454V154ZM521.417 154H517.398V156H521.417V154ZM513.38 154H509.361V156H513.38V154ZM505.343 154H501.324V156H505.343V154ZM497.306 154H493.287V156H497.306V154ZM489.269 154H485.25V156H489.269V154ZM481.231 154H477.213V156H481.231V154ZM473.194 154H469.176V156H473.194V154ZM465.157 154H461.139V156H465.157V154ZM457.12 154H453.102V156H457.12V154ZM449.083 154H445.065V156H449.083V154ZM441.046 154H437.028V156H441.046V154ZM433.009 154H431V156H433.009V154Z" fill="#EDEDF0" mask="url(#path-7-inside-1_7992_286)"/>
+<path d="M431 154.5C430.498 154.5 430.009 154.451 429.536 154.357L429.342 155.338C429.878 155.444 430.433 155.5 431 155.5V154.5ZM426.833 153.237C426.015 152.689 425.311 151.985 424.763 151.167L423.932 151.723C424.552 152.65 425.35 153.448 426.277 154.068L426.833 153.237ZM423.643 148.464C423.549 147.991 423.5 147.502 423.5 147H422.5C422.5 147.567 422.556 148.122 422.662 148.658L423.643 148.464ZM423.5 147V145.062H422.5V147H423.5ZM423.5 141.188V137.312H422.5V141.188H423.5ZM423.5 133.438V129.562H422.5V133.438H423.5ZM423.5 125.688V121.812H422.5V125.688H423.5ZM423.5 117.938V114.062H422.5V117.938H423.5ZM423.5 110.188V106.312H422.5V110.188H423.5ZM423.5 102.438V98.5625H422.5V102.438H423.5ZM423.5 94.6875V90.8125H422.5V94.6875H423.5ZM423.5 86.9375V83.0625H422.5V86.9375H423.5ZM423.5 79.1875V75.3125H422.5V79.1875H423.5ZM423.5 71.4375V67.5625H422.5V71.4375H423.5ZM423.5 63.6875V59.8125H422.5V63.6875H423.5ZM423.5 55.9375V52.0625H422.5V55.9375H423.5ZM423.5 48.1875V44.3125H422.5V48.1875H423.5ZM423.5 40.4375V36.5625H422.5V40.4375H423.5ZM423.5 32.6875V28.8125H422.5V32.6875H423.5ZM423.5 24.9375V23H422.5V24.9375H423.5ZM423.5 23C423.5 22.4985 423.549 22.0089 423.643 21.5357L422.662 21.3417C422.556 21.8784 422.5 22.433 422.5 23H423.5ZM424.763 18.8332C425.311 18.0151 426.015 17.3107 426.833 16.763L426.277 15.932C425.35 16.5524 424.552 17.3502 423.932 18.2769L424.763 18.8332ZM429.536 15.6428C430.009 15.5492 430.498 15.5 431 15.5V14.5C430.433 14.5 429.878 14.5556 429.342 14.6618L429.536 15.6428ZM431 15.5H433.009V14.5H431V15.5ZM437.028 15.5H441.046V14.5H437.028V15.5ZM445.065 15.5H449.083V14.5H445.065V15.5ZM453.102 15.5H457.12V14.5H453.102V15.5ZM461.139 15.5H465.157V14.5H461.139V15.5ZM469.176 15.5H473.194V14.5H469.176V15.5ZM477.213 15.5H481.231V14.5H477.213V15.5ZM485.25 15.5H489.269V14.5H485.25V15.5ZM493.287 15.5H497.306V14.5H493.287V15.5ZM501.324 15.5H505.343V14.5H501.324V15.5ZM509.361 15.5H513.38V14.5H509.361V15.5ZM517.398 15.5H521.417V14.5H517.398V15.5ZM525.435 15.5H529.454V14.5H525.435V15.5ZM533.472 15.5H537.491V14.5H533.472V15.5ZM541.509 15.5H545.528V14.5H541.509V15.5ZM549.546 15.5H553.565V14.5H549.546V15.5ZM557.583 15.5H561.602V14.5H557.583V15.5ZM565.62 15.5H569.639V14.5H565.62V15.5ZM573.657 15.5H577.676V14.5H573.657V15.5ZM581.694 15.5H585.713V14.5H581.694V15.5ZM589.731 15.5H593.75V14.5H589.731V15.5ZM597.769 15.5H601.787V14.5H597.769V15.5ZM605.806 15.5H609.824V14.5H605.806V15.5ZM613.843 15.5H617.861V14.5H613.843V15.5ZM621.88 15.5H625.898V14.5H621.88V15.5ZM629.917 15.5H633.935V14.5H629.917V15.5ZM637.954 15.5H641.972V14.5H637.954V15.5ZM645.991 15.5H648V14.5H645.991V15.5ZM648 15.5C648.502 15.5 648.991 15.5492 649.464 15.6428L649.658 14.6618C649.122 14.5556 648.567 14.5 648 14.5V15.5ZM652.167 16.763C652.985 17.3107 653.689 18.0151 654.237 18.8332L655.068 18.2769C654.448 17.3502 653.65 16.5524 652.723 15.932L652.167 16.763ZM655.357 21.5357C655.451 22.0089 655.5 22.4985 655.5 23H656.5C656.5 22.433 656.444 21.8784 656.338 21.3417L655.357 21.5357ZM655.5 23V24.9375H656.5V23H655.5ZM655.5 28.8125V32.6875H656.5V28.8125H655.5ZM655.5 36.5625V40.4375H656.5V36.5625H655.5ZM655.5 44.3125V48.1875H656.5V44.3125H655.5ZM655.5 52.0625V55.9375H656.5V52.0625H655.5ZM655.5 59.8125V63.6875H656.5V59.8125H655.5ZM655.5 67.5625V71.4375H656.5V67.5625H655.5ZM655.5 75.3125V79.1875H656.5V75.3125H655.5ZM655.5 83.0625V86.9375H656.5V83.0625H655.5ZM655.5 90.8125V94.6875H656.5V90.8125H655.5ZM655.5 98.5625V102.438H656.5V98.5625H655.5ZM655.5 106.312V110.188H656.5V106.312H655.5ZM655.5 114.062V117.938H656.5V114.062H655.5ZM655.5 121.812V125.688H656.5V121.812H655.5ZM655.5 129.562V133.438H656.5V129.562H655.5ZM655.5 137.312V141.188H656.5V137.312H655.5ZM655.5 145.062V147H656.5V145.062H655.5ZM655.5 147C655.5 147.502 655.451 147.991 655.357 148.464L656.338 148.658C656.444 148.122 656.5 147.567 656.5 147H655.5ZM654.237 151.167C653.689 151.985 652.985 152.689 652.167 153.237L652.723 154.068C653.65 153.448 654.448 152.65 655.068 151.723L654.237 151.167ZM649.464 154.357C648.991 154.451 648.502 154.5 648 154.5V155.5C648.567 155.5 649.122 155.444 649.658 155.338L649.464 154.357ZM648 154.5H645.991V155.5H648V154.5ZM641.972 154.5H637.954V155.5H641.972V154.5ZM633.935 154.5H629.917V155.5H633.935V154.5ZM625.898 154.5H621.88V155.5H625.898V154.5ZM617.861 154.5H613.843V155.5H617.861V154.5ZM609.824 154.5H605.806V155.5H609.824V154.5ZM601.787 154.5H597.769V155.5H601.787V154.5ZM593.75 154.5H589.731V155.5H593.75V154.5ZM585.713 154.5H581.694V155.5H585.713V154.5ZM577.676 154.5H573.657V155.5H577.676V154.5ZM569.639 154.5H565.62V155.5H569.639V154.5ZM561.602 154.5H557.583V155.5H561.602V154.5ZM553.565 154.5H549.546V155.5H553.565V154.5ZM545.528 154.5H541.509V155.5H545.528V154.5ZM537.491 154.5H533.472V155.5H537.491V154.5ZM529.454 154.5H525.435V155.5H529.454V154.5ZM521.417 154.5H517.398V155.5H521.417V154.5ZM513.38 154.5H509.361V155.5H513.38V154.5ZM505.343 154.5H501.324V155.5H505.343V154.5ZM497.306 154.5H493.287V155.5H497.306V154.5ZM489.269 154.5H485.25V155.5H489.269V154.5ZM481.231 154.5H477.213V155.5H481.231V154.5ZM473.194 154.5H469.176V155.5H473.194V154.5ZM465.157 154.5H461.139V155.5H465.157V154.5ZM457.12 154.5H453.102V155.5H457.12V154.5ZM449.083 154.5H445.065V155.5H449.083V154.5ZM441.046 154.5H437.028V155.5H441.046V154.5ZM433.009 154.5H431V155.5H433.009V154.5ZM431 154C430.531 154 430.074 153.954 429.633 153.867L429.245 155.829C429.813 155.941 430.4 156 431 156V154ZM427.111 152.822C426.348 152.31 425.69 151.652 425.178 150.889L423.517 152.001C424.173 152.982 425.018 153.827 425.999 154.483L427.111 152.822ZM424.133 148.367C424.046 147.926 424 147.469 424 147H422C422 147.6 422.059 148.187 422.171 148.755L424.133 148.367ZM424 147V145.062H422V147H424ZM424 141.188V137.312H422V141.188H424ZM424 133.438V129.562H422V133.438H424ZM424 125.688V121.812H422V125.688H424ZM424 117.938V114.062H422V117.938H424ZM424 110.188V106.312H422V110.188H424ZM424 102.438V98.5625H422V102.438H424ZM424 94.6875V90.8125H422V94.6875H424ZM424 86.9375V83.0625H422V86.9375H424ZM424 79.1875V75.3125H422V79.1875H424ZM424 71.4375V67.5625H422V71.4375H424ZM424 63.6875V59.8125H422V63.6875H424ZM424 55.9375V52.0625H422V55.9375H424ZM424 48.1875V44.3125H422V48.1875H424ZM424 40.4375V36.5625H422V40.4375H424ZM424 32.6875V28.8125H422V32.6875H424ZM424 24.9375V23H422V24.9375H424ZM424 23C424 22.5312 424.046 22.0742 424.133 21.6328L422.171 21.2446C422.059 21.8132 422 22.4002 422 23H424ZM425.178 19.1114C425.69 18.3476 426.348 17.6898 427.111 17.1784L425.999 15.5165C425.018 16.1733 424.173 17.0177 423.517 17.9988L425.178 19.1114ZM429.633 16.1333C430.074 16.0459 430.531 16 431 16V14C430.4 14 429.813 14.0588 429.245 14.1713L429.633 16.1333ZM431 16H433.009V14H431V16ZM437.028 16H441.046V14H437.028V16ZM445.065 16H449.083V14H445.065V16ZM453.102 16H457.12V14H453.102V16ZM461.139 16H465.157V14H461.139V16ZM469.176 16H473.194V14H469.176V16ZM477.213 16H481.231V14H477.213V16ZM485.25 16H489.269V14H485.25V16ZM493.287 16H497.306V14H493.287V16ZM501.324 16H505.343V14H501.324V16ZM509.361 16H513.38V14H509.361V16ZM517.398 16H521.417V14H517.398V16ZM525.435 16H529.454V14H525.435V16ZM533.472 16H537.491V14H533.472V16ZM541.509 16H545.528V14H541.509V16ZM549.546 16H553.565V14H549.546V16ZM557.583 16H561.602V14H557.583V16ZM565.62 16H569.639V14H565.62V16ZM573.657 16H577.676V14H573.657V16ZM581.694 16H585.713V14H581.694V16ZM589.731 16H593.75V14H589.731V16ZM597.769 16H601.787V14H597.769V16ZM605.806 16H609.824V14H605.806V16ZM613.843 16H617.861V14H613.843V16ZM621.88 16H625.898V14H621.88V16ZM629.917 16H633.935V14H629.917V16ZM637.954 16H641.972V14H637.954V16ZM645.991 16H648V14H645.991V16ZM648 16C648.469 16 648.926 16.0459 649.367 16.1333L649.755 14.1713C649.187 14.0588 648.6 14 648 14V16ZM651.889 17.1784C652.652 17.6898 653.31 18.3476 653.822 19.1114L655.483 17.9988C654.827 17.0177 653.982 16.1733 653.001 15.5165L651.889 17.1784ZM654.867 21.6328C654.954 22.0742 655 22.5312 655 23H657C657 22.4002 656.941 21.8132 656.829 21.2446L654.867 21.6328ZM655 23V24.9375H657V23H655ZM655 28.8125V32.6875H657V28.8125H655ZM655 36.5625V40.4375H657V36.5625H655ZM655 44.3125V48.1875H657V44.3125H655ZM655 52.0625V55.9375H657V52.0625H655ZM655 59.8125V63.6875H657V59.8125H655ZM655 67.5625V71.4375H657V67.5625H655ZM655 75.3125V79.1875H657V75.3125H655ZM655 83.0625V86.9375H657V83.0625H655ZM655 90.8125V94.6875H657V90.8125H655ZM655 98.5625V102.438H657V98.5625H655ZM655 106.312V110.188H657V106.312H655ZM655 114.062V117.938H657V114.062H655ZM655 121.812V125.688H657V121.812H655ZM655 129.562V133.438H657V129.562H655ZM655 137.312V141.188H657V137.312H655ZM655 145.062V147H657V145.062H655ZM655 147C655 147.469 654.954 147.926 654.867 148.367L656.829 148.755C656.941 148.187 657 147.6 657 147H655ZM653.822 150.889C653.31 151.652 652.652 152.31 651.889 152.822L653.001 154.483C653.982 153.827 654.827 152.982 655.483 152.001L653.822 150.889ZM649.367 153.867C648.926 153.954 648.469 154 648 154V156C648.6 156 649.187 155.941 649.755 155.829L649.367 153.867ZM648 154H645.991V156H648V154ZM641.972 154H637.954V156H641.972V154ZM633.935 154H629.917V156H633.935V154ZM625.898 154H621.88V156H625.898V154ZM617.861 154H613.843V156H617.861V154ZM609.824 154H605.806V156H609.824V154ZM601.787 154H597.769V156H601.787V154ZM593.75 154H589.731V156H593.75V154ZM585.713 154H581.694V156H585.713V154ZM577.676 154H573.657V156H577.676V154ZM569.639 154H565.62V156H569.639V154ZM561.602 154H557.583V156H561.602V154ZM553.565 154H549.546V156H553.565V154ZM545.528 154H541.509V156H545.528V154ZM537.491 154H533.472V156H537.491V154ZM529.454 154H525.435V156H529.454V154ZM521.417 154H517.398V156H521.417V154ZM513.38 154H509.361V156H513.38V154ZM505.343 154H501.324V156H505.343V154ZM497.306 154H493.287V156H497.306V154ZM489.269 154H485.25V156H489.269V154ZM481.231 154H477.213V156H481.231V154ZM473.194 154H469.176V156H473.194V154ZM465.157 154H461.139V156H465.157V154ZM457.12 154H453.102V156H457.12V154ZM449.083 154H445.065V156H449.083V154ZM441.046 154H437.028V156H441.046V154ZM433.009 154H431V156H433.009V154Z" fill="url(#paint4_linear_7992_286)" fill-opacity="0.4" mask="url(#path-7-inside-1_7992_286)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M537.273 65.6465C529.707 65.6465 527.241 71.5461 526.949 75.4726C526.926 75.7708 526.915 75.9199 526.864 76.0146C526.813 76.1073 526.759 76.1615 526.667 76.2127C526.573 76.265 526.422 76.2773 526.12 76.3019C524.028 76.473 519 77.5958 519 84.9641C519 91.9185 525.75 93.0131 529.124 92.6912H535.249C535.529 92.6912 535.669 92.6912 535.776 92.6367C535.87 92.5887 535.947 92.5122 535.995 92.4182C536.049 92.3112 536.049 92.1712 536.049 91.8912V87.6833C536.049 87.4033 536.049 87.2633 535.995 87.1563C535.947 87.0622 535.87 86.9857 535.776 86.9378C535.669 86.8833 535.529 86.8833 535.249 86.8833H534.412C533.879 86.8833 533.613 86.8833 533.476 86.7741C533.357 86.6791 533.288 86.5351 533.288 86.3829C533.288 86.2078 533.454 85.9998 533.787 85.5838L536.049 82.7541C536.049 82.7537 536.049 82.7532 536.049 82.7526V82.752C536.049 82.751 536.05 82.7502 536.051 82.7502C536.052 82.7502 536.052 82.75 536.052 82.7496L538.905 79.1813C539.119 78.9141 539.225 78.7805 539.354 78.7321C539.468 78.6897 539.592 78.6897 539.705 78.7321C539.834 78.7805 539.941 78.9141 540.155 79.1813L543.007 82.7496C543.008 82.75 543.008 82.7502 543.009 82.7502C543.01 82.7502 543.01 82.751 543.01 82.7519V82.7526C543.01 82.7531 543.011 82.7536 543.011 82.754L545.273 85.5838C545.606 85.9998 545.772 86.2078 545.772 86.3829C545.772 86.5351 545.703 86.6791 545.584 86.7741C545.447 86.8833 545.181 86.8833 544.648 86.8833H543.81C543.53 86.8833 543.39 86.8833 543.283 86.9378C543.189 86.9857 543.113 87.0622 543.065 87.1563C543.01 87.2633 543.01 87.4033 543.01 87.6833V91.8912C543.01 92.1712 543.01 92.3112 543.065 92.4182C543.113 92.5122 543.189 92.5887 543.283 92.6367C543.39 92.6912 543.53 92.6912 543.81 92.6912H550.294C553.668 93.0131 560.418 91.9185 560.418 84.9641C560.418 81.3075 557.815 79.0928 554.855 77.8147C554.64 77.7216 554.532 77.6751 554.466 77.6121C554.402 77.5499 554.368 77.4967 554.34 77.4118C554.311 77.3257 554.315 77.1993 554.323 76.9463C554.326 76.8747 554.327 76.8027 554.327 76.7304C554.327 73.3296 551.6 70.5726 548.236 70.5726C547.753 70.5726 547.284 70.6294 546.833 70.7368C546.557 70.8027 546.418 70.8357 546.323 70.8214C546.226 70.807 546.168 70.7823 546.091 70.7226C546.014 70.6635 545.947 70.5485 545.812 70.3184C544.329 67.7958 541.734 65.6465 537.273 65.6465Z" fill="#EDEDF0"/>
+<path d="M489 107C489 105.895 489.895 105 491 105H587C588.105 105 589 105.895 589 107C589 108.105 588.105 109 587 109H491C489.895 109 489 108.105 489 107Z" fill="#EDEDF0" fill-opacity="0.64"/>
+<path d="M489 107C489 105.895 489.895 105 491 105H507C508.105 105 509 105.895 509 107C509 108.105 508.105 109 507 109H491C489.895 109 489 108.105 489 107Z" fill="#E4E4E7"/>
+<circle cx="433.5" cy="25.5" r="2.5" fill="#EDEDF0"/>
+<circle cx="441.5" cy="25.5" r="2.5" fill="#EDEDF0"/>
+<circle cx="449.5" cy="25.5" r="2.5" fill="#EDEDF0"/>
+<rect opacity="0.5" x="458" y="23" width="190" height="5" rx="2.5" fill="#EDEDF0"/>
+</g>
+<defs>
+<filter id="filter0_f_7992_286" x="410.856" y="114.834" width="192.533" height="67.251" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_7992_286"/>
+</filter>
+<filter id="filter1_f_7992_286" x="390.908" y="56.2217" width="331.168" height="149.91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_7992_286"/>
+</filter>
+<filter id="filter2_f_7992_286" x="378.458" y="64.54" width="108.391" height="115.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_7992_286"/>
+</filter>
+<filter id="filter3_f_7992_286" x="350.996" y="37.7314" width="194.792" height="183.568" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_7992_286"/>
+</filter>
+<clipPath id="bgblur_1_7992_286_clip_path" transform="translate(-412 -4)"><rect x="416" y="8" width="247" height="154" rx="12"/>
+</clipPath><filter id="filter5_d_7992_286" x="416.75" y="15" width="245.5" height="152.5" 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="6.25"/>
+<feGaussianBlur stdDeviation="3.125"/>
+<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.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7992_286"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7992_286" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_7992_286" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(461.741 148.383) rotate(8.92235) scale(82.7867 24.1685)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_7992_286" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(556.493 131.176) rotate(-180) scale(131.493 56.107)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_7992_286" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419.781 152.662) rotate(-135.059) scale(30.2949 13.738)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F97066" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_7992_286" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(426.796 118.893) rotate(64.3713) scale(32.8381 36.5701)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint4_linear_7992_286" x1="440.496" y1="171.42" x2="523.242" y2="118.063" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6054"/>
+<stop offset="0.342973" stop-color="#FD366E"/>
+<stop offset="1" stop-color="#EDEDF0"/>
+</linearGradient>
+<clipPath id="clip0_7992_286">
+<rect width="1080" height="184" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/images/onboarding/appwrite.svg b/static/images/onboarding/appwrite.svg
new file mode 100644
index 000000000..130ff3445
--- /dev/null
+++ b/static/images/onboarding/appwrite.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#FD366E"/>
+    <path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#FD366E"/>
+</svg>
diff --git a/static/images/onboarding/icon1-dark.svg b/static/images/onboarding/icon1-dark.svg
new file mode 100644
index 000000000..b3135f39f
--- /dev/null
+++ b/static/images/onboarding/icon1-dark.svg
@@ -0,0 +1,45 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_7190_4392)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8188 25.3225C24.61 23.8758 26.5142 20.9846 26.5142 17.6538C26.5142 12.8745 22.5935 9 17.7571 9C12.9207 9 9 12.8745 9 17.6538C9 20.9661 10.8831 23.8438 13.6491 25.2984C13.3113 25.4172 12.9775 25.551 12.6486 25.6996C11.0471 26.4233 9.59192 27.484 8.36619 28.8212C7.14046 30.1583 6.16815 31.7458 5.50479 33.4929C4.84143 35.24 4.5 37.1125 4.5 39.0035H17.7H30.9C30.9 37.1125 30.5586 35.24 29.8952 33.4929C29.2318 31.7458 28.2595 30.1583 27.0338 28.8212C25.8081 27.484 24.3529 26.4233 22.7514 25.6996C22.4445 25.561 22.1335 25.4352 21.8188 25.3225Z" fill="url(#paint0_linear_7190_4392)"/>
+    </g>
+    <g filter="url(#filter1_bi_7190_4392)">
+        <mask id="path-2-inside-1_7190_4392" fill="white">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M34.7933 25.3004C37.271 23.7261 38.9122 20.9777 38.9122 17.8505C38.9122 12.9625 34.9024 9 29.9561 9C25.0098 9 21 12.9625 21 17.8505C21 20.9924 22.6566 23.7518 25.1538 25.3225C25.0466 25.3674 24.94 25.4139 24.8338 25.4619C23.1959 26.202 21.7076 27.2868 20.4541 28.6543C19.2005 30.0219 18.2061 31.6454 17.5276 33.4322C16.8492 35.219 16.5 37.1341 16.5 39.0681L30 39.0681H43.5C43.5 37.1341 43.1508 35.219 42.4724 33.4322C41.7939 31.6454 40.7995 30.0219 39.5459 28.6543C38.2924 27.2868 36.8041 26.202 35.1662 25.4619C35.0426 25.406 34.9183 25.3522 34.7933 25.3004Z"/>
+        </mask>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M34.7933 25.3004C37.271 23.7261 38.9122 20.9777 38.9122 17.8505C38.9122 12.9625 34.9024 9 29.9561 9C25.0098 9 21 12.9625 21 17.8505C21 20.9924 22.6566 23.7518 25.1538 25.3225C25.0466 25.3674 24.94 25.4139 24.8338 25.4619C23.1959 26.202 21.7076 27.2868 20.4541 28.6543C19.2005 30.0219 18.2061 31.6454 17.5276 33.4322C16.8492 35.219 16.5 37.1341 16.5 39.0681L30 39.0681H43.5C43.5 37.1341 43.1508 35.219 42.4724 33.4322C41.7939 31.6454 40.7995 30.0219 39.5459 28.6543C38.2924 27.2868 36.8041 26.202 35.1662 25.4619C35.0426 25.406 34.9183 25.3522 34.7933 25.3004Z" fill="url(#paint1_linear_7190_4392)" fill-opacity="0.32"/>
+        <path d="M34.7933 25.3004L34.6861 25.1316L34.3613 25.3379L34.7168 25.4852L34.7933 25.3004ZM25.1538 25.3225L25.2312 25.5069L25.586 25.358L25.2603 25.1532L25.1538 25.3225ZM24.8338 25.4619L24.7514 25.2796H24.7514L24.8338 25.4619ZM20.4541 28.6543L20.3066 28.5192L20.4541 28.6543ZM17.5276 33.4322L17.3406 33.3612H17.3406L17.5276 33.4322ZM16.5 39.0681H16.3V39.2681H16.5L16.5 39.0681ZM30 39.0681L30 38.8681L30 39.0681ZM43.5 39.0681V39.2681H43.7V39.0681H43.5ZM42.4724 33.4322L42.2854 33.5032L42.4724 33.4322ZM39.5459 28.6543L39.6934 28.5192L39.5459 28.6543ZM35.1662 25.4619L35.0839 25.6441L35.1662 25.4619ZM38.7122 17.8505C38.7122 20.9057 37.109 23.592 34.6861 25.1316L34.9006 25.4692C37.433 23.8601 39.1122 21.0497 39.1122 17.8505H38.7122ZM29.9561 9.2C34.7942 9.2 38.7122 13.0752 38.7122 17.8505H39.1122C39.1122 12.8498 35.0106 8.8 29.9561 8.8V9.2ZM21.2 17.8505C21.2 13.0752 25.118 9.2 29.9561 9.2V8.8C24.9016 8.8 20.8 12.8498 20.8 17.8505H21.2ZM25.2603 25.1532C22.8182 23.6172 21.2 20.9201 21.2 17.8505H20.8C20.8 21.0647 22.495 23.8865 25.0473 25.4918L25.2603 25.1532ZM25.0764 25.138C24.9676 25.1837 24.8593 25.2309 24.7514 25.2796L24.9161 25.6441C25.0207 25.5969 25.1257 25.5511 25.2312 25.5069L25.0764 25.138ZM24.7514 25.2796C23.0881 26.0312 21.5779 27.1324 20.3066 28.5192L20.6015 28.7895C21.8374 27.4412 23.3037 26.3727 24.9161 25.6441L24.7514 25.2796ZM20.3066 28.5192C19.0354 29.906 18.0278 31.5515 17.3406 33.3612L17.7146 33.5032C18.3843 31.7394 19.3655 30.1378 20.6015 28.7895L20.3066 28.5192ZM17.3406 33.3612C16.6535 35.171 16.3 37.1101 16.3 39.0681H16.7C16.7 37.158 17.0449 35.267 17.7146 33.5032L17.3406 33.3612ZM16.5 39.2681L30 39.2681L30 38.8681L16.5 38.8681L16.5 39.2681ZM30 39.2681H43.5V38.8681H30V39.2681ZM43.7 39.0681C43.7 37.1101 43.3465 35.171 42.6593 33.3612L42.2854 33.5032C42.9551 35.267 43.3 37.158 43.3 39.0681H43.7ZM42.6593 33.3612C41.9722 31.5515 40.9646 29.906 39.6934 28.5192L39.3985 28.7895C40.6345 30.1378 41.6157 31.7394 42.2854 33.5032L42.6593 33.3612ZM39.6934 28.5192C38.4221 27.1324 36.9119 26.0312 35.2486 25.2796L35.0839 25.6441C36.6963 26.3727 38.1626 27.4412 39.3985 28.7895L39.6934 28.5192ZM35.2486 25.2796C35.123 25.2229 34.9968 25.1682 34.8699 25.1156L34.7168 25.4852C34.8398 25.5361 34.9621 25.5891 35.0839 25.6441L35.2486 25.2796Z" fill="url(#paint2_linear_7190_4392)" mask="url(#path-2-inside-1_7190_4392)"/>
+    </g>
+    <defs>
+        <filter id="filter0_b_7190_4392" x="-61.8333" y="-57.3333" width="159.067" height="162.67" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4392"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4392" result="shape"/>
+        </filter>
+        <filter id="filter1_bi_7190_4392" x="12.2333" y="4.73333" width="35.5333" height="38.6014" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4392"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4392" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_7190_4392"/>
+        </filter>
+        <linearGradient id="paint0_linear_7190_4392" x1="24.4512" y1="11.25" x2="4.88624" y2="38.9541" gradientUnits="userSpaceOnUse">
+            <stop offset="0.546815" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_7190_4392" x1="20.0249" y1="9" x2="43.0191" y2="42.2127" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.432292" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_7190_4392" x1="16.707" y1="26.2015" x2="43.6912" y2="28.5924" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon1.svg b/static/images/onboarding/icon1.svg
new file mode 100644
index 000000000..bc2ae791c
--- /dev/null
+++ b/static/images/onboarding/icon1.svg
@@ -0,0 +1,120 @@
+<svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_6759_39933)">
+        <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M21.8188 25.3225C24.61 23.8758 26.5142 20.9846 26.5142 17.6538C26.5142 12.8745 22.5935 9 17.7571 9C12.9207 9 9 12.8745 9 17.6538C9 20.9661 10.8831 23.8438 13.6491 25.2984C13.3113 25.4172 12.9775 25.551 12.6486 25.6996C11.0471 26.4233 9.59192 27.484 8.36619 28.8212C7.14046 30.1583 6.16815 31.7458 5.50479 33.4929C4.84143 35.24 4.5 37.1125 4.5 39.0035H17.7H30.9C30.9 37.1125 30.5586 35.24 29.8952 33.4929C29.2318 31.7458 28.2595 30.1583 27.0338 28.8212C25.8081 27.484 24.3529 26.4233 22.7514 25.6996C22.4445 25.561 22.1335 25.4352 21.8188 25.3225Z"
+                fill="url(#paint0_linear_6759_39933)" />
+    </g>
+    <g filter="url(#filter1_bi_6759_39933)">
+        <mask id="path-2-inside-1_6759_39933" fill="white">
+            <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M34.7932 25.3005C37.271 23.7262 38.9122 20.9777 38.9122 17.8505C38.9122 12.9625 34.9024 9 29.9561 9C25.0098 9 21 12.9625 21 17.8505C21 20.9924 22.6567 23.7519 25.1539 25.3225C25.0467 25.3675 24.94 25.414 24.8338 25.462C23.1959 26.2021 21.7076 27.2869 20.4541 28.6544C19.2005 30.022 18.2061 31.6455 17.5276 33.4323C16.8492 35.2191 16.5 37.1342 16.5 39.0682L30 39.0682H43.5C43.5 37.1342 43.1508 35.2191 42.4724 33.4323C41.7939 31.6455 40.7995 30.022 39.5459 28.6544C38.2924 27.2869 36.8041 26.2021 35.1662 25.462C35.0425 25.4061 34.9182 25.3522 34.7932 25.3005Z" />
+        </mask>
+        <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M34.7932 25.3005C37.271 23.7262 38.9122 20.9777 38.9122 17.8505C38.9122 12.9625 34.9024 9 29.9561 9C25.0098 9 21 12.9625 21 17.8505C21 20.9924 22.6567 23.7519 25.1539 25.3225C25.0467 25.3675 24.94 25.414 24.8338 25.462C23.1959 26.2021 21.7076 27.2869 20.4541 28.6544C19.2005 30.022 18.2061 31.6455 17.5276 33.4323C16.8492 35.2191 16.5 37.1342 16.5 39.0682L30 39.0682H43.5C43.5 37.1342 43.1508 35.2191 42.4724 33.4323C41.7939 31.6455 40.7995 30.022 39.5459 28.6544C38.2924 27.2869 36.8041 26.2021 35.1662 25.462C35.0425 25.4061 34.9182 25.3522 34.7932 25.3005Z"
+                fill="url(#paint1_linear_6759_39933)"
+                fill-opacity="0.64" />
+        <path
+                d="M34.7932 25.3005L34.686 25.1316L34.3613 25.338L34.7167 25.4852L34.7932 25.3005ZM25.1539 25.3225L25.2313 25.5069L25.5861 25.3581L25.2604 25.1532L25.1539 25.3225ZM24.8338 25.462L24.7514 25.2797L24.8338 25.462ZM20.4541 28.6544L20.3066 28.5193L20.4541 28.6544ZM17.5276 33.4323L17.3406 33.3613H17.3406L17.5276 33.4323ZM16.5 39.0682H16.3V39.2682H16.5L16.5 39.0682ZM30 39.0682L30 38.8682L30 39.0682ZM43.5 39.0682V39.2682H43.7V39.0682H43.5ZM42.4724 33.4323L42.2854 33.5033L42.4724 33.4323ZM39.5459 28.6544L39.6934 28.5193L39.5459 28.6544ZM35.1662 25.462L35.2486 25.2797H35.2486L35.1662 25.462ZM38.7122 17.8505C38.7122 20.9058 37.109 23.5921 34.686 25.1316L34.9005 25.4693C37.4329 23.8602 39.1122 21.0497 39.1122 17.8505H38.7122ZM29.9561 9.2C34.7942 9.2 38.7122 13.0752 38.7122 17.8505H39.1122C39.1122 12.8498 35.0106 8.8 29.9561 8.8V9.2ZM21.2 17.8505C21.2 13.0752 25.118 9.2 29.9561 9.2V8.8C24.9016 8.8 20.8 12.8498 20.8 17.8505H21.2ZM25.2604 25.1532C22.8183 23.6173 21.2 20.9201 21.2 17.8505H20.8C20.8 21.0647 22.4951 23.8865 25.0474 25.4918L25.2604 25.1532ZM25.0765 25.1381C24.9677 25.1838 24.8593 25.231 24.7514 25.2797L24.9161 25.6442C25.0207 25.597 25.1258 25.5512 25.2313 25.5069L25.0765 25.1381ZM24.7514 25.2797C23.0881 26.0313 21.5779 27.1324 20.3066 28.5193L20.6015 28.7896C21.8374 27.4413 23.3037 26.3728 24.9161 25.6442L24.7514 25.2797ZM20.3066 28.5193C19.0354 29.9061 18.0278 31.5515 17.3406 33.3613L17.7146 33.5033C18.3843 31.7395 19.3655 30.1379 20.6015 28.7896L20.3066 28.5193ZM17.3406 33.3613C16.6535 35.1711 16.3 37.1102 16.3 39.0682H16.7C16.7 37.1581 17.0449 35.2671 17.7146 33.5033L17.3406 33.3613ZM16.5 39.2682L30 39.2682L30 38.8682L16.5 38.8682L16.5 39.2682ZM30 39.2682H43.5V38.8682H30V39.2682ZM43.7 39.0682C43.7 37.1102 43.3465 35.1711 42.6593 33.3613L42.2854 33.5033C42.9551 35.2671 43.3 37.1581 43.3 39.0682H43.7ZM42.6593 33.3613C41.9722 31.5515 40.9646 29.9061 39.6934 28.5193L39.3985 28.7896C40.6345 30.1379 41.6157 31.7395 42.2854 33.5033L42.6593 33.3613ZM39.6934 28.5193C38.4221 27.1324 36.9119 26.0313 35.2486 25.2797L35.0839 25.6442C36.6963 26.3728 38.1626 27.4413 39.3985 28.7896L39.6934 28.5193ZM35.2486 25.2797C35.123 25.2229 34.9967 25.1683 34.8698 25.1157L34.7167 25.4852C34.8397 25.5362 34.9621 25.5892 35.0839 25.6442L35.2486 25.2797Z"
+                fill="url(#paint2_linear_6759_39933)"
+                mask="url(#path-2-inside-1_6759_39933)" />
+    </g>
+    <defs>
+        <filter
+                id="filter0_b_6759_39933"
+                x="-61.8333"
+                y="-57.3333"
+                width="159.067"
+                height="162.67"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667" />
+            <feComposite
+                    in2="SourceAlpha"
+                    operator="in"
+                    result="effect1_backgroundBlur_6759_39933" />
+            <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_backgroundBlur_6759_39933"
+                    result="shape" />
+        </filter>
+        <filter
+                id="filter1_bi_6759_39933"
+                x="12.2333"
+                y="4.73333"
+                width="35.5333"
+                height="38.6016"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333" />
+            <feComposite
+                    in2="SourceAlpha"
+                    operator="in"
+                    result="effect1_backgroundBlur_6759_39933" />
+            <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_backgroundBlur_6759_39933"
+                    result="shape" />
+            <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="1.6" />
+            <feGaussianBlur stdDeviation="1.6" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0" />
+            <feBlend
+                    mode="normal"
+                    in2="shape"
+                    result="effect2_innerShadow_6759_39933" />
+        </filter>
+        <linearGradient
+                id="paint0_linear_6759_39933"
+                x1="24.4512"
+                y1="11.25"
+                x2="4.88624"
+                y2="38.9541"
+                gradientUnits="userSpaceOnUse">
+            <stop offset="0.546815" stop-color="#FD366E" />
+            <stop offset="1" stop-color="#FE9567" />
+        </linearGradient>
+        <linearGradient
+                id="paint1_linear_6759_39933"
+                x1="19.7192"
+                y1="9"
+                x2="42.0864"
+                y2="41.9702"
+                gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0" />
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64" />
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+                id="paint2_linear_6759_39933"
+                x1="16.707"
+                y1="26.2015"
+                x2="43.6912"
+                y2="28.5924"
+                gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/static/images/onboarding/icon2-dark.svg b/static/images/onboarding/icon2-dark.svg
new file mode 100644
index 000000000..7d08bf8b0
--- /dev/null
+++ b/static/images/onboarding/icon2-dark.svg
@@ -0,0 +1,62 @@
+<svg width="52" height="48" viewBox="0 0 52 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_7190_4397)">
+        <path d="M11.5377 27.0348C11.8515 26.3701 12.0085 26.0378 12.2491 25.7945C12.4619 25.5795 12.7207 25.4155 13.006 25.3149C13.3287 25.2012 13.6962 25.2012 14.4313 25.2012L37.5758 25.2012C38.3108 25.2012 38.6783 25.2012 39.0011 25.3149C39.2864 25.4155 39.5452 25.5795 39.7579 25.7945C39.9986 26.0378 40.1555 26.3701 40.4694 27.0348L44.2472 35.0348C44.9635 36.5517 45.3217 37.3102 45.221 37.9246C45.133 38.4613 44.8303 38.9391 44.3825 39.2478C43.8699 39.6012 43.0311 39.6012 41.3536 39.6012L10.6535 39.6012C8.97591 39.6012 8.13713 39.6012 7.62453 39.2478C7.17675 38.9391 6.87401 38.4613 6.78606 37.9246C6.68538 37.3102 7.04355 36.5517 7.75988 35.0348L11.5377 27.0348Z" fill="url(#paint0_linear_7190_4397)" fill-opacity="0.32"/>
+        <path d="M11.6507 27.0881C11.9685 26.415 12.116 26.1068 12.338 25.8824C12.5374 25.6808 12.7801 25.5271 13.0475 25.4328C13.3452 25.3279 13.6869 25.3262 14.4313 25.3262L37.5758 25.3262C38.3201 25.3262 38.6618 25.3279 38.9595 25.4328C39.227 25.5271 39.4696 25.6808 39.6691 25.8824C39.8911 26.1068 40.0385 26.415 40.3563 27.0881L44.1341 35.0881C44.4933 35.8488 44.7589 36.4116 44.923 36.861C45.0871 37.3104 45.1427 37.6291 45.0976 37.9044C45.0152 38.4075 44.7313 38.8554 44.3116 39.1449C44.0819 39.3032 43.77 39.389 43.2935 39.4325C42.8171 39.476 42.1948 39.4762 41.3536 39.4762L10.6535 39.4762C9.81226 39.4762 9.18995 39.476 8.71351 39.4325C8.23706 39.389 7.92515 39.3032 7.69548 39.1449C7.27569 38.8554 6.99187 38.4075 6.90942 37.9044C6.86431 37.6291 6.91993 37.3104 7.08401 36.861C7.24809 36.4116 7.51371 35.8488 7.87291 35.0881L11.6507 27.0881Z" stroke="url(#paint1_linear_7190_4397)" stroke-width="0.25"/>
+    </g>
+    <g filter="url(#filter1_b_7190_4397)">
+        <path d="M11.5377 17.4342C11.8515 16.7695 12.0085 16.4372 12.2491 16.1939C12.4619 15.9789 12.7207 15.8149 13.006 15.7143C13.3287 15.6006 13.6962 15.6006 14.4313 15.6006L37.5758 15.6006C38.3108 15.6006 38.6783 15.6006 39.0011 15.7143C39.2864 15.8149 39.5452 15.9789 39.7579 16.1939C39.9986 16.4372 40.1555 16.7695 40.4694 17.4342L44.2472 25.4342C44.9635 26.9511 45.3217 27.7096 45.221 28.324C45.133 28.8607 44.8303 29.3385 44.3825 29.6472C43.8699 30.0006 43.0311 30.0006 41.3536 30.0006L10.6535 30.0006C8.97591 30.0006 8.13713 30.0006 7.62453 29.6472C7.17675 29.3385 6.87401 28.8607 6.78606 28.324C6.68538 27.7096 7.04355 26.9511 7.75988 25.4342L11.5377 17.4342Z" fill="url(#paint2_linear_7190_4397)" fill-opacity="0.32"/>
+        <path d="M11.6507 17.4875C11.9685 16.8145 12.116 16.5062 12.338 16.2819C12.5374 16.0802 12.7801 15.9265 13.0475 15.8322C13.3452 15.7273 13.6869 15.7256 14.4313 15.7256L37.5758 15.7256C38.3201 15.7256 38.6618 15.7273 38.9595 15.8322C39.227 15.9265 39.4696 16.0802 39.6691 16.2819C39.8911 16.5062 40.0385 16.8145 40.3563 17.4875L44.1341 25.4875C44.4933 26.2482 44.7589 26.811 44.923 27.2604C45.0871 27.7098 45.1427 28.0285 45.0976 28.3038C45.0152 28.807 44.7313 29.2549 44.3116 29.5443C44.0819 29.7026 43.77 29.7884 43.2935 29.8319C42.8171 29.8755 42.1948 29.8756 41.3536 29.8756L10.6535 29.8756C9.81226 29.8756 9.18995 29.8755 8.71351 29.8319C8.23706 29.7884 7.92515 29.7026 7.69548 29.5443C7.27569 29.2549 6.99187 28.807 6.90942 28.3038C6.86431 28.0285 6.91993 27.7098 7.08401 27.2604C7.24809 26.811 7.51371 26.2482 7.87291 25.4875L11.6507 17.4875Z" stroke="url(#paint3_linear_7190_4397)" stroke-width="0.25"/>
+    </g>
+    <g filter="url(#filter2_d_7190_4397)">
+        <path d="M11.5377 7.83358C11.8515 7.16892 12.0085 6.83658 12.2491 6.59335C12.4619 6.3783 12.7207 6.21432 13.006 6.11375C13.3287 6 13.6962 6 14.4313 6L37.5758 6C38.3108 6 38.6783 6 39.0011 6.11375C39.2864 6.21432 39.5452 6.3783 39.7579 6.59335C39.9986 6.83658 40.1555 7.16892 40.4694 7.83358L44.2472 15.8336C44.9635 17.3505 45.3217 18.109 45.221 18.7234C45.133 19.2601 44.8303 19.7379 44.3825 20.0466C43.8699 20.4 43.0311 20.4 41.3536 20.4L10.6535 20.4C8.97591 20.4 8.13713 20.4 7.62453 20.0466C7.17675 19.7379 6.87401 19.2601 6.78606 18.7234C6.68538 18.109 7.04355 17.3505 7.75988 15.8336L11.5377 7.83358Z" fill="url(#paint4_linear_7190_4397)" shape-rendering="crispEdges"/>
+    </g>
+    <defs>
+        <filter id="filter0_b_7190_4397" x="-1.23059" y="17.2012" width="54.4683" height="30.3999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4397"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4397" result="shape"/>
+        </filter>
+        <filter id="filter1_b_7190_4397" x="-1.23059" y="7.60059" width="54.4683" height="30.3999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4397"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4397" result="shape"/>
+        </filter>
+        <filter id="filter2_d_7190_4397" x="0.769409" y="2" width="50.4683" height="26.3999" 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="2"/>
+            <feGaussianBlur stdDeviation="3"/>
+            <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.08 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7190_4397"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7190_4397" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_7190_4397" x1="34.4012" y1="43.2012" x2="34.4012" y2="29.4012" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.64"/>
+            <stop offset="0.438454" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_7190_4397" x1="5.45453" y1="33.2735" x2="43.4573" y2="44.1161" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_7190_4397" x1="34.4012" y1="33.6006" x2="34.4012" y2="19.8006" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.64"/>
+            <stop offset="0.438454" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_7190_4397" x1="5.45453" y1="23.6729" x2="43.4573" y2="34.5155" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_7190_4397" x1="35.75" y1="6" x2="35.75" y2="20.25" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0.32"/>
+            <stop offset="0.423207" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FD5E6B"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon2.svg b/static/images/onboarding/icon2.svg
new file mode 100644
index 000000000..94cdfd9c8
--- /dev/null
+++ b/static/images/onboarding/icon2.svg
@@ -0,0 +1,60 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bi_6759_39938)">
+        <path d="M9.53766 27.0348C9.85153 26.3701 10.0085 26.0378 10.2491 25.7945C10.4619 25.5795 10.7207 25.4155 11.006 25.3149C11.3287 25.2012 11.6962 25.2012 12.4313 25.2012L35.5758 25.2012C36.3108 25.2012 36.6783 25.2012 37.0011 25.3149C37.2864 25.4155 37.5452 25.5795 37.7579 25.7945C37.9986 26.0378 38.1555 26.3701 38.4694 27.0348L42.2472 35.0348C42.9635 36.5517 43.3217 37.3102 43.221 37.9246C43.133 38.4613 42.8303 38.9391 42.3825 39.2478C41.8699 39.6012 41.0311 39.6012 39.3536 39.6012L8.65347 39.6012C6.97591 39.6012 6.13713 39.6012 5.62453 39.2478C5.17675 38.9391 4.87401 38.4613 4.78606 37.9246C4.68538 37.3102 5.04355 36.5517 5.75988 35.0348L9.53766 27.0348Z" fill="url(#paint0_linear_6759_39938)" fill-opacity="0.64"/>
+        <path d="M9.65069 27.0881C9.96853 26.415 10.116 26.1068 10.338 25.8824C10.5374 25.6808 10.7801 25.5271 11.0475 25.4328C11.3452 25.3279 11.6869 25.3262 12.4313 25.3262L35.5758 25.3262C36.3201 25.3262 36.6618 25.3279 36.9595 25.4328C37.227 25.5271 37.4696 25.6808 37.6691 25.8824C37.8911 26.1068 38.0385 26.415 38.3563 27.0881L42.1341 35.0881C42.4933 35.8488 42.7589 36.4116 42.923 36.861C43.0871 37.3104 43.1427 37.6291 43.0976 37.9044C43.0152 38.4075 42.7313 38.8554 42.3116 39.1449C42.0819 39.3032 41.77 39.389 41.2935 39.4325C40.8171 39.476 40.1948 39.4762 39.3536 39.4762L8.65347 39.4762C7.81226 39.4762 7.18995 39.476 6.71351 39.4325C6.23706 39.389 5.92515 39.3032 5.69548 39.1449C5.27569 38.8554 4.99187 38.4075 4.90942 37.9044C4.86431 37.6291 4.91993 37.3104 5.08401 36.861C5.24809 36.4116 5.51371 35.8488 5.87291 35.0881L9.65069 27.0881Z" stroke="url(#paint1_linear_6759_39938)" stroke-width="0.25"/>
+    </g>
+    <g filter="url(#filter1_bi_6759_39938)">
+        <path d="M9.53766 17.4342C9.85153 16.7695 10.0085 16.4372 10.2491 16.1939C10.4619 15.9789 10.7207 15.8149 11.006 15.7143C11.3287 15.6006 11.6962 15.6006 12.4313 15.6006L35.5758 15.6006C36.3108 15.6006 36.6783 15.6006 37.0011 15.7143C37.2864 15.8149 37.5452 15.9789 37.7579 16.1939C37.9986 16.4372 38.1555 16.7695 38.4694 17.4342L42.2472 25.4342C42.9635 26.9511 43.3217 27.7096 43.221 28.324C43.133 28.8607 42.8303 29.3385 42.3825 29.6472C41.8699 30.0006 41.0311 30.0006 39.3536 30.0006L8.65347 30.0006C6.97591 30.0006 6.13713 30.0006 5.62453 29.6472C5.17675 29.3385 4.87401 28.8607 4.78606 28.324C4.68538 27.7096 5.04355 26.9511 5.75988 25.4342L9.53766 17.4342Z" fill="url(#paint2_linear_6759_39938)" fill-opacity="0.64"/>
+        <path d="M9.65069 17.4875C9.96853 16.8145 10.116 16.5062 10.338 16.2819C10.5374 16.0802 10.7801 15.9265 11.0475 15.8322C11.3452 15.7273 11.6869 15.7256 12.4313 15.7256L35.5758 15.7256C36.3201 15.7256 36.6618 15.7273 36.9595 15.8322C37.227 15.9265 37.4696 16.0802 37.6691 16.2819C37.8911 16.5062 38.0385 16.8145 38.3563 17.4875L42.1341 25.4875C42.4933 26.2482 42.7589 26.811 42.923 27.2604C43.0871 27.7098 43.1427 28.0285 43.0976 28.3038C43.0152 28.807 42.7313 29.2549 42.3116 29.5443C42.0819 29.7026 41.77 29.7884 41.2935 29.8319C40.8171 29.8755 40.1948 29.8756 39.3536 29.8756L8.65347 29.8756C7.81226 29.8756 7.18995 29.8755 6.71351 29.8319C6.23706 29.7884 5.92515 29.7026 5.69548 29.5443C5.27569 29.2549 4.99187 28.807 4.90942 28.3038C4.86431 28.0285 4.91993 27.7098 5.08401 27.2604C5.24809 26.811 5.51371 26.2482 5.87291 25.4875L9.65069 17.4875Z" stroke="url(#paint3_linear_6759_39938)" stroke-width="0.25"/>
+    </g>
+    <path d="M9.53766 7.83358C9.85153 7.16892 10.0085 6.83658 10.2491 6.59335C10.4619 6.3783 10.7207 6.21432 11.006 6.11375C11.3287 6 11.6962 6 12.4313 6L35.5758 6C36.3108 6 36.6783 6 37.0011 6.11375C37.2864 6.21432 37.5452 6.3783 37.7579 6.59335C37.9986 6.83658 38.1555 7.16892 38.4694 7.83358L42.2472 15.8336C42.9635 17.3505 43.3217 18.109 43.221 18.7234C43.133 19.2601 42.8303 19.7379 42.3825 20.0466C41.8699 20.4 41.0311 20.4 39.3536 20.4L8.65347 20.4C6.97591 20.4 6.13713 20.4 5.62453 20.0466C5.17675 19.7379 4.87401 19.2601 4.78606 18.7234C4.68538 18.109 5.04355 17.3505 5.75988 15.8336L9.53766 7.83358Z" fill="url(#paint4_linear_6759_39938)"/>
+    <defs>
+        <filter id="filter0_bi_6759_39938" x="-0.563924" y="19.8678" width="49.1349" height="25.0667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.66667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39938"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39938" result="shape"/>
+            <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="2"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39938"/>
+        </filter>
+        <filter id="filter1_bi_6759_39938" x="-0.563924" y="10.2673" width="49.1349" height="25.0667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.66667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39938"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39938" result="shape"/>
+            <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="2"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39938"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39938" x1="8.46813" y1="25.2012" x2="9.77702" y2="52.6509" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39938" x1="3.45453" y1="33.2735" x2="41.4573" y2="44.1161" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39938" x1="8.46813" y1="15.6006" x2="10.9451" y2="42.1243" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_6759_39938" x1="3.45453" y1="23.6729" x2="41.4573" y2="34.5155" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_6759_39938" x1="33.75" y1="6" x2="33.75" y2="20.25" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0.32"/>
+            <stop offset="0.423207" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FD5E6B"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon3-dark.svg b/static/images/onboarding/icon3-dark.svg
new file mode 100644
index 000000000..6d06a4c35
--- /dev/null
+++ b/static/images/onboarding/icon3-dark.svg
@@ -0,0 +1,84 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_7190_4401)">
+        <g filter="url(#filter0_bdi_7190_4401)">
+            <rect x="21.5977" y="6" width="36" height="16.8" rx="3.2" transform="rotate(90 21.5977 6)" fill="url(#paint0_linear_7190_4401)" fill-opacity="0.32" shape-rendering="crispEdges"/>
+            <rect x="21.4977" y="6.1" width="35.8" height="16.6" rx="3.1" transform="rotate(90 21.4977 6.1)" stroke="url(#paint1_linear_7190_4401)" stroke-width="0.2" shape-rendering="crispEdges"/>
+        </g>
+        <g filter="url(#filter1_b_7190_4401)">
+            <path d="M36.0547 9.60059C38.1039 9.60059 39.1285 9.60059 39.8628 10.0171C40.5074 10.3827 41.0052 10.9606 41.2711 11.6523C41.574 12.4404 41.422 13.4536 41.1181 15.4801L39.0541 29.2401C38.822 30.7871 38.706 31.5607 38.3288 32.1421C37.9964 32.6545 37.5243 33.0611 36.9682 33.3138C36.3373 33.6006 35.5551 33.6006 33.9907 33.6006L20.3453 33.6006C18.2961 33.6006 17.2715 33.6006 16.5372 33.1841C15.8926 32.8185 15.3948 32.2405 15.1289 31.5488C14.826 30.7608 14.978 29.7476 15.2819 27.7211L17.3459 13.9611C17.578 12.414 17.694 11.6405 18.0712 11.0591C18.4036 10.5466 18.8757 10.1401 19.4318 9.88734C20.0627 9.60058 20.8449 9.60059 22.4093 9.60059L36.0547 9.60059Z" fill="url(#paint2_linear_7190_4401)"/>
+        </g>
+        <g filter="url(#filter2_bdi_7190_4401)">
+            <path d="M37.3904 15.6006C39.3982 15.6006 40.4021 15.6006 41.1291 16.0064C41.7675 16.3627 42.2646 16.9269 42.5377 17.6051C42.8488 18.3774 42.7224 19.3733 42.4697 21.3651L40.419 37.5251C40.2179 39.1099 40.1174 39.9023 39.7434 40.4993C39.4139 41.0253 38.9386 41.4441 38.3753 41.7048C37.7359 42.0006 36.9372 42.0006 35.3397 42.0006L9.92757 42.0006C7.91979 42.0006 6.9159 42.0006 6.18886 41.5948C5.55048 41.2384 5.05337 40.6743 4.78023 39.9961C4.46916 39.2238 4.59555 38.2279 4.8483 36.236L6.89896 20.076C7.10006 18.4913 7.20061 17.6989 7.57457 17.1019C7.90405 16.5759 8.37939 16.1571 8.94268 15.8964C9.58202 15.6006 10.3808 15.6006 11.9782 15.6006L37.3904 15.6006Z" fill="url(#paint3_linear_7190_4401)" fill-opacity="0.32" shape-rendering="crispEdges"/>
+            <path d="M37.3904 15.7006C38.396 15.7006 39.1439 15.7007 39.7315 15.7509C40.3181 15.8011 40.7346 15.9007 41.0804 16.0937C41.6988 16.4389 42.1804 16.9855 42.445 17.6424C42.5929 18.0097 42.6393 18.4355 42.6152 19.0237C42.5911 19.6129 42.4971 20.3549 42.3705 21.3525L40.3198 37.5125C40.2191 38.3065 40.1441 38.8963 40.0481 39.3624C39.9523 39.8274 39.8368 40.1618 39.6586 40.4462C39.3395 40.9558 38.879 41.3615 38.3333 41.614C38.0287 41.7549 37.6824 41.8274 37.2091 41.8639C36.7346 41.9005 36.14 41.9006 35.3397 41.9006L9.92757 41.9006C8.92193 41.9006 8.17403 41.9005 7.58646 41.8502C6.9999 41.8 6.58332 41.7004 6.2376 41.5074C5.61917 41.1623 5.13759 40.6157 4.87299 39.9587C4.72507 39.5915 4.6787 39.1657 4.70275 38.5775C4.72684 37.9882 4.82091 37.2463 4.94751 36.2486L6.99816 20.0886C7.09891 19.2947 7.17382 18.7049 7.26989 18.2387C7.36569 17.7738 7.48118 17.4394 7.65931 17.155C7.9785 16.6454 8.43898 16.2397 8.98468 15.9872C9.28922 15.8462 9.63554 15.7738 10.1088 15.7373C10.5834 15.7007 11.178 15.7006 11.9782 15.7006L37.3904 15.7006Z" stroke="url(#paint4_linear_7190_4401)" stroke-width="0.2" shape-rendering="crispEdges"/>
+        </g>
+    </g>
+    <defs>
+        <filter id="filter0_bdi_7190_4401" x="0.530941" y="-2" width="30.6667" height="48.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4401"/>
+            <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="3.2" dy="-1.6"/>
+            <feGaussianBlur stdDeviation="3.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.06 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_7190_4401" result="effect2_dropShadow_7190_4401"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7190_4401" result="shape"/>
+            <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="3.2"/>
+            <feGaussianBlur stdDeviation="1.2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect3_innerShadow_7190_4401"/>
+        </filter>
+        <filter id="filter1_b_7190_4401" x="-51.3693" y="-56.7327" width="159.139" height="156.667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4401"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4401" result="shape"/>
+        </filter>
+        <filter id="filter2_bdi_7190_4401" x="-0.203321" y="7.60059" width="52.5245" height="39.1999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.4"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4401"/>
+            <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="3.2" dy="-1.6"/>
+            <feGaussianBlur stdDeviation="3.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.06 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_7190_4401" result="effect2_dropShadow_7190_4401"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7190_4401" result="shape"/>
+            <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="3.2"/>
+            <feGaussianBlur stdDeviation="1.2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect3_innerShadow_7190_4401"/>
+        </filter>
+        <linearGradient id="paint0_linear_7190_4401" x1="10.7977" y1="27" x2="48.5977" y2="11.4" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.432292" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_7190_4401" x1="52.7977" y1="16.3765" x2="45.7202" y2="31.7155" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_7190_4401" x1="39" y1="12" x2="39.9322" y2="31.9025" gradientUnits="userSpaceOnUse">
+            <stop offset="0.276688" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_7190_4401" x1="41.9531" y1="28.5606" x2="3.89624" y2="13.9217" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.432292" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_7190_4401" x1="17.7799" y1="38.1606" x2="1.98233" y2="18.7805" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <clipPath id="clip0_7190_4401">
+            <rect width="48" height="48" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon3.svg b/static/images/onboarding/icon3.svg
new file mode 100644
index 000000000..9cd0ae603
--- /dev/null
+++ b/static/images/onboarding/icon3.svg
@@ -0,0 +1,67 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bi_6759_39942)">
+        <rect x="21.5977" y="6" width="36" height="16.8" rx="3.2" transform="rotate(90 21.5977 6)" fill="url(#paint0_linear_6759_39942)" fill-opacity="0.64"/>
+        <rect x="21.4977" y="6.1" width="35.8" height="16.6" rx="3.1" transform="rotate(90 21.4977 6.1)" stroke="url(#paint1_linear_6759_39942)" stroke-width="0.2"/>
+    </g>
+    <g filter="url(#filter1_b_6759_39942)">
+        <path d="M36.0547 9.60059C38.1039 9.60059 39.1285 9.60059 39.8628 10.0171C40.5074 10.3827 41.0052 10.9606 41.2711 11.6523C41.574 12.4404 41.422 13.4536 41.1181 15.4801L39.0541 29.2401C38.822 30.7871 38.706 31.5607 38.3288 32.1421C37.9964 32.6545 37.5243 33.0611 36.9682 33.3138C36.3373 33.6006 35.5551 33.6006 33.9907 33.6006L20.3453 33.6006C18.2961 33.6006 17.2715 33.6006 16.5372 33.1841C15.8926 32.8185 15.3948 32.2405 15.1289 31.5488C14.826 30.7608 14.978 29.7476 15.2819 27.7211L17.3459 13.9611C17.578 12.414 17.694 11.6405 18.0712 11.0591C18.4036 10.5466 18.8757 10.1401 19.4318 9.88734C20.0627 9.60058 20.8449 9.60059 22.4093 9.60059L36.0547 9.60059Z" fill="url(#paint2_linear_6759_39942)"/>
+    </g>
+    <g filter="url(#filter2_bi_6759_39942)">
+        <path d="M37.3904 15.6006C39.3982 15.6006 40.4021 15.6006 41.1291 16.0064C41.7675 16.3627 42.2646 16.9269 42.5377 17.6051C42.8488 18.3774 42.7224 19.3733 42.4697 21.3651L40.419 37.5251C40.2179 39.1099 40.1174 39.9023 39.7434 40.4993C39.4139 41.0253 38.9386 41.4441 38.3753 41.7048C37.7359 42.0006 36.9372 42.0006 35.3397 42.0006L9.92757 42.0006C7.91979 42.0006 6.9159 42.0006 6.18886 41.5948C5.55048 41.2384 5.05337 40.6743 4.78023 39.9961C4.46916 39.2238 4.59555 38.2279 4.8483 36.236L6.89896 20.076C7.10006 18.4913 7.20061 17.6989 7.57457 17.1019C7.90405 16.5759 8.37939 16.1571 8.94268 15.8964C9.58202 15.6006 10.3808 15.6006 11.9782 15.6006L37.3904 15.6006Z" fill="url(#paint3_linear_6759_39942)" fill-opacity="0.64"/>
+        <path d="M37.3904 15.7006C38.396 15.7006 39.1439 15.7007 39.7315 15.7509C40.3181 15.8011 40.7346 15.9007 41.0804 16.0937C41.6988 16.4389 42.1804 16.9855 42.445 17.6424C42.5929 18.0097 42.6393 18.4355 42.6152 19.0237C42.5911 19.6129 42.4971 20.3549 42.3705 21.3525L40.3198 37.5125C40.2191 38.3065 40.1441 38.8963 40.0481 39.3624C39.9523 39.8274 39.8368 40.1618 39.6586 40.4462C39.3395 40.9558 38.879 41.3615 38.3333 41.614C38.0287 41.7549 37.6824 41.8274 37.2091 41.8639C36.7346 41.9005 36.14 41.9006 35.3397 41.9006L9.92757 41.9006C8.92193 41.9006 8.17403 41.9005 7.58646 41.8502C6.9999 41.8 6.58332 41.7004 6.2376 41.5074C5.61917 41.1623 5.13759 40.6157 4.87299 39.9587C4.72507 39.5915 4.6787 39.1657 4.70275 38.5775C4.72684 37.9882 4.82091 37.2463 4.94751 36.2486L6.99816 20.0886C7.09891 19.2947 7.17382 18.7049 7.26989 18.2387C7.36569 17.7738 7.48118 17.4394 7.65931 17.155C7.9785 16.6454 8.43898 16.2397 8.98468 15.9872C9.28922 15.8462 9.63554 15.7738 10.1088 15.7373C10.5834 15.7007 11.178 15.7006 11.9782 15.7006L37.3904 15.7006Z" stroke="url(#paint4_linear_6759_39942)" stroke-width="0.2"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_6759_39942" x="0.530941" y="1.73333" width="25.3334" height="44.5333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39942"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39942" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39942"/>
+        </filter>
+        <filter id="filter1_b_6759_39942" x="-51.3693" y="-56.7327" width="159.139" height="156.667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39942"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39942" result="shape"/>
+        </filter>
+        <filter id="filter2_bi_6759_39942" x="0.330013" y="11.3339" width="46.6578" height="34.9334" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39942"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39942" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39942"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39942" x1="13.7977" y1="-12.6023" x2="17.6558" y2="33.3511" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39942" x1="21.4662" y1="15.4177" x2="56.1143" y2="22.8941" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39942" x1="39" y1="12" x2="39.9322" y2="31.9025" gradientUnits="userSpaceOnUse">
+            <stop offset="0.276688" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_6759_39942" x1="43.2012" y1="18.7483" x2="-40.3378" y2="125.181" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_6759_39942" x1="21.2914" y1="15.5042" x2="19.491" y2="41.9734" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon4-dark.svg b/static/images/onboarding/icon4-dark.svg
new file mode 100644
index 000000000..07e8054c8
--- /dev/null
+++ b/static/images/onboarding/icon4-dark.svg
@@ -0,0 +1,48 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_7190_4405)">
+        <path d="M30.4636 24.7027V8.88128C30.4636 7.09574 30.4636 6.20296 30.1017 5.76084C29.7872 5.37666 29.3122 5.16024 28.816 5.17502C28.2449 5.19204 27.5712 5.77785 26.2238 6.94949L8.02918 22.7709C6.43125 24.1604 5.63229 24.8552 5.55493 25.4596C5.48791 25.9832 5.6835 26.5062 6.07767 26.8574C6.53264 27.2627 7.59143 27.2627 9.70901 27.2627H27.9036C28.7997 27.2627 29.2477 27.2627 29.59 27.0883C29.8911 26.9349 30.1358 26.6901 30.2892 26.3891C30.4636 26.0468 30.4636 25.5988 30.4636 24.7027Z" fill="url(#paint0_linear_7190_4405)"/>
+    </g>
+    <g filter="url(#filter1_bdi_7190_4405)">
+        <path d="M19.6648 23.8227V39.4757C19.6648 41.3073 19.6648 42.2231 20.0334 42.6675C20.3536 43.0534 20.8362 43.2668 21.3371 43.2442C21.9139 43.2181 22.5915 42.602 23.9468 41.3699L41.1651 25.7169L41.1651 25.7169C42.6876 24.3328 43.4489 23.6408 43.5162 23.0413C43.5746 22.5216 43.3753 22.0063 42.9826 21.661C42.5295 21.2627 41.5007 21.2627 39.4431 21.2627H39.4431H22.2248C21.3287 21.2627 20.8807 21.2627 20.5384 21.4371C20.2374 21.5905 19.9926 21.8353 19.8392 22.1363C19.6648 22.4786 19.6648 22.9266 19.6648 23.8227Z" fill="url(#paint1_linear_7190_4405)" fill-opacity="0.32" shape-rendering="crispEdges"/>
+        <path d="M41.0979 25.6429L41.0979 25.6429L41.1034 25.6379L41.1034 25.6379C41.8633 24.9471 42.4285 24.433 42.8129 24.017C43.2011 23.597 43.3871 23.295 43.4169 23.0301C43.4716 22.5429 43.2848 22.0598 42.9166 21.7361C42.7164 21.5601 42.3756 21.4618 41.8059 21.4121C41.2402 21.3628 40.4739 21.3627 39.4431 21.3627H39.4431H22.2248C21.7751 21.3627 21.4438 21.3628 21.1821 21.3842C20.9214 21.4055 20.7385 21.4474 20.5838 21.5262C20.3016 21.67 20.0721 21.8995 19.9283 22.1817C19.8495 22.3364 19.8076 22.5193 19.7863 22.78C19.7649 23.0417 19.7648 23.373 19.7648 23.8227V39.4757C19.7648 40.3935 19.7649 41.075 19.8105 41.5829C19.8563 42.0934 19.9468 42.4065 20.1104 42.6036C20.4106 42.9654 20.863 43.1655 21.3326 43.1443C21.5885 43.1327 21.8811 42.9891 22.2896 42.6796C22.6961 42.3717 23.2004 41.9133 23.8796 41.2959L41.0979 25.6429Z" stroke="url(#paint2_linear_7190_4405)" stroke-width="0.2" shape-rendering="crispEdges"/>
+    </g>
+    <defs>
+        <filter id="filter0_b_7190_4405" x="-60.7913" y="-61.159" width="157.588" height="154.755" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4405"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4405" result="shape"/>
+        </filter>
+        <filter id="filter1_bdi_7190_4405" x="15.3981" y="16.996" width="32.3948" height="30.5165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4405"/>
+            <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="-1.6" dy="-1.6"/>
+            <feGaussianBlur stdDeviation="0.8"/>
+            <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.08 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_7190_4405" result="effect2_dropShadow_7190_4405"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7190_4405" result="shape"/>
+            <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="3.2"/>
+            <feGaussianBlur stdDeviation="1.2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect3_innerShadow_7190_4405"/>
+        </filter>
+        <linearGradient id="paint0_linear_7190_4405" x1="16.9636" y1="13.6133" x2="25.7196" y2="31.3365" gradientUnits="userSpaceOnUse">
+            <stop offset="0.36137" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_7190_4405" x1="33.7448" y1="46.6745" x2="26.0838" y2="19.4918" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.432292" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_7190_4405" x1="42.5448" y1="30.4392" x2="29.331" y2="15.7382" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon4.svg b/static/images/onboarding/icon4.svg
new file mode 100644
index 000000000..22bcc9dff
--- /dev/null
+++ b/static/images/onboarding/icon4.svg
@@ -0,0 +1,42 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_6759_39946)">
+        <path d="M30.4636 24.7027V8.88128C30.4636 7.09574 30.4636 6.20296 30.1017 5.76084C29.7872 5.37666 29.3122 5.16024 28.816 5.17502C28.2449 5.19204 27.5712 5.77785 26.2238 6.94949L8.02918 22.7709C6.43125 24.1604 5.63229 24.8552 5.55493 25.4596C5.48791 25.9832 5.6835 26.5062 6.07767 26.8574C6.53264 27.2627 7.59143 27.2627 9.70901 27.2627H27.9036C28.7997 27.2627 29.2477 27.2627 29.59 27.0883C29.8911 26.9349 30.1358 26.6901 30.2892 26.3891C30.4636 26.0468 30.4636 25.5988 30.4636 24.7027Z" fill="url(#paint0_linear_6759_39946)"/>
+    </g>
+    <g filter="url(#filter1_bi_6759_39946)">
+        <path d="M19.6648 23.8227V39.4757C19.6648 41.3073 19.6648 42.2231 20.0334 42.6675C20.3536 43.0534 20.8362 43.2668 21.3371 43.2442C21.9139 43.2181 22.5915 42.602 23.9468 41.3699L41.1651 25.7169L41.1651 25.7169C42.6876 24.3328 43.4489 23.6408 43.5162 23.0413C43.5746 22.5216 43.3753 22.0063 42.9826 21.661C42.5295 21.2627 41.5007 21.2627 39.4431 21.2627H39.4431H22.2248C21.3287 21.2627 20.8807 21.2627 20.5384 21.4371C20.2374 21.5905 19.9926 21.8353 19.8392 22.1363C19.6648 22.4786 19.6648 22.9266 19.6648 23.8227Z" fill="url(#paint1_linear_6759_39946)" fill-opacity="0.64"/>
+        <path d="M41.0979 25.6429L41.0979 25.6429L41.1034 25.6379L41.1034 25.6379C41.8633 24.9471 42.4285 24.433 42.8129 24.017C43.2011 23.597 43.3871 23.295 43.4169 23.0301C43.4716 22.5429 43.2848 22.0598 42.9166 21.7361C42.7164 21.5601 42.3756 21.4618 41.8059 21.4121C41.2402 21.3628 40.4739 21.3627 39.4431 21.3627H39.4431H22.2248C21.7751 21.3627 21.4438 21.3628 21.1821 21.3842C20.9214 21.4055 20.7385 21.4474 20.5838 21.5262C20.3016 21.67 20.0721 21.8995 19.9283 22.1817C19.8495 22.3364 19.8076 22.5193 19.7863 22.78C19.7649 23.0417 19.7648 23.373 19.7648 23.8227V39.4757C19.7648 40.3935 19.7649 41.075 19.8105 41.5829C19.8563 42.0934 19.9468 42.4065 20.1104 42.6036C20.4106 42.9654 20.863 43.1655 21.3326 43.1443C21.5885 43.1327 21.8811 42.9891 22.2896 42.6796C22.6961 42.3717 23.2004 41.9133 23.8796 41.2959L41.0979 25.6429Z" stroke="url(#paint2_linear_6759_39946)" stroke-width="0.2"/>
+    </g>
+    <defs>
+        <filter id="filter0_b_6759_39946" x="-60.7913" y="-61.159" width="157.588" height="154.755" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39946"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39946" result="shape"/>
+        </filter>
+        <filter id="filter1_bi_6759_39946" x="15.3981" y="16.996" width="32.3948" height="30.5165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39946"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39946" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39946"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39946" x1="16.9636" y1="13.6133" x2="25.7196" y2="31.3365" gradientUnits="userSpaceOnUse">
+            <stop offset="0.36137" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39946" x1="22.8125" y1="45.2627" x2="39.099" y2="15.8542" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39946" x1="19.5684" y1="31.8089" x2="45.8378" y2="28.8991" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon5-dark.svg b/static/images/onboarding/icon5-dark.svg
new file mode 100644
index 000000000..ebc2cff9e
--- /dev/null
+++ b/static/images/onboarding/icon5-dark.svg
@@ -0,0 +1,37 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6221 30.3364V25.9154H6.43643C5.55277 25.9154 4.83643 25.199 4.83643 24.3154V7.93643C4.83643 7.05277 5.55277 6.33643 6.43643 6.33643H30.2364C31.1201 6.33643 31.8364 7.05277 31.8364 7.93643V24.3154C31.8364 25.199 31.1201 25.9154 30.2364 25.9154H16.4079L10.6221 30.3364Z" fill="url(#paint0_linear_7190_4417)"/>
+    <g filter="url(#filter0_bi_7190_4417)">
+        <mask id="path-2-inside-1_7190_4417" fill="white">
+            <path d="M38.0507 42.3364V37.9154H42.2364C43.1201 37.9154 43.8364 37.199 43.8364 36.3154V19.9364C43.8364 19.0528 43.1201 18.3364 42.2364 18.3364H18.4364C17.5528 18.3364 16.8364 19.0528 16.8364 19.9364V36.3154C16.8364 37.199 17.5528 37.9154 18.4364 37.9154H32.265L38.0507 42.3364Z"/>
+        </mask>
+        <path d="M38.0507 42.3364V37.9154H42.2364C43.1201 37.9154 43.8364 37.199 43.8364 36.3154V19.9364C43.8364 19.0528 43.1201 18.3364 42.2364 18.3364H18.4364C17.5528 18.3364 16.8364 19.0528 16.8364 19.9364V36.3154C16.8364 37.199 17.5528 37.9154 18.4364 37.9154H32.265L38.0507 42.3364Z" fill="url(#paint1_linear_7190_4417)" fill-opacity="0.32"/>
+        <path d="M38.0507 37.9154V37.7154H37.8507V37.9154H38.0507ZM38.0507 42.3364L37.9293 42.4953C37.9897 42.5415 38.0712 42.5494 38.1394 42.5157C38.2076 42.482 38.2507 42.4125 38.2507 42.3364H38.0507ZM32.265 37.9154L32.3864 37.7565L32.3327 37.7154H32.265V37.9154ZM37.8507 37.9154V42.3364H38.2507V37.9154H37.8507ZM38.1721 42.1775L32.3864 37.7565L32.1436 38.0743L37.9293 42.4953L38.1721 42.1775ZM32.265 37.7154H18.4364V38.1154H32.265V37.7154ZM17.0364 36.3154V19.9364H16.6364V36.3154H17.0364ZM18.4364 18.5364H42.2364V18.1364H18.4364V18.5364ZM43.6364 19.9364V36.3154H44.0364V19.9364H43.6364ZM42.2364 37.7154H38.0507V38.1154H42.2364V37.7154ZM43.6364 36.3154C43.6364 37.0886 43.0096 37.7154 42.2364 37.7154V38.1154C43.2305 38.1154 44.0364 37.3095 44.0364 36.3154H43.6364ZM42.2364 18.5364C43.0096 18.5364 43.6364 19.1632 43.6364 19.9364H44.0364C44.0364 18.9423 43.2305 18.1364 42.2364 18.1364V18.5364ZM17.0364 19.9364C17.0364 19.1632 17.6632 18.5364 18.4364 18.5364V18.1364C17.4423 18.1364 16.6364 18.9423 16.6364 19.9364H17.0364ZM18.4364 37.7154C17.6632 37.7154 17.0364 37.0886 17.0364 36.3154H16.6364C16.6364 37.3095 17.4423 38.1154 18.4364 38.1154V37.7154Z" fill="url(#paint2_linear_7190_4417)" mask="url(#path-2-inside-1_7190_4417)"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_7190_4417" x="12.5724" y="14.0724" width="35.528" height="32.528" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.132"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4417"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4417" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_7190_4417"/>
+        </filter>
+        <linearGradient id="paint0_linear_7190_4417" x1="28.8364" y1="6.33643" x2="11.0508" y2="30.65" gradientUnits="userSpaceOnUse">
+            <stop offset="0.561728" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_7190_4417" x1="14.9079" y1="14.547" x2="46.3501" y2="42.8762" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.5" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_7190_4417" x1="16.8364" y1="25.9154" x2="52.1528" y2="32.4512" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon5.svg b/static/images/onboarding/icon5.svg
new file mode 100644
index 000000000..0338e63f6
--- /dev/null
+++ b/static/images/onboarding/icon5.svg
@@ -0,0 +1,37 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6221 30.3364V25.9154H6.43643C5.55277 25.9154 4.83643 25.199 4.83643 24.3154V7.93643C4.83643 7.05277 5.55277 6.33643 6.43643 6.33643H30.2364C31.1201 6.33643 31.8364 7.05277 31.8364 7.93643V24.3154C31.8364 25.199 31.1201 25.9154 30.2364 25.9154H16.4079L10.6221 30.3364Z" fill="url(#paint0_linear_6759_39954)"/>
+    <g filter="url(#filter0_bi_6759_39954)">
+        <mask id="path-2-inside-1_6759_39954" fill="white">
+            <path d="M38.0507 42.3364V37.9154H42.2364C43.1201 37.9154 43.8364 37.199 43.8364 36.3154V19.9364C43.8364 19.0528 43.1201 18.3364 42.2364 18.3364H18.4364C17.5528 18.3364 16.8364 19.0528 16.8364 19.9364V36.3154C16.8364 37.199 17.5528 37.9154 18.4364 37.9154H32.265L38.0507 42.3364Z"/>
+        </mask>
+        <path d="M38.0507 42.3364V37.9154H42.2364C43.1201 37.9154 43.8364 37.199 43.8364 36.3154V19.9364C43.8364 19.0528 43.1201 18.3364 42.2364 18.3364H18.4364C17.5528 18.3364 16.8364 19.0528 16.8364 19.9364V36.3154C16.8364 37.199 17.5528 37.9154 18.4364 37.9154H32.265L38.0507 42.3364Z" fill="url(#paint1_linear_6759_39954)" fill-opacity="0.64"/>
+        <path d="M38.0507 37.9154V37.7154H37.8507V37.9154H38.0507ZM38.0507 42.3364L37.9293 42.4953C37.9897 42.5415 38.0712 42.5494 38.1394 42.5157C38.2076 42.482 38.2507 42.4125 38.2507 42.3364H38.0507ZM32.265 37.9154L32.3864 37.7565L32.3327 37.7154H32.265V37.9154ZM37.8507 37.9154V42.3364H38.2507V37.9154H37.8507ZM38.1721 42.1775L32.3864 37.7565L32.1436 38.0743L37.9293 42.4953L38.1721 42.1775ZM32.265 37.7154H18.4364V38.1154H32.265V37.7154ZM17.0364 36.3154V19.9364H16.6364V36.3154H17.0364ZM18.4364 18.5364H42.2364V18.1364H18.4364V18.5364ZM43.6364 19.9364V36.3154H44.0364V19.9364H43.6364ZM42.2364 37.7154H38.0507V38.1154H42.2364V37.7154ZM43.6364 36.3154C43.6364 37.0886 43.0096 37.7154 42.2364 37.7154V38.1154C43.2305 38.1154 44.0364 37.3095 44.0364 36.3154H43.6364ZM42.2364 18.5364C43.0096 18.5364 43.6364 19.1632 43.6364 19.9364H44.0364C44.0364 18.9423 43.2305 18.1364 42.2364 18.1364V18.5364ZM17.0364 19.9364C17.0364 19.1632 17.6632 18.5364 18.4364 18.5364V18.1364C17.4423 18.1364 16.6364 18.9423 16.6364 19.9364H17.0364ZM18.4364 37.7154C17.6632 37.7154 17.0364 37.0886 17.0364 36.3154H16.6364C16.6364 37.3095 17.4423 38.1154 18.4364 38.1154V37.7154Z" fill="url(#paint2_linear_6759_39954)" mask="url(#path-2-inside-1_6759_39954)"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_6759_39954" x="12.5724" y="14.0724" width="35.528" height="32.528" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.132"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39954"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39954" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39954"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39954" x1="28.8364" y1="6.33643" x2="11.0508" y2="30.65" gradientUnits="userSpaceOnUse">
+            <stop offset="0.561728" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39954" x1="14.9079" y1="14.547" x2="46.6185" y2="39.7229" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.5" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39954" x1="16.8364" y1="25.9154" x2="52.1528" y2="32.4512" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon6-dark.svg b/static/images/onboarding/icon6-dark.svg
new file mode 100644
index 000000000..00dc75cff
--- /dev/null
+++ b/static/images/onboarding/icon6-dark.svg
@@ -0,0 +1,79 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bdi_7190_4409)">
+        <rect x="7.84631" y="25.5376" width="14.4" height="15.6" rx="1.6" fill="url(#paint0_linear_7190_4409)" fill-opacity="0.32" shape-rendering="crispEdges"/>
+        <rect x="7.94631" y="25.6376" width="14.2" height="15.4" rx="1.5" stroke="url(#paint1_linear_7190_4409)" stroke-width="0.2" shape-rendering="crispEdges"/>
+    </g>
+    <g filter="url(#filter1_b_7190_4409)">
+        <rect x="17.444" y="15.9399" width="14.4" height="25.2" rx="1.6" fill="url(#paint2_linear_7190_4409)"/>
+    </g>
+    <g filter="url(#filter2_bdi_7190_4409)">
+        <rect x="27.0475" y="7.5376" width="14.4" height="33.6" rx="1.6" fill="url(#paint3_linear_7190_4409)" fill-opacity="0.32" shape-rendering="crispEdges"/>
+        <rect x="27.1475" y="7.6376" width="14.2" height="33.4" rx="1.5" stroke="url(#paint4_linear_7190_4409)" stroke-width="0.2" shape-rendering="crispEdges"/>
+    </g>
+    <defs>
+        <filter id="filter0_bdi_7190_4409" x="3.57965" y="21.2709" width="22.9334" height="24.1334" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4409"/>
+            <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="-1.6" dy="-1.6"/>
+            <feGaussianBlur stdDeviation="0.8"/>
+            <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.08 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_7190_4409" result="effect2_dropShadow_7190_4409"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7190_4409" result="shape"/>
+            <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="3.2"/>
+            <feGaussianBlur stdDeviation="1.2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect3_innerShadow_7190_4409"/>
+        </filter>
+        <filter id="filter1_b_7190_4409" x="-48.8894" y="-50.3934" width="147.067" height="157.867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4409"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7190_4409" result="shape"/>
+        </filter>
+        <filter id="filter2_bdi_7190_4409" x="22.7808" y="3.27093" width="22.9334" height="42.1334" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7190_4409"/>
+            <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="-1.6" dy="-1.6"/>
+            <feGaussianBlur stdDeviation="0.8"/>
+            <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.08 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_7190_4409" result="effect2_dropShadow_7190_4409"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7190_4409" result="shape"/>
+            <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="3.2"/>
+            <feGaussianBlur stdDeviation="1.2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect3_innerShadow_7190_4409"/>
+        </filter>
+        <linearGradient id="paint0_linear_7190_4409" x1="15.5263" y1="24.62" x2="9.77018" y2="41.7589" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.432292" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_7190_4409" x1="20.3263" y1="35.1729" x2="11.7088" y2="43.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_7190_4409" x1="22.3951" y1="20.5864" x2="34.3951" y2="40.8364" gradientUnits="userSpaceOnUse">
+            <stop offset="0.358154" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_7190_4409" x1="34.7275" y1="5.56113" x2="15.22" y2="32.5286" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="0.432292" stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_7190_4409" x1="39.5275" y1="28.2905" x2="25.9499" y2="34.1759" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon6.svg b/static/images/onboarding/icon6.svg
new file mode 100644
index 000000000..164d51942
--- /dev/null
+++ b/static/images/onboarding/icon6.svg
@@ -0,0 +1,67 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bi_6759_39950)">
+        <rect x="8.13757" y="25.5376" width="14.4" height="15.6" rx="1.6" fill="url(#paint0_linear_6759_39950)" fill-opacity="0.64"/>
+        <rect x="8.23757" y="25.6376" width="14.2" height="15.4" rx="1.5" stroke="url(#paint1_linear_6759_39950)" stroke-width="0.2"/>
+    </g>
+    <g filter="url(#filter1_b_6759_39950)">
+        <rect x="17.7352" y="15.9399" width="14.4" height="25.2" rx="1.6" fill="url(#paint2_linear_6759_39950)"/>
+    </g>
+    <g filter="url(#filter2_bi_6759_39950)">
+        <rect x="27.3387" y="7.5376" width="14.4" height="33.6" rx="1.6" fill="url(#paint3_linear_6759_39950)" fill-opacity="0.64"/>
+        <rect x="27.4387" y="7.6376" width="14.2" height="33.4" rx="1.5" stroke="url(#paint4_linear_6759_39950)" stroke-width="0.2"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_6759_39950" x="3.87091" y="21.2709" width="22.9334" height="24.1333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39950"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39950" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39950"/>
+        </filter>
+        <filter id="filter1_b_6759_39950" x="-48.5981" y="-50.3934" width="147.067" height="157.867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39950"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39950" result="shape"/>
+        </filter>
+        <filter id="filter2_bi_6759_39950" x="23.0721" y="3.27093" width="22.9334" height="42.1333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39950"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39950" result="shape"/>
+            <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="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39950"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39950" x1="-3.2636" y1="18.3364" x2="21.3376" y2="42.9376" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39950" x1="8.08499" y1="34.2826" x2="22.4653" y2="35.6193" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39950" x1="22.6864" y1="20.5864" x2="34.6864" y2="40.8364" gradientUnits="userSpaceOnUse">
+            <stop offset="0.358154" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_6759_39950" x1="20.7364" y1="-5.66358" x2="83.7346" y2="3.60378" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_6759_39950" x1="27.2862" y1="26.373" x2="41.7638" y2="26.9978" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/sites/screenshot-placeholder-dark.svg b/static/images/sites/screenshot-placeholder-dark.svg
new file mode 100644
index 000000000..e90ffae07
--- /dev/null
+++ b/static/images/sites/screenshot-placeholder-dark.svg
@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 258 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="258" height="146" fill="#19191C"/>
+<path d="M60.733 78V67.8182H64.1733C64.9721 67.8182 65.625 67.9624 66.1321 68.2507C66.6425 68.5357 67.0204 68.9219 67.2656 69.4091C67.5109 69.8963 67.6335 70.4399 67.6335 71.0398C67.6335 71.6397 67.5109 72.1849 67.2656 72.6754C67.0237 73.166 66.6491 73.5571 66.142 73.8487C65.6349 74.1371 64.9853 74.2812 64.1932 74.2812H61.7273V73.1875H64.1534C64.7003 73.1875 65.1394 73.093 65.4709 72.9041C65.8023 72.7152 66.0426 72.46 66.1918 72.1385C66.3442 71.8137 66.4205 71.4474 66.4205 71.0398C66.4205 70.6321 66.3442 70.2675 66.1918 69.946C66.0426 69.6245 65.8007 69.3726 65.4659 69.1903C65.1312 69.0047 64.687 68.9119 64.1335 68.9119H61.9659V78H60.733ZM69.3976 78V70.3636H70.5311V71.517H70.6107C70.7499 71.1392 71.0017 70.8326 71.3663 70.5973C71.7309 70.362 72.1419 70.2443 72.5993 70.2443C72.6855 70.2443 72.7932 70.246 72.9224 70.2493C73.0517 70.2526 73.1495 70.2576 73.2158 70.2642V71.4574C73.176 71.4474 73.0848 71.4325 72.9423 71.4126C72.8031 71.3894 72.6556 71.3778 72.4999 71.3778C72.1286 71.3778 71.7972 71.4557 71.5055 71.6115C71.2172 71.764 70.9885 71.9761 70.8195 72.2479C70.6537 72.5163 70.5709 72.8229 70.5709 73.1676V78H69.3976ZM77.5128 78.1591C76.7771 78.1591 76.1423 77.9967 75.6087 77.6719C75.0784 77.3438 74.6691 76.8864 74.3807 76.2997C74.0957 75.7098 73.9532 75.0237 73.9532 74.2415C73.9532 73.4593 74.0957 72.7699 74.3807 72.1733C74.6691 71.5734 75.0701 71.1061 75.5839 70.7713C76.1009 70.4332 76.7041 70.2642 77.3935 70.2642C77.7913 70.2642 78.184 70.3305 78.5718 70.4631C78.9596 70.5956 79.3126 70.8111 79.6307 71.1094C79.9489 71.4044 80.2025 71.7955 80.3914 72.2827C80.5803 72.7699 80.6748 73.3698 80.6748 74.0824V74.5795H74.7884V73.5653H79.4816C79.4816 73.1345 79.3954 72.75 79.2231 72.4119C79.054 72.0739 78.8121 71.8071 78.4972 71.6115C78.1857 71.416 77.8178 71.3182 77.3935 71.3182C76.9262 71.3182 76.5218 71.4342 76.1805 71.6662C75.8424 71.8949 75.5822 72.1932 75.3999 72.5611C75.2176 72.929 75.1265 73.3234 75.1265 73.7443V74.4205C75.1265 74.9972 75.2259 75.486 75.4248 75.8871C75.627 76.2848 75.907 76.5881 76.265 76.7969C76.6229 77.0024 77.0389 77.1051 77.5128 77.1051C77.8211 77.1051 78.0995 77.062 78.3481 76.9759C78.6 76.8864 78.8171 76.7538 78.9994 76.5781C79.1816 76.3991 79.3225 76.1771 79.4219 75.9119L80.5555 76.2301C80.4361 76.6146 80.2356 76.9527 79.9539 77.2443C79.6722 77.5327 79.3242 77.758 78.9099 77.9205C78.4956 78.0795 78.0299 78.1591 77.5128 78.1591ZM88.4085 70.3636L85.5846 78H84.3914L81.5676 70.3636H82.8403L84.9483 76.4489H85.0278L87.1358 70.3636H88.4085ZM89.8941 78V70.3636H91.0674V78H89.8941ZM90.4907 69.0909C90.262 69.0909 90.0648 69.013 89.8991 68.8572C89.7367 68.7015 89.6555 68.5142 89.6555 68.2955C89.6555 68.0767 89.7367 67.8894 89.8991 67.7337C90.0648 67.5779 90.262 67.5 90.4907 67.5C90.7194 67.5 90.915 67.5779 91.0774 67.7337C91.2431 67.8894 91.3259 68.0767 91.3259 68.2955C91.3259 68.5142 91.2431 68.7015 91.0774 68.8572C90.915 69.013 90.7194 69.0909 90.4907 69.0909ZM96.3551 78.1591C95.6193 78.1591 94.9846 77.9967 94.451 77.6719C93.9207 77.3438 93.5114 76.8864 93.223 76.2997C92.938 75.7098 92.7954 75.0237 92.7954 74.2415C92.7954 73.4593 92.938 72.7699 93.223 72.1733C93.5114 71.5734 93.9124 71.1061 94.4261 70.7713C94.9432 70.4332 95.5464 70.2642 96.2358 70.2642C96.6335 70.2642 97.0263 70.3305 97.414 70.4631C97.8018 70.5956 98.1548 70.8111 98.473 71.1094C98.7912 71.4044 99.0447 71.7955 99.2337 72.2827C99.4226 72.7699 99.517 73.3698 99.517 74.0824V74.5795H93.6307V73.5653H98.3239C98.3239 73.1345 98.2377 72.75 98.0653 72.4119C97.8963 72.0739 97.6543 71.8071 97.3395 71.6115C97.0279 71.416 96.66 71.3182 96.2358 71.3182C95.7685 71.3182 95.3641 71.4342 95.0227 71.6662C94.6846 71.8949 94.4245 72.1932 94.2422 72.5611C94.0599 72.929 93.9687 73.3234 93.9687 73.7443V74.4205C93.9687 74.9972 94.0682 75.486 94.267 75.8871C94.4692 76.2848 94.7493 76.5881 95.1072 76.7969C95.4652 77.0024 95.8811 77.1051 96.3551 77.1051C96.6633 77.1051 96.9417 77.062 97.1903 76.9759C97.4422 76.8864 97.6593 76.7538 97.8416 76.5781C98.0239 76.3991 98.1648 76.1771 98.2642 75.9119L99.3977 76.2301C99.2784 76.6146 99.0779 76.9527 98.7962 77.2443C98.5144 77.5327 98.1664 77.758 97.7521 77.9205C97.3378 78.0795 96.8721 78.1591 96.3551 78.1591ZM102.969 78L100.642 70.3636H101.875L103.526 76.2102H103.605L105.236 70.3636H106.489L108.1 76.1903H108.179L109.83 70.3636H111.063L108.736 78H107.583L105.912 72.1335H105.793L104.122 78H102.969ZM117.599 73.4062V78H116.425V70.3636H117.559V71.5568H117.658C117.837 71.169 118.109 70.8575 118.474 70.6222C118.838 70.3835 119.309 70.2642 119.886 70.2642C120.403 70.2642 120.855 70.3703 121.243 70.5824C121.631 70.7912 121.932 71.1094 122.148 71.5369C122.363 71.9612 122.471 72.4981 122.471 73.1477V78H121.297V73.2273C121.297 72.6274 121.142 72.16 120.83 71.8253C120.519 71.4872 120.091 71.3182 119.547 71.3182C119.173 71.3182 118.838 71.3994 118.543 71.5618C118.252 71.7242 118.021 71.9612 117.852 72.2727C117.683 72.5843 117.599 72.9621 117.599 73.4062ZM127.654 78.1591C126.965 78.1591 126.36 77.995 125.839 77.6669C125.322 77.3388 124.918 76.8797 124.626 76.2898C124.338 75.6998 124.194 75.0104 124.194 74.2216C124.194 73.4261 124.338 72.7318 124.626 72.1385C124.918 71.5452 125.322 71.0845 125.839 70.7564C126.36 70.4283 126.965 70.2642 127.654 70.2642C128.343 70.2642 128.947 70.4283 129.464 70.7564C129.984 71.0845 130.388 71.5452 130.677 72.1385C130.968 72.7318 131.114 73.4261 131.114 74.2216C131.114 75.0104 130.968 75.6998 130.677 76.2898C130.388 76.8797 129.984 77.3388 129.464 77.6669C128.947 77.995 128.343 78.1591 127.654 78.1591ZM127.654 77.1051C128.178 77.1051 128.609 76.9709 128.947 76.7024C129.285 76.4339 129.535 76.081 129.697 75.6435C129.86 75.206 129.941 74.732 129.941 74.2216C129.941 73.7112 129.86 73.2356 129.697 72.7947C129.535 72.3539 129.285 71.9976 128.947 71.7259C128.609 71.4541 128.178 71.3182 127.654 71.3182C127.13 71.3182 126.7 71.4541 126.361 71.7259C126.023 71.9976 125.773 72.3539 125.611 72.7947C125.448 73.2356 125.367 73.7112 125.367 74.2216C125.367 74.732 125.448 75.206 125.611 75.6435C125.773 76.081 126.023 76.4339 126.361 76.7024C126.7 76.9709 127.13 77.1051 127.654 77.1051ZM136.163 70.3636V71.358H132.206V70.3636H136.163ZM133.359 68.5341H134.533V75.8125C134.533 76.1439 134.581 76.3925 134.677 76.5582C134.776 76.7206 134.902 76.83 135.055 76.8864C135.21 76.9394 135.375 76.9659 135.547 76.9659C135.676 76.9659 135.782 76.9593 135.865 76.946C135.948 76.9295 136.014 76.9162 136.064 76.9062L136.303 77.9602C136.223 77.9901 136.112 78.0199 135.969 78.0497C135.827 78.0829 135.646 78.0994 135.428 78.0994C135.096 78.0994 134.771 78.0282 134.453 77.8857C134.138 77.7431 133.876 77.526 133.668 77.2344C133.462 76.9427 133.359 76.5748 133.359 76.1307V68.5341ZM143.987 78.179C143.503 78.179 143.064 78.0878 142.669 77.9055C142.275 77.7199 141.962 77.4531 141.73 77.1051C141.498 76.7538 141.382 76.3295 141.382 75.8324C141.382 75.3949 141.468 75.0402 141.64 74.7685C141.813 74.4934 142.043 74.2779 142.331 74.1222C142.62 73.9664 142.938 73.8504 143.286 73.7741C143.637 73.6946 143.99 73.6316 144.345 73.5852C144.809 73.5256 145.185 73.4808 145.473 73.451C145.765 73.4179 145.977 73.3632 146.11 73.2869C146.246 73.2107 146.314 73.0781 146.314 72.8892V72.8494C146.314 72.3589 146.179 71.9777 145.911 71.706C145.646 71.4342 145.243 71.2983 144.703 71.2983C144.143 71.2983 143.704 71.4209 143.385 71.6662C143.067 71.9115 142.843 72.1733 142.714 72.4517L141.601 72.054C141.799 71.59 142.065 71.2287 142.396 70.9702C142.731 70.7083 143.095 70.526 143.49 70.4233C143.887 70.3172 144.279 70.2642 144.663 70.2642C144.908 70.2642 145.19 70.294 145.508 70.3537C145.83 70.41 146.14 70.5277 146.438 70.7067C146.74 70.8857 146.99 71.1558 147.189 71.517C147.387 71.8783 147.487 72.3622 147.487 72.9688V78H146.314V76.9659H146.254C146.174 77.1316 146.042 77.3089 145.856 77.4979C145.671 77.6868 145.424 77.8475 145.115 77.9801C144.807 78.1127 144.431 78.179 143.987 78.179ZM144.166 77.125C144.63 77.125 145.021 77.0339 145.339 76.8516C145.661 76.6693 145.903 76.4339 146.065 76.1456C146.231 75.8572 146.314 75.554 146.314 75.2358V74.1619C146.264 74.2216 146.155 74.2763 145.985 74.326C145.82 74.3724 145.628 74.4138 145.409 74.4503C145.193 74.4834 144.983 74.5133 144.777 74.5398C144.575 74.563 144.411 74.5829 144.285 74.5994C143.98 74.6392 143.695 74.7038 143.43 74.7933C143.168 74.8795 142.956 75.0104 142.794 75.1861C142.635 75.3584 142.555 75.5937 142.555 75.892C142.555 76.2997 142.706 76.608 143.007 76.8168C143.312 77.0223 143.699 77.125 144.166 77.125ZM155.536 70.3636L152.712 78H151.519L148.695 70.3636H149.968L152.076 76.4489H152.156L154.264 70.3636H155.536ZM159.037 78.179C158.553 78.179 158.114 78.0878 157.719 77.9055C157.325 77.7199 157.012 77.4531 156.78 77.1051C156.548 76.7538 156.432 76.3295 156.432 75.8324C156.432 75.3949 156.518 75.0402 156.69 74.7685C156.862 74.4934 157.093 74.2779 157.381 74.1222C157.669 73.9664 157.988 73.8504 158.336 73.7741C158.687 73.6946 159.04 73.6316 159.395 73.5852C159.859 73.5256 160.235 73.4808 160.523 73.451C160.815 73.4179 161.027 73.3632 161.16 73.2869C161.295 73.2107 161.363 73.0781 161.363 72.8892V72.8494C161.363 72.3589 161.229 71.9777 160.961 71.706C160.696 71.4342 160.293 71.2983 159.753 71.2983C159.192 71.2983 158.753 71.4209 158.435 71.6662C158.117 71.9115 157.893 72.1733 157.764 72.4517L156.65 72.054C156.849 71.59 157.114 71.2287 157.446 70.9702C157.781 70.7083 158.145 70.526 158.54 70.4233C158.937 70.3172 159.328 70.2642 159.713 70.2642C159.958 70.2642 160.24 70.294 160.558 70.3537C160.879 70.41 161.189 70.5277 161.488 70.7067C161.789 70.8857 162.04 71.1558 162.238 71.517C162.437 71.8783 162.537 72.3622 162.537 72.9688V78H161.363V76.9659H161.304C161.224 77.1316 161.092 77.3089 160.906 77.4979C160.72 77.6868 160.473 77.8475 160.165 77.9801C159.857 78.1127 159.481 78.179 159.037 78.179ZM159.216 77.125C159.68 77.125 160.071 77.0339 160.389 76.8516C160.71 76.6693 160.952 76.4339 161.115 76.1456C161.281 75.8572 161.363 75.554 161.363 75.2358V74.1619C161.314 74.2216 161.204 74.2763 161.035 74.326C160.87 74.3724 160.677 74.4138 160.459 74.4503C160.243 74.4834 160.033 74.5133 159.827 74.5398C159.625 74.563 159.461 74.5829 159.335 74.5994C159.03 74.6392 158.745 74.7038 158.48 74.7933C158.218 74.8795 158.006 75.0104 157.843 75.1861C157.684 75.3584 157.605 75.5937 157.605 75.892C157.605 76.2997 157.756 76.608 158.057 76.8168C158.362 77.0223 158.748 77.125 159.216 77.125ZM164.615 78V70.3636H165.788V78H164.615ZM165.212 69.0909C164.983 69.0909 164.786 69.013 164.62 68.8572C164.458 68.7015 164.377 68.5142 164.377 68.2955C164.377 68.0767 164.458 67.8894 164.62 67.7337C164.786 67.5779 164.983 67.5 165.212 67.5C165.44 67.5 165.636 67.5779 165.798 67.7337C165.964 67.8894 166.047 68.0767 166.047 68.2955C166.047 68.5142 165.964 68.7015 165.798 68.8572C165.636 69.013 165.44 69.0909 165.212 69.0909ZM169.048 67.8182V78H167.874V67.8182H169.048ZM173.381 78.179C172.897 78.179 172.458 78.0878 172.063 77.9055C171.669 77.7199 171.356 77.4531 171.124 77.1051C170.892 76.7538 170.776 76.3295 170.776 75.8324C170.776 75.3949 170.862 75.0402 171.034 74.7685C171.207 74.4934 171.437 74.2779 171.725 74.1222C172.014 73.9664 172.332 73.8504 172.68 73.7741C173.031 73.6946 173.384 73.6316 173.739 73.5852C174.203 73.5256 174.579 73.4808 174.867 73.451C175.159 73.4179 175.371 73.3632 175.504 73.2869C175.64 73.2107 175.708 73.0781 175.708 72.8892V72.8494C175.708 72.3589 175.573 71.9777 175.305 71.706C175.04 71.4342 174.637 71.2983 174.097 71.2983C173.537 71.2983 173.098 71.4209 172.779 71.6662C172.461 71.9115 172.237 72.1733 172.108 72.4517L170.995 72.054C171.193 71.59 171.459 71.2287 171.79 70.9702C172.125 70.7083 172.489 70.526 172.884 70.4233C173.281 70.3172 173.673 70.2642 174.057 70.2642C174.302 70.2642 174.584 70.294 174.902 70.3537C175.224 70.41 175.534 70.5277 175.832 70.7067C176.133 70.8857 176.384 71.1558 176.583 71.517C176.781 71.8783 176.881 72.3622 176.881 72.9688V78H175.708V76.9659H175.648C175.568 77.1316 175.436 77.3089 175.25 77.4979C175.065 77.6868 174.818 77.8475 174.509 77.9801C174.201 78.1127 173.825 78.179 173.381 78.179ZM173.56 77.125C174.024 77.125 174.415 77.0339 174.733 76.8516C175.055 76.6693 175.297 76.4339 175.459 76.1456C175.625 75.8572 175.708 75.554 175.708 75.2358V74.1619C175.658 74.2216 175.548 74.2763 175.379 74.326C175.214 74.3724 175.022 74.4138 174.803 74.4503C174.587 74.4834 174.377 74.5133 174.171 74.5398C173.969 74.563 173.805 74.5829 173.679 74.5994C173.374 74.6392 173.089 74.7038 172.824 74.7933C172.562 74.8795 172.35 75.0104 172.188 75.1861C172.029 75.3584 171.949 75.5937 171.949 75.892C171.949 76.2997 172.1 76.608 172.401 76.8168C172.706 77.0223 173.093 77.125 173.56 77.125ZM179.118 78V67.8182H180.292V71.5767H180.391C180.477 71.4441 180.597 71.2751 180.749 71.0696C180.905 70.8608 181.127 70.6752 181.415 70.5128C181.707 70.3471 182.101 70.2642 182.599 70.2642C183.242 70.2642 183.808 70.425 184.299 70.7464C184.789 71.0679 185.172 71.5237 185.447 72.1136C185.722 72.7036 185.86 73.3996 185.86 74.2017C185.86 75.0104 185.722 75.7114 185.447 76.3047C185.172 76.8946 184.791 77.352 184.304 77.6768C183.817 77.9983 183.255 78.1591 182.618 78.1591C182.128 78.1591 181.735 78.0779 181.44 77.9155C181.145 77.7498 180.918 77.5625 180.759 77.3537C180.6 77.1416 180.477 76.9659 180.391 76.8267H180.252V78H179.118ZM180.272 74.1818C180.272 74.7585 180.356 75.2673 180.525 75.7081C180.694 76.1456 180.941 76.4886 181.266 76.7372C181.591 76.9825 181.989 77.1051 182.459 77.1051C182.95 77.1051 183.359 76.9759 183.687 76.7173C184.019 76.4555 184.267 76.1042 184.433 75.6634C184.602 75.2192 184.687 74.7254 184.687 74.1818C184.687 73.6449 184.604 73.161 184.438 72.7301C184.276 72.2959 184.029 71.9529 183.697 71.701C183.369 71.4458 182.957 71.3182 182.459 71.3182C181.982 71.3182 181.581 71.4392 181.256 71.6811C180.931 71.9197 180.686 72.2545 180.52 72.6854C180.355 73.1129 180.272 73.6117 180.272 74.1818ZM188.765 67.8182V78H187.592V67.8182H188.765ZM194.053 78.1591C193.317 78.1591 192.682 77.9967 192.149 77.6719C191.618 77.3438 191.209 76.8864 190.921 76.2997C190.636 75.7098 190.493 75.0237 190.493 74.2415C190.493 73.4593 190.636 72.7699 190.921 72.1733C191.209 71.5734 191.61 71.1061 192.124 70.7713C192.641 70.4332 193.244 70.2642 193.933 70.2642C194.331 70.2642 194.724 70.3305 195.112 70.4631C195.499 70.5956 195.852 70.8111 196.171 71.1094C196.489 71.4044 196.742 71.7955 196.931 72.2827C197.12 72.7699 197.215 73.3698 197.215 74.0824V74.5795H191.328V73.5653H196.021C196.021 73.1345 195.935 72.75 195.763 72.4119C195.594 72.0739 195.352 71.8071 195.037 71.6115C194.726 71.416 194.358 71.3182 193.933 71.3182C193.466 71.3182 193.062 71.4342 192.72 71.6662C192.382 71.8949 192.122 72.1932 191.94 72.5611C191.757 72.929 191.666 73.3234 191.666 73.7443V74.4205C191.666 74.9972 191.766 75.486 191.965 75.8871C192.167 76.2848 192.447 76.5881 192.805 76.7969C193.163 77.0024 193.579 77.1051 194.053 77.1051C194.361 77.1051 194.639 77.062 194.888 76.9759C195.14 76.8864 195.357 76.7538 195.539 76.5781C195.721 76.3991 195.862 76.1771 195.962 75.9119L197.095 76.2301C196.976 76.6146 196.775 76.9527 196.494 77.2443C196.212 77.5327 195.864 77.758 195.45 77.9205C195.035 78.0795 194.57 78.1591 194.053 78.1591Z" fill="#818186"/>
+</svg>
diff --git a/static/images/sites/screenshot-placeholder-light.svg b/static/images/sites/screenshot-placeholder-light.svg
new file mode 100644
index 000000000..b3771b58e
--- /dev/null
+++ b/static/images/sites/screenshot-placeholder-light.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 258 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="258" height="146" fill="#FAFAFB"/>
+<path d="M60.733 78V67.8182H64.1733C64.9721 67.8182 65.625 67.9624 66.1321 68.2507C66.6425 68.5357 67.0204 68.9219 67.2656 69.4091C67.5109 69.8963 67.6335 70.4399 67.6335 71.0398C67.6335 71.6397 67.5109 72.1849 67.2656 72.6754C67.0237 73.166 66.6491 73.5571 66.142 73.8487C65.6349 74.1371 64.9853 74.2812 64.1932 74.2812H61.7273V73.1875H64.1534C64.7003 73.1875 65.1394 73.093 65.4709 72.9041C65.8023 72.7152 66.0426 72.46 66.1918 72.1385C66.3442 71.8137 66.4205 71.4474 66.4205 71.0398C66.4205 70.6321 66.3442 70.2675 66.1918 69.946C66.0426 69.6245 65.8007 69.3726 65.4659 69.1903C65.1312 69.0047 64.687 68.9119 64.1335 68.9119H61.9659V78H60.733ZM69.3976 78V70.3636H70.5311V71.517H70.6107C70.7499 71.1392 71.0017 70.8326 71.3663 70.5973C71.7309 70.362 72.1419 70.2443 72.5993 70.2443C72.6855 70.2443 72.7932 70.246 72.9224 70.2493C73.0517 70.2526 73.1495 70.2576 73.2158 70.2642V71.4574C73.176 71.4474 73.0848 71.4325 72.9423 71.4126C72.8031 71.3894 72.6556 71.3778 72.4999 71.3778C72.1286 71.3778 71.7972 71.4557 71.5055 71.6115C71.2172 71.764 70.9885 71.9761 70.8195 72.2479C70.6537 72.5163 70.5709 72.8229 70.5709 73.1676V78H69.3976ZM77.5128 78.1591C76.7771 78.1591 76.1423 77.9967 75.6087 77.6719C75.0784 77.3438 74.6691 76.8864 74.3807 76.2997C74.0957 75.7098 73.9532 75.0237 73.9532 74.2415C73.9532 73.4593 74.0957 72.7699 74.3807 72.1733C74.6691 71.5734 75.0701 71.1061 75.5839 70.7713C76.1009 70.4332 76.7041 70.2642 77.3935 70.2642C77.7913 70.2642 78.184 70.3305 78.5718 70.4631C78.9596 70.5956 79.3126 70.8111 79.6307 71.1094C79.9489 71.4044 80.2025 71.7955 80.3914 72.2827C80.5803 72.7699 80.6748 73.3698 80.6748 74.0824V74.5795H74.7884V73.5653H79.4816C79.4816 73.1345 79.3954 72.75 79.2231 72.4119C79.054 72.0739 78.8121 71.8071 78.4972 71.6115C78.1857 71.416 77.8178 71.3182 77.3935 71.3182C76.9262 71.3182 76.5218 71.4342 76.1805 71.6662C75.8424 71.8949 75.5822 72.1932 75.3999 72.5611C75.2176 72.929 75.1265 73.3234 75.1265 73.7443V74.4205C75.1265 74.9972 75.2259 75.486 75.4248 75.8871C75.627 76.2848 75.907 76.5881 76.265 76.7969C76.6229 77.0024 77.0389 77.1051 77.5128 77.1051C77.8211 77.1051 78.0995 77.062 78.3481 76.9759C78.6 76.8864 78.8171 76.7538 78.9994 76.5781C79.1816 76.3991 79.3225 76.1771 79.4219 75.9119L80.5555 76.2301C80.4361 76.6146 80.2356 76.9527 79.9539 77.2443C79.6722 77.5327 79.3242 77.758 78.9099 77.9205C78.4956 78.0795 78.0299 78.1591 77.5128 78.1591ZM88.4085 70.3636L85.5846 78H84.3914L81.5676 70.3636H82.8403L84.9483 76.4489H85.0278L87.1358 70.3636H88.4085ZM89.8941 78V70.3636H91.0674V78H89.8941ZM90.4907 69.0909C90.262 69.0909 90.0648 69.013 89.8991 68.8572C89.7367 68.7015 89.6555 68.5142 89.6555 68.2955C89.6555 68.0767 89.7367 67.8894 89.8991 67.7337C90.0648 67.5779 90.262 67.5 90.4907 67.5C90.7194 67.5 90.915 67.5779 91.0774 67.7337C91.2431 67.8894 91.3259 68.0767 91.3259 68.2955C91.3259 68.5142 91.2431 68.7015 91.0774 68.8572C90.915 69.013 90.7194 69.0909 90.4907 69.0909ZM96.3551 78.1591C95.6193 78.1591 94.9846 77.9967 94.451 77.6719C93.9207 77.3438 93.5114 76.8864 93.223 76.2997C92.938 75.7098 92.7954 75.0237 92.7954 74.2415C92.7954 73.4593 92.938 72.7699 93.223 72.1733C93.5114 71.5734 93.9124 71.1061 94.4261 70.7713C94.9432 70.4332 95.5464 70.2642 96.2358 70.2642C96.6335 70.2642 97.0263 70.3305 97.414 70.4631C97.8018 70.5956 98.1548 70.8111 98.473 71.1094C98.7912 71.4044 99.0447 71.7955 99.2337 72.2827C99.4226 72.7699 99.517 73.3698 99.517 74.0824V74.5795H93.6307V73.5653H98.3239C98.3239 73.1345 98.2377 72.75 98.0653 72.4119C97.8963 72.0739 97.6543 71.8071 97.3395 71.6115C97.0279 71.416 96.66 71.3182 96.2358 71.3182C95.7685 71.3182 95.3641 71.4342 95.0227 71.6662C94.6846 71.8949 94.4245 72.1932 94.2422 72.5611C94.0599 72.929 93.9687 73.3234 93.9687 73.7443V74.4205C93.9687 74.9972 94.0682 75.486 94.267 75.8871C94.4692 76.2848 94.7493 76.5881 95.1072 76.7969C95.4652 77.0024 95.8811 77.1051 96.3551 77.1051C96.6633 77.1051 96.9417 77.062 97.1903 76.9759C97.4422 76.8864 97.6593 76.7538 97.8416 76.5781C98.0239 76.3991 98.1648 76.1771 98.2642 75.9119L99.3977 76.2301C99.2784 76.6146 99.0779 76.9527 98.7962 77.2443C98.5144 77.5327 98.1664 77.758 97.7521 77.9205C97.3378 78.0795 96.8721 78.1591 96.3551 78.1591ZM102.969 78L100.642 70.3636H101.875L103.526 76.2102H103.605L105.236 70.3636H106.489L108.1 76.1903H108.179L109.83 70.3636H111.063L108.736 78H107.583L105.912 72.1335H105.793L104.122 78H102.969ZM117.599 73.4062V78H116.425V70.3636H117.559V71.5568H117.658C117.837 71.169 118.109 70.8575 118.474 70.6222C118.838 70.3835 119.309 70.2642 119.886 70.2642C120.403 70.2642 120.855 70.3703 121.243 70.5824C121.631 70.7912 121.932 71.1094 122.148 71.5369C122.363 71.9612 122.471 72.4981 122.471 73.1477V78H121.297V73.2273C121.297 72.6274 121.142 72.16 120.83 71.8253C120.519 71.4872 120.091 71.3182 119.547 71.3182C119.173 71.3182 118.838 71.3994 118.543 71.5618C118.252 71.7242 118.021 71.9612 117.852 72.2727C117.683 72.5843 117.599 72.9621 117.599 73.4062ZM127.654 78.1591C126.965 78.1591 126.36 77.995 125.839 77.6669C125.322 77.3388 124.918 76.8797 124.626 76.2898C124.338 75.6998 124.194 75.0104 124.194 74.2216C124.194 73.4261 124.338 72.7318 124.626 72.1385C124.918 71.5452 125.322 71.0845 125.839 70.7564C126.36 70.4283 126.965 70.2642 127.654 70.2642C128.343 70.2642 128.947 70.4283 129.464 70.7564C129.984 71.0845 130.388 71.5452 130.677 72.1385C130.968 72.7318 131.114 73.4261 131.114 74.2216C131.114 75.0104 130.968 75.6998 130.677 76.2898C130.388 76.8797 129.984 77.3388 129.464 77.6669C128.947 77.995 128.343 78.1591 127.654 78.1591ZM127.654 77.1051C128.178 77.1051 128.609 76.9709 128.947 76.7024C129.285 76.4339 129.535 76.081 129.697 75.6435C129.86 75.206 129.941 74.732 129.941 74.2216C129.941 73.7112 129.86 73.2356 129.697 72.7947C129.535 72.3539 129.285 71.9976 128.947 71.7259C128.609 71.4541 128.178 71.3182 127.654 71.3182C127.13 71.3182 126.7 71.4541 126.361 71.7259C126.023 71.9976 125.773 72.3539 125.611 72.7947C125.448 73.2356 125.367 73.7112 125.367 74.2216C125.367 74.732 125.448 75.206 125.611 75.6435C125.773 76.081 126.023 76.4339 126.361 76.7024C126.7 76.9709 127.13 77.1051 127.654 77.1051ZM136.163 70.3636V71.358H132.206V70.3636H136.163ZM133.359 68.5341H134.533V75.8125C134.533 76.1439 134.581 76.3925 134.677 76.5582C134.776 76.7206 134.902 76.83 135.055 76.8864C135.21 76.9394 135.375 76.9659 135.547 76.9659C135.676 76.9659 135.782 76.9593 135.865 76.946C135.948 76.9295 136.014 76.9162 136.064 76.9062L136.303 77.9602C136.223 77.9901 136.112 78.0199 135.969 78.0497C135.827 78.0829 135.646 78.0994 135.428 78.0994C135.096 78.0994 134.771 78.0282 134.453 77.8857C134.138 77.7431 133.876 77.526 133.668 77.2344C133.462 76.9427 133.359 76.5748 133.359 76.1307V68.5341ZM143.987 78.179C143.503 78.179 143.064 78.0878 142.669 77.9055C142.275 77.7199 141.962 77.4531 141.73 77.1051C141.498 76.7538 141.382 76.3295 141.382 75.8324C141.382 75.3949 141.468 75.0402 141.64 74.7685C141.813 74.4934 142.043 74.2779 142.331 74.1222C142.62 73.9664 142.938 73.8504 143.286 73.7741C143.637 73.6946 143.99 73.6316 144.345 73.5852C144.809 73.5256 145.185 73.4808 145.473 73.451C145.765 73.4179 145.977 73.3632 146.11 73.2869C146.246 73.2107 146.314 73.0781 146.314 72.8892V72.8494C146.314 72.3589 146.179 71.9777 145.911 71.706C145.646 71.4342 145.243 71.2983 144.703 71.2983C144.143 71.2983 143.704 71.4209 143.385 71.6662C143.067 71.9115 142.843 72.1733 142.714 72.4517L141.601 72.054C141.799 71.59 142.065 71.2287 142.396 70.9702C142.731 70.7083 143.095 70.526 143.49 70.4233C143.887 70.3172 144.279 70.2642 144.663 70.2642C144.908 70.2642 145.19 70.294 145.508 70.3537C145.83 70.41 146.14 70.5277 146.438 70.7067C146.74 70.8857 146.99 71.1558 147.189 71.517C147.387 71.8783 147.487 72.3622 147.487 72.9688V78H146.314V76.9659H146.254C146.174 77.1316 146.042 77.3089 145.856 77.4979C145.671 77.6868 145.424 77.8475 145.115 77.9801C144.807 78.1127 144.431 78.179 143.987 78.179ZM144.166 77.125C144.63 77.125 145.021 77.0339 145.339 76.8516C145.661 76.6693 145.903 76.4339 146.065 76.1456C146.231 75.8572 146.314 75.554 146.314 75.2358V74.1619C146.264 74.2216 146.155 74.2763 145.985 74.326C145.82 74.3724 145.628 74.4138 145.409 74.4503C145.193 74.4834 144.983 74.5133 144.777 74.5398C144.575 74.563 144.411 74.5829 144.285 74.5994C143.98 74.6392 143.695 74.7038 143.43 74.7933C143.168 74.8795 142.956 75.0104 142.794 75.1861C142.635 75.3584 142.555 75.5937 142.555 75.892C142.555 76.2997 142.706 76.608 143.007 76.8168C143.312 77.0223 143.699 77.125 144.166 77.125ZM155.536 70.3636L152.712 78H151.519L148.695 70.3636H149.968L152.076 76.4489H152.156L154.264 70.3636H155.536ZM159.037 78.179C158.553 78.179 158.114 78.0878 157.719 77.9055C157.325 77.7199 157.012 77.4531 156.78 77.1051C156.548 76.7538 156.432 76.3295 156.432 75.8324C156.432 75.3949 156.518 75.0402 156.69 74.7685C156.862 74.4934 157.093 74.2779 157.381 74.1222C157.669 73.9664 157.988 73.8504 158.336 73.7741C158.687 73.6946 159.04 73.6316 159.395 73.5852C159.859 73.5256 160.235 73.4808 160.523 73.451C160.815 73.4179 161.027 73.3632 161.16 73.2869C161.295 73.2107 161.363 73.0781 161.363 72.8892V72.8494C161.363 72.3589 161.229 71.9777 160.961 71.706C160.696 71.4342 160.293 71.2983 159.753 71.2983C159.192 71.2983 158.753 71.4209 158.435 71.6662C158.117 71.9115 157.893 72.1733 157.764 72.4517L156.65 72.054C156.849 71.59 157.114 71.2287 157.446 70.9702C157.781 70.7083 158.145 70.526 158.54 70.4233C158.937 70.3172 159.328 70.2642 159.713 70.2642C159.958 70.2642 160.24 70.294 160.558 70.3537C160.879 70.41 161.189 70.5277 161.488 70.7067C161.789 70.8857 162.04 71.1558 162.238 71.517C162.437 71.8783 162.537 72.3622 162.537 72.9688V78H161.363V76.9659H161.304C161.224 77.1316 161.092 77.3089 160.906 77.4979C160.72 77.6868 160.473 77.8475 160.165 77.9801C159.857 78.1127 159.481 78.179 159.037 78.179ZM159.216 77.125C159.68 77.125 160.071 77.0339 160.389 76.8516C160.71 76.6693 160.952 76.4339 161.115 76.1456C161.281 75.8572 161.363 75.554 161.363 75.2358V74.1619C161.314 74.2216 161.204 74.2763 161.035 74.326C160.87 74.3724 160.677 74.4138 160.459 74.4503C160.243 74.4834 160.033 74.5133 159.827 74.5398C159.625 74.563 159.461 74.5829 159.335 74.5994C159.03 74.6392 158.745 74.7038 158.48 74.7933C158.218 74.8795 158.006 75.0104 157.843 75.1861C157.684 75.3584 157.605 75.5937 157.605 75.892C157.605 76.2997 157.756 76.608 158.057 76.8168C158.362 77.0223 158.748 77.125 159.216 77.125ZM164.615 78V70.3636H165.788V78H164.615ZM165.212 69.0909C164.983 69.0909 164.786 69.013 164.62 68.8572C164.458 68.7015 164.377 68.5142 164.377 68.2955C164.377 68.0767 164.458 67.8894 164.62 67.7337C164.786 67.5779 164.983 67.5 165.212 67.5C165.44 67.5 165.636 67.5779 165.798 67.7337C165.964 67.8894 166.047 68.0767 166.047 68.2955C166.047 68.5142 165.964 68.7015 165.798 68.8572C165.636 69.013 165.44 69.0909 165.212 69.0909ZM169.048 67.8182V78H167.874V67.8182H169.048ZM173.381 78.179C172.897 78.179 172.458 78.0878 172.063 77.9055C171.669 77.7199 171.356 77.4531 171.124 77.1051C170.892 76.7538 170.776 76.3295 170.776 75.8324C170.776 75.3949 170.862 75.0402 171.034 74.7685C171.207 74.4934 171.437 74.2779 171.725 74.1222C172.014 73.9664 172.332 73.8504 172.68 73.7741C173.031 73.6946 173.384 73.6316 173.739 73.5852C174.203 73.5256 174.579 73.4808 174.867 73.451C175.159 73.4179 175.371 73.3632 175.504 73.2869C175.64 73.2107 175.708 73.0781 175.708 72.8892V72.8494C175.708 72.3589 175.573 71.9777 175.305 71.706C175.04 71.4342 174.637 71.2983 174.097 71.2983C173.537 71.2983 173.098 71.4209 172.779 71.6662C172.461 71.9115 172.237 72.1733 172.108 72.4517L170.995 72.054C171.193 71.59 171.459 71.2287 171.79 70.9702C172.125 70.7083 172.489 70.526 172.884 70.4233C173.281 70.3172 173.673 70.2642 174.057 70.2642C174.302 70.2642 174.584 70.294 174.902 70.3537C175.224 70.41 175.534 70.5277 175.832 70.7067C176.133 70.8857 176.384 71.1558 176.583 71.517C176.781 71.8783 176.881 72.3622 176.881 72.9688V78H175.708V76.9659H175.648C175.568 77.1316 175.436 77.3089 175.25 77.4979C175.065 77.6868 174.818 77.8475 174.509 77.9801C174.201 78.1127 173.825 78.179 173.381 78.179ZM173.56 77.125C174.024 77.125 174.415 77.0339 174.733 76.8516C175.055 76.6693 175.297 76.4339 175.459 76.1456C175.625 75.8572 175.708 75.554 175.708 75.2358V74.1619C175.658 74.2216 175.548 74.2763 175.379 74.326C175.214 74.3724 175.022 74.4138 174.803 74.4503C174.587 74.4834 174.377 74.5133 174.171 74.5398C173.969 74.563 173.805 74.5829 173.679 74.5994C173.374 74.6392 173.089 74.7038 172.824 74.7933C172.562 74.8795 172.35 75.0104 172.188 75.1861C172.029 75.3584 171.949 75.5937 171.949 75.892C171.949 76.2997 172.1 76.608 172.401 76.8168C172.706 77.0223 173.093 77.125 173.56 77.125ZM179.118 78V67.8182H180.292V71.5767H180.391C180.477 71.4441 180.597 71.2751 180.749 71.0696C180.905 70.8608 181.127 70.6752 181.415 70.5128C181.707 70.3471 182.101 70.2642 182.599 70.2642C183.242 70.2642 183.808 70.425 184.299 70.7464C184.789 71.0679 185.172 71.5237 185.447 72.1136C185.722 72.7036 185.86 73.3996 185.86 74.2017C185.86 75.0104 185.722 75.7114 185.447 76.3047C185.172 76.8946 184.791 77.352 184.304 77.6768C183.817 77.9983 183.255 78.1591 182.618 78.1591C182.128 78.1591 181.735 78.0779 181.44 77.9155C181.145 77.7498 180.918 77.5625 180.759 77.3537C180.6 77.1416 180.477 76.9659 180.391 76.8267H180.252V78H179.118ZM180.272 74.1818C180.272 74.7585 180.356 75.2673 180.525 75.7081C180.694 76.1456 180.941 76.4886 181.266 76.7372C181.591 76.9825 181.989 77.1051 182.459 77.1051C182.95 77.1051 183.359 76.9759 183.687 76.7173C184.019 76.4555 184.267 76.1042 184.433 75.6634C184.602 75.2192 184.687 74.7254 184.687 74.1818C184.687 73.6449 184.604 73.161 184.438 72.7301C184.276 72.2959 184.029 71.9529 183.697 71.701C183.369 71.4458 182.957 71.3182 182.459 71.3182C181.982 71.3182 181.581 71.4392 181.256 71.6811C180.931 71.9197 180.686 72.2545 180.52 72.6854C180.355 73.1129 180.272 73.6117 180.272 74.1818ZM188.765 67.8182V78H187.592V67.8182H188.765ZM194.053 78.1591C193.317 78.1591 192.682 77.9967 192.149 77.6719C191.618 77.3438 191.209 76.8864 190.921 76.2997C190.636 75.7098 190.493 75.0237 190.493 74.2415C190.493 73.4593 190.636 72.7699 190.921 72.1733C191.209 71.5734 191.61 71.1061 192.124 70.7713C192.641 70.4332 193.244 70.2642 193.933 70.2642C194.331 70.2642 194.724 70.3305 195.112 70.4631C195.499 70.5956 195.852 70.8111 196.171 71.1094C196.489 71.4044 196.742 71.7955 196.931 72.2827C197.12 72.7699 197.215 73.3698 197.215 74.0824V74.5795H191.328V73.5653H196.021C196.021 73.1345 195.935 72.75 195.763 72.4119C195.594 72.0739 195.352 71.8071 195.037 71.6115C194.726 71.416 194.358 71.3182 193.933 71.3182C193.466 71.3182 193.062 71.4342 192.72 71.6662C192.382 71.8949 192.122 72.1932 191.94 72.5611C191.757 72.929 191.666 73.3234 191.666 73.7443V74.4205C191.666 74.9972 191.766 75.486 191.965 75.8871C192.167 76.2848 192.447 76.5881 192.805 76.7969C193.163 77.0024 193.579 77.1051 194.053 77.1051C194.361 77.1051 194.639 77.062 194.888 76.9759C195.14 76.8864 195.357 76.7538 195.539 76.5781C195.721 76.3991 195.862 76.1771 195.962 75.9119L197.095 76.2301C196.976 76.6146 196.775 76.9527 196.494 77.2443C196.212 77.5327 195.864 77.758 195.45 77.9205C195.035 78.0795 194.57 78.1591 194.053 78.1591Z" fill="#97979B"/>
+</svg>
diff --git a/static/images/sites/templates/starter-for-nextjs.png b/static/images/sites/templates/starter-for-nextjs.png
new file mode 100644
index 000000000..82207c859
Binary files /dev/null and b/static/images/sites/templates/starter-for-nextjs.png differ
diff --git a/static/images/sites/templates/starter-for-nuxt.png b/static/images/sites/templates/starter-for-nuxt.png
new file mode 100644
index 000000000..c2718d2d8
Binary files /dev/null and b/static/images/sites/templates/starter-for-nuxt.png differ
diff --git a/static/images/sites/templates/starter-for-react-native.png b/static/images/sites/templates/starter-for-react-native.png
new file mode 100644
index 000000000..3c880e30b
Binary files /dev/null and b/static/images/sites/templates/starter-for-react-native.png differ
diff --git a/static/images/sites/templates/starter-for-react.png b/static/images/sites/templates/starter-for-react.png
new file mode 100644
index 000000000..871bba220
Binary files /dev/null and b/static/images/sites/templates/starter-for-react.png differ
diff --git a/static/images/sites/templates/starter-for-svelte.png b/static/images/sites/templates/starter-for-svelte.png
new file mode 100644
index 000000000..01f547a7b
Binary files /dev/null and b/static/images/sites/templates/starter-for-svelte.png differ
diff --git a/static/images/sites/templates/starter-for-vue.png b/static/images/sites/templates/starter-for-vue.png
new file mode 100644
index 000000000..bdf3e67ee
Binary files /dev/null and b/static/images/sites/templates/starter-for-vue.png differ
diff --git a/static/images/sites/templates/template-for-blog.png b/static/images/sites/templates/template-for-blog.png
new file mode 100644
index 000000000..72305a9e0
Binary files /dev/null and b/static/images/sites/templates/template-for-blog.png differ
diff --git a/static/images/sites/templates/template-for-event.png b/static/images/sites/templates/template-for-event.png
new file mode 100644
index 000000000..5a1f944c0
Binary files /dev/null and b/static/images/sites/templates/template-for-event.png differ
diff --git a/static/images/sites/templates/template-for-onelink.png b/static/images/sites/templates/template-for-onelink.png
new file mode 100644
index 000000000..d42b5faa5
Binary files /dev/null and b/static/images/sites/templates/template-for-onelink.png differ
diff --git a/static/images/sites/templates/template-for-portfolio.png b/static/images/sites/templates/template-for-portfolio.png
new file mode 100644
index 000000000..1b7a30baa
Binary files /dev/null and b/static/images/sites/templates/template-for-portfolio.png differ
diff --git a/static/images/sites/templates/template-for-store.png b/static/images/sites/templates/template-for-store.png
new file mode 100644
index 000000000..5e7156242
Binary files /dev/null and b/static/images/sites/templates/template-for-store.png differ
diff --git a/static/images/vcs/status-building-dark.gif b/static/images/vcs/status-building-dark.gif
deleted file mode 100644
index 6d4afe72a..000000000
Binary files a/static/images/vcs/status-building-dark.gif and /dev/null differ
diff --git a/static/images/vcs/status-building-light.gif b/static/images/vcs/status-building-light.gif
deleted file mode 100644
index c64a7643c..000000000
Binary files a/static/images/vcs/status-building-light.gif and /dev/null differ
diff --git a/static/images/vcs/status-failed-dark.png b/static/images/vcs/status-failed-dark.png
deleted file mode 100644
index c6508e93b..000000000
Binary files a/static/images/vcs/status-failed-dark.png and /dev/null differ
diff --git a/static/images/vcs/status-failed-light.png b/static/images/vcs/status-failed-light.png
deleted file mode 100644
index 0e4d4533d..000000000
Binary files a/static/images/vcs/status-failed-light.png and /dev/null differ
diff --git a/static/images/vcs/status-ready-dark.png b/static/images/vcs/status-ready-dark.png
deleted file mode 100644
index 7408fb0cb..000000000
Binary files a/static/images/vcs/status-ready-dark.png and /dev/null differ
diff --git a/static/images/vcs/status-ready-light.png b/static/images/vcs/status-ready-light.png
deleted file mode 100644
index 87e141fcf..000000000
Binary files a/static/images/vcs/status-ready-light.png and /dev/null differ
diff --git a/static/images/vcs/status-waiting-dark.png b/static/images/vcs/status-waiting-dark.png
deleted file mode 100644
index 29a4ee540..000000000
Binary files a/static/images/vcs/status-waiting-dark.png and /dev/null differ
diff --git a/static/images/vcs/status-waiting-light.png b/static/images/vcs/status-waiting-light.png
deleted file mode 100644
index 676d530cf..000000000
Binary files a/static/images/vcs/status-waiting-light.png and /dev/null differ
diff --git a/svelte.config.js b/svelte.config.js
index 6dc507df4..2939a3e1b 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -18,7 +18,8 @@ const config = {
 
     kit: {
         alias: {
-            $routes: './src/routes'
+            $routes: './src/routes',
+            $themes: './src/themes'
         },
         adapter: adapter({
             fallback: 'index.html',
diff --git a/tests/unit/components/code.test.ts b/tests/unit/components/code.test.ts
deleted file mode 100644
index 58d39a866..000000000
--- a/tests/unit/components/code.test.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { fireEvent, render } from '@testing-library/svelte';
-import { expect, test, vi } from 'vitest';
-import { Code } from '../../../src/lib/components';
-
-test('default props', async () => {
-    const { container } = render(Code, {
-        code: 'console.log("test");',
-        language: 'js'
-    });
-
-    expect(container.querySelector('.controls').children.length).toEqual(0);
-});
-
-test('shows label', async () => {
-    const { container } = render(Code, {
-        code: 'console.log("test");',
-        language: 'js',
-        label: 'My Label'
-    });
-
-    expect(container).toContainHTML('My Label');
-});
-
-test('shows line numbers', async () => {
-    const { container } = render(Code, {
-        code: 'a\nb;\nc;',
-        language: 'js',
-        withLineNumbers: true
-    });
-
-    expect(container.querySelectorAll('.line-numbers').length).toEqual(1);
-    expect(container.querySelectorAll('.line-numbers-rows').length).toEqual(1);
-});
-
-test('shows code highlighted javascript', async () => {
-    const { container } = render(Code, {
-        code: 'console.log("test");',
-        language: 'js'
-    });
-
-    expect(container.querySelectorAll('.prism-token.prism-function').length).toEqual(1);
-    expect(container.querySelectorAll('.prism-token.prism-string').length).toEqual(1);
-    expect(container.querySelectorAll('.prism-token.prism-punctuation').length).toEqual(4);
-});
-
-test('shows code highlighted json', async () => {
-    const { container } = render(Code, {
-        code: JSON.stringify({ key: 'value' }),
-        language: 'json'
-    });
-
-    expect(container.querySelectorAll('.prism-token.prism-property').length).toEqual(1);
-    expect(container.querySelectorAll('.prism-token.prism-operator').length).toEqual(1);
-    expect(container.querySelectorAll('.prism-token.prism-string').length).toEqual(1);
-    expect(container.querySelectorAll('.prism-token.prism-punctuation').length).toEqual(2);
-});
-
-test('copy to clipboard function called on click', async () => {
-    const { container } = render(Code, {
-        code: 'console.log("test");',
-        language: 'js',
-        withCopy: true
-    });
-
-    Object.assign(window.navigator, {
-        clipboard: {
-            writeText: vi.fn().mockImplementation(() => Promise.resolve())
-        }
-    });
-
-    const button = container.querySelector('.icon-duplicate');
-
-    await fireEvent.click(button);
-
-    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith('console.log("test");');
-});
diff --git a/tests/unit/components/copy.test.ts b/tests/unit/components/copy.test.ts
deleted file mode 100644
index 43a80f9c7..000000000
--- a/tests/unit/components/copy.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { expect, test, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-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
-    });
-
-    Object.assign(window.navigator, {
-        clipboard: {
-            writeText: vi.fn().mockImplementation(() => Promise.resolve())
-        }
-    });
-
-    const button = getByTestId('copy-content');
-    await fireEvent.click(button);
-
-    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith('This is a test');
-});
-
-test('copy to clipboard function called on enter', async () => {
-    const { getByTestId } = render(Copy, {
-        value
-    });
-    Object.assign(window.navigator, {
-        clipboard: {
-            writeText: vi.fn().mockImplementation(() => Promise.resolve())
-        }
-    });
-
-    const button = getByTestId('copy-content');
-    await fireEvent.keyUp(button, {
-        key: 'Enter'
-    });
-
-    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith('This is a test');
-});
diff --git a/tests/unit/components/copyInput.test.ts b/tests/unit/components/copyInput.test.ts
deleted file mode 100644
index a60608ea7..000000000
--- a/tests/unit/components/copyInput.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { vi } from 'vitest';
-import { expect, test } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { CopyInput } from '../../../src/lib/components';
-
-const value = 'This is a test';
-
-test('shows CopyInput component', () => {
-    const { getByRole } = render(CopyInput, { value });
-    const input = document.querySelector('input');
-    const button = getByRole('button');
-
-    expect(input).toBeInTheDocument();
-    expect(button).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
-    expect(input).toHaveAttribute('readonly');
-});
-
-test('copy to clipboard function called on click', async () => {
-    const { getByRole } = render(CopyInput, { value });
-
-    Object.assign(window.navigator, {
-        clipboard: {
-            writeText: vi.fn().mockImplementation(() => Promise.resolve())
-        }
-    });
-
-    const button = getByRole('button');
-    await fireEvent.click(button);
-
-    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith('This is a test');
-});
diff --git a/tests/unit/components/dropList.test.ts b/tests/unit/components/dropList.test.ts
deleted file mode 100644
index 4c8fd312f..000000000
--- a/tests/unit/components/dropList.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { expect, test } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import DropList from '../../../src/lib/mock/drop.test.svelte';
-
-const data = {
-    show: true
-};
-
-test('shows drop list component', () => {
-    render(DropList, { ...data });
-    const wrapper = document.querySelector('div');
-    const dropList = document.querySelector('ul.drop-list');
-
-    expect(wrapper).toBeInTheDocument();
-    expect(dropList).toBeInTheDocument();
-});
-
-test('hide drop list on body click', async () => {
-    const { component } = render(DropList, { ...data });
-    await fireEvent.click(document.body);
-    expect(component.show).toStrictEqual(false);
-});
-
-test('hide drop list on wrapper click', async () => {
-    const { component } = render(DropList, { ...data });
-    const wrapper = document.querySelector('div');
-
-    await fireEvent.click(wrapper);
-    expect(component.show).toStrictEqual(false);
-});
diff --git a/tests/unit/components/dropTabsItem.test.ts b/tests/unit/components/dropTabsItem.test.ts
deleted file mode 100644
index 8e5728df8..000000000
--- a/tests/unit/components/dropTabsItem.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { expect, test } from 'vitest';
-import { vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { SecondaryTabsItem } from '../../../src/lib/components';
-
-test('shows tab', () => {
-    const { getByRole } = render(SecondaryTabsItem);
-
-    expect(getByRole('tab')).toBeInTheDocument();
-});
-
-test('shows link', () => {
-    render(SecondaryTabsItem, { href: 'https://www.appwrite.io' });
-    const href = document.querySelector('a');
-    expect(href).toBeInTheDocument();
-});
-
-test('shows button - disabled', () => {
-    const { getByRole } = render(SecondaryTabsItem, { href: null, disabled: true });
-
-    expect(getByRole('button')).toBeDisabled();
-});
-
-test('shows button - on:click', async () => {
-    const { getByRole, component } = render(SecondaryTabsItem);
-    const button = getByRole('button');
-
-    const callback = vi.fn();
-    component.$on('click', callback);
-
-    await fireEvent.click(button);
-    expect(callback).toHaveBeenCalled();
-});
diff --git a/tests/unit/components/heading.test.ts b/tests/unit/components/heading.test.ts
deleted file mode 100644
index 54efeba71..000000000
--- a/tests/unit/components/heading.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { Heading } from '../../../src/lib/components';
-
-test('shows heading', () => {
-    const tag = 'h1';
-    const size = '7';
-
-    const { container } = render(Heading, { tag, size });
-
-    const headings = container.querySelectorAll(tag);
-    expect(headings.length).toEqual(1);
-    expect(headings[0].className).includes(`heading-level-${size}`);
-});
diff --git a/tests/unit/components/modal.test.ts b/tests/unit/components/modal.test.ts
deleted file mode 100644
index b497f0e72..000000000
--- a/tests/unit/components/modal.test.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { render } from '@testing-library/svelte';
-import Modal from '../../../src/lib/mock/modal.test.svelte';
-import { expect, test } from 'vitest';
-
-test('renders modal', async () => {
-    const { container } = render(Modal);
-
-    expect(container.querySelector('dialog')).toBeInTheDocument();
-});
diff --git a/tests/unit/components/paginationInline.test.ts b/tests/unit/components/paginationInline.test.ts
deleted file mode 100644
index 6a73f040c..000000000
--- a/tests/unit/components/paginationInline.test.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { expect, test } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { PaginationInline } from '../../../src/lib/components';
-
-test('shows controls', () => {
-    const { getByLabelText } = render(PaginationInline, {
-        limit: 100,
-        offset: 0,
-        sum: 150
-    });
-    expect(getByLabelText('prev page')).toBeInTheDocument();
-    expect(getByLabelText('next page')).toBeInTheDocument();
-});
-
-test('pagination - first page', () => {
-    const { getByLabelText } = render(PaginationInline, {
-        limit: 25,
-        offset: 0,
-        sum: 100
-    });
-
-    expect(getByLabelText('prev page')).toHaveClass('is-disabled');
-    expect(getByLabelText('next page')).not.toHaveClass('is-disabled');
-});
-
-test('pagination - last page', () => {
-    const { getByLabelText } = render(PaginationInline, {
-        limit: 25,
-        offset: 25,
-        sum: 30
-    });
-
-    expect(getByLabelText('prev page')).not.toHaveClass('is-disabled');
-    expect(getByLabelText('next page')).toHaveClass('is-disabled');
-});
-
-test('pagination - forward', async () => {
-    const { getByLabelText, component } = render(PaginationInline, {
-        limit: 25,
-        offset: 0,
-        sum: 60
-    });
-
-    const back = getByLabelText('prev page');
-    const forth = getByLabelText('next page');
-    expect(back).toHaveClass('is-disabled');
-
-    await fireEvent.click(forth);
-    expect(component.offset).toEqual(25);
-
-    await fireEvent.click(forth);
-    expect(component.offset).toEqual(50);
-
-    await fireEvent.click(forth);
-    expect(component.offset).toEqual(50);
-    expect(forth).toHaveClass('is-disabled');
-});
-
-test('pagination - backwards', async () => {
-    const { getByLabelText, component } = render(PaginationInline, {
-        limit: 25,
-        offset: 55,
-        sum: 60
-    });
-
-    const back = getByLabelText('prev page');
-    const forth = getByLabelText('next page');
-    expect(forth).toHaveClass('is-disabled');
-
-    await fireEvent.click(back);
-    expect(component.offset).toEqual(25);
-
-    await fireEvent.click(back);
-    expect(component.offset).toEqual(0);
-
-    await fireEvent.click(back);
-    expect(component.offset).toEqual(0);
-    expect(back).toHaveClass('is-disabled');
-});
-
-test('pagination - number button click', async () => {
-    const { getByText, getAllByLabelText, component } = render(PaginationInline, {
-        limit: 25,
-        offset: 0,
-        sum: 60
-    });
-
-    const buttons = getAllByLabelText('page');
-    const [button1, button2, button3] = buttons;
-
-    const one = getByText('1');
-    const two = getByText('2');
-    const three = getByText('3');
-    expect(button1).toHaveClass('is-disabled');
-
-    await fireEvent.click(two);
-    expect(component.offset).toEqual(25);
-    expect(button1).not.toHaveClass('is-disabled');
-    expect(button2).toHaveClass('is-disabled');
-
-    await fireEvent.click(three);
-    expect(component.offset).toEqual(50);
-    expect(button2).not.toHaveClass('is-disabled');
-    expect(button3).toHaveClass('is-disabled');
-
-    await fireEvent.click(one);
-    expect(component.offset).toEqual(0);
-    expect(button1).toHaveClass('is-disabled');
-    expect(button3).not.toHaveClass('is-disabled');
-});
-
-test('shows no active controls', () => {
-    const { queryByLabelText } = render(PaginationInline, {
-        limit: 25,
-        offset: 0,
-        sum: 10
-    });
-
-    expect(queryByLabelText('prev page')).toHaveClass('is-disabled');
-    expect(queryByLabelText('next page')).toHaveClass('is-disabled');
-});
diff --git a/tests/unit/components/secret.test.ts b/tests/unit/components/secret.test.ts
deleted file mode 100644
index d4fa75893..000000000
--- a/tests/unit/components/secret.test.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { expect, test } from 'vitest';
-import { vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { Secret } from '../../../src/lib/components';
-
-const value = 'This is a secret';
-
-test('shows Secret component', () => {
-    const { container } = render(Secret, { value });
-    const secret = container.querySelector('span.text');
-    const toggle = container.querySelector('[aria-label="show hidden text"]');
-    const copy = container.querySelector('[aria-label="copy text"]');
-
-    expect(secret).toBeInTheDocument();
-    expect(toggle).toBeInTheDocument();
-    expect(copy).toBeInTheDocument();
-});
-
-test('toggle secret', async () => {
-    const { container } = render(Secret, { value });
-    const toggle = container.querySelector('[aria-label="show hidden text"]');
-
-    let secret = container.querySelector('span.text');
-    expect(secret).not.toContainEqual(value);
-    await fireEvent.click(toggle);
-
-    secret = container.querySelector('span.text');
-    expect(secret.textContent).toEqual(value);
-    await fireEvent.click(toggle);
-
-    secret = container.querySelector('span.text');
-    expect(secret.textContent).not.toEqual(value);
-});
-
-test('copy to clipboard on click', async () => {
-    const { container } = render(Secret, { value });
-    const copy = container.querySelector('[aria-label="copy text"]');
-
-    Object.assign(window.navigator, {
-        clipboard: {
-            writeText: vi.fn().mockImplementation(() => Promise.resolve())
-        }
-    });
-
-    await fireEvent.click(copy);
-
-    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith(value);
-});
diff --git a/tests/unit/components/tab.test.ts b/tests/unit/components/tab.test.ts
deleted file mode 100644
index 7ad677d2f..000000000
--- a/tests/unit/components/tab.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { expect, test } from 'vitest';
-import { vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { Tab } from '../../../src/lib/components';
-
-test('shows tab', () => {
-    const { getByRole } = render(Tab);
-
-    expect(getByRole('tab')).toBeInTheDocument();
-});
-test('shows tab - is selected', () => {
-    const { getByRole } = render(Tab, { selected: true });
-
-    expect(getByRole('tab').querySelector('button')).toHaveClass('is-selected');
-});
-
-test('shows tab - is link', () => {
-    render(Tab, { href: 'https://appwrite.io' });
-    const link = document.querySelector('a');
-
-    expect(link).toHaveAttribute('href', 'https://appwrite.io');
-});
-
-test('shows tab - on:click', async () => {
-    const { getByRole, component } = render(Tab);
-    const tab = getByRole('tab').querySelector('button');
-    const callback = vi.fn();
-    component.$on('click', callback);
-
-    await fireEvent.click(tab);
-    expect(callback).toHaveBeenCalled();
-});
diff --git a/tests/unit/components/tabs.test.ts b/tests/unit/components/tabs.test.ts
deleted file mode 100644
index 9e18d528a..000000000
--- a/tests/unit/components/tabs.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import Tabs from '../../../src/lib/mock/tabs.test.svelte';
-
-const list = [
-    {
-        title: 'Tab 1',
-        href: '#tab-1'
-    },
-    {
-        title: 'Tab 2',
-        href: '#tab-2'
-    },
-    {
-        title: 'Tab 3',
-        href: '#tab-3'
-    }
-];
-
-test('shows Tabs component', () => {
-    const { container } = render(Tabs, { tabs: list });
-    const tabs = container.querySelector('div.tabs');
-    const children = tabs.childNodes;
-
-    expect(tabs).toBeInTheDocument();
-    expect(children.length).toBe(list.length);
-});
diff --git a/tests/unit/elements/button.test.ts b/tests/unit/elements/button.test.ts
deleted file mode 100644
index 2fd0a90bc..000000000
--- a/tests/unit/elements/button.test.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { expect, test } from 'vitest';
-import { vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { Button } from '../../../src/lib/elements/forms';
-
-test('shows button', () => {
-    const { getByRole } = render(Button);
-
-    expect(getByRole('button')).toBeInTheDocument();
-});
-
-test('shows button - disabled', () => {
-    const { getByRole } = render(Button, { disabled: true });
-
-    expect(getByRole('button')).toBeDisabled();
-});
-
-test('shows button - submit', () => {
-    const { getByRole } = render(Button, { submit: true });
-
-    expect(getByRole('button')).toHaveAttribute('type', 'submit');
-});
-
-test('shows button - secondary', () => {
-    const { getByRole } = render(Button, { secondary: true });
-
-    expect(getByRole('button')).toHaveClass('is-secondary');
-});
-test('shows button - text', () => {
-    const { getByRole } = render(Button, { text: true });
-
-    expect(getByRole('button')).toHaveClass('is-text');
-});
-
-test('shows button - danger', () => {
-    const { getByRole } = render(Button, { danger: true });
-
-    expect(getByRole('button')).toHaveClass('is-danger');
-});
-
-test('shows button - round', () => {
-    const { getByRole } = render(Button, { round: true });
-
-    expect(getByRole('button')).toHaveClass('is-only-icon');
-});
-test('shows button - full width', () => {
-    const { getByRole } = render(Button, { fullWidth: true });
-
-    expect(getByRole('button')).toHaveClass('is-full-width');
-});
-
-test('shows button - is link', () => {
-    render(Button, { href: 'https://appwrite.io' });
-    const link = document.querySelector('a');
-
-    expect(link).toHaveAttribute('href', 'https://appwrite.io');
-});
-test('shows button - is link is external', () => {
-    render(Button, { href: 'https://appwrite.io', external: true });
-    const link = document.querySelector('a');
-
-    expect(link).toHaveAttribute('target', '_blank');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-});
-
-test('shows button - on:click', async () => {
-    const { getByRole, component } = render(Button);
-    const button = getByRole('button');
-    const callback = vi.fn();
-    component.$on('click', callback);
-
-    await fireEvent.click(button);
-    expect(callback).toHaveBeenCalled();
-});
diff --git a/tests/unit/elements/form.test.ts b/tests/unit/elements/form.test.ts
deleted file mode 100644
index 9bdd77934..000000000
--- a/tests/unit/elements/form.test.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { expect, test } from 'vitest';
-import { vi } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { Form } from '../../../src/lib/elements/forms';
-import { sleep } from '$lib/helpers/promises';
-import CompleteForm from '../../../src/lib/mock/form.test.svelte';
-import { tick } from 'svelte';
-
-test('shows form', () => {
-    const { container } = render(Form, {
-        onSubmit: vi.fn()
-    });
-    const form = container.querySelector('form');
-    expect(form).toBeInTheDocument();
-    expect(form).toHaveClass('form');
-    expect(form).toHaveClass('common-section');
-    expect(form).not.toHaveClass('modal-form');
-});
-
-test('shows form - no margin', () => {
-    const { container } = render(Form, {
-        noMargin: true,
-        onSubmit: vi.fn()
-    });
-    const form = container.querySelector('form');
-    expect(form).toHaveClass('form');
-    expect(form).not.toHaveClass('common-section');
-    expect(form).not.toHaveClass('modal-form');
-});
-
-test('shows form - no style', () => {
-    const { container } = render(Form, {
-        noStyle: true,
-        onSubmit: vi.fn()
-    });
-    const form = container.querySelector('form');
-    expect(form).toHaveClass('common-section');
-    expect(form).not.toHaveClass('form');
-    expect(form).not.toHaveClass('modal-form');
-});
-
-test('shows form - is modal', () => {
-    const { container } = render(Form, {
-        isModal: true,
-        onSubmit: vi.fn()
-    });
-    const form = container.querySelector('form');
-    expect(form).toHaveClass('form');
-    expect(form).toHaveClass('common-section');
-    expect(form).toHaveClass('modal-form');
-});
-
-test('shows form - submitting', async () => {
-    const callback = vi.fn();
-    const { container } = render(Form, {
-        onSubmit: callback
-    });
-    const form = container.querySelector('form');
-    form.requestSubmit();
-    expect(callback.mock.calls.length).toBe(1);
-});
-
-test('shows form - submitting promise', async () => {
-    const callback = vi.fn();
-    const { container } = render(Form, {
-        onSubmit: async () => {
-            await sleep(100);
-            callback();
-        }
-    });
-    const form = container.querySelector('form');
-    form.requestSubmit();
-    expect(callback.mock.calls.length).toBe(0);
-    await sleep(200);
-    expect(callback.mock.calls.length).toBe(1);
-});
-
-test('shows form - prevent double submit', async () => {
-    const { container } = render(CompleteForm, {
-        onSubmit: async () => {
-            await sleep(100);
-        }
-    });
-    const form = container.querySelector('form');
-    const submit = container.querySelector('button[type="submit"]');
-    const button = container.querySelector('button[type="button"]');
-    expect(submit).toBeEnabled();
-    expect(button).toBeEnabled();
-    form.requestSubmit();
-    await tick();
-    expect(submit).toBeDisabled();
-    expect(button).toBeEnabled();
-    await sleep(200);
-    expect(submit).toBeEnabled();
-    expect(button).toBeEnabled();
-});
diff --git a/tests/unit/elements/inputCheckbox.test.ts b/tests/unit/elements/inputCheckbox.test.ts
deleted file mode 100644
index aa11d7873..000000000
--- a/tests/unit/elements/inputCheckbox.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { expect, test } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputCheckbox } from '../../../src/lib/elements/forms';
-
-test('shows checkbox input', () => {
-    const { getByText, getByLabelText } = render(InputCheckbox, { id: 'input', label: 'checkbox' });
-    const checkbox = getByLabelText('checkbox');
-
-    expect(getByText('checkbox')).toBeInTheDocument();
-    expect(checkbox).toBeInTheDocument();
-});
-
-test('shows checkbox input - required', () => {
-    const { getByLabelText } = render(InputCheckbox, {
-        id: 'input',
-        label: 'checkbox',
-        required: true
-    });
-
-    expect(getByLabelText('checkbox')).toBeRequired();
-});
-
-test('shows checkbox input - disabled', () => {
-    const { getByLabelText } = render(InputCheckbox, {
-        id: 'input',
-        label: 'checkbox',
-        disabled: true
-    });
-
-    expect(getByLabelText('checkbox')).toBeDisabled();
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputCheckbox, { id: 'input', label: 'checkbox' });
-    const checkbox = getByLabelText('checkbox');
-
-    expect(component.checked).toEqual(false);
-    await userEvent.click(checkbox);
-    expect(component.checked).toEqual(true);
-});
-
-test('state', async () => {
-    const { getByLabelText, component } = render(InputCheckbox, { id: 'input', label: 'checkbox' });
-    const checkbox = getByLabelText('checkbox');
-
-    expect(checkbox).not.toBeChecked();
-    expect(component.checked).toStrictEqual(false);
-
-    await fireEvent.click(checkbox);
-    expect(checkbox).toBeChecked();
-    expect(component.checked).toStrictEqual(true);
-
-    await fireEvent.click(checkbox);
-    expect(checkbox).not.toBeChecked();
-    expect(component.checked).toStrictEqual(false);
-
-    component.checked = true;
-    expect(checkbox).toBeChecked();
-    expect(component.checked).toStrictEqual(true);
-
-    component.checked = false;
-    expect(checkbox).not.toBeChecked();
-    expect(component.checked).toStrictEqual(false);
-});
diff --git a/tests/unit/elements/inputCron.test.ts b/tests/unit/elements/inputCron.test.ts
deleted file mode 100644
index b055c45f5..000000000
--- a/tests/unit/elements/inputCron.test.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputCron } from '../../../src/lib/elements/forms';
-
-const validStrings = [
-    '*/2 */2 * * *',
-    '* * * * *',
-    '* 20,21,22 * * *',
-    // Handles CSV values
-    '* 20,22 * * *',
-    // CSV values can be complex
-    '7-9 * */9 * *',
-    // 15th minute, of the second hour, every 15 days, in January, every Friday
-    '1 * * * 7',
-    // Test with exact times
-    '47 21 * * *',
-    // Test Day of the week
-    // According cron implementation, 0|7 = sunday, 1 => monday, etc
-    '* * * * 0',
-    '* * * * 7',
-    '* * * * 1',
-    // Should return the sunday date as 7 equals 0
-    '0 0 * * MON,SUN',
-    '0 0 * * 1,7',
-    '0 0 * * 0-4',
-    '0 0 * * 7-4',
-    '0 0 * * 4-7',
-    '0 0 * * 7-3',
-    '0 0 * * 3-7',
-    '0 0 * * 3-7',
-    // Test lists of values and ranges (Abhoryo)
-    '0 0 * * 2-7',
-    '0 0 * * 2-7',
-    '0 0 * * 4-7',
-    // Test increments of ranges
-    '0-12/4 * * * *',
-    '4-59/2 * * * *',
-    '4-59/2 * * * *',
-    '4-59/3 * * * *',
-    // Test Day of the Week and the Day of the Month
-    '0 0 1 1 0',
-    '0 0 1 JAN 0',
-    '0 0 1 * 0',
-    // Test the W day of the week modifier for day of the month field
-    '0 0 2W * *',
-    '0 0 1W * *',
-    '0 0 1W * *',
-    '0 0 3W * *',
-    '0 0 16W * *',
-    '0 0 28W * *',
-    '0 0 30W * *',
-    '0 0 31W * *',
-    // Test the last weekday of a month
-    '* * * * 5L',
-    '* * * * 6L',
-    '* * * * 7L',
-    '* * * * 1L',
-    '* * * 1 5L',
-    // Test the hash symbol for the nth weekday of a given month
-    '* * * * 5#2',
-    '* * * * 5#1',
-    '* * * * 3#4',
-    // make sure that casing is less relevant for shortcuts, months, and days
-    '0 1 15 JUL mon,Wed,FRi',
-    '0 1 15 jul mon,Wed,FRi',
-    //DOW and DOM do not support ?
-    '0 12 * * ?',
-    '0 12 ? * *',
-    '0-59/59 10 * * *',
-    '0-59/59 10 * * *',
-    '0-59/59 10 * * *',
-    '0-59/65 10 * * *',
-    '41-59/24 5 * * *'
-];
-const invalidStrings = ['invalid', '*', '* *', '* * *', '* * * *'];
-
-test('shows id input', () => {
-    const { getByPlaceholderText } = render(InputCron, { label: 'Cron', id: 'cron' });
-    const input = getByPlaceholderText('* * * * *');
-
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
-});
-
-test('state', async () => {
-    const { component, getByPlaceholderText } = render(InputCron, {
-        value: '',
-        label: 'Cron',
-        id: 'cron'
-    });
-    const input = getByPlaceholderText('* * * * *');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
-
-validStrings.forEach((validString) => {
-    test(`validates ${validString} as valid`, () => {
-        const { getByPlaceholderText } = render(InputCron, {
-            value: validString,
-            label: 'Cron',
-            id: 'cron'
-        });
-        const input = getByPlaceholderText('* * * * *') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(true);
-    });
-});
-
-invalidStrings.forEach((invalidString) => {
-    test(`validates ${invalidString} as invalid`, () => {
-        const { getByPlaceholderText } = render(InputCron, {
-            value: invalidString,
-            label: 'Cron',
-            id: 'cron'
-        });
-        const input = getByPlaceholderText('* * * * *') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(false);
-    });
-});
diff --git a/tests/unit/elements/inputDomain.test.ts b/tests/unit/elements/inputDomain.test.ts
deleted file mode 100644
index ed903e4d3..000000000
--- a/tests/unit/elements/inputDomain.test.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputDomain } from '../../../src/lib/elements/forms';
-
-const validStrings = ['example.com', 'i-need.travelersinsurance', 'sub.domain.com'];
-const invalidStrings = ['not-a-domain', 'tld-too-short.a', 'tld-too-long.overeighteencharacters'];
-
-test('shows domain input', () => {
-    const { getByText, getByLabelText } = render(InputDomain, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
-});
-
-test('shows domain input - required', () => {
-    const { getByLabelText } = render(InputDomain, { id: 'input', label: 'input', required: true });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows domain input - disabled', () => {
-    const { getByLabelText } = render(InputDomain, { id: 'input', label: 'input', disabled: true });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows domain input - autofocus', () => {
-    const { getByLabelText } = render(InputDomain, {
-        id: 'input',
-        label: 'input',
-        autofocus: true
-    });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows domain input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputDomain, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows domain input - hide label', () => {
-    render(InputDomain, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows domain input - autocomplete', () => {
-    const { getByLabelText } = render(InputDomain, {
-        id: 'input',
-        label: 'input',
-        autocomplete: true
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on');
-});
-
-test('shows domain input - maxlength', () => {
-    const { getByLabelText } = render(InputDomain, {
-        id: 'input',
-        label: 'input',
-        maxlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputDomain, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
-
-validStrings.forEach((validString) => {
-    test(`validates ${validString} as valid`, () => {
-        const { getByLabelText } = render(InputDomain, {
-            id: 'input',
-            label: 'input',
-            value: validString
-        });
-        const input = getByLabelText('input') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(true);
-    });
-});
-
-invalidStrings.forEach((invalidString) => {
-    // TODO: skipping because these pass in the browser but fail
-    // in testing. It could be because of jsdom
-    test.skip(`validates ${invalidString} as invalid`, () => {
-        const { getByLabelText } = render(InputDomain, {
-            id: 'input',
-            label: 'input',
-            value: invalidString
-        });
-        const input = getByLabelText('input') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(false);
-    });
-});
diff --git a/tests/unit/elements/inputEmail.test.ts b/tests/unit/elements/inputEmail.test.ts
deleted file mode 100644
index 326421e9a..000000000
--- a/tests/unit/elements/inputEmail.test.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputEmail } from '../../../src/lib/elements/forms';
-
-test('shows email input', () => {
-    const { getByText, getByLabelText } = render(InputEmail, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'email');
-});
-
-test('shows email input - required', () => {
-    const { getByLabelText } = render(InputEmail, { id: 'input', label: 'input', required: true });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows email input - disabled', () => {
-    const { getByLabelText } = render(InputEmail, { id: 'input', label: 'input', disabled: true });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows email input - autofocus', () => {
-    const { getByLabelText } = render(InputEmail, { id: 'input', label: 'input', autofocus: true });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows email input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputEmail, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows email input - hide label', () => {
-    render(InputEmail, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows email input - autocomplete', () => {
-    const { getByLabelText } = render(InputEmail, {
-        id: 'input',
-        label: 'input',
-        autocomplete: true
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputEmail, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
diff --git a/tests/unit/elements/inputId.test.ts b/tests/unit/elements/inputId.test.ts
deleted file mode 100644
index 0a6666cd3..000000000
--- a/tests/unit/elements/inputId.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputId } from '../../../src/lib/elements/forms';
-
-const validStrings = ['valid_string', 'valid-string', 'valid.string', 'validstring123', 'valid_'];
-
-const invalidStrings = ['-invalid', '.invalid', '_invalid'];
-
-test('shows id input', () => {
-    const { getByPlaceholderText } = render(InputId);
-    const input = getByPlaceholderText('Enter ID');
-
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
-});
-
-test('state', async () => {
-    const { component, getByPlaceholderText } = render(InputId, { value: '' });
-    const input = getByPlaceholderText('Enter ID');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
-
-validStrings.forEach((validString) => {
-    test(`validates ${validString} as valid`, () => {
-        const { getByPlaceholderText } = render(InputId, { value: validString });
-        const input = getByPlaceholderText('Enter ID') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(true);
-    });
-});
-invalidStrings.forEach((invalidString) => {
-    test(`validates ${invalidString} as invalid`, () => {
-        const { getByPlaceholderText } = render(InputId, { value: invalidString });
-        const input = getByPlaceholderText('Enter ID') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(false);
-    });
-});
diff --git a/tests/unit/elements/inputNumber.test.ts b/tests/unit/elements/inputNumber.test.ts
deleted file mode 100644
index e0b10fbc9..000000000
--- a/tests/unit/elements/inputNumber.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputNumber } from '../../../src/lib/elements/forms';
-
-test('shows number input', () => {
-    const { getByText, getByLabelText } = render(InputNumber, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'number');
-});
-
-test('shows number input - required', () => {
-    const { getByLabelText } = render(InputNumber, { id: 'input', label: 'input', required: true });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows number input - disabled', () => {
-    const { getByLabelText } = render(InputNumber, { id: 'input', label: 'input', disabled: true });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows number input - autofocus', () => {
-    const { getByLabelText } = render(InputNumber, {
-        id: 'input',
-        label: 'input',
-        autofocus: true
-    });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows number input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputNumber, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows number input - hide label', () => {
-    render(InputNumber, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows number input - max', () => {
-    const { getByLabelText } = render(InputNumber, {
-        id: 'input',
-        label: 'input',
-        max: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('max', '2');
-});
-test('shows number input - min', () => {
-    const { getByLabelText } = render(InputNumber, {
-        id: 'input',
-        label: 'input',
-        min: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('min', '2');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputNumber, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual(null);
-    await userEvent.type(input, '123');
-    expect(component.value).toEqual(123);
-});
diff --git a/tests/unit/elements/inputPassword.test.ts b/tests/unit/elements/inputPassword.test.ts
deleted file mode 100644
index 69bbdbd1f..000000000
--- a/tests/unit/elements/inputPassword.test.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputPassword } from '../../../src/lib/elements/forms';
-
-test('shows password input', () => {
-    const { getByText, getByLabelText } = render(InputPassword, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'password');
-});
-
-test('shows password input - required', () => {
-    const { getByLabelText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        required: true
-    });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows password input - disabled', () => {
-    const { getByLabelText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        disabled: true
-    });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows password input - autofocus', () => {
-    const { getByLabelText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        autofocus: true
-    });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows password input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows password input - meter', () => {
-    render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        meter: true
-    });
-
-    const meter = document.querySelector('meter');
-    expect(meter).toBeInTheDocument();
-});
-
-test('shows password input - show password button', () => {
-    const { getByRole } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        showPasswordButton: true
-    });
-
-    expect(getByRole('button')).toBeInTheDocument();
-});
-
-test('shows password input - maxlength', () => {
-    const { getByLabelText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        maxlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
-});
-test('shows password input - minlength', () => {
-    const { getByLabelText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        minlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('minlength', '2');
-});
-
-test('shows password input - hide label', () => {
-    render(InputPassword, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputPassword, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
diff --git a/tests/unit/elements/inputPhone.test.ts b/tests/unit/elements/inputPhone.test.ts
deleted file mode 100644
index bbe48b576..000000000
--- a/tests/unit/elements/inputPhone.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputPhone } from '../../../src/lib/elements/forms';
-
-test('shows phone input', () => {
-    const { getByText, getByLabelText } = render(InputPhone, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-});
-
-test('shows phone input - required', () => {
-    const { getByLabelText } = render(InputPhone, { id: 'input', label: 'input', required: true });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows phone input - disabled', () => {
-    const { getByLabelText } = render(InputPhone, { id: 'input', label: 'input', disabled: true });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows phone input - autofocus', () => {
-    const { getByLabelText } = render(InputPhone, { id: 'input', label: 'input', autofocus: true });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows phone input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputPhone, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows phone input - hide label', () => {
-    render(InputPhone, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows phone input - autocomplete', () => {
-    const { getByLabelText } = render(InputPhone, {
-        id: 'input',
-        label: 'input',
-        autocomplete: true
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on');
-});
-
-test('shows phone input - maxlength', () => {
-    const { getByLabelText } = render(InputPhone, {
-        id: 'input',
-        label: 'input',
-        maxlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputPhone, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
diff --git a/tests/unit/elements/inputProjectId.test.ts b/tests/unit/elements/inputProjectId.test.ts
deleted file mode 100644
index 8887ea642..000000000
--- a/tests/unit/elements/inputProjectId.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputProjectId } from '../../../src/lib/elements/forms';
-
-const validStrings = ['validstring', 'valid-string', 'validstring123', 'valid-'];
-
-const invalidStrings = ['-invalid', 'Valid', '_invalid', 'Valid123', 'valid.string'];
-
-test('shows id input', () => {
-    const { getByPlaceholderText } = render(InputProjectId);
-    const input = getByPlaceholderText('Enter ID');
-
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
-});
-
-test('state', async () => {
-    const { component, getByPlaceholderText } = render(InputProjectId, { value: '' });
-    const input = getByPlaceholderText('Enter ID');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
-
-validStrings.forEach((validString) => {
-    test(`validates ${validString} as valid`, () => {
-        const { getByPlaceholderText } = render(InputProjectId, { value: validString });
-        const input = getByPlaceholderText('Enter ID') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(true);
-    });
-});
-invalidStrings.forEach((invalidString) => {
-    test(`validates ${invalidString} as invalid`, () => {
-        const { getByPlaceholderText } = render(InputProjectId, { value: invalidString });
-        const input = getByPlaceholderText('Enter ID') as HTMLInputElement;
-        expect(input.checkValidity()).toBe(false);
-    });
-});
diff --git a/tests/unit/elements/inputRadio.test.ts b/tests/unit/elements/inputRadio.test.ts
deleted file mode 100644
index b9de54a33..000000000
--- a/tests/unit/elements/inputRadio.test.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { afterEach, expect, test } from 'vitest';
-import { render, fireEvent, cleanup } from '@testing-library/svelte';
-import { InputRadio } from '../../../src/lib/elements/forms';
-import RadioGroup from '../../../src/lib/mock/inputRadio.test.svelte';
-
-const data = {
-    id: 'radio',
-    label: 'radio',
-    group: 'radio',
-    value: 'radio',
-    name: 'radio'
-};
-
-afterEach(() => cleanup());
-
-test('shows label', () => {
-    const { getByText } = render(InputRadio, { ...data });
-
-    expect(getByText('radio')).toBeInTheDocument();
-});
-
-test('shows boolean input - required', () => {
-    const { getByRole } = render(InputRadio, { ...data, required: true });
-
-    expect(getByRole('radio')).toBeRequired();
-});
-
-test('shows boolean input - disabled', () => {
-    const { getByRole } = render(InputRadio, { ...data, disabled: true });
-
-    expect(getByRole('radio')).toBeDisabled();
-});
-
-test('state', async () => {
-    const { getByLabelText } = render(RadioGroup);
-
-    const one = getByLabelText('one');
-    const two = getByLabelText('two');
-    const three = getByLabelText('three');
-
-    await fireEvent.click(one);
-    expect(one).toBeChecked();
-    expect(two).not.toBeChecked();
-    expect(three).not.toBeChecked();
-
-    await fireEvent.click(two);
-    expect(one).not.toBeChecked();
-    expect(two).toBeChecked();
-    expect(three).not.toBeChecked();
-
-    await fireEvent.click(three);
-    expect(one).not.toBeChecked();
-    expect(two).not.toBeChecked();
-    expect(three).toBeChecked();
-});
diff --git a/tests/unit/elements/inputSearch.test.ts b/tests/unit/elements/inputSearch.test.ts
deleted file mode 100644
index cf257721f..000000000
--- a/tests/unit/elements/inputSearch.test.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputSearch } from '../../../src/lib/elements/forms';
-
-test('shows search input', () => {
-    const { getByPlaceholderText } = render(InputSearch, { placeholder: 'search' });
-
-    expect(getByPlaceholderText('search')).toBeInTheDocument();
-    expect(getByPlaceholderText('search')).toHaveAttribute('type', 'search');
-});
-
-test('shows input search - required', () => {
-    const { getByPlaceholderText } = render(InputSearch, { placeholder: 'search', required: true });
-
-    expect(getByPlaceholderText('search')).toBeRequired();
-});
-
-test('shows input search - disabled', () => {
-    const { getByPlaceholderText } = render(InputSearch, { placeholder: 'search', disabled: true });
-
-    expect(getByPlaceholderText('search')).toBeDisabled();
-});
-
-test('shows input search - autofocus', () => {
-    const { getByPlaceholderText } = render(InputSearch, {
-        placeholder: 'search',
-        autofocus: true
-    });
-
-    expect(getByPlaceholderText('search')).toHaveFocus();
-});
-
-test('shows input search - placeholder', () => {
-    const { getByPlaceholderText } = render(InputSearch, {
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('state change after debounce', async () => {
-    const debounce = 250;
-    const { component, getByPlaceholderText } = render(InputSearch, {
-        placeholder: 'search',
-        value: '',
-        debounce
-    });
-    const input = getByPlaceholderText('search');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).not.toEqual('lorem');
-    setTimeout(() => {
-        expect(component.value).toEqual('lorem');
-    }, debounce);
-});
diff --git a/tests/unit/elements/inputSelect.test.ts b/tests/unit/elements/inputSelect.test.ts
deleted file mode 100644
index 278989945..000000000
--- a/tests/unit/elements/inputSelect.test.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputSelect } from '../../../src/lib/elements/forms';
-
-const options = [
-    { value: '', label: 'None' },
-    { value: '1', label: 'One' },
-    { value: '2', label: 'Two' },
-    { value: '3', label: 'Three' }
-];
-
-test('shows select input', () => {
-    const { getByText, getByLabelText } = render(InputSelect, {
-        id: 'select',
-        label: 'select',
-        value: '',
-        options
-    });
-    const select = getByLabelText('select');
-
-    expect(getByText('select')).toBeInTheDocument();
-    expect(select).toBeInTheDocument();
-});
-
-test('shows options', () => {
-    const { getByText } = render(InputSelect, {
-        id: 'select',
-        label: 'select',
-        value: '',
-        options
-    });
-
-    options.forEach((option) => {
-        expect(getByText(option.label)).toBeInTheDocument();
-    });
-});
-
-test('shows placeholder', () => {
-    const { getByText } = render(InputSelect, {
-        id: 'select',
-        label: 'select',
-        value: '',
-        placeholder: 'placeholder',
-        options
-    });
-
-    expect(getByText('placeholder')).toBeInTheDocument();
-});
-
-test('shows select input - required', () => {
-    const { getByLabelText } = render(InputSelect, {
-        id: 'select',
-        label: 'select',
-        value: '',
-        required: true,
-        options
-    });
-
-    expect(getByLabelText('select')).toBeRequired();
-});
-
-test('shows select input - disabled', () => {
-    const { getByLabelText } = render(InputSelect, {
-        id: 'select',
-        label: 'select',
-        value: '',
-        disabled: true,
-        options
-    });
-
-    expect(getByLabelText('select')).toBeDisabled();
-});
-
-test('shows select input - hide label', () => {
-    render(InputSelect, {
-        id: 'select',
-        value: '',
-        label: 'label',
-        showLabel: false,
-        options
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputSelect, {
-        id: 'select',
-        label: 'select',
-        value: '',
-        options
-    });
-    const select = getByLabelText('select');
-
-    expect(component.value).toEqual('');
-
-    await userEvent.selectOptions(select, '1');
-    expect(component.value).toEqual(options[1].value);
-
-    await userEvent.selectOptions(select, '2');
-    expect(component.value).toEqual(options[2].value);
-});
diff --git a/tests/unit/elements/inputSwitch.test.ts b/tests/unit/elements/inputSwitch.test.ts
deleted file mode 100644
index a540935fb..000000000
--- a/tests/unit/elements/inputSwitch.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { expect, test } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { InputSwitch } from '../../../src/lib/elements/forms';
-
-test('shows boolean input', () => {
-    const { getByText, getByRole } = render(InputSwitch, { id: 'input', label: 'Bool' });
-    const checkbox = getByRole('switch');
-
-    expect(getByText('Bool')).toBeInTheDocument();
-    expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('type', 'checkbox');
-});
-
-test('shows boolean input - disabled', () => {
-    const { getByRole } = render(InputSwitch, { id: 'input', label: 'Bool', disabled: true });
-
-    expect(getByRole('switch')).toBeDisabled();
-});
-
-test('state', async () => {
-    const { getByRole, component } = render(InputSwitch, { id: 'input', label: 'Bool' });
-    const checkbox = getByRole('switch');
-
-    expect(checkbox).not.toBeChecked();
-    expect(component.value).toStrictEqual(false);
-
-    await fireEvent.click(checkbox);
-    expect(checkbox).toBeChecked();
-    expect(component.value).toStrictEqual(true);
-
-    await fireEvent.click(checkbox);
-    expect(checkbox).not.toBeChecked();
-    expect(component.value).toStrictEqual(false);
-
-    component.value = true;
-    expect(checkbox).toBeChecked();
-    expect(component.value).toStrictEqual(true);
-
-    component.value = false;
-    expect(checkbox).not.toBeChecked();
-    expect(component.value).toStrictEqual(false);
-});
diff --git a/tests/unit/elements/inputTags.test.ts b/tests/unit/elements/inputTags.test.ts
deleted file mode 100644
index 541135c35..000000000
--- a/tests/unit/elements/inputTags.test.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { expect, test } from 'vitest';
-import userEvent from '@testing-library/user-event';
-import { render, fireEvent } from '@testing-library/svelte';
-import { InputTags } from '../../../src/lib/elements/forms';
-
-test('shows label', () => {
-    const { getByText } = render(InputTags, { id: 'input', label: 'Tags' });
-
-    expect(getByText('Tags')).toBeInTheDocument();
-});
-
-test('shows input - autofocus', () => {
-    const { getByLabelText } = render(InputTags, { id: 'input', label: 'Tags', autofocus: true });
-
-    expect(getByLabelText('Tags')).toHaveFocus();
-});
-
-test('shows input - hide label', () => {
-    render(InputTags, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows tags', () => {
-    const { getByText } = render(InputTags, {
-        id: 'input',
-        label: 'Tags',
-        tags: ['first', 'second']
-    });
-
-    expect(getByText('first')).toBeInTheDocument();
-    expect(getByText('second')).toBeInTheDocument();
-});
-
-test('adds and removes tags by input', async () => {
-    const { component, getByLabelText } = render(InputTags, { id: 'input', label: 'Tags' });
-    const input = getByLabelText('Tags');
-
-    // Add tag by enter
-    await userEvent.type(input, 'first{enter}');
-    expect(component.tags).toHaveLength(1);
-    expect(component.tags).toContain('first');
-
-    // Add tag by space
-    await userEvent.type(input, 'second ');
-    expect(component.tags).toHaveLength(2);
-    expect(component.tags).toContain('second');
-
-    // Remove tag by backspace
-    await userEvent.type(input, '{backspace}');
-    expect(component.tags).toContain('first');
-    expect(component.tags).not.toContain('second');
-    expect(component.tags).toHaveLength(1);
-
-    // Remove tag by delete
-    await userEvent.type(input, '{delete}');
-    expect(component.tags).not.toContain('first');
-    expect(component.tags).toHaveLength(0);
-});
-
-test('removes tag on click', async () => {
-    const { component, getByText, queryByText } = render(InputTags, {
-        id: 'input',
-        label: 'Tags',
-        tags: ['first', 'second']
-    });
-
-    expect(component.tags).toHaveLength(2);
-    expect(component.tags).toContain('first');
-    expect(component.tags).toContain('second');
-    const first = getByText('first').nextElementSibling;
-
-    await fireEvent.click(first);
-    expect(component.tags).toHaveLength(1);
-    expect(component.tags).toContain('second');
-    expect(component.tags).not.toContain('first');
-    expect(queryByText('first')).not.toBeInTheDocument();
-
-    const second = getByText('second').nextElementSibling;
-    await fireEvent.click(second);
-    expect(component.tags).toHaveLength(0);
-    expect(component.tags).not.toContain('second');
-    expect(component.tags).not.toContain('first');
-    expect(queryByText('second')).not.toBeInTheDocument();
-});
diff --git a/tests/unit/elements/inputText.test.ts b/tests/unit/elements/inputText.test.ts
deleted file mode 100644
index 2c2ef2c6b..000000000
--- a/tests/unit/elements/inputText.test.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputText } from '../../../src/lib/elements/forms';
-import { tick } from 'svelte';
-
-test('shows text input', () => {
-    const { getByText, getByLabelText } = render(InputText, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
-});
-
-test('shows text input - required', () => {
-    const { getByLabelText } = render(InputText, { id: 'input', label: 'input', required: true });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows text input - disabled', () => {
-    const { getByLabelText } = render(InputText, { id: 'input', label: 'input', disabled: true });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows text input - autofocus', async () => {
-    const { getByLabelText } = render(InputText, { id: 'input', label: 'input', autofocus: true });
-    await tick();
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows text input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputText, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows text input - hide label', () => {
-    render(InputText, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows text input - autocomplete', () => {
-    const { getByLabelText } = render(InputText, {
-        id: 'input',
-        label: 'input',
-        autocomplete: true
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on');
-});
-
-test('shows text input - maxlength', () => {
-    const { getByLabelText } = render(InputText, {
-        id: 'input',
-        label: 'input',
-        maxlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
-});
-
-test('state', async () => {
-    const { component, container } = render(InputText, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-
-    const input = container.querySelector('input');
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
diff --git a/tests/unit/elements/inputTextarea.test.ts b/tests/unit/elements/inputTextarea.test.ts
deleted file mode 100644
index 1344e06f1..000000000
--- a/tests/unit/elements/inputTextarea.test.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputTextarea } from '../../../src/lib/elements/forms';
-
-test('shows textarea', () => {
-    const { getByText, getByLabelText } = render(InputTextarea, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-});
-
-test('shows textarea - required', () => {
-    const { getByLabelText } = render(InputTextarea, {
-        id: 'input',
-        label: 'input',
-        required: true
-    });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows textarea - disabled', () => {
-    const { getByLabelText } = render(InputTextarea, {
-        id: 'input',
-        label: 'input',
-        disabled: true
-    });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows textarea - autofocus', () => {
-    const { getByLabelText } = render(InputTextarea, {
-        id: 'input',
-        label: 'input',
-        autofocus: true
-    });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows textarea - placeholder', () => {
-    const { getByPlaceholderText } = render(InputTextarea, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows textarea - hide label', () => {
-    render(InputTextarea, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows textarea - maxlength', () => {
-    const { getByLabelText } = render(InputTextarea, {
-        id: 'input',
-        label: 'input',
-        maxlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputTextarea, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
diff --git a/tests/unit/elements/inputURL.test.ts b/tests/unit/elements/inputURL.test.ts
deleted file mode 100644
index 1291d9e0f..000000000
--- a/tests/unit/elements/inputURL.test.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { InputURL } from '../../../src/lib/elements/forms';
-
-test('shows URL input', () => {
-    const { getByText, getByLabelText } = render(InputURL, { id: 'input', label: 'input' });
-    const input = getByLabelText('input');
-
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'url');
-});
-
-test('shows URL input - required', () => {
-    const { getByLabelText } = render(InputURL, { id: 'input', label: 'input', required: true });
-
-    expect(getByLabelText('input')).toBeRequired();
-});
-
-test('shows URL input - disabled', () => {
-    const { getByLabelText } = render(InputURL, { id: 'input', label: 'input', disabled: true });
-
-    expect(getByLabelText('input')).toBeDisabled();
-});
-
-test('shows URL input - autofocus', () => {
-    const { getByLabelText } = render(InputURL, { id: 'input', label: 'input', autofocus: true });
-
-    expect(getByLabelText('input')).toHaveFocus();
-});
-
-test('shows URL input - placeholder', () => {
-    const { getByPlaceholderText } = render(InputURL, {
-        id: 'input',
-        label: 'input',
-        placeholder: 'find me'
-    });
-
-    expect(getByPlaceholderText('find me')).toBeInTheDocument();
-});
-
-test('shows URL input - hide label', () => {
-    render(InputURL, {
-        id: 'input',
-        label: 'label',
-        showLabel: false
-    });
-
-    const label = document.querySelector('label');
-    expect(label).toHaveClass('u-hide');
-});
-
-test('shows URL input - autocomplete', () => {
-    const { getByLabelText } = render(InputURL, {
-        id: 'input',
-        label: 'input',
-        autocomplete: true
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on');
-});
-
-test('shows URL input - maxlength', () => {
-    const { getByLabelText } = render(InputURL, {
-        id: 'input',
-        label: 'input',
-        maxlength: 2
-    });
-
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
-});
-
-test('state', async () => {
-    const { component, getByLabelText } = render(InputURL, {
-        id: 'input',
-        label: 'input',
-        value: ''
-    });
-    const input = getByLabelText('input');
-
-    expect(component.value).toEqual('');
-    await userEvent.type(input, 'lorem');
-    expect(component.value).toEqual('lorem');
-});
diff --git a/tests/unit/helpers/project.test.ts b/tests/unit/helpers/project.test.ts
deleted file mode 100644
index 91bbeea92..000000000
--- a/tests/unit/helpers/project.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { getProjectId } from '$lib/helpers/project';
-import { expect, test, vi } from 'vitest';
-
-test('getProjectId', () => {
-    const tests: Array<{
-        pathname: string;
-        expected: string | null;
-    }> = [
-        // legacy
-        {
-            pathname: '/console/project-6374e9031588b25d1841/databases',
-            expected: '6374e9031588b25d1841'
-        },
-        {
-            pathname: '/console/project-/databases',
-            expected: null
-        },
-        {
-            pathname: '/console/project-project-project-abc/databases',
-            expected: 'project-project-abc'
-        },
-        {
-            pathname: '/console/project-abc/databases',
-            expected: 'abc'
-        },
-        {
-            pathname: '/console/project-abc/databases/project-123',
-            expected: 'abc'
-        },
-        {
-            pathname: '/console/project-abc/databases/project-123/project-456',
-            expected: 'abc'
-        },
-
-        {
-            pathname: '/console',
-            expected: null
-        },
-
-        // multi-region
-        {
-            pathname: '/console/project-fra-6374e9031588b25d1841/databases',
-            expected: '6374e9031588b25d1841'
-        },
-        {
-            pathname: '/console/project-/databases',
-            expected: null
-        },
-        {
-            pathname: '/console/project-nyc-project-project-abc/databases',
-            expected: 'project-project-abc'
-        },
-        {
-            pathname: '/console/project-fra-abc/databases',
-            expected: 'abc'
-        },
-        {
-            pathname: '/console/project-syd-abc/databases/project-123',
-            expected: 'abc'
-        }
-    ];
-
-    for (const { pathname, expected } of tests) {
-        vi.stubGlobal('location', {
-            ...window.location,
-            pathname
-        });
-        expect(getProjectId()).toBe(expected);
-    }
-});
diff --git a/tests/unit/layout/breadcrumbs.test.ts b/tests/unit/layout/breadcrumbs.test.ts
deleted file mode 100644
index 8e0f54db7..000000000
--- a/tests/unit/layout/breadcrumbs.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import BreadcrumbsComponent from '../../../src/lib/layout/breadcrumbs.svelte';
-
-test('shows relevant breadcrumbs', async () => {
-    const { queryByText } = render(BreadcrumbsComponent, {
-        breadcrumbs: [
-            {
-                href: '/lorem',
-                title: 'First'
-            },
-            {
-                href: '/ipsum',
-                title: 'Second'
-            }
-        ]
-    });
-
-    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', '/ipsum');
-});
diff --git a/tests/unit/layout/wizard.test.ts b/tests/unit/layout/wizard.test.ts
deleted file mode 100644
index f6199855c..000000000
--- a/tests/unit/layout/wizard.test.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { sleep } from '$lib/helpers/promises';
-import { wizard } from '../../../src/lib/stores/wizard';
-import { tick } from 'svelte';
-import userEvent from '@testing-library/user-event';
-import WizardComponent from '../../../src/lib/mock/wizard.test.svelte';
-import WizardContainer from '../../../src/lib/mock/wizard.container.test.svelte';
-
-test('shows wizard and hides it', async () => {
-    const { queryByText } = render(WizardContainer);
-
-    /**
-     * Wizard is hidden before started.
-     */
-    expect(queryByText('wizard-title')).not.toBeInTheDocument();
-    expect(queryByText('step-1')).not.toBeInTheDocument();
-    expect(queryByText('sub-title-1')).not.toBeInTheDocument();
-    expect(queryByText('step-2')).not.toBeInTheDocument();
-    expect(queryByText('sub-title-2')).not.toBeInTheDocument();
-
-    wizard.start(WizardComponent);
-    await tick();
-
-    /**
-     * First step is shown, second is hidden.
-     */
-    expect(queryByText('wizard-title')).toBeInTheDocument();
-    expect(queryByText('step-1')).toBeInTheDocument();
-    expect(queryByText('sub-title-1')).toBeInTheDocument();
-
-    expect(queryByText('step-2')).not.toBeInTheDocument();
-    expect(queryByText('sub-title-2')).not.toBeInTheDocument();
-
-    wizard.hide();
-    await tick();
-
-    /**
-     * Wizard is hidden.
-     */
-    expect(queryByText('wizard-title')).not.toBeInTheDocument();
-    expect(queryByText('step-1')).not.toBeInTheDocument();
-    expect(queryByText('sub-title-1')).not.toBeInTheDocument();
-    expect(queryByText('step-2')).not.toBeInTheDocument();
-    expect(queryByText('sub-title-2')).not.toBeInTheDocument();
-});
-
-test('shows next step with submit', async () => {
-    const { container, queryByText } = render(WizardContainer);
-
-    wizard.start(WizardComponent);
-    await tick();
-
-    const form = container.querySelector('form') as HTMLFormElement;
-    const step1 = queryByText('step-1');
-    const step1Required = container.querySelector('#step-1-required');
-    const step1Optional = container.querySelector('#step-1-optional');
-
-    expect(step1).toBeInTheDocument();
-    expect(step1Required).toBeInTheDocument();
-    expect(step1Optional).toBeInTheDocument();
-
-    form.dispatchEvent(new Event('submit'));
-    await sleep(100);
-
-    expect(step1).not.toBeInTheDocument();
-
-    const step2 = queryByText('step-2');
-    const step2First = container.querySelector('#step-2-first');
-    const step2Second = container.querySelector('#step-2-second');
-
-    expect(step2).toBeInTheDocument();
-    expect(step2First).toBeInTheDocument();
-    expect(step2Second).toBeInTheDocument();
-
-    form.dispatchEvent(new Event('submit'));
-    await tick();
-
-    expect(form).not.toBeInTheDocument();
-    expect(step1).not.toBeInTheDocument();
-    expect(step2).not.toBeInTheDocument();
-});
-
-test('intercepts submit', async () => {
-    const { container, queryByText } = render(WizardContainer);
-
-    wizard.start(WizardComponent);
-    await tick();
-
-    const form = container.querySelector('form') as HTMLFormElement;
-    const step1 = queryByText('step-1');
-    const step1Required = container.querySelector('#step-1-required');
-    const step1Optional = container.querySelector('#step-1-optional');
-
-    expect(step1).toBeInTheDocument();
-    expect(step1Required).toBeInTheDocument();
-    expect(step1Optional).toBeInTheDocument();
-
-    await userEvent.type(step1Required, 'fail');
-
-    form.dispatchEvent(new Event('submit'));
-    await sleep(100);
-
-    expect(step1).toBeInTheDocument();
-    expect(step1Required).toBeInTheDocument();
-    expect(step1Optional).toBeInTheDocument();
-
-    await userEvent.type(step1Required, 'works');
-    form.dispatchEvent(new Event('submit'));
-    await sleep(100);
-
-    expect(step1).not.toBeInTheDocument();
-
-    const step2 = queryByText('step-2');
-    const step2First = container.querySelector('#step-2-first');
-    const step2Second = container.querySelector('#step-2-second');
-
-    expect(step2).toBeInTheDocument();
-    expect(step2First).toBeInTheDocument();
-    expect(step2Second).toBeInTheDocument();
-
-    form.dispatchEvent(new Event('submit'));
-    await tick();
-
-    expect(form).not.toBeInTheDocument();
-    expect(step1).not.toBeInTheDocument();
-    expect(step2).not.toBeInTheDocument();
-});
diff --git a/tsconfig.json b/tsconfig.json
index 4e43cc9ef..900ee4e39 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,17 @@
 {
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
-        "lib": ["webworker", "DOM", "ESNext"],
-        "module": "ESNext",
-        "target": "ESNext",
-        "moduleResolution": "Node",
-        "noUncheckedIndexedAccess": true,
+        "allowJs": true,
+        "checkJs": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "strict": false,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
-        "esModuleInterop": true,
-        "resolveJsonModule": true
+        "noFallthroughCasesInSwitch": true,
+        "moduleResolution": "bundler"
     }
 }
diff --git a/vite.config.ts b/vite.config.ts
index b28699947..d0a9f9bf0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
-import { defineConfig } from 'vitest/config';
+import { defineConfig } from 'vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { sentrySvelteKit } from '@sentry/sveltekit';
+import { svelteTesting } from '@testing-library/svelte/vite';
 
-const config = defineConfig({
+export default defineConfig({
     plugins: [
         sentrySvelteKit({
             adapter: 'auto',
@@ -35,31 +36,30 @@ const config = defineConfig({
     },
     server: {
         port: 3000
-    }
-});
-
-const testConfig = defineConfig({
-    resolve: {
-        // hotfix for https://github.com/vitest-dev/vitest/issues/2834
-        conditions: ['browser']
     },
     test: {
-        include: ['tests/unit/**/*.test.ts'],
-        environment: 'jsdom',
-        globals: true,
-        pool: 'threads',
-        setupFiles: ['./tests/unit/setup.ts'],
-        server: {
-            deps: {
-                inline: ['@analytics/type-utils']
+        workspace: [
+            {
+                extends: './vite.config.ts',
+                plugins: [svelteTesting()],
+                test: {
+                    name: 'client',
+                    environment: 'jsdom',
+                    clearMocks: true,
+                    include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+                    exclude: ['src/lib/server/**'],
+                    setupFiles: ['./vitest-setup-client.ts']
+                }
+            },
+            {
+                extends: './vite.config.ts',
+                test: {
+                    name: 'server',
+                    environment: 'node',
+                    include: ['src/**/*.{test,spec}.{js,ts}'],
+                    exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
+                }
             }
-        }
+        ]
     }
 });
-
-export default process.env.VITEST
-    ? {
-          ...config,
-          ...testConfig
-      }
-    : config;
diff --git a/tests/unit/setup.ts b/vitest-setup-client.ts
similarity index 60%
rename from tests/unit/setup.ts
rename to vitest-setup-client.ts
index 88b56d6cd..88edcb458 100644
--- a/tests/unit/setup.ts
+++ b/vitest-setup-client.ts
@@ -1,6 +1,20 @@
 import '@testing-library/jest-dom/vitest';
 import { beforeAll, vi } from 'vitest';
 
+// required for svelte5 + jsdom as jsdom does not support matchMedia
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    enumerable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn()
+    }))
+});
+
 beforeAll(() => {
     vi.mock('$app/environment', () => ({
         dev: true,